cleaned up structure, added styled components

gatsby-browser.js

@@ -5,6 +5,6 @@
  */
 
 // You can delete this file if you're not using it
-require("prismjs/themes/prism.css");
+// require("prismjs/themes/prism.css");
-require("prismjs/themes/prism-tomorrow.css");
+// require("prismjs/themes/prism-tomorrow.css");
-require("prismjs/plugins/line-numbers/prism-line-numbers.css");
+// require("prismjs/plugins/line-numbers/prism-line-numbers.css");

gatsby-config.js

@@ -7,16 +7,10 @@ module.exports = {
   plugins: [
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-typescript`,
+    `gatsby-plugin-styled-components`,
     {
       resolve: `gatsby-transformer-remark`,
-      plugins: [
+      plugins: [`gatsby-remark-vscode`],
-        {
-          resolve: `gatsby-remark-prismjs`,
-          options: {
-            classPrefix: ""
-          }
-        }
-      ],
     },
     {
       resolve: `gatsby-source-filesystem`,

package-lock.json

@@ -938,6 +938,24 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.2.tgz",
+      "integrity": "sha512-ZQIMAA2kLUWiUeMZNJDTeCwYRx1l8SQL0kHktze4COT22occKpDML1GDUXP5/sxhOMrZO8vZw773ni4H5Snrsg==",
+      "requires": {
+        "@emotion/memoize": "0.7.2"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.2.tgz",
+      "integrity": "sha512-hnHhwQzvPCW1QjBWFyBtsETdllOM92BfrKWbUTmh9aeOlcVOiXvlPsK4104xH8NsaKfg86PTFsWkueQeUfMA/w=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.4.tgz",
+      "integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ=="
+    },
     "@gatsbyjs/relay-compiler": {
       "version": "2.0.0-printer-fix.2",
       "resolved": "https://registry.npmjs.org/@gatsbyjs/relay-compiler/-/relay-compiler-2.0.0-printer-fix.2.tgz",
@@ -2211,11 +2229,27 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.7.2.tgz",
       "integrity": "sha512-kkIqi2+oZ7YCLbZbrhOGxPA/HuWpfvzRUxbD75SHqwxl9fZVWSLQhOUl72GEpAuEt4MeCEguKpMX100oDN3MQA=="
     },
+    "babel-plugin-styled-components": {
+      "version": "1.10.6",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz",
+      "integrity": "sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
     "babel-plugin-syntax-dynamic-import": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz",
       "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo="
     },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -3173,6 +3207,11 @@
         }
       }
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -3581,6 +3620,14 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
       "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ=="
     },
+    "comment-json": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/comment-json/-/comment-json-1.1.3.tgz",
+      "integrity": "sha1-aYbDMw/uDEyeAMI5jNYa+l2PI54=",
+      "requires": {
+        "json-parser": "^1.0.0"
+      }
+    },
     "common-tags": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz",
@@ -4005,6 +4052,11 @@
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",
       "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -4121,6 +4173,23 @@
         }
       }
     },
+    "css-to-react-native": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.1.tgz",
+      "integrity": "sha512-yO+oEx1Lf+hDKasqQRVrAvzMCz825Huh1VMlEEDlRWyAhFb/FWb6I0KpEF1PkyKQ7NEdcx9d5M2ZEWgJAsgPvQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        }
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.33",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.33.tgz",
@@ -7310,6 +7379,14 @@
         }
       }
     },
+    "gatsby-plugin-styled-components": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-styled-components/-/gatsby-plugin-styled-components-3.1.2.tgz",
+      "integrity": "sha512-9MjGXl5ddN2L7jKlSjrobtxbR1gIIpBOmFcfkmNPdL/7rMUkWR6bLmAQ6fUPGCIwTLyvYsNjBZhtAwhUY+NTBw==",
+      "requires": {
+        "@babel/runtime": "^7.0.0"
+      }
+    },
     "gatsby-plugin-typescript": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.1.2.tgz",
@@ -7340,6 +7417,21 @@
         "unist-util-visit": "^1.3.0"
       }
     },
+    "gatsby-remark-vscode": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/gatsby-remark-vscode/-/gatsby-remark-vscode-1.0.6.tgz",
+      "integrity": "sha512-X3QhB9wZlFkdhtPLooH8DdxwcepL52h1mEN3MM6se1iKVZOM9W0JYExsinegcdrsbc/2c3QiZKQNb1fw9CUvEQ==",
+      "requires": {
+        "comment-json": "^1.1.3",
+        "decompress": "^4.2.0",
+        "lodash.escape": "^4.0.1",
+        "lodash.uniq": "^4.5.0",
+        "oniguruma": "^7.2.0",
+        "plist": "^3.0.1",
+        "unist-util-visit": "^1.4.0",
+        "vscode-textmate": "^4.1.0"
+      }
+    },
     "gatsby-source-filesystem": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-2.1.6.tgz",
@@ -9211,6 +9303,11 @@
         "is-invalid-path": "^0.1.0"
       }
     },
+    "is-what": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.2.4.tgz",
+      "integrity": "sha512-0awkPsfVd85bYStP99EqLxKvhc5SiE70hSZCPxJN2SYZ5d+IkX+r1Ri0qnPWPnuRVFrqrEnI3JgFN3yrGtjXaw=="
+    },
     "is-whitespace-character": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.3.tgz",
@@ -9366,6 +9463,21 @@
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
     },
+    "json-parser": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/json-parser/-/json-parser-1.1.5.tgz",
+      "integrity": "sha1-5i7FJh0aal/CDoEqMgdAxtkAVnc=",
+      "requires": {
+        "esprima": "^2.7.0"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "2.7.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz",
+          "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE="
+        }
+      }
+    },
     "json-schema": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
@@ -9630,6 +9742,11 @@
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
     },
+    "lodash.escape": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
+      "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg="
+    },
     "lodash.escaperegexp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz",
@@ -10029,6 +10146,11 @@
         "mimic-fn": "^1.0.0"
       }
     },
+    "memoize-one": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.5.tgz",
+      "integrity": "sha512-ey6EpYv0tEaIbM/nTDOpHciXUvd+ackQrJgEzBwemhZZIWZjcyodqEcrmqDy2BKRTM3a65kKBV4WtLXJDt26SQ=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -10123,6 +10245,14 @@
         }
       }
     },
+    "merge-anything": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.0.tgz",
+      "integrity": "sha512-MhJcPOEcDUIbwU0LnEfx5S9s9dfQ/KPu4g2UA5T5G1LRKS0XmpDvJ9+UUfTkfhge+nA1gStE4tJAvx6lXLs+rg==",
+      "requires": {
+        "is-what": "^3.2.4"
+      }
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -10958,6 +11088,14 @@
         "mimic-fn": "^1.0.0"
       }
     },
+    "oniguruma": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/oniguruma/-/oniguruma-7.2.0.tgz",
+      "integrity": "sha512-bh+ZLdykY1sdIx8jBp2zpLbVFDBc3XmKH4Ceo2lijNaN1WhEqtnpqFlmtCbRuDB17nJ58RAUStVwfW8e8uEbnA==",
+      "requires": {
+        "nan": "^2.14.0"
+      }
+    },
     "opentracing": {
       "version": "0.14.4",
       "resolved": "https://registry.npmjs.org/opentracing/-/opentracing-0.14.4.tgz",
@@ -11404,6 +11542,11 @@
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
       "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA="
     },
+    "perfect-scrollbar": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz",
+      "integrity": "sha512-/2Sk/khljhdrsamjJYS5NjrH+GKEHEwh7zFSiYyxROyYKagkE4kSn2zDQDRTOMo8mpT2jikxx6yI1dG7lNP/hw=="
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -11493,6 +11636,16 @@
         }
       }
     },
+    "plist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/plist/-/plist-3.0.1.tgz",
+      "integrity": "sha512-GpgvHHocGRyQm74b6FWEZZVRroHKE1I0/BTjAmySaohK+cUn+hZpbqXkc3KWgW3gQYkqcQej35FohcT0FRlkRQ==",
+      "requires": {
+        "base64-js": "^1.2.3",
+        "xmlbuilder": "^9.0.7",
+        "xmldom": "0.1.x"
+      }
+    },
     "pngjs": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
@@ -12839,6 +12992,15 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-perfect-scrollbar": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/react-perfect-scrollbar/-/react-perfect-scrollbar-1.5.3.tgz",
+      "integrity": "sha512-2fVqbDJgOb1siCCJozGbv22cAHnh6TI9HFHRpM0lBJTPPM0ajgmsU75mBnI3k0ndryo+JiwUbLKACrurx1BjBw==",
+      "requires": {
+        "perfect-scrollbar": "^1.4.0",
+        "prop-types": "^15.6.1"
+      }
+    },
     "react-reconciler": {
       "version": "0.20.4",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.20.4.tgz",
@@ -14826,6 +14988,26 @@
         "inline-style-parser": "0.1.1"
       }
     },
+    "styled-components": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.3.2.tgz",
+      "integrity": "sha512-NppHzIFavZ3TsIU3R1omtddJ0Bv1+j50AKh3ZWyXHuFvJq1I8qkQ5mZ7uQgD89Y8zJNx2qRo6RqAH1BmoVafHw==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.0.0",
+        "@emotion/is-prop-valid": "^0.8.1",
+        "@emotion/unitless": "^0.7.0",
+        "babel-plugin-styled-components": ">= 1",
+        "css-to-react-native": "^2.2.2",
+        "memoize-one": "^5.0.0",
+        "merge-anything": "^2.2.4",
+        "prop-types": "^15.5.4",
+        "react-is": "^16.6.0",
+        "stylis": "^3.5.0",
+        "stylis-rule-sheet": "^0.0.10",
+        "supports-color": "^5.5.0"
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -14858,6 +15040,16 @@
         }
       }
     },
+    "stylis": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
+      "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
+    },
+    "stylis-rule-sheet": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
+      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -15912,6 +16104,14 @@
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.0.tgz",
       "integrity": "sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw=="
     },
+    "vscode-textmate": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-4.2.2.tgz",
+      "integrity": "sha512-1U4ih0E/KP1zNK/EbpUqyYtI7PY+Ccd2nDGTtiMR/UalLFnmaYkwoWhN1oI7B91ptBN8NdVwWuvyUnvJAulCUw==",
+      "requires": {
+        "oniguruma": "^7.2.0"
+      }
+    },
     "warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
@@ -16745,6 +16945,11 @@
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
       "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0="
     },
+    "xmldom": {
+      "version": "0.1.27",
+      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.27.tgz",
+      "integrity": "sha1-1QH5ezvbQDr4757MIFcxh6rawOk="
+    },
     "xmlhttprequest-ssl": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",

package.json

@@ -6,6 +6,7 @@
   "author": "TPH",
   "dependencies": {
     "axios": "^0.19.0",
+    "babel-plugin-styled-components": "^1.10.6",
     "gatsby": "^2.13.39",
     "gatsby-image": "^2.2.6",
     "gatsby-plugin-manifest": "^2.2.4",
@@ -13,8 +14,10 @@
     "gatsby-plugin-react-helmet": "^3.1.2",
     "gatsby-plugin-sass": "^2.1.3",
     "gatsby-plugin-sharp": "^2.2.9",
+    "gatsby-plugin-styled-components": "^3.1.2",
     "gatsby-plugin-typescript": "^2.1.2",
     "gatsby-remark-prismjs": "^3.3.3",
+    "gatsby-remark-vscode": "^1.0.6",
     "gatsby-source-filesystem": "^2.1.6",
     "gatsby-transformer-remark": "^2.6.9",
     "gatsby-transformer-sharp": "^2.2.4",
@@ -24,7 +27,9 @@
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-helmet": "^5.2.1"
+    "react-helmet": "^5.2.1",
+    "react-perfect-scrollbar": "^1.5.3",
+    "styled-components": "^4.3.2"
   },
   "devDependencies": {
     "prettier": "^1.18.2"

src/components/Layout/index.tsx

@@ -5,15 +5,16 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import React from "react"
+import React, { PropsWithChildren } from "react"
-import PropTypes from "prop-types"
 import { useStaticQuery, graphql } from "gatsby"
 
-import Header from "./header"
+import Navbar from "../Navbar"
 import "./layout.scss"
-// import "prismjs/plugins/line-numbers/prism-line-numbers.css";
+import { MainContent } from "./styles";
+import Scrollbar from "react-perfect-scrollbar"
+import "react-perfect-scrollbar/dist/css/styles.css";
 
-const Layout = ({ children }) => {
+const Layout = ({ children }: PropsWithChildren<{}>) => {
   const data = useStaticQuery(graphql`
     query SiteTitleQuery {
       site {
@@ -25,8 +26,8 @@ const Layout = ({ children }) => {
   `)
 
   return (
-    <>
+    <Scrollbar>
-      <Header siteTitle={data.site.siteMetadata.title} />
+      <Navbar siteTitle={data.site.siteMetadata.title} />
       <div
         style={{
           margin: `0 auto`,
@@ -35,19 +36,15 @@ const Layout = ({ children }) => {
           paddingTop: 0,
         }}
       >
-        <main>{children}</main>
+        <MainContent>{children}</MainContent>
         <footer>
           © {new Date().getFullYear()}, Built with
           {` `}
           <a href="https://www.gatsbyjs.org">Gatsby</a>
         </footer>
       </div>
-    </>
+    </Scrollbar>
   )
 }
 
-Layout.propTypes = {
-  children: PropTypes.node.isRequired,
-}
-
 export default Layout

src/components/Layout/styles.tsx

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const MainContent = styled.main`
+  padding: 2.5em 0;
+`;

src/components/Navbar/index.tsx

@@ -1,15 +1,12 @@
-import { Link } from "gatsby"
-import PropTypes from "prop-types"
-import React from "react"
-import icon from "./icon.png"
 
-const Header = ({ siteTitle }) => (
+import { Link } from "gatsby";
-  <header
+import PropTypes from "prop-types";
-    style={{
+import React from "react";
-      background: `#ba1a2e`,
+import icon from "./icon.png";
-      marginBottom: `1.45rem`,
+import { HeaderWrapper } from "./styles";
-    }}
+
-  >
+const Navbar = ({ siteTitle }) => (
+  <HeaderWrapper>
     <div
       style={{
         margin: `0 auto`,
@@ -18,12 +15,11 @@ const Header = ({ siteTitle }) => (
       }}
     >
       <div style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
-        <img src={icon} style={{ width: "70px" }} />
+        {/* <img src={icon} style={{ width: "70px" }} /> */}
         <h1 style={{ margin: 0 }}>
           <Link
             to="/"
             style={{
-              paddingLeft: 25,
               color: `white`,
               textDecoration: `none`,
             }}
@@ -34,15 +30,15 @@ const Header = ({ siteTitle }) => (
       </div>
     </div>
 
-  </header >
+  </HeaderWrapper>
 )
 
-Header.propTypes = {
+Navbar.propTypes = {
   siteTitle: PropTypes.string,
 }
 
-Header.defaultProps = {
+Navbar.defaultProps = {
   siteTitle: ``,
 }
 
-export default Header
+export default Navbar;

src/components/Navbar/styles.tsx

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const HeaderWrapper = styled.header`
+  background: #ba1a2e;
+  marginBottom: 1.45rem;
+`;

src/components/SEO/index.tsx

@@ -1,16 +1,16 @@
-/**
+import * as React from "react"
- * SEO component that queries for data with
- *  Gatsby's useStaticQuery React hook
- *
- * See: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
-import React from "react"
 import PropTypes from "prop-types"
 import Helmet from "react-helmet"
 import { useStaticQuery, graphql } from "gatsby"
 
-function SEO({ description, lang, meta, title }) {
+interface SEOProps {
+  readonly description: string;
+  readonly lang: string;
+  readonly meta: object[];
+  readonly title: string;
+}
+
+const SEO = ({ description = "", lang = "en", meta = [], title }: SEOProps) => {
   const { site } = useStaticQuery(
     graphql`
       query {
@@ -72,17 +72,4 @@ function SEO({ description, lang, meta, title }) {
   )
 }
 
-SEO.defaultProps = {
-  lang: `en`,
-  meta: [],
-  description: ``,
-}
-
-SEO.propTypes = {
-  description: PropTypes.string,
-  lang: PropTypes.string,
-  meta: PropTypes.arrayOf(PropTypes.object),
-  title: PropTypes.string.isRequired,
-}
-
 export default SEO

src/components/image.js

@@ -1,32 +0,0 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
-
-/*
- * This component is built using `gatsby-image` to automatically serve optimized
- * images with lazy loading and reduced file sizes. The image is loaded using a
- * `useStaticQuery`, which allows us to load the image from directly within this
- * component, rather than having to pass the image data down from pages.
- *
- * For more information, see the docs:
- * - `gatsby-image`: https://gatsby.dev/gatsby-image
- * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
-const Image = () => {
-  const data = useStaticQuery(graphql`
-    query {
-      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
-        childImageSharp {
-          fluid(maxWidth: 300) {
-            ...GatsbyImageSharpFluid
-          }
-        }
-      }
-    }
-  `)
-
-  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
-}
-
-export default Image

src/content/docs/javascript/simplifying-promises.md

@@ -9,7 +9,7 @@ date: "2019/07/26"
 
 The first naive attempt, using new Promise for something that already returns a promise.
 
-```javascript
+```js
 function doAsync(number) {
   return new Promise(function(resolve, reject) {
     doDatabase().then(function(dbResult) {

src/pages/404.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 
-import Layout from "../components/layout"
+import Layout from "../components/Layout"
-import SEO from "../components/seo"
+import SEO from "../components/SEO"
 
 const NotFoundPage = () => (
   <Layout>

src/pages/index.tsx

@@ -1,9 +1,8 @@
 import React from "react"
 import { Link } from "gatsby"
 
-import Layout from "../components/layout"
+import Layout from "../components/Layout"
-import Image from "../components/image"
+import SEO from "../components/SEO"
-import SEO from "../components/seo"
 
 const IndexPage = () => (
   <Layout>
@@ -12,7 +11,6 @@ const IndexPage = () => (
     <p>Welcome to your new Gatsby site.</p>
     <p>Now go build something great.</p>
     <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
-      <Image />
     </div>
     <Link to="/page-2/">Go to page 2</Link>
   </Layout>

src/pages/page-2.js

@@ -1,16 +0,0 @@
-import React from "react"
-import { Link } from "gatsby"
-
-import Layout from "../components/layout"
-import SEO from "../components/seo"
-
-const SecondPage = () => (
-  <Layout>
-    <SEO title="Page two" />
-    <h1>Hi from the second page</h1>
-    <p>Welcome to page 2</p>
-    <Link to="/">Go back to the homepage</Link>
-  </Layout>
-)
-
-export default SecondPage

src/templates/languagePost.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { graphql } from "gatsby";
-import Layout from "../components/layout";
+import Layout from "../components/Layout";
 
 const LanguagePost = ({ data }) => {
   const { html } = data.file.post;