Skip to content

Commit a15f827

Browse files
TrevHeathTrevHeath
authored
Merge pull request #3 from howtographql/setup-routing
Setup routing
2 parents 2fb72f8 + d65e295 commit a15f827

21 files changed

+3223
-2297
lines changed

‎oss

‎packages/gatsby-theme/codegen.yml

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
schema: http://localhost:8000/___graphql
2+
documents:
3+
- ./src/**/*.{ts,tsx}
4+
- ../../../node_modules/gatsby-*/**/*.js
5+
generates:
6+
./src/graphqlTypes.ts:
7+
plugins:
8+
- typescript
9+
- typescript-operations
10+
config:
11+
skipTypename: true
12+
immutableTypes: true
13+
avoidOptionals: true

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

+46-6
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,74 @@
11
// const componentWithMDXScope = require('gatsby-mdx/component-with-mdx-scope');
2-
const { getTutorialPath } = require("./src/utils/getTutorialPath.js");
3-
const path = require("path");
2+
const {
3+
getTutorialSlug,
4+
getTutorialOverviewSlug
5+
} = require("./src/utils/getTutorialSlug.js");
46

57
exports.createPages = async ({ graphql, actions }) => {
68
const { createPage } = actions;
7-
const postLayout = require.resolve(`./src/components/postLayout.tsx`);
9+
const TutorialLayout = require.resolve(
10+
`./src/components/templates/Tutorial.tsx`
11+
);
812

913
const { data } = await graphql(`
1014
{
1115
allMdx {
1216
edges {
1317
node {
18+
id
1419
fileAbsolutePath
1520
frontmatter {
21+
id
1622
path
1723
title
24+
tutorialTitle
1825
}
1926
}
2027
}
2128
}
2229
}
2330
`).catch(error => console.error(error));
31+
2432
data.allMdx.edges.forEach(({ node }) => {
25-
const tutorialPath = getTutorialPath(node.fileAbsolutePath);
33+
const tutorialPath = getTutorialSlug(node.fileAbsolutePath);
34+
const overviewPageSlug = getTutorialOverviewSlug(node.fileAbsolutePath);
35+
const overviewTemplate = require.resolve(
36+
"./src/components/templates/TutorialOverview.tsx"
37+
);
38+
//TODO: find a better way to ID posts & overviews Also a better way to query for them
39+
if (node.frontmatter.tutorialTitle) {
40+
return createPage({
41+
path: overviewPageSlug,
42+
component: overviewTemplate,
43+
context: {
44+
id: node.id,
45+
folderRegex: `/(${overviewPageSlug})/`
46+
}
47+
});
48+
}
2649
createPage({
2750
path: tutorialPath,
28-
component: postLayout, // node.fileAbsolutePath,
51+
component: TutorialLayout, // node.fileAbsolutePath,
2952
context: {
30-
pagePath: node.frontmatter.path
53+
id: node.id
3154
}
3255
});
3356
});
3457
};
58+
59+
// overviewpages = overviewpages
60+
// .filter(p => p !== overviewPageSlug)
61+
// .concat([overviewPageSlug]);
62+
// });
63+
64+
// //create tutorial overview pages
65+
// overviewpages.forEach(path => {
66+
// createPage({
67+
// path: path,
68+
// component: overviewTemplate,
69+
// context: {
70+
// pagePath: path,
71+
// folderRegex: `/(${path})/`
72+
// }
73+
// });
74+
// });

‎packages/gatsby-theme/package.json

+6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,13 @@
44
"description": "The content/gatsby theme for htg2",
55
"main": "index.js",
66
"license": "MIT",
7+
"scripts": {
8+
"generate": "graphql-codegen"
9+
},
710
"devDependencies": {
11+
"@graphql-codegen/cli": "^1.1.1",
12+
"@graphql-codegen/typescript": "^1.1.1",
13+
"@graphql-codegen/typescript-operations": "^1.1.1",
814
"@types/jest": "^24.0.11",
915
"@types/node": "^11.13.7",
1016
"@types/react-helmet": "^5.0.8",

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

+57-26
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,69 @@
1-
import React from 'react'
2-
import Highlight, { defaultProps } from 'prism-react-renderer'
3-
import DraculaTheme from 'prism-react-renderer/themes/dracula'
4-
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
5-
import Prism from 'prismjs/components/prism-core';
1+
import React from "react";
2+
import Highlight, { defaultProps, Language } from "prism-react-renderer";
3+
import DraculaTheme from "prism-react-renderer/themes/dracula";
4+
import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
5+
import Prism from "prismjs/components/prism-core";
66

7-
Prism.languages.graphql = { comment: /#.*/, string: { pattern: /"(?:\\.|[^\\"\r\n])*"/, greedy: !0 }, number: /(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i, "boolean": /\b(?:true|false)\b/, variable: /\$[a-z_]\w*/i, directive: { pattern: /@[a-z_]\w*/i, alias: "function" }, "attr-name": /[a-z_]\w*(?=\s*(?:\([^()]*\))?:)/i, keyword: [{ pattern: /(fragment\s+(?!on)[a-z_]\w*\s+|\.{3}\s*)on\b/, lookbehind: !0 }, /\b(?:query|fragment|mutation)\b/], operator: /!|=|\.{3}/, punctuation: /[!(){}\[\]:=,]/ };
7+
Prism.languages.graphql = {
8+
comment: /#.*/,
9+
string: { pattern: /"(?:\\.|[^\\"\r\n])*"/, greedy: !0 },
10+
number: /(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,
11+
boolean: /\b(?:true|false)\b/,
12+
variable: /\$[a-z_]\w*/i,
13+
directive: { pattern: /@[a-z_]\w*/i, alias: "function" },
14+
"attr-name": /[a-z_]\w*(?=\s*(?:\([^()]*\))?:)/i,
15+
keyword: [
16+
{ pattern: /(fragment\s+(?!on)[a-z_]\w*\s+|\.{3}\s*)on\b/, lookbehind: !0 },
17+
/\b(?:query|fragment|mutation)\b/
18+
],
19+
operator: /!|=|\.{3}/,
20+
punctuation: /[!(){}\[\]:=,]/
21+
};
822

9-
export const Code = (props) => {
10-
return <div style={{ position: "relative" }}>
11-
<CodeRenderer {...props} />
12-
<button
13-
style={{ position: "absolute", top: 10, right: 10 }}
14-
onClick={() => {
15-
// Copying code here!
16-
}}
17-
>
18-
Copy
19-
</button>
20-
</div>
21-
}
23+
type CodeProps = {
24+
"react-live": boolean;
25+
codeString: string;
26+
language: Language;
27+
};
2228

23-
const CodeRenderer = ({ codeString, language, ...props }) => {
24-
console.log(codeString, language);
25-
if (props['react-live']) {
29+
export const Code: React.FunctionComponent<CodeProps> = props => {
30+
return (
31+
<div style={{ position: "relative" }}>
32+
<CodeRenderer {...props} />
33+
<button
34+
style={{ position: "absolute", top: 10, right: 10 }}
35+
onClick={() => {
36+
// Copying code here!
37+
}}
38+
>
39+
Copy
40+
</button>
41+
</div>
42+
);
43+
};
44+
45+
const CodeRenderer: React.FunctionComponent<CodeProps> = ({
46+
codeString,
47+
language,
48+
...props
49+
}) => {
50+
if (props["react-live"]) {
2651
return (
2752
<LiveProvider code={codeString} noInline={true}>
2853
<LiveEditor />
2954
<LiveError />
3055
<LivePreview />
3156
</LiveProvider>
32-
)
57+
);
3358
} else {
3459
return (
35-
<Highlight {...defaultProps} theme={DraculaTheme} Prism={Prism} code={codeString} language={language}>
60+
<Highlight
61+
{...defaultProps}
62+
theme={DraculaTheme}
63+
Prism={Prism}
64+
code={codeString}
65+
language={language}
66+
>
3667
{({ className, style, tokens, getLineProps, getTokenProps }) => (
3768
<pre className={className} style={style}>
3869
{tokens.map((line, i) => (
@@ -45,6 +76,6 @@ const CodeRenderer = ({ codeString, language, ...props }) => {
4576
</pre>
4677
)}
4778
</Highlight>
48-
)
79+
);
4980
}
50-
}
81+
};

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

+28-28
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
import { graphql, useStaticQuery } from 'gatsby';
2-
import Img from 'gatsby-image';
3-
import * as React from 'react';
1+
// import { graphql, useStaticQuery } from "gatsby";
2+
// import Img from "gatsby-image";
3+
// import * as React from "react";
44

5-
/*
6-
* This component is built using `gatsby-image` to automatically serve optimized
7-
* images with lazy loading and reduced file sizes. The image is loaded using a
8-
* `StaticQuery`, which allows us to load the image from directly within this
9-
* component, rather than having to pass the image data down from pages.
10-
*
11-
* For more information, see the docs:
12-
* - `gatsby-image`: https://gatsby.app/gatsby-image
13-
* - `StaticQuery`: https://gatsby.app/staticquery
14-
*/
5+
// /*
6+
// * This component is built using `gatsby-image` to automatically serve optimized
7+
// * images with lazy loading and reduced file sizes. The image is loaded using a
8+
// * `StaticQuery`, which allows us to load the image from directly within this
9+
// * component, rather than having to pass the image data down from pages.
10+
// *
11+
// * For more information, see the docs:
12+
// * - `gatsby-image`: https://gatsby.app/gatsby-image
13+
// * - `StaticQuery`: https://gatsby.app/staticquery
14+
// */
1515

16-
const Image = () => {
17-
const { placeholderImage } = useStaticQuery(graphql`
18-
query {
19-
placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
20-
childImageSharp {
21-
fluid(maxWidth: 300) {
22-
...GatsbyImageSharpFluid
23-
}
24-
}
25-
}
26-
}
27-
`);
16+
// const Image = () => {
17+
// const { placeholderImage } = useStaticQuery(graphql`
18+
// query {
19+
// placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
20+
// childImageSharp {
21+
// fluid(maxWidth: 300) {
22+
// ...GatsbyImageSharpFluid
23+
// }
24+
// }
25+
// }
26+
// }
27+
// `);
2828

29-
return <Img fluid={placeholderImage.childImageSharp.fluid} />;
30-
};
31-
export default Image;
29+
// return <Img fluid={placeholderImage.childImageSharp.fluid} />;
30+
// };
31+
// export default Image;

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

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { Link } from 'gatsby';
2-
import * as React from 'react';
3-
import { styled } from '../styles';
4-
import { useAllTutorialQuery } from '../hooks/useAllTutorialQuery';
5-
import { getTutorialPath } from '../utils/getTutorialPath';
1+
import { Link } from "gatsby";
2+
import * as React from "react";
3+
import { styled } from "../styles";
4+
import { useAllTutorialQuery } from "../hooks/useAllTutorialQuery";
5+
import { getTutorialSlug } from "../utils/getTutorialSlug";
66

77
const Post = styled.article`
88
box-shadow: 0 0.3rem 1rem rgba(25, 17, 34, 0.05);
@@ -39,14 +39,14 @@ const Listing = () => {
3939
allMdx.edges &&
4040
allMdx.edges.map(({ node }) => {
4141
const fileAbsolutePath = node.fileAbsolutePath;
42-
const { path, title } = node.frontmatter;
42+
const { pageTitle } = node.frontmatter!;
4343
return (
44-
<Post key={path}>
45-
<Link to={getTutorialPath(fileAbsolutePath)}>
46-
<h2>{title}</h2>
44+
<Post key={node.id}>
45+
<Link to={getTutorialSlug(fileAbsolutePath)}>
46+
<h2>{pageTitle}</h2>
4747
</Link>
4848
<p>{node.excerpt}</p>
49-
<ReadMoreLink to={getTutorialPath(fileAbsolutePath)}>
49+
<ReadMoreLink to={getTutorialSlug(fileAbsolutePath)}>
5050
Read More
5151
</ReadMoreLink>
5252
</Post>

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

-45
This file was deleted.

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

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import * as React from "react";
2+
import { RouterProps } from "@reach/router";
3+
4+
import Layout from "../layout";
5+
import { MDXRenderer } from "gatsby-mdx";
6+
import { graphql } from "gatsby";
7+
import { TutorialMdxQuery } from "src/graphqlTypes";
8+
9+
type TutorialLayoutProps = { data: TutorialMdxQuery } & RouterProps;
10+
11+
const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
12+
data,
13+
...props
14+
}) => {
15+
if (!data) {
16+
return null;
17+
}
18+
const { pageTitle } = data!.mdx!.frontmatter!;
19+
const { location } = props;
20+
21+
return (
22+
<Layout location={location}>
23+
<h1>{pageTitle}</h1>
24+
<MDXRenderer>{data!.mdx!.code!.body}</MDXRenderer>
25+
</Layout>
26+
);
27+
};
28+
29+
export default TutorialLayout;
30+
31+
export const pageQuery = graphql`
32+
query TutorialMDX($id: String!) {
33+
mdx(id: { eq: $id }) {
34+
id
35+
code {
36+
body
37+
}
38+
frontmatter {
39+
path
40+
pageTitle
41+
}
42+
}
43+
}
44+
`;

0 commit comments

Comments
 (0)