├── .gitignore
├── LICENSE
├── README.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package.json
├── src
    ├── components
    │   ├── app-container.js
    │   ├── comments.js
    │   ├── header.js
    │   ├── image.js
    │   ├── layout.css
    │   ├── layout.js
    │   └── seo.js
    ├── context
    │   └── comments.js
    ├── hooks
    │   ├── use-comments.js
    │   └── use-site-metadata.js
    ├── images
    │   ├── gatsby-astronaut.png
    │   └── gatsby-icon.png
    └── pages
    │   ├── 404.js
    │   ├── index.js
    │   └── page-2.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # dotenv environment variables file
55 | .env
56 | 
57 | # gatsby files
58 | .cache/
59 | public
60 | 
61 | # Mac files
62 | .DS_Store
63 | 
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2019 Jason Lengstorf
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Hooks and How to Use Them With Gatsby
2 | 
3 | Demo code built with Sidhartha Chatterjee to show off how React Hooks work and how to use them with Gatsby.
4 | 
5 | [Watch us build this code live!](https://youtu.be/asrdFuAxPaU)
6 | 


--------------------------------------------------------------------------------
/gatsby-browser.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Implement Gatsby's Browser APIs in this file.
 3 |  *
 4 |  * See: https://www.gatsbyjs.org/docs/browser-apis/
 5 |  */
 6 | import React from 'react';
 7 | import AppContainer from './src/components/app-container';
 8 | 
 9 | // You can delete this file if you're not using it
10 | export const wrapRootElement = ({ element }) => (
11 |   <AppContainer>{element}</AppContainer>
12 | );
13 | 


--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   siteMetadata: {
 3 |     title: `Gatsby Default Starter`,
 4 |     description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
 5 |     author: `@chatsidhartha`
 6 |   },
 7 |   plugins: [
 8 |     `gatsby-plugin-react-helmet`,
 9 |     {
10 |       resolve: `gatsby-source-filesystem`,
11 |       options: {
12 |         name: `images`,
13 |         path: `${__dirname}/src/images`
14 |       }
15 |     },
16 |     `gatsby-transformer-sharp`,
17 |     `gatsby-plugin-sharp`,
18 |     {
19 |       resolve: `gatsby-plugin-manifest`,
20 |       options: {
21 |         name: `gatsby-starter-default`,
22 |         short_name: `starter`,
23 |         start_url: `/`,
24 |         background_color: `#663399`,
25 |         theme_color: `#663399`,
26 |         display: `minimal-ui`,
27 |         icon: `src/images/gatsby-icon.png` // This path is relative to the root of the site.
28 |       }
29 |     }
30 |     // this (optional) plugin enables Progressive Web App + Offline functionality
31 |     // To learn more, visit: https://gatsby.app/offline
32 |     // 'gatsby-plugin-offline',
33 |   ]
34 | };
35 | 


--------------------------------------------------------------------------------
/gatsby-node.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Implement Gatsby's Node APIs in this file.
3 |  *
4 |  * See: https://www.gatsbyjs.org/docs/node-apis/
5 |  */
6 | 
7 | // You can delete this file if you're not using it
8 | 


--------------------------------------------------------------------------------
/gatsby-ssr.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
3 |  *
4 |  * See: https://www.gatsbyjs.org/docs/ssr-apis/
5 |  */
6 | 
7 | // You can delete this file if you're not using it
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-hooks-gatsby",
 3 |   "private": true,
 4 |   "description": "Demo code built with Sidhartha Chatterjee to show off how React Hooks work and how to use them with Gatsby.",
 5 |   "version": "0.1.0",
 6 |   "author": "Jason Lengstorf <jason@gatsbyjs.com>",
 7 |   "dependencies": {
 8 |     "gatsby": "^2.1.2",
 9 |     "gatsby-image": "^2.0.29",
10 |     "gatsby-plugin-manifest": "^2.0.17",
11 |     "gatsby-plugin-offline": "^2.0.23",
12 |     "gatsby-plugin-react-helmet": "^3.0.6",
13 |     "gatsby-plugin-sharp": "^2.0.20",
14 |     "gatsby-source-filesystem": "^2.0.20",
15 |     "gatsby-transformer-sharp": "^2.1.13",
16 |     "prop-types": "^15.7.2",
17 |     "react": "^16.8.1",
18 |     "react-dom": "^16.8.1",
19 |     "react-helmet": "^5.2.0"
20 |   },
21 |   "keywords": [
22 |     "gatsby"
23 |   ],
24 |   "license": "MIT",
25 |   "scripts": {
26 |     "build": "gatsby build",
27 |     "develop": "gatsby develop",
28 |     "start": "npm run develop",
29 |     "serve": "gatsby serve",
30 |     "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
31 |   },
32 |   "repository": {
33 |     "type": "git",
34 |     "url": "https://github.com/jlengstorf/react-hooks-gatsby"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/components/app-container.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import CommentsContext from '../context/comments';
 3 | import useComments from '../hooks/use-comments';
 4 | 
 5 | const AppContainer = ({ children }) => {
 6 |   const { comment, comments, onChange, onSubmit } = useComments();
 7 | 
 8 |   return (
 9 |     <CommentsContext.Provider value={{ comment, comments, onChange, onSubmit }}>
10 |       {children}
11 |     </CommentsContext.Provider>
12 |   );
13 | };
14 | 
15 | export default AppContainer;
16 | 


--------------------------------------------------------------------------------
/src/components/comments.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import CommentsContext from '../context/comments';
 3 | 
 4 | const Comments = () => {
 5 |   const { comment, comments, onChange, onSubmit } = useContext(CommentsContext);
 6 | 
 7 |   return (
 8 |     <div>
 9 |       <form onSubmit={onSubmit}>
10 |         <label>
11 |           Comment
12 |           <textarea
13 |             onChange={onChange}
14 |             value={comment}
15 |             style={{ display: 'block' }}
16 |             name="comment"
17 |           />
18 |         </label>
19 |         <button type="submit">Add Comment</button>
20 |       </form>
21 |       <ul>
22 |         {comments.map(cmnt => (
23 |           <li key={cmnt}>
24 |             <p>{cmnt}</p>
25 |           </li>
26 |         ))}
27 |       </ul>
28 |     </div>
29 |   );
30 | };
31 | 
32 | export default Comments;
33 | 


--------------------------------------------------------------------------------
/src/components/header.js:
--------------------------------------------------------------------------------
 1 | import { Link } from 'gatsby';
 2 | import PropTypes from 'prop-types';
 3 | import React from 'react';
 4 | 
 5 | const Header = ({ siteTitle }) => {
 6 |   return (
 7 |     <header
 8 |       style={{
 9 |         background: `rebeccapurple`,
10 |         marginBottom: `1.45rem`
11 |       }}
12 |     >
13 |       <div
14 |         style={{
15 |           margin: `0 auto`,
16 |           maxWidth: 960,
17 |           padding: `1.45rem 1.0875rem`
18 |         }}
19 |       >
20 |         <h1 style={{ margin: 0 }}>
21 |           <Link
22 |             to="/"
23 |             style={{
24 |               color: `white`,
25 |               textDecoration: `none`
26 |             }}
27 |           >
28 |             {siteTitle}
29 |           </Link>
30 |         </h1>
31 |       </div>
32 |     </header>
33 |   );
34 | };
35 | 
36 | Header.propTypes = {
37 |   siteTitle: PropTypes.string
38 | };
39 | 
40 | Header.defaultProps = {
41 |   siteTitle: ``
42 | };
43 | 
44 | export default Header;
45 | 


--------------------------------------------------------------------------------
/src/components/image.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { StaticQuery, graphql } from "gatsby"
 3 | import Img from "gatsby-image"
 4 | 
 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 |  */
15 | 
16 | const Image = () => (
17 |   <StaticQuery
18 |     query={graphql`
19 |       query {
20 |         placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
21 |           childImageSharp {
22 |             fluid(maxWidth: 300) {
23 |               ...GatsbyImageSharpFluid
24 |             }
25 |           }
26 |         }
27 |       }
28 |     `}
29 |     render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
30 |   />
31 | )
32 | export default Image
33 | 


--------------------------------------------------------------------------------
/src/components/layout.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   font-family: sans-serif;
  3 |   -ms-text-size-adjust: 100%;
  4 |   -webkit-text-size-adjust: 100%;
  5 | }
  6 | body {
  7 |   margin: 0;
  8 | }
  9 | article,
 10 | aside,
 11 | details,
 12 | figcaption,
 13 | figure,
 14 | footer,
 15 | header,
 16 | main,
 17 | menu,
 18 | nav,
 19 | section,
 20 | summary {
 21 |   display: block;
 22 | }
 23 | audio,
 24 | canvas,
 25 | progress,
 26 | video {
 27 |   display: inline-block;
 28 | }
 29 | audio:not([controls]) {
 30 |   display: none;
 31 |   height: 0;
 32 | }
 33 | progress {
 34 |   vertical-align: baseline;
 35 | }
 36 | [hidden],
 37 | template {
 38 |   display: none;
 39 | }
 40 | a {
 41 |   background-color: transparent;
 42 |   -webkit-text-decoration-skip: objects;
 43 | }
 44 | a:active,
 45 | a:hover {
 46 |   outline-width: 0;
 47 | }
 48 | abbr[title] {
 49 |   border-bottom: none;
 50 |   text-decoration: underline;
 51 |   text-decoration: underline dotted;
 52 | }
 53 | b,
 54 | strong {
 55 |   font-weight: inherit;
 56 |   font-weight: bolder;
 57 | }
 58 | dfn {
 59 |   font-style: italic;
 60 | }
 61 | h1 {
 62 |   font-size: 2em;
 63 |   margin: 0.67em 0;
 64 | }
 65 | mark {
 66 |   background-color: #ff0;
 67 |   color: #000;
 68 | }
 69 | small {
 70 |   font-size: 80%;
 71 | }
 72 | sub,
 73 | sup {
 74 |   font-size: 75%;
 75 |   line-height: 0;
 76 |   position: relative;
 77 |   vertical-align: baseline;
 78 | }
 79 | sub {
 80 |   bottom: -0.25em;
 81 | }
 82 | sup {
 83 |   top: -0.5em;
 84 | }
 85 | img {
 86 |   border-style: none;
 87 | }
 88 | svg:not(:root) {
 89 |   overflow: hidden;
 90 | }
 91 | code,
 92 | kbd,
 93 | pre,
 94 | samp {
 95 |   font-family: monospace, monospace;
 96 |   font-size: 1em;
 97 | }
 98 | figure {
 99 |   margin: 1em 40px;
100 | }
101 | hr {
102 |   box-sizing: content-box;
103 |   height: 0;
104 |   overflow: visible;
105 | }
106 | button,
107 | input,
108 | optgroup,
109 | select,
110 | textarea {
111 |   font: inherit;
112 |   margin: 0;
113 | }
114 | optgroup {
115 |   font-weight: 700;
116 | }
117 | button,
118 | input {
119 |   overflow: visible;
120 | }
121 | button,
122 | select {
123 |   text-transform: none;
124 | }
125 | [type="reset"],
126 | [type="submit"],
127 | button,
128 | html [type="button"] {
129 |   -webkit-appearance: button;
130 | }
131 | [type="button"]::-moz-focus-inner,
132 | [type="reset"]::-moz-focus-inner,
133 | [type="submit"]::-moz-focus-inner,
134 | button::-moz-focus-inner {
135 |   border-style: none;
136 |   padding: 0;
137 | }
138 | [type="button"]:-moz-focusring,
139 | [type="reset"]:-moz-focusring,
140 | [type="submit"]:-moz-focusring,
141 | button:-moz-focusring {
142 |   outline: 1px dotted ButtonText;
143 | }
144 | fieldset {
145 |   border: 1px solid silver;
146 |   margin: 0 2px;
147 |   padding: 0.35em 0.625em 0.75em;
148 | }
149 | legend {
150 |   box-sizing: border-box;
151 |   color: inherit;
152 |   display: table;
153 |   max-width: 100%;
154 |   padding: 0;
155 |   white-space: normal;
156 | }
157 | textarea {
158 |   overflow: auto;
159 | }
160 | [type="checkbox"],
161 | [type="radio"] {
162 |   box-sizing: border-box;
163 |   padding: 0;
164 | }
165 | [type="number"]::-webkit-inner-spin-button,
166 | [type="number"]::-webkit-outer-spin-button {
167 |   height: auto;
168 | }
169 | [type="search"] {
170 |   -webkit-appearance: textfield;
171 |   outline-offset: -2px;
172 | }
173 | [type="search"]::-webkit-search-cancel-button,
174 | [type="search"]::-webkit-search-decoration {
175 |   -webkit-appearance: none;
176 | }
177 | ::-webkit-input-placeholder {
178 |   color: inherit;
179 |   opacity: 0.54;
180 | }
181 | ::-webkit-file-upload-button {
182 |   -webkit-appearance: button;
183 |   font: inherit;
184 | }
185 | html {
186 |   font: 112.5%/1.45em georgia, serif;
187 |   box-sizing: border-box;
188 |   overflow-y: scroll;
189 | }
190 | * {
191 |   box-sizing: inherit;
192 | }
193 | *:before {
194 |   box-sizing: inherit;
195 | }
196 | *:after {
197 |   box-sizing: inherit;
198 | }
199 | body {
200 |   color: hsla(0, 0%, 0%, 0.8);
201 |   font-family: georgia, serif;
202 |   font-weight: normal;
203 |   word-wrap: break-word;
204 |   font-kerning: normal;
205 |   -moz-font-feature-settings: "kern", "liga", "clig", "calt";
206 |   -ms-font-feature-settings: "kern", "liga", "clig", "calt";
207 |   -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
208 |   font-feature-settings: "kern", "liga", "clig", "calt";
209 | }
210 | img {
211 |   max-width: 100%;
212 |   margin-left: 0;
213 |   margin-right: 0;
214 |   margin-top: 0;
215 |   padding-bottom: 0;
216 |   padding-left: 0;
217 |   padding-right: 0;
218 |   padding-top: 0;
219 |   margin-bottom: 1.45rem;
220 | }
221 | h1 {
222 |   margin-left: 0;
223 |   margin-right: 0;
224 |   margin-top: 0;
225 |   padding-bottom: 0;
226 |   padding-left: 0;
227 |   padding-right: 0;
228 |   padding-top: 0;
229 |   margin-bottom: 1.45rem;
230 |   color: inherit;
231 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
232 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
233 |   font-weight: bold;
234 |   text-rendering: optimizeLegibility;
235 |   font-size: 2.25rem;
236 |   line-height: 1.1;
237 | }
238 | h2 {
239 |   margin-left: 0;
240 |   margin-right: 0;
241 |   margin-top: 0;
242 |   padding-bottom: 0;
243 |   padding-left: 0;
244 |   padding-right: 0;
245 |   padding-top: 0;
246 |   margin-bottom: 1.45rem;
247 |   color: inherit;
248 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
249 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
250 |   font-weight: bold;
251 |   text-rendering: optimizeLegibility;
252 |   font-size: 1.62671rem;
253 |   line-height: 1.1;
254 | }
255 | h3 {
256 |   margin-left: 0;
257 |   margin-right: 0;
258 |   margin-top: 0;
259 |   padding-bottom: 0;
260 |   padding-left: 0;
261 |   padding-right: 0;
262 |   padding-top: 0;
263 |   margin-bottom: 1.45rem;
264 |   color: inherit;
265 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
266 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
267 |   font-weight: bold;
268 |   text-rendering: optimizeLegibility;
269 |   font-size: 1.38316rem;
270 |   line-height: 1.1;
271 | }
272 | h4 {
273 |   margin-left: 0;
274 |   margin-right: 0;
275 |   margin-top: 0;
276 |   padding-bottom: 0;
277 |   padding-left: 0;
278 |   padding-right: 0;
279 |   padding-top: 0;
280 |   margin-bottom: 1.45rem;
281 |   color: inherit;
282 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
283 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
284 |   font-weight: bold;
285 |   text-rendering: optimizeLegibility;
286 |   font-size: 1rem;
287 |   line-height: 1.1;
288 | }
289 | h5 {
290 |   margin-left: 0;
291 |   margin-right: 0;
292 |   margin-top: 0;
293 |   padding-bottom: 0;
294 |   padding-left: 0;
295 |   padding-right: 0;
296 |   padding-top: 0;
297 |   margin-bottom: 1.45rem;
298 |   color: inherit;
299 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
300 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
301 |   font-weight: bold;
302 |   text-rendering: optimizeLegibility;
303 |   font-size: 0.85028rem;
304 |   line-height: 1.1;
305 | }
306 | h6 {
307 |   margin-left: 0;
308 |   margin-right: 0;
309 |   margin-top: 0;
310 |   padding-bottom: 0;
311 |   padding-left: 0;
312 |   padding-right: 0;
313 |   padding-top: 0;
314 |   margin-bottom: 1.45rem;
315 |   color: inherit;
316 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
317 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
318 |   font-weight: bold;
319 |   text-rendering: optimizeLegibility;
320 |   font-size: 0.78405rem;
321 |   line-height: 1.1;
322 | }
323 | hgroup {
324 |   margin-left: 0;
325 |   margin-right: 0;
326 |   margin-top: 0;
327 |   padding-bottom: 0;
328 |   padding-left: 0;
329 |   padding-right: 0;
330 |   padding-top: 0;
331 |   margin-bottom: 1.45rem;
332 | }
333 | ul {
334 |   margin-left: 1.45rem;
335 |   margin-right: 0;
336 |   margin-top: 0;
337 |   padding-bottom: 0;
338 |   padding-left: 0;
339 |   padding-right: 0;
340 |   padding-top: 0;
341 |   margin-bottom: 1.45rem;
342 |   list-style-position: outside;
343 |   list-style-image: none;
344 | }
345 | ol {
346 |   margin-left: 1.45rem;
347 |   margin-right: 0;
348 |   margin-top: 0;
349 |   padding-bottom: 0;
350 |   padding-left: 0;
351 |   padding-right: 0;
352 |   padding-top: 0;
353 |   margin-bottom: 1.45rem;
354 |   list-style-position: outside;
355 |   list-style-image: none;
356 | }
357 | dl {
358 |   margin-left: 0;
359 |   margin-right: 0;
360 |   margin-top: 0;
361 |   padding-bottom: 0;
362 |   padding-left: 0;
363 |   padding-right: 0;
364 |   padding-top: 0;
365 |   margin-bottom: 1.45rem;
366 | }
367 | dd {
368 |   margin-left: 0;
369 |   margin-right: 0;
370 |   margin-top: 0;
371 |   padding-bottom: 0;
372 |   padding-left: 0;
373 |   padding-right: 0;
374 |   padding-top: 0;
375 |   margin-bottom: 1.45rem;
376 | }
377 | p {
378 |   margin-left: 0;
379 |   margin-right: 0;
380 |   margin-top: 0;
381 |   padding-bottom: 0;
382 |   padding-left: 0;
383 |   padding-right: 0;
384 |   padding-top: 0;
385 |   margin-bottom: 1.45rem;
386 | }
387 | figure {
388 |   margin-left: 0;
389 |   margin-right: 0;
390 |   margin-top: 0;
391 |   padding-bottom: 0;
392 |   padding-left: 0;
393 |   padding-right: 0;
394 |   padding-top: 0;
395 |   margin-bottom: 1.45rem;
396 | }
397 | pre {
398 |   margin-left: 0;
399 |   margin-right: 0;
400 |   margin-top: 0;
401 |   margin-bottom: 1.45rem;
402 |   font-size: 0.85rem;
403 |   line-height: 1.42;
404 |   background: hsla(0, 0%, 0%, 0.04);
405 |   border-radius: 3px;
406 |   overflow: auto;
407 |   word-wrap: normal;
408 |   padding: 1.45rem;
409 | }
410 | table {
411 |   margin-left: 0;
412 |   margin-right: 0;
413 |   margin-top: 0;
414 |   padding-bottom: 0;
415 |   padding-left: 0;
416 |   padding-right: 0;
417 |   padding-top: 0;
418 |   margin-bottom: 1.45rem;
419 |   font-size: 1rem;
420 |   line-height: 1.45rem;
421 |   border-collapse: collapse;
422 |   width: 100%;
423 | }
424 | fieldset {
425 |   margin-left: 0;
426 |   margin-right: 0;
427 |   margin-top: 0;
428 |   padding-bottom: 0;
429 |   padding-left: 0;
430 |   padding-right: 0;
431 |   padding-top: 0;
432 |   margin-bottom: 1.45rem;
433 | }
434 | blockquote {
435 |   margin-left: 1.45rem;
436 |   margin-right: 1.45rem;
437 |   margin-top: 0;
438 |   padding-bottom: 0;
439 |   padding-left: 0;
440 |   padding-right: 0;
441 |   padding-top: 0;
442 |   margin-bottom: 1.45rem;
443 | }
444 | form {
445 |   margin-left: 0;
446 |   margin-right: 0;
447 |   margin-top: 0;
448 |   padding-bottom: 0;
449 |   padding-left: 0;
450 |   padding-right: 0;
451 |   padding-top: 0;
452 |   margin-bottom: 1.45rem;
453 | }
454 | noscript {
455 |   margin-left: 0;
456 |   margin-right: 0;
457 |   margin-top: 0;
458 |   padding-bottom: 0;
459 |   padding-left: 0;
460 |   padding-right: 0;
461 |   padding-top: 0;
462 |   margin-bottom: 1.45rem;
463 | }
464 | iframe {
465 |   margin-left: 0;
466 |   margin-right: 0;
467 |   margin-top: 0;
468 |   padding-bottom: 0;
469 |   padding-left: 0;
470 |   padding-right: 0;
471 |   padding-top: 0;
472 |   margin-bottom: 1.45rem;
473 | }
474 | hr {
475 |   margin-left: 0;
476 |   margin-right: 0;
477 |   margin-top: 0;
478 |   padding-bottom: 0;
479 |   padding-left: 0;
480 |   padding-right: 0;
481 |   padding-top: 0;
482 |   margin-bottom: calc(1.45rem - 1px);
483 |   background: hsla(0, 0%, 0%, 0.2);
484 |   border: none;
485 |   height: 1px;
486 | }
487 | address {
488 |   margin-left: 0;
489 |   margin-right: 0;
490 |   margin-top: 0;
491 |   padding-bottom: 0;
492 |   padding-left: 0;
493 |   padding-right: 0;
494 |   padding-top: 0;
495 |   margin-bottom: 1.45rem;
496 | }
497 | b {
498 |   font-weight: bold;
499 | }
500 | strong {
501 |   font-weight: bold;
502 | }
503 | dt {
504 |   font-weight: bold;
505 | }
506 | th {
507 |   font-weight: bold;
508 | }
509 | li {
510 |   margin-bottom: calc(1.45rem / 2);
511 | }
512 | ol li {
513 |   padding-left: 0;
514 | }
515 | ul li {
516 |   padding-left: 0;
517 | }
518 | li > ol {
519 |   margin-left: 1.45rem;
520 |   margin-bottom: calc(1.45rem / 2);
521 |   margin-top: calc(1.45rem / 2);
522 | }
523 | li > ul {
524 |   margin-left: 1.45rem;
525 |   margin-bottom: calc(1.45rem / 2);
526 |   margin-top: calc(1.45rem / 2);
527 | }
528 | blockquote *:last-child {
529 |   margin-bottom: 0;
530 | }
531 | li *:last-child {
532 |   margin-bottom: 0;
533 | }
534 | p *:last-child {
535 |   margin-bottom: 0;
536 | }
537 | li > p {
538 |   margin-bottom: calc(1.45rem / 2);
539 | }
540 | code {
541 |   font-size: 0.85rem;
542 |   line-height: 1.45rem;
543 | }
544 | kbd {
545 |   font-size: 0.85rem;
546 |   line-height: 1.45rem;
547 | }
548 | samp {
549 |   font-size: 0.85rem;
550 |   line-height: 1.45rem;
551 | }
552 | abbr {
553 |   border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
554 |   cursor: help;
555 | }
556 | acronym {
557 |   border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
558 |   cursor: help;
559 | }
560 | abbr[title] {
561 |   border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
562 |   cursor: help;
563 |   text-decoration: none;
564 | }
565 | thead {
566 |   text-align: left;
567 | }
568 | td,
569 | th {
570 |   text-align: left;
571 |   border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
572 |   font-feature-settings: "tnum";
573 |   -moz-font-feature-settings: "tnum";
574 |   -ms-font-feature-settings: "tnum";
575 |   -webkit-font-feature-settings: "tnum";
576 |   padding-left: 0.96667rem;
577 |   padding-right: 0.96667rem;
578 |   padding-top: 0.725rem;
579 |   padding-bottom: calc(0.725rem - 1px);
580 | }
581 | th:first-child,
582 | td:first-child {
583 |   padding-left: 0;
584 | }
585 | th:last-child,
586 | td:last-child {
587 |   padding-right: 0;
588 | }
589 | tt,
590 | code {
591 |   background-color: hsla(0, 0%, 0%, 0.04);
592 |   border-radius: 3px;
593 |   font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
594 |     "Liberation Mono", Menlo, Courier, monospace;
595 |   padding: 0;
596 |   padding-top: 0.2em;
597 |   padding-bottom: 0.2em;
598 | }
599 | pre code {
600 |   background: none;
601 |   line-height: 1.42;
602 | }
603 | code:before,
604 | code:after,
605 | tt:before,
606 | tt:after {
607 |   letter-spacing: -0.2em;
608 |   content: " ";
609 | }
610 | pre code:before,
611 | pre code:after,
612 | pre tt:before,
613 | pre tt:after {
614 |   content: "";
615 | }
616 | @media only screen and (max-width: 480px) {
617 |   html {
618 |     font-size: 100%;
619 |   }
620 | }
621 | 


--------------------------------------------------------------------------------
/src/components/layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import Header from './header';
 4 | import './layout.css';
 5 | import useSiteMetadata from '../hooks/use-site-metadata';
 6 | 
 7 | const Layout = ({ children }) => {
 8 |   const { title } = useSiteMetadata();
 9 | 
10 |   return (
11 |     <>
12 |       <Header siteTitle={title} />
13 |       <div
14 |         style={{
15 |           margin: `0 auto`,
16 |           maxWidth: 960,
17 |           padding: `0px 1.0875rem 1.45rem`,
18 |           paddingTop: 0
19 |         }}
20 |       >
21 |         <main>{children}</main>
22 |         <footer>
23 |           © {new Date().getFullYear()}, Built with
24 |           {` `}
25 |           <a href="https://www.gatsbyjs.org">Gatsby</a>
26 |         </footer>
27 |       </div>
28 |     </>
29 |   );
30 | };
31 | 
32 | Layout.propTypes = {
33 |   children: PropTypes.node.isRequired
34 | };
35 | 
36 | export default Layout;
37 | 


--------------------------------------------------------------------------------
/src/components/seo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import Helmet from 'react-helmet';
 4 | import useSiteMetadata from '../hooks/use-site-metadata';
 5 | 
 6 | function SEO({ description, lang, meta, keywords, title }) {
 7 |   const metadata = useSiteMetadata();
 8 |   const metaDescription = description || metadata.description;
 9 | 
10 |   return (
11 |     <Helmet
12 |       htmlAttributes={{
13 |         lang
14 |       }}
15 |       title={title}
16 |       titleTemplate={`%s | ${metadata.title}`}
17 |       meta={[
18 |         {
19 |           name: `description`,
20 |           content: metaDescription
21 |         },
22 |         {
23 |           property: `og:title`,
24 |           content: title
25 |         },
26 |         {
27 |           property: `og:description`,
28 |           content: metaDescription
29 |         },
30 |         {
31 |           property: `og:type`,
32 |           content: `website`
33 |         },
34 |         {
35 |           name: `twitter:card`,
36 |           content: `summary`
37 |         },
38 |         {
39 |           name: `twitter:creator`,
40 |           content: metadata.author
41 |         },
42 |         {
43 |           name: `twitter:title`,
44 |           content: title
45 |         },
46 |         {
47 |           name: `twitter:description`,
48 |           content: metaDescription
49 |         }
50 |       ]
51 |         .concat(
52 |           keywords.length > 0
53 |             ? {
54 |                 name: `keywords`,
55 |                 content: keywords.join(`, `)
56 |               }
57 |             : []
58 |         )
59 |         .concat(meta)}
60 |     />
61 |   );
62 | }
63 | 
64 | SEO.defaultProps = {
65 |   lang: `en`,
66 |   meta: [],
67 |   keywords: []
68 | };
69 | 
70 | SEO.propTypes = {
71 |   description: PropTypes.string,
72 |   lang: PropTypes.string,
73 |   meta: PropTypes.array,
74 |   keywords: PropTypes.arrayOf(PropTypes.string),
75 |   title: PropTypes.string.isRequired
76 | };
77 | 
78 | export default SEO;
79 | 


--------------------------------------------------------------------------------
/src/context/comments.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 | 
3 | export default createContext();
4 | 


--------------------------------------------------------------------------------
/src/hooks/use-comments.js:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | 
 3 | const useComments = () => {
 4 |   const [comment, setComment] = useState('');
 5 |   const [comments, setComments] = useState([]);
 6 | 
 7 |   const onChange = event => {
 8 |     setComment(event.target.value);
 9 |   };
10 | 
11 |   const onSubmit = event => {
12 |     event.preventDefault();
13 |     setComments([...comments, comment]);
14 |     setComment('');
15 |   };
16 | 
17 |   return {
18 |     comment,
19 |     comments,
20 |     onChange,
21 |     onSubmit
22 |   };
23 | };
24 | 
25 | export default useComments;
26 | 


--------------------------------------------------------------------------------
/src/hooks/use-site-metadata.js:
--------------------------------------------------------------------------------
 1 | import { graphql, useStaticQuery } from 'gatsby';
 2 | 
 3 | const useSiteMetadata = () => {
 4 |   const data = useStaticQuery(graphql`
 5 |     query {
 6 |       site {
 7 |         siteMetadata {
 8 |           title
 9 |           description
10 |           author
11 |         }
12 |       }
13 |     }
14 |   `);
15 | 
16 |   return data.site.siteMetadata;
17 | };
18 | 
19 | export default useSiteMetadata;
20 | 


--------------------------------------------------------------------------------
/src/images/gatsby-astronaut.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jlengstorf/react-hooks-gatsby/f30973e7ed3d2e169fef6ec7437c86bd2298e9b1/src/images/gatsby-astronaut.png


--------------------------------------------------------------------------------
/src/images/gatsby-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jlengstorf/react-hooks-gatsby/f30973e7ed3d2e169fef6ec7437c86bd2298e9b1/src/images/gatsby-icon.png


--------------------------------------------------------------------------------
/src/pages/404.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | import Layout from "../components/layout"
 4 | import SEO from "../components/seo"
 5 | 
 6 | const NotFoundPage = () => (
 7 |   <Layout>
 8 |     <SEO title="404: Not found" />
 9 |     <h1>NOT FOUND</h1>
10 |     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
11 |   </Layout>
12 | )
13 | 
14 | export default NotFoundPage
15 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'gatsby';
 3 | 
 4 | import Layout from '../components/layout';
 5 | import Image from '../components/image';
 6 | import SEO from '../components/seo';
 7 | import Comments from '../components/comments';
 8 | 
 9 | const IndexPage = () => {
10 |   return (
11 |     <Layout>
12 |       <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
13 |       <h1>Hi people</h1>
14 |       <p>Welcome to your new Gatsby site.</p>
15 |       <p>Now go build something great.</p>
16 |       <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
17 |         <Image />
18 |       </div>
19 |       <Link to="/page-2/">Go to page 2</Link>
20 |       <Comments />
21 |     </Layout>
22 |   );
23 | };
24 | 
25 | export default IndexPage;
26 | 


--------------------------------------------------------------------------------
/src/pages/page-2.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { Link } from "gatsby"
 3 | 
 4 | import Layout from "../components/layout"
 5 | import SEO from "../components/seo"
 6 | 
 7 | const SecondPage = () => (
 8 |   <Layout>
 9 |     <SEO title="Page two" />
10 |     <h1>Hi from the second page</h1>
11 |     <p>Welcome to page 2</p>
12 |     <Link to="/">Go back to the homepage</Link>
13 |   </Layout>
14 | )
15 | 
16 | export default SecondPage
17 | 


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