├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package-lock.json
├── package.json
├── src
    ├── components
    │   ├── header.js
    │   └── menu.js
    ├── layouts
    │   ├── index.css
    │   └── index.js
    ├── pages
    │   ├── 2018-04-09-post-one
    │   │   └── index.md
    │   ├── 2018-04-10-post-two
    │   │   └── index.md
    │   ├── 2018-04-11-post-three
    │   │   └── index.md
    │   ├── 404.js
    │   ├── about.js
    │   ├── blog.js
    │   ├── index.js
    │   ├── page-2.js
    │   └── services.js
    └── templates
    │   └── blog-post.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | # Project dependencies
2 | .cache
3 | node_modules
4 | yarn-error.log
5 | 
6 | # Build directory
7 | /public
8 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true,
4 |   "trailingComma": "es5"
5 | }
6 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 gatsbyjs
 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 | # Gatsby Crash Course
 2 | 
 3 | This is a sample Gatsby website with a Markdown blog. It is the project from the Gatsby JS Crash Course on YouTube by Traversy Media
 4 | 
 5 | ## Install
 6 | 
 7 | Make sure that you have the Gatsby CLI program installed:
 8 | 
 9 | ```sh
10 | npm install -g gatsby-cli
11 | ```
12 | 
13 | Install the dependencies:
14 | 
15 | ```sh
16 | npm install
17 | ```
18 | 
19 | ## Deploy
20 | 
21 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default)
22 | 


--------------------------------------------------------------------------------
/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 | 
7 |  // You can delete this file if you're not using it


--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   siteMetadata: {
 3 |     title: 'Gatsby Crash Course',
 4 |   },
 5 |   plugins: [
 6 |     'gatsby-plugin-react-helmet',
 7 |     'gatsby-plugin-catch-links',
 8 |     {
 9 |       resolve: 'gatsby-source-filesystem',
10 |       options: {
11 |         path: `${__dirname}/src/pages`,
12 |         name: 'pages',
13 |       },
14 |     },
15 |     'gatsby-transformer-remark',
16 |   ],
17 | }
18 | 


--------------------------------------------------------------------------------
/gatsby-node.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | 
 3 | exports.createPages = ({ boundActionCreators, graphql }) => {
 4 |   const { createPage } = boundActionCreators
 5 | 
 6 |   const postTemplate = path.resolve('src/templates/blog-post.js')
 7 | 
 8 |   return graphql(`
 9 |     {
10 |       allMarkdownRemark {
11 |         edges {
12 |           node {
13 |             html
14 |             id
15 |             frontmatter {
16 |               path
17 |               title
18 |               date
19 |               author
20 |             }
21 |           }
22 |         }
23 |       }
24 |     }
25 |   `).then(res => {
26 |     if (res.errors) {
27 |       return Promise.reject(res.errors)
28 |     }
29 | 
30 |     res.data.allMarkdownRemark.edges.forEach(({ node }) => {
31 |       createPage({
32 |         path: node.frontmatter.path,
33 |         component: postTemplate,
34 |       })
35 |     })
36 |   })
37 | }
38 | 


--------------------------------------------------------------------------------
/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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gatsby-starter-default",
 3 |   "description": "Gatsby default starter",
 4 |   "version": "1.0.0",
 5 |   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
 6 |   "dependencies": {
 7 |     "gatsby": "^1.9.247",
 8 |     "gatsby-link": "^1.6.40",
 9 |     "gatsby-plugin-catch-links": "^1.0.19",
10 |     "gatsby-plugin-react-helmet": "^2.0.10",
11 |     "gatsby-source-filesystem": "^1.5.29",
12 |     "gatsby-transformer-remark": "^1.7.39",
13 |     "react-helmet": "^5.2.0"
14 |   },
15 |   "keywords": [
16 |     "gatsby"
17 |   ],
18 |   "license": "MIT",
19 |   "scripts": {
20 |     "build": "gatsby build",
21 |     "develop": "gatsby develop",
22 |     "format": "prettier --write 'src/**/*.js'",
23 |     "test": "echo \"Error: no test specified\" && exit 1"
24 |   },
25 |   "devDependencies": {
26 |     "prettier": "^1.11.1"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'gatsby-link'
 3 | 
 4 | const Header = ({ siteTitle }) => (
 5 |   <div
 6 |     style={{
 7 |       background: '#333',
 8 |       marginBottom: '0',
 9 |     }}
10 |   >
11 |     <div
12 |       style={{
13 |         margin: '0 auto',
14 |         maxWidth: 960,
15 |         padding: '1.45rem 1.0875rem',
16 |       }}
17 |     >
18 |       <h1 style={{ margin: 0 }}>
19 |         <Link
20 |           to="/"
21 |           style={{
22 |             color: 'white',
23 |             textDecoration: 'none',
24 |           }}
25 |         >
26 |           {siteTitle}
27 |         </Link>
28 |       </h1>
29 |     </div>
30 |   </div>
31 | )
32 | 
33 | export default Header
34 | 


--------------------------------------------------------------------------------
/src/components/menu.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'gatsby-link'
 3 | 
 4 | const Menu = () => (
 5 |   <div
 6 |     style={{
 7 |       background: '#f4f4f4',
 8 |       paddingTop: '10px',
 9 |     }}
10 |   >
11 |     <ul
12 |       style={{
13 |         listStyle: 'none',
14 |         display: 'flex',
15 |         justifyContent: 'space-evenly',
16 |       }}
17 |     >
18 |       <li>
19 |         <Link to="/">Home</Link>
20 |       </li>
21 |       <li>
22 |         <Link to="/about">About</Link>
23 |       </li>
24 |       <li>
25 |         <Link to="/services">Services</Link>
26 |       </li>
27 |       <li>
28 |         <Link to="/blog">Blog</Link>
29 |       </li>
30 |     </ul>
31 |   </div>
32 | )
33 | 
34 | export default Menu
35 | 


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


--------------------------------------------------------------------------------
/src/layouts/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import Helmet from 'react-helmet'
 4 | 
 5 | import Header from '../components/header'
 6 | import Menu from '../components/menu'
 7 | import './index.css'
 8 | 
 9 | const Layout = ({ children, data }) => (
10 |   <div>
11 |     <Helmet
12 |       title={data.site.siteMetadata.title}
13 |       meta={[
14 |         {
15 |           name: 'description',
16 |           content: 'This is a sample website for the Gatsby crash course',
17 |         },
18 |         { name: 'keywords', content: 'gatsby, react, tutorial' },
19 |       ]}
20 |     />
21 |     <Header siteTitle={data.site.siteMetadata.title} />
22 |     <Menu />
23 |     <div
24 |       style={{
25 |         margin: '0 auto',
26 |         maxWidth: 960,
27 |         padding: '0px 1.0875rem 1.45rem',
28 |         paddingTop: 0,
29 |       }}
30 |     >
31 |       {children()}
32 |     </div>
33 |   </div>
34 | )
35 | 
36 | Layout.propTypes = {
37 |   children: PropTypes.func,
38 | }
39 | 
40 | export default Layout
41 | 
42 | export const query = graphql`
43 |   query SiteTitleQuery {
44 |     site {
45 |       siteMetadata {
46 |         title
47 |       }
48 |     }
49 |   }
50 | `
51 | 


--------------------------------------------------------------------------------
/src/pages/2018-04-09-post-one/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | path: "/post-one"
3 | date: "2018-04-09"
4 | title: "My First Gatsby Post"
5 | author: "Brad Traversy"
6 | ---
7 | 
8 | This is my very post in Gatsby
9 | 


--------------------------------------------------------------------------------
/src/pages/2018-04-10-post-two/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | path: "/post-two"
3 | date: "2018-04-10"
4 | title: "My Second Gatsby Post"
5 | author: "John Doe"
6 | ---
7 | 
8 | This is my second post in Gatsby
9 | 


--------------------------------------------------------------------------------
/src/pages/2018-04-11-post-three/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | path: "/post-three"
3 | date: "2018-04-11"
4 | title: "My Third Gatsby Post"
5 | author: "John Doe"
6 | ---
7 | 
8 | This is my third post in Gatsby
9 | 


--------------------------------------------------------------------------------
/src/pages/404.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const NotFoundPage = () => (
 4 |   <div>
 5 |     <h1>NOT FOUND</h1>
 6 |     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
 7 |   </div>
 8 | )
 9 | 
10 | export default NotFoundPage
11 | 


--------------------------------------------------------------------------------
/src/pages/about.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const AboutPage = () => (
 4 |   <div>
 5 |     <h1>About Us</h1>
 6 |     <p>
 7 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis
 8 |       adipisci, voluptatum, nisi velit praesentium error quia explicabo voluptas
 9 |       ad recusandae enim. Recusandae sequi non vel voluptas. Labore omnis
10 |       provident ex, perferendis esse, voluptate atque alias officiis dolor
11 |       eligendi itaque qui?
12 |     </p>
13 |   </div>
14 | )
15 | 
16 | export default AboutPage
17 | 


--------------------------------------------------------------------------------
/src/pages/blog.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'gatsby-link'
 3 | 
 4 | const BlogPage = ({ data }) => (
 5 |   <div>
 6 |     <h1>Latest Posts</h1>
 7 |     {data.allMarkdownRemark.edges.map(post => (
 8 |       <div key={post.node.id}>
 9 |         <h3>{post.node.frontmatter.title}</h3>
10 |         <small>
11 |           Posted by {post.node.frontmatter.author} on{' '}
12 |           {post.node.frontmatter.date}
13 |         </small>
14 |         <br />
15 |         <br />
16 |         <Link to={post.node.frontmatter.path}>Read More</Link>
17 |         <br />
18 |         <br />
19 |         <hr />
20 |       </div>
21 |     ))}
22 |   </div>
23 | )
24 | 
25 | export const pageQuery = graphql`
26 |   query BlogIndexQuery {
27 |     allMarkdownRemark {
28 |       edges {
29 |         node {
30 |           id
31 |           frontmatter {
32 |             path
33 |             title
34 |             date
35 |             author
36 |           }
37 |         }
38 |       }
39 |     }
40 |   }
41 | `
42 | 
43 | export default BlogPage
44 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'gatsby-link'
 3 | 
 4 | const IndexPage = () => (
 5 |   <div>
 6 |     <h1>Welcome to my website</h1>
 7 |     <p>This is a sample site for the Gatsby crash course</p>
 8 |   </div>
 9 | )
10 | 
11 | export default IndexPage
12 | 


--------------------------------------------------------------------------------
/src/pages/page-2.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'gatsby-link'
 3 | 
 4 | const SecondPage = () => (
 5 |   <div>
 6 |     <h1>Hi from the second page</h1>
 7 |     <p>Welcome to page 2</p>
 8 |     <Link to="/">Go back to the homepage</Link>
 9 |   </div>
10 | )
11 | 
12 | export default SecondPage
13 | 


--------------------------------------------------------------------------------
/src/pages/services.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const ServicesPage = () => (
 4 |   <div>
 5 |     <h1>Our Services</h1>
 6 |     <p>
 7 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis
 8 |       adipisci, voluptatum, nisi velit praesentium error quia explicabo voluptas
 9 |       ad recusandae enim. Recusandae sequi non vel voluptas. Labore omnis
10 |       provident ex, perferendis esse, voluptate atque alias officiis dolor
11 |       eligendi itaque qui?
12 |     </p>
13 |     <p>
14 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis
15 |       adipisci, voluptatum, nisi velit praesentium error quia explicabo voluptas
16 |       ad recusandae enim. Recusandae sequi non vel voluptas. Labore omnis
17 |       provident ex, perferendis esse, voluptate atque alias officiis dolor
18 |       eligendi itaque qui?
19 |     </p>
20 |   </div>
21 | )
22 | 
23 | export default ServicesPage
24 | 


--------------------------------------------------------------------------------
/src/templates/blog-post.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'gatsby-link'
 3 | 
 4 | export default function Template({ data }) {
 5 |   const post = data.markdownRemark
 6 | 
 7 |   return (
 8 |     <div>
 9 |       <Link to="/blog">Go Back</Link>
10 |       <hr />
11 |       <h1>{post.frontmatter.title}</h1>
12 |       <h4>
13 |         Posted by {post.frontmatter.author} on {post.frontmatter.date}
14 |       </h4>
15 |       <div dangerouslySetInnerHTML={{ __html: post.html }} />
16 |     </div>
17 |   )
18 | }
19 | 
20 | export const postQuery = graphql`
21 |   query BlogPostByPath($path: String!) {
22 |     markdownRemark(frontmatter: { path: { eq: $path } }) {
23 |       html
24 |       frontmatter {
25 |         path
26 |         title
27 |         author
28 |         date
29 |       }
30 |     }
31 |   }
32 | `
33 | 


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