├── .gitignore
├── src
    ├── images
    │   └── icon.png
    └── pages
    │   ├── 404.js
    │   └── index.js
├── gatsby-config.js
├── README.md
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .cache/
3 | public
4 | .idea
5 | 


--------------------------------------------------------------------------------
/src/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasonbahl/gatsby-conf-2021/HEAD/src/images/icon.png


--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   siteMetadata: {
 3 |     title: "Gatsby Conf Demo",
 4 |   },
 5 |   plugins: [
 6 |     `gatsby-plugin-sharp`,
 7 |     `gatsby-transformer-sharp`,
 8 |     `gatsby-plugin-image`,
 9 |     {
10 |       resolve: "@chakra-ui/gatsby-plugin",
11 |       options: {
12 |         /**
13 |          * @property {boolean} [isResettingCSS=true]
14 |          * if false, this plugin will not use `<CSSReset />
15 |          */
16 |         isResettingCSS: true,
17 |         /**
18 |          * @property {boolean} [isUsingColorMode=true]
19 |          * if false, this plugin will not use <ColorModeProvider />
20 |          */
21 |         isUsingColorMode: true,
22 |       },
23 |     },
24 |   ],
25 | };
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <a href="https://www.gatsbyjs.com/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter">
 3 |     <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
 4 |   </a>
 5 | </p>
 6 | <h1 align="center">
 7 |   Gatsby, WordPress and WPGraphQL demo for Gatsby Conf 2021
 8 | </h1>
 9 | 
10 | ## ℹ️ Overview
11 | 
12 | This repo is an example used for the WordPress, Gatsby and WPGraphQL Workshop at GatsbyConf 2021.
13 | 
14 | This repo serves as a learning resource for using Gatsby with WordPress.
15 | 
16 | It will not be maintained beyond the conference.
17 | 
18 | ## 📹 Gatsby Conf Video
19 | 
20 | This repo will be best used as a reference to the Gatsby Conf talk which will be recorded and put on
21 | the [Gatsby YouTube Channel](https://www.youtube.com/channel/UCjnp770qk7ujOq8Q9wiC82w).
22 | 


--------------------------------------------------------------------------------
/src/pages/404.js:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Link } from "gatsby";
 3 | 
 4 | // styles
 5 | const pageStyles = {
 6 |   color: "#232129",
 7 |   padding: "96px",
 8 |   fontFamily: "-apple-system, Roboto, sans-serif, serif",
 9 | };
10 | const headingStyles = {
11 |   marginTop: 0,
12 |   marginBottom: 64,
13 |   maxWidth: 320,
14 | };
15 | 
16 | const paragraphStyles = {
17 |   marginBottom: 48,
18 | };
19 | const codeStyles = {
20 |   color: "#8A6534",
21 |   padding: 4,
22 |   backgroundColor: "#FFF4DB",
23 |   fontSize: "1.25rem",
24 |   borderRadius: 4,
25 | };
26 | 
27 | // markup
28 | const NotFoundPage = () => {
29 |   return (
30 |     <main style={pageStyles}>
31 |       <title>Not found</title>
32 |       <h1 style={headingStyles}>Page not found</h1>
33 |       <p style={paragraphStyles}>
34 |         Sorry{" "}
35 |         <span role="img" aria-label="Pensive emoji">
36 |           😔
37 |         </span>{" "}
38 |         we couldn’t find what you were looking for.
39 |         <br />
40 |         {process.env.NODE_ENV === "development" ? (
41 |           <>
42 |             <br />
43 |             Try creating a page in <code style={codeStyles}>src/pages/</code>.
44 |             <br />
45 |           </>
46 |         ) : null}
47 |         <br />
48 |         <Link to="/">Go home</Link>.
49 |       </p>
50 |     </main>
51 |   );
52 | };
53 | 
54 | export default NotFoundPage;
55 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gatsby-conf-demo",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "description": "Gatsby Conf Demo",
 6 |   "author": "Jason Bahl",
 7 |   "keywords": [
 8 |     "gatsby"
 9 |   ],
10 |   "scripts": {
11 |     "develop": "gatsby develop",
12 |     "start": "gatsby develop",
13 |     "build": "gatsby build",
14 |     "serve": "gatsby serve",
15 |     "clean": "gatsby clean",
16 |     "pretty": "prettier . --write"
17 |   },
18 |   "dependencies": {
19 |     "@chakra-ui/gatsby-plugin": "^1.0.0",
20 |     "@chakra-ui/icons": "^1.0.0",
21 |     "@chakra-ui/react": "^1.0.0",
22 |     "@emotion/is-prop-valid": "^0.8.8",
23 |     "@emotion/react": "^11.0.0",
24 |     "@emotion/styled": "^11.0.0",
25 |     "@theme-ui/core": "^0.3.1",
26 |     "@theme-ui/match-media": "^0.3.1",
27 |     "@theme-ui/prism": "^0.3.0",
28 |     "copy-to-clipboard": "^3.3.1",
29 |     "emotion-theming": "^10.0.27",
30 |     "framer-motion": "^3.7.0",
31 |     "gatsby": "^2.32.3",
32 |     "gatsby-plugin-image": "^0.7.2",
33 |     "gatsby-plugin-react-helmet": "^3.3.14",
34 |     "gatsby-plugin-sharp": "^2.8.0",
35 |     "gatsby-source-wordpress": "4.0.2",
36 |     "gatsby-transformer-sharp": "^2.6.0",
37 |     "react": "^16.13.1",
38 |     "react-dom": "^16.13.1",
39 |     "react-helmet": "^5.2.1",
40 |     "react-html-parser": "^2.0.2"
41 |   },
42 |   "devDependencies": {
43 |     "husky": ">=4",
44 |     "prettier": "^2.1.2"
45 |   },
46 |   "lint-staged": {
47 |     "*.{js,ts,jsx,tsx,md,json,yml,css}": "prettier --write"
48 |   },
49 |   "husky": {
50 |     "hooks": {
51 |       "pre-commit": "lint-staged"
52 |     }
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | 
  3 | // styles
  4 | const pageStyles = {
  5 |   color: "#232129",
  6 |   padding: "96px",
  7 |   fontFamily: "-apple-system, Roboto, sans-serif, serif",
  8 | };
  9 | const headingStyles = {
 10 |   marginTop: 0,
 11 |   marginBottom: 64,
 12 |   maxWidth: 320,
 13 | };
 14 | const headingAccentStyles = {
 15 |   color: "#663399",
 16 | };
 17 | const paragraphStyles = {
 18 |   marginBottom: 48,
 19 | };
 20 | const codeStyles = {
 21 |   color: "#8A6534",
 22 |   padding: 4,
 23 |   backgroundColor: "#FFF4DB",
 24 |   fontSize: "1.25rem",
 25 |   borderRadius: 4,
 26 | };
 27 | const listStyles = {
 28 |   marginBottom: 96,
 29 |   paddingLeft: 0,
 30 | };
 31 | const listItemStyles = {
 32 |   fontWeight: "300",
 33 |   fontSize: "24px",
 34 |   maxWidth: "560px",
 35 | };
 36 | 
 37 | const linkStyle = {
 38 |   color: "#8954A8",
 39 |   fontWeight: "bold",
 40 |   fontSize: "16px",
 41 |   verticalAlign: "5%",
 42 | };
 43 | 
 44 | const docLinkStyle = {
 45 |   ...linkStyle,
 46 |   listStyleType: "none",
 47 |   marginBottom: 24,
 48 | };
 49 | 
 50 | const descriptionStyle = {
 51 |   color: "#232129",
 52 |   fontSize: "14px",
 53 | };
 54 | 
 55 | const docLink = {
 56 |   text: "Documentation",
 57 |   url: "https://www.gatsbyjs.com/docs/",
 58 |   color: "#8954A8",
 59 | };
 60 | // data
 61 | const links = [
 62 |   {
 63 |     text: "Tutorial",
 64 |     url: "https://www.gatsbyjs.com/docs/tutorial/",
 65 |     description:
 66 |       "A great place to get started if you're new to web development. Designed to guide you through setting up your first Gatsby site.",
 67 |     color: "#E95800",
 68 |   },
 69 |   {
 70 |     text: "How to Guides",
 71 |     url: "https://www.gatsbyjs.com/docs/how-to/",
 72 |     description:
 73 |       "Practical step-by-step guides to help you achieve a specific goal. Most useful when you're trying to get something done.",
 74 |     color: "#1099A8",
 75 |   },
 76 |   {
 77 |     text: "Reference Guides",
 78 |     url: "https://www.gatsbyjs.com/docs/reference/",
 79 |     description:
 80 |       "Nitty-gritty technical descriptions of how Gatsby works. Most useful when you need detailed information about Gatsby's APIs.",
 81 |     color: "#BC027F",
 82 |   },
 83 |   {
 84 |     text: "Conceptual Guides",
 85 |     url: "https://www.gatsbyjs.com/docs/conceptual/",
 86 |     description:
 87 |       "Big-picture explanations of higher-level Gatsby concepts. Most useful for building understanding of a particular topic.",
 88 |     color: "#0D96F2",
 89 |   },
 90 |   {
 91 |     text: "Plugin Library",
 92 |     url: "https://www.gatsbyjs.com/plugins",
 93 |     description:
 94 |       "Add functionality and customize your Gatsby site or app with thousands of plugins built by our amazing developer community.",
 95 |     color: "#000000",
 96 |   },
 97 | ];
 98 | 
 99 | // markup
100 | const IndexPage = () => {
101 |   return (
102 |     <main style={pageStyles}>
103 |       <title>Home Page</title>
104 |       <h1 style={headingStyles}>
105 |         Congratulations
106 |         <br />
107 |         <span style={headingAccentStyles}>— you just made a Gatsby site! </span>
108 |         <span role="img" aria-label="Party popper emojis">
109 |           🎉🎉🎉
110 |         </span>
111 |       </h1>
112 |       <p style={paragraphStyles}>
113 |         Edit <code style={codeStyles}>src/pages/index.js</code> to see this page
114 |         update in real-time.{" "}
115 |         <span role="img" aria-label="Sunglasses smiley emoji">
116 |           😎
117 |         </span>
118 |       </p>
119 |       <ul style={listStyles}>
120 |         <li style={docLinkStyle}>
121 |           <a
122 |             style={linkStyle}
123 |             href={`${docLink.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}
124 |           >
125 |             {docLink.text}
126 |           </a>
127 |         </li>
128 |         {links.map((link) => (
129 |           <li key={link.url} style={{ ...listItemStyles, color: link.color }}>
130 |             <span>
131 |               <a
132 |                 style={linkStyle}
133 |                 href={`${link.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}
134 |               >
135 |                 {link.text}
136 |               </a>
137 |               <p style={descriptionStyle}>{link.description}</p>
138 |             </span>
139 |           </li>
140 |         ))}
141 |       </ul>
142 |       <img
143 |         alt="Gatsby G Logo"
144 |         src="data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 110 20 10 10 0 010-20zm0 2c-3.73 0-6.86 2.55-7.75 6L14 19.75c3.45-.89 6-4.02 6-7.75h-5.25v1.5h3.45a6.37 6.37 0 01-3.89 4.44L6.06 9.69C7 7.31 9.3 5.63 12 5.63c2.13 0 4 1.04 5.18 2.65l1.23-1.06A7.959 7.959 0 0012 4zm-8 8a8 8 0 008 8c.04 0 .09 0-8-8z' fill='%23639'/%3E%3C/svg%3E"
145 |       />
146 |     </main>
147 |   );
148 | };
149 | 
150 | export default IndexPage;
151 | 


--------------------------------------------------------------------------------