From 69fc1a3dbde8f113abeaa1b3bcc7bc66544ab3de Mon Sep 17 00:00:00 2001 From: Xetera Date: Fri, 26 Jul 2019 15:27:27 -0700 Subject: [PATCH] cleaned up structure, added styled components --- gatsby-browser.js | 6 +- gatsby-config.js | 10 +- package-lock.json | 205 ++++++++++++++++++ package.json | 7 +- .../{layout.js => Layout/index.tsx} | 23 +- src/components/{ => Layout}/layout.scss | 0 src/components/Layout/styles.tsx | 5 + src/components/{ => Navbar}/icon.png | Bin .../{header.js => Navbar/index.tsx} | 30 ++- src/components/Navbar/styles.tsx | 6 + src/components/{seo.js => SEO/index.tsx} | 31 +-- src/components/image.js | 32 --- .../simplifying-promises.md | 2 +- src/pages/404.tsx | 4 +- src/pages/index.tsx | 6 +- src/pages/page-2.js | 16 -- src/templates/languagePost.tsx | 2 +- 17 files changed, 265 insertions(+), 120 deletions(-) rename src/components/{layout.js => Layout/index.tsx} (64%) rename src/components/{ => Layout}/layout.scss (100%) create mode 100644 src/components/Layout/styles.tsx rename src/components/{ => Navbar}/icon.png (100%) rename src/components/{header.js => Navbar/index.tsx} (56%) create mode 100644 src/components/Navbar/styles.tsx rename src/components/{seo.js => SEO/index.tsx} (74%) delete mode 100644 src/components/image.js rename src/content/docs/{js => javascript}/simplifying-promises.md (99%) delete mode 100644 src/pages/page-2.js diff --git a/gatsby-browser.js b/gatsby-browser.js index 3eef212..71a3267 100644 --- a/gatsby-browser.js +++ b/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-tomorrow.css"); -require("prismjs/plugins/line-numbers/prism-line-numbers.css"); +// require("prismjs/themes/prism.css"); +// require("prismjs/themes/prism-tomorrow.css"); +// require("prismjs/plugins/line-numbers/prism-line-numbers.css"); diff --git a/gatsby-config.js b/gatsby-config.js index c5abe86..428ad8e 100644 --- a/gatsby-config.js +++ b/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: [ - { - resolve: `gatsby-remark-prismjs`, - options: { - classPrefix: "" - } - } - ], + plugins: [`gatsby-remark-vscode`], }, { resolve: `gatsby-source-filesystem`, diff --git a/package-lock.json b/package-lock.json index 5905210..57eec5d 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 767511e..1435da8 100644 --- a/package.json +++ b/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" diff --git a/src/components/layout.js b/src/components/Layout/index.tsx similarity index 64% rename from src/components/layout.js rename to src/components/Layout/index.tsx index b149206..52359df 100644 --- a/src/components/layout.js +++ b/src/components/Layout/index.tsx @@ -5,15 +5,16 @@ * See: https://www.gatsbyjs.org/docs/use-static-query/ */ -import React from "react" -import PropTypes from "prop-types" +import React, { PropsWithChildren } from "react" 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 ( - <> -
+ +
{ paddingTop: 0, }} > -
{children}
+ {children}
© {new Date().getFullYear()}, Built with {` `} Gatsby
- + ) } -Layout.propTypes = { - children: PropTypes.node.isRequired, -} - export default Layout diff --git a/src/components/layout.scss b/src/components/Layout/layout.scss similarity index 100% rename from src/components/layout.scss rename to src/components/Layout/layout.scss diff --git a/src/components/Layout/styles.tsx b/src/components/Layout/styles.tsx new file mode 100644 index 0000000..ce77c09 --- /dev/null +++ b/src/components/Layout/styles.tsx @@ -0,0 +1,5 @@ +import styled from "styled-components"; + +export const MainContent = styled.main` + padding: 2.5em 0; +`; diff --git a/src/components/icon.png b/src/components/Navbar/icon.png similarity index 100% rename from src/components/icon.png rename to src/components/Navbar/icon.png diff --git a/src/components/header.js b/src/components/Navbar/index.tsx similarity index 56% rename from src/components/header.js rename to src/components/Navbar/index.tsx index 8a1edf0..dd66f99 100644 --- a/src/components/header.js +++ b/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"; +import PropTypes from "prop-types"; +import React from "react"; +import icon from "./icon.png"; +import { HeaderWrapper } from "./styles"; + +const Navbar = ({ siteTitle }) => ( +
( }} >
- + {/* */}

(

-
+ ) -Header.propTypes = { +Navbar.propTypes = { siteTitle: PropTypes.string, } -Header.defaultProps = { +Navbar.defaultProps = { siteTitle: ``, } -export default Header +export default Navbar; \ No newline at end of file diff --git a/src/components/Navbar/styles.tsx b/src/components/Navbar/styles.tsx new file mode 100644 index 0000000..f8812d3 --- /dev/null +++ b/src/components/Navbar/styles.tsx @@ -0,0 +1,6 @@ +import styled from "styled-components"; + +export const HeaderWrapper = styled.header` + background: #ba1a2e; + marginBottom: 1.45rem; +`; \ No newline at end of file diff --git a/src/components/seo.js b/src/components/SEO/index.tsx similarity index 74% rename from src/components/seo.js rename to src/components/SEO/index.tsx index e15f599..db13b29 100644 --- a/src/components/seo.js +++ b/src/components/SEO/index.tsx @@ -1,16 +1,16 @@ -/** - * 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 * as 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 diff --git a/src/components/image.js b/src/components/image.js deleted file mode 100644 index e61edb6..0000000 --- a/src/components/image.js +++ /dev/null @@ -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 -} - -export default Image diff --git a/src/content/docs/js/simplifying-promises.md b/src/content/docs/javascript/simplifying-promises.md similarity index 99% rename from src/content/docs/js/simplifying-promises.md rename to src/content/docs/javascript/simplifying-promises.md index 514e921..10a844b 100644 --- a/src/content/docs/js/simplifying-promises.md +++ b/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) { diff --git a/src/pages/404.tsx b/src/pages/404.tsx index bc4c31d..5d1fa25 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,7 +1,7 @@ import React from "react" -import Layout from "../components/layout" -import SEO from "../components/seo" +import Layout from "../components/Layout" +import SEO from "../components/SEO" const NotFoundPage = () => ( diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7eb6257..e8c1021 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,9 +1,8 @@ import React from "react" import { Link } from "gatsby" -import Layout from "../components/layout" -import Image from "../components/image" -import SEO from "../components/seo" +import Layout from "../components/Layout" +import SEO from "../components/SEO" const IndexPage = () => ( @@ -12,7 +11,6 @@ const IndexPage = () => (

Welcome to your new Gatsby site.

Now go build something great.

-
Go to page 2 diff --git a/src/pages/page-2.js b/src/pages/page-2.js deleted file mode 100644 index 666c23e..0000000 --- a/src/pages/page-2.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react" -import { Link } from "gatsby" - -import Layout from "../components/layout" -import SEO from "../components/seo" - -const SecondPage = () => ( - - -

Hi from the second page

-

Welcome to page 2

- Go back to the homepage - -) - -export default SecondPage diff --git a/src/templates/languagePost.tsx b/src/templates/languagePost.tsx index 34dde76..fa52e0e 100644 --- a/src/templates/languagePost.tsx +++ b/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;