Skip to content

Commit 68e3a97

Browse files
AllicolyerAllicolyer
committed
move queries to separate folder, create tutorialSidebar component, add responsiveness to tutorial layout, add new queries to tutorial layout
1 parent b79a6d0 commit 68e3a97

File tree

15 files changed

+179
-86
lines changed

15 files changed

+179
-86
lines changed

‎packages/gatsby-theme/codegen.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ schema:
33
- http://localhost:8000/___graphql
44
documents:
55
- ./src/*/*.{ts,tsx}
6+
- ./src/components/queries/*.{ts,tsx}
67
- ../../../node_modules/gatsby-*/**/*.js
78
generates:
89
./src/graphqlTypes.ts:

‎packages/gatsby-theme/gatsby-node.js

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
// const componentWithMDXScope = require('gatsby-mdx/component-with-mdx-scope');
22
const {
33
getTutorialSlug,
4-
getTutorialOverviewSlug
5-
} = require("./src/utils/getTutorialSlug.js");
4+
getTutorialOverviewSlug,
5+
} = require('./src/utils/getTutorialSlug.js');
66

77
exports.createPages = async ({ graphql, actions }) => {
88
const { createPage } = actions;
99
const TutorialLayout = require.resolve(
10-
`./src/components/templates/Tutorial.tsx`
10+
`./src/components/templates/Tutorial.tsx`,
1111
);
1212

1313
const { data } = await graphql(`
@@ -33,7 +33,7 @@ exports.createPages = async ({ graphql, actions }) => {
3333
const tutorialPath = getTutorialSlug(node.fileAbsolutePath);
3434
const overviewPageSlug = getTutorialOverviewSlug(node.fileAbsolutePath);
3535
const overviewTemplate = require.resolve(
36-
"./src/components/templates/TutorialOverview.tsx"
36+
'./src/components/templates/TutorialOverview.tsx',
3737
);
3838
//TODO: find a better way to ID posts & overviews Also a better way to query for them
3939
if (node.frontmatter.tutorialTitle) {
@@ -42,16 +42,17 @@ exports.createPages = async ({ graphql, actions }) => {
4242
component: overviewTemplate,
4343
context: {
4444
id: node.id,
45-
folderRegex: `/(${overviewPageSlug})/`
46-
}
45+
folderRegex: `/(${overviewPageSlug})/`,
46+
},
4747
});
4848
}
4949
createPage({
5050
path: tutorialPath,
5151
component: TutorialLayout, // node.fileAbsolutePath,
5252
context: {
53-
id: node.id
54-
}
53+
id: node.id,
54+
folderRegex: `/(${overviewPageSlug})/`,
55+
},
5556
});
5657
});
5758
};

‎packages/gatsby-theme/src/components/Account.tsx

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,22 @@
11
import React from 'react';
22
import { Query } from 'react-apollo';
3-
import { ViewerQuery } from '../graphqlTypes';
4-
import gql from 'graphql-tag';
3+
import { CurrentUserQuery } from '../graphqlTypes';
54
import { Text, Image, Flex } from './shared/base';
65
import { Link } from 'gatsby';
76
import { CenteredLoader } from './Loader';
87
import CustomButton from './CustomButton';
8+
import { optionalChaining } from '../utils/helpers';
99
import { loginUser } from '../utils/auth';
10+
import { CURRENT_USER } from './queries/userQueries';
1011

1112
const Account = () => {
1213
return (
13-
<Query<ViewerQuery>
14-
query={gql`
15-
query Viewer {
16-
viewer {
17-
id
18-
user {
19-
id
20-
avatarUrl
21-
name
22-
}
23-
}
24-
}
25-
`}
26-
>
14+
<Query<CurrentUserQuery> query={CURRENT_USER}>
2715
{({ data, error, loading }) => {
2816
if (error || loading) {
2917
return <CenteredLoader />;
3018
}
31-
if (data.viewer && data.viewer.user) {
19+
if (optionalChaining(() => data.viewer.user)) {
3220
return <Profile user={data.viewer.user} />;
3321
}
3422
return (

‎packages/gatsby-theme/src/components/AuthorList.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ type Author = {
55
name: string;
66
job: string;
77
picture: string;
8+
id: string;
89
};
910

1011
type AuthorListProps = {
@@ -17,7 +18,9 @@ const AuthorList: React.FunctionComponent<AuthorListProps> = ({ authors }) => {
1718
<Box p={3} bg="#e5e5e5">
1819
<Text fontSize={[1]}>WRITTEN BY</Text>
1920
{authors.map(author => (
20-
<Author author={author} />
21+
<div key={author.id}>
22+
<Author author={author} />
23+
</div>
2124
))}
2225
</Box>
2326
</div>

‎packages/gatsby-theme/src/components/TutorialSidebar.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import { Card, Image, Heading, Flex, Text } from './shared/base';
3+
import { authors } from '../utils/sampleData';
4+
import AuthorList from './AuthorList';
5+
import CustomButton from './CustomButton';
6+
7+
export const Sidebar = ({ tutorialTitle, chapters }) => {
8+
return (
9+
<div>
10+
<Card p={3} m={2}>
11+
<Flex flexDirection="column">
12+
<Heading> {tutorialTitle} </Heading>
13+
</Flex>
14+
</Card>
15+
<ul>
16+
{chapters.map(chapter => (
17+
<li key={chapter}>{chapter}</li>
18+
))}
19+
</ul>
20+
<AuthorList authors={authors} />
21+
<CustomButton type="spectrum"> Get help on Spectrum </CustomButton>
22+
</div>
23+
);
24+
};
25+
26+
export const TabletSidebar = ({ tutorialTitle, chapters }) => {
27+
console.log(tutorialTitle);
28+
console.log(chapters);
29+
return (
30+
<div>
31+
<Image
32+
width={0.5}
33+
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/800px-Hamburger_icon.svg.png"
34+
/>
35+
</div>
36+
);
37+
};

‎packages/gatsby-theme/src/components/code.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ const CodeRenderer: React.FunctionComponent<CodeRendererProps> = ({
5252
language,
5353
...props
5454
}) => {
55-
console.log(codeString, language);
5655
if (props['react-live']) {
5756
return (
5857
<LiveProvider code={codeString} noInline={true}>

‎packages/gatsby-theme/src/components/queries/userQueries.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import gql from 'graphql-tag';
2+
3+
export const CURRENT_USER = gql`
4+
query currentUser {
5+
viewer {
6+
id
7+
user {
8+
id
9+
name
10+
avatarUrl
11+
githubHandle
12+
}
13+
}
14+
}
15+
`;

‎packages/gatsby-theme/src/components/templates/Tutorial.tsx

Lines changed: 56 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@ import { RouterProps } from '@reach/router';
33
import Layout from '../layout';
44
import { MDXRenderer } from 'gatsby-mdx';
55
import { graphql } from 'gatsby';
6+
import { Sidebar, TabletSidebar } from '../TutorialSidebar';
67
import { TutorialMdxQuery } from 'src/graphqlTypes';
8+
import { HideOnTablet, ShowOnTablet } from '../../utils/responsive';
9+
import { Flex, Box } from '../shared/base';
710

811
type TutorialLayoutProps = { data: TutorialMdxQuery } & RouterProps;
912

@@ -15,20 +18,46 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
1518
return null;
1619
}
1720
const { pageTitle } = data!.mdx!.frontmatter!;
21+
const tutorialTitle = data!.tutorialTitle!.frontmatter!.tutorialTitle!;
22+
const chapters = data!.pageTitles!.edges!.map(
23+
a => a.node!.frontmatter!.pageTitle!,
24+
);
1825
const { location } = props;
1926

2027
return (
2128
<Layout location={location}>
22-
<h1>{pageTitle}</h1>
23-
<MDXRenderer>{data!.mdx!.code!.body}</MDXRenderer>
29+
<ShowOnTablet>
30+
<Flex alignItems="center">
31+
<Box width={7 / 8} m={2}>
32+
<h1>{pageTitle}</h1>
33+
</Box>
34+
<Box width={1 / 8} m={2}>
35+
<TabletSidebar chapters={chapters} tutorialTitle={tutorialTitle} />
36+
</Box>
37+
</Flex>
38+
</ShowOnTablet>
39+
<HideOnTablet>
40+
<Flex>
41+
<Box width={1 / 4} m={2}>
42+
<Sidebar chapters={chapters} tutorialTitle={tutorialTitle} />
43+
</Box>
44+
<Box width={3 / 4} m={2}>
45+
<h1>{pageTitle}</h1>
46+
<MDXRenderer>{data!.mdx!.code!.body}</MDXRenderer>
47+
</Box>
48+
</Flex>
49+
</HideOnTablet>
50+
<ShowOnTablet>
51+
<MDXRenderer>{data!.mdx!.code!.body}</MDXRenderer>
52+
</ShowOnTablet>
2453
</Layout>
2554
);
2655
};
2756

2857
export default TutorialLayout;
2958

3059
export const pageQuery = graphql`
31-
query TutorialMDX($id: String!) {
60+
query TutorialMDX($id: String!, $folderRegex: String) {
3261
mdx(id: { eq: $id }) {
3362
id
3463
code {
@@ -39,5 +68,29 @@ export const pageQuery = graphql`
3968
pageTitle
4069
}
4170
}
71+
pageTitles: allMdx(
72+
sort: { fields: fileAbsolutePath }
73+
filter: {
74+
frontmatter: { pageTitle: { ne: null } }
75+
fileAbsolutePath: { regex: $folderRegex }
76+
}
77+
) {
78+
edges {
79+
node {
80+
id
81+
frontmatter {
82+
pageTitle
83+
}
84+
}
85+
}
86+
}
87+
tutorialTitle: mdx(
88+
frontmatter: { tutorialTitle: { ne: null } }
89+
fileAbsolutePath: { regex: $folderRegex }
90+
) {
91+
frontmatter {
92+
tutorialTitle
93+
}
94+
}
4295
}
4396
`;

‎packages/gatsby-theme/src/components/templates/TutorialOverview.tsx

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { Heading, Flex, Box } from '../shared/base';
88
import ProgressBar from '../overview/ProgressBar';
99
import CustomButton from '../CustomButton';
1010
import { Content } from '../shared/styledHelpers';
11+
import { authors } from '../../utils/sampleData';
12+
import { graphql } from 'gatsby';
1113

1214
interface PageTemplateProps {
1315
data: TutorialOverviewQuery;
@@ -92,17 +94,4 @@ export const query = graphql`
9294
}
9395
`;
9496

95-
let authors = [
96-
{
97-
name: 'Kelsey Yim',
98-
job: 'Software Developer',
99-
picture: 'https://www.w3schools.com/howto/img_avatar2.png',
100-
},
101-
{
102-
name: 'Alli Colyer',
103-
job: 'Party Planner',
104-
picture: 'https://www.w3schools.com/howto/img_avatar2.png',
105-
},
106-
];
107-
10897
export default PageTemplate;

‎packages/gatsby-theme/src/graphqlTypes.ts

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export type Directory = Node & {
6666
readonly gid: Maybe<Scalars['Int']>;
6767
readonly rdev: Maybe<Scalars['Int']>;
6868
readonly blksize: Maybe<Scalars['Int']>;
69-
readonly ino: Maybe<Scalars['Int']>;
69+
readonly ino: Maybe<Scalars['Float']>;
7070
readonly blocks: Maybe<Scalars['Int']>;
7171
readonly atimeMs: Maybe<Scalars['Float']>;
7272
readonly mtimeMs: Maybe<Scalars['Float']>;
@@ -309,7 +309,7 @@ export type DirectoryFilterInput = {
309309
readonly gid: Maybe<IntQueryOperatorInput>;
310310
readonly rdev: Maybe<IntQueryOperatorInput>;
311311
readonly blksize: Maybe<IntQueryOperatorInput>;
312-
readonly ino: Maybe<IntQueryOperatorInput>;
312+
readonly ino: Maybe<FloatQueryOperatorInput>;
313313
readonly blocks: Maybe<IntQueryOperatorInput>;
314314
readonly atimeMs: Maybe<FloatQueryOperatorInput>;
315315
readonly mtimeMs: Maybe<FloatQueryOperatorInput>;
@@ -369,7 +369,7 @@ export type File = Node & {
369369
readonly gid: Maybe<Scalars['Int']>;
370370
readonly rdev: Maybe<Scalars['Int']>;
371371
readonly blksize: Maybe<Scalars['Int']>;
372-
readonly ino: Maybe<Scalars['Int']>;
372+
readonly ino: Maybe<Scalars['Float']>;
373373
readonly blocks: Maybe<Scalars['Int']>;
374374
readonly atimeMs: Maybe<Scalars['Float']>;
375375
readonly mtimeMs: Maybe<Scalars['Float']>;
@@ -617,7 +617,7 @@ export type FileFilterInput = {
617617
readonly gid: Maybe<IntQueryOperatorInput>;
618618
readonly rdev: Maybe<IntQueryOperatorInput>;
619619
readonly blksize: Maybe<IntQueryOperatorInput>;
620-
readonly ino: Maybe<IntQueryOperatorInput>;
620+
readonly ino: Maybe<FloatQueryOperatorInput>;
621621
readonly blocks: Maybe<IntQueryOperatorInput>;
622622
readonly atimeMs: Maybe<FloatQueryOperatorInput>;
623623
readonly mtimeMs: Maybe<FloatQueryOperatorInput>;
@@ -1616,7 +1616,7 @@ export type QueryFileArgs = {
16161616
gid: Maybe<IntQueryOperatorInput>;
16171617
rdev: Maybe<IntQueryOperatorInput>;
16181618
blksize: Maybe<IntQueryOperatorInput>;
1619-
ino: Maybe<IntQueryOperatorInput>;
1619+
ino: Maybe<FloatQueryOperatorInput>;
16201620
blocks: Maybe<IntQueryOperatorInput>;
16211621
atimeMs: Maybe<FloatQueryOperatorInput>;
16221622
mtimeMs: Maybe<FloatQueryOperatorInput>;
@@ -1732,7 +1732,7 @@ export type QueryDirectoryArgs = {
17321732
gid: Maybe<IntQueryOperatorInput>;
17331733
rdev: Maybe<IntQueryOperatorInput>;
17341734
blksize: Maybe<IntQueryOperatorInput>;
1735-
ino: Maybe<IntQueryOperatorInput>;
1735+
ino: Maybe<FloatQueryOperatorInput>;
17361736
blocks: Maybe<IntQueryOperatorInput>;
17371737
atimeMs: Maybe<FloatQueryOperatorInput>;
17381738
mtimeMs: Maybe<FloatQueryOperatorInput>;
@@ -2753,3 +2753,13 @@ export type AuthenticateUserMutationVariables = {
27532753
export type AuthenticateUserMutation = {
27542754
readonly authenticate: Maybe<Pick<AuthenticateUserPayload, 'token'>>;
27552755
};
2756+
2757+
export type CurrentUserQueryVariables = {};
2758+
2759+
export type CurrentUserQuery = {
2760+
readonly viewer: Maybe<
2761+
Pick<Viewer, 'id'> & {
2762+
readonly user: Pick<User, 'id' | 'name' | 'avatarUrl' | 'githubHandle'>;
2763+
}
2764+
>;
2765+
};

0 commit comments

Comments
 (0)