refactor(starter): upgrade to new version of gatsby

.dockerignore

@@ -1,4 +0,0 @@
-.git
-node_modules
-npm-debug.log
-yarn-error.log

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -1,3 +1,4 @@
-/flow-typed/*
+*.*
-/public/*
+!*.ts
-/node_modules/*
+!*.tsx
+/public/

.eslintrc

@@ -0,0 +1,74 @@
+{
+  "env": {
+    "node": true,
+    "browser": true,
+    "jasmine": true,
+    "jest/globals": true
+  },
+  "extends": [
+    "plugin:import/typescript",
+    "plugin:import/errors",
+    "airbnb-typescript",
+    "@alxshelepenok/eslint-config",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "plugins": [
+    "import",
+    "react",
+    "jest",
+    "@typescript-eslint",
+    "simple-import-sort"
+  ],
+  "rules": {
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": [
+          "**/*.test.ts",
+          "**/*.test.tsx",
+          "**/internal/**/*.ts"
+        ]
+      }
+    ],
+    "import/order": ["off"],
+    "import/no-internal-modules": ["off"],
+    "import/no-named-as-default": ["off"],
+    "import/prefer-default-export": ["off"],
+    "sort-keys": ["off"],
+    "sort-imports": ["off"],
+    "no-restricted-globals": ["off"],
+    "@typescript-eslint/no-unused-vars": ["off"],
+    "@typescript-eslint/no-use-before-define": ["off"],
+    "@typescript-eslint/quotes": ["error", "double"],
+    "@typescript-eslint/naming-convention": ["error", {
+      "format": ["camelCase", "UPPER_CASE", "PascalCase"],
+      "selector": "parameter",
+      "leadingUnderscore": "allow"
+    }],
+    "react/static-property-placement": ["off"],
+    "react/prop-types": ["off"],
+    "simple-import-sort/imports": [
+      "error",
+      {
+        "groups": [
+          ["react"],
+          ["^\\u0000"],
+          ["^@?\\w"],
+          ["^[^. ]"],
+          ["^\\."],
+          ["^(images|!!raw-loader)"],
+          ["w*(w*.*css)"]
+        ]
+      }
+    ]
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {}
+    }
+  }
+}

.eslintrc.json

@@ -1,65 +0,0 @@
-{
-    "parser": "babel-eslint",
-    "extends": "airbnb-base",
-    "env": {
-      "browser": true,
-      "node": true,
-      "es6": true,
-      "jest/globals": true
-    },
-    "plugins": [
-        "react",
-        "jest",
-        "jsx-a11y",
-        "import"
-    ],
-    "globals": {
-        "graphql": true
-    },
-    "rules": {
-      "comma-dangle": 0,
-      "import/imports-first": 0,
-      "global-require": 0,
-      "class-methods-use-this": 0,
-      "arrow-body-style": [
-        2,
-        "as-needed"
-      ],
-      "arrow-parens": [
-        "error",
-        "always"
-      ],
-      "import/no-extraneous-dependencies": [
-        "error",
-        {
-          "devDependencies": true
-        }
-      ],
-      "no-debugger": 0,
-      "dot-notation": 0,
-      "no-console": 0,
-      "new-cap": 0,
-      "strict": 0,
-      "no-param-reassign": [
-        "error",
-        {
-          "props": false
-        }
-      ],
-      "no-underscore-dangle": 0,
-      "no-use-before-define": 0,
-      "eol-last": 0,
-      "no-shadow": 0,
-      "quotes": [
-        2,
-        "single"
-      ],
-      "jsx-quotes": [
-        0,
-        "prefer-single"
-      ],
-      "react/jsx-no-undef": 1,
-      "react/jsx-uses-react": 1,
-      "react/jsx-uses-vars": 1
-    }
-}

.flowconfig

@@ -1,17 +0,0 @@
-[ignore]
-.*/node_modules/*
-.*/public/*
-
-[libs]
-flow-typed
-
-[options]
-module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flow/css-module-stub.js'
-server.max_workers=1
-
-[strict]
-nonstrict-import
-unclear-type
-untyped-type-import
-unsafe-getters-setters
-sketchy-null

.gitattributes

@@ -1,6 +0,0 @@
-/.github export-ignore
-/.gitattributes export-ignore
-/.editorconfig export-ignore
-/.travis.yml export-ignore
-**/*.js.snap export-ignore
-/static/css export-ignore

.github/workflows/nodejs.yml

@@ -1,32 +0,0 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-name: Node.js CI
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    branches: [ master ]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [12.x]
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm install -g yarn
-    - run: yarn install --frozen-lockfile
-    - run: yarn run lint
-    - run: yarn run test --runInBand --no-cache
-      env:
-        CI: true

.gitignore

@@ -1,8 +1,38 @@
-node_modules/
+# logs
-.cache/
+logs
-public/
+*.log
-npm-debug.log
+
-.eslintcache
+# runtime data
-.gatsby-context.js
+.DS_Store
+*.seed
+*.pid
+pids
+
+# editors
 .idea
-gatsby-starter-lumen.iml
+.vscode
+
+# build
+public
+
+# directory for instrumented libs generated by jscoverage
+lib-cov
+
+# coverage directory used by tools like istanbul
+coverage
+
+# swc
+.swc
+
+# node-waf configuration
+.lock-wscript
+
+# eslint cache
+.eslintcache
+
+# dependency directory
+node_modules
+
+# only apps should have lockfiles
+npm-shrinkwrap.json
+yarn.lock

.postcssrc

@@ -0,0 +1,6 @@
+{
+  "plugins": {
+    "autoprefixer": {},
+    "lost": {}
+  }
+}

.prettierignore

@@ -0,0 +1,11 @@
+*.*
+!*.scss
+!*.json
+!*.md
+!*.mdx
+!*.ts
+!*.tsx
+!*.yml
+!*.js
+/coverage/
+/public/

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "arrowParens": "avoid",
+  "trailingComma": "all"
+}

.stylelintignore

@@ -0,0 +1,4 @@
+*.*
+!*.css
+!*.scss
+/public/

.stylelintrc

@@ -1,25 +1,21 @@
 {
+  "defaultSeverity": "error",
   "extends": "stylelint-config-recommended-scss",
+  "plugins": ["stylelint-order"],
   "rules": {
     "color-named": "never",
     "font-family-name-quotes": "always-where-required",
+    "font-family-no-missing-generic-family-keyword": null,
     "font-weight-notation": "named-where-possible",
     "function-url-no-scheme-relative": true,
     "function-url-quotes": "always",
-    "string-quotes": "single",
+    "max-empty-lines": 1,
-    "value-keyword-case": "lower",
-    "unit-blacklist": [],
-    "max-empty-lines": 2,
     "no-descending-specificity": true,
     "no-duplicate-selectors": true,
-    "font-family-no-missing-generic-family-keyword": null,
+    "order/order": ["custom-properties", "declarations"],
-    "property-no-unknown": [true, {
+    "order/properties-alphabetical-order": true,
-      "ignoreProperties": ["/^lost-/"]
+    "property-no-unknown": [true, { "ignoreProperties": ["/^lost-/"] }],
-    }]
+    "string-quotes": "double",
-  },
+    "value-keyword-case": "lower"
-  "ignoreFiles": [
+  }
-    "node_modules/*",
-    "src/assets/**"
-  ],
-  "defaultSeverity": "error"
 }

.travis.yml

@@ -1,14 +0,0 @@
-language: node_js
-node_js:
-  - '10'
-install:
-  - npm install -g codecov
-script:
-  - yarn install
-  - yarn lint
-  - yarn test:coverage --runInBand --no-cache
-  - yarn test --runInBand --no-cache
-  - codecov
-cache:
-  directories:
-    - node_modules

CHANGELOG.md

@@ -1,45 +1,60 @@
 # Change Log
+
 All notable changes to this project will be documented in this file.
 
+## [4.0.0] - 2021-10-24
+
+- Remove Netlify CMS
+- Upgrade to Gatsby 4.0
+
 ## [3.0.3] - 2019-07-25
+
 ### Added
-- [Pull #321](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/321): Add title to <Icon /> for accessibility
+
-- [Pull #319](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/319): Fixed invalid Telegram contact url
+- [Pull #321](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/321) - Add title to <Icon /> for accessibility
-- [Pull #314](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/314): Hides the contact icon if empty in config
+- [Pull #319](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/319) - Fixed invalid Telegram contact url
-- [Pull #295](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/295): Add external link defaults for markdown
+- [Pull #314](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/314) - Hides the contact icon if empty in config
-- [Pull #283](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/283): Add pathPrefix configuration
+- [Pull #295](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/295) - Add external link defaults for markdown
-- [Pull #231](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/231): Add Twitter Card
+- [Pull #283](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/283) - Add pathPrefix configuration
-- [Pull #210](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/210): Bug fixes
+- [Pull #231](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/231) - Add Twitter Card
-- [Pull #181](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/181): Add More Flow typings
+- [Pull #210](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/210) - Bug fixes
-- [Pull #178](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/178): Integrate Flow typing
+- [Pull #181](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/181) - Add More Flow typings
+- [Pull #178](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/178) - Integrate Flow typing
 
 ## [3.0.1] - 2019-03-03
+
 ### Added
-- [Pull #118](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/118): feat: add gatsby-remark-autolink-headers support
+
-- [Pull #99](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/99): Add lang="en" to <html>
+- [Pull #118](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/118) - feat: add gatsby-remark-autolink-headers support
-- [Pull #95](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/95): Fixed url prop bug for <ReactDisqusComments />
+- [Pull #99](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/99) - Add lang="en" to <html>
-- [Pull #94](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/94): Add isIndex prop to Sidebar in index-template
+- [Pull #95](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/95) - Fixed url prop bug for <ReactDisqusComments />
-- [Pull #93](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/93): Upgrade React version to 16.8.1
+- [Pull #94](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/94) - Add isIndex prop to Sidebar in index-template
-- [Pull #89](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/89): Removed .gatsby-highlight selectors 
+- [Pull #93](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/93) - Upgrade React version to 16.8.1
+- [Pull #89](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/89) - Removed .gatsby-highlight selectors
 
 ## [3.0.0] - 2019-01-22
+
 - Heavy refactoring
 - Netlify CMS support
 - Pagination support
 - Reorganize content
 
 ## [2.0.4] - 2019-01-22
+
 ### Added
-- [Pull #78](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/78): Upgrade gatsby-remark-prismjs
+
-- [Pull #77](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/77): Add more service urls and tweak a layout
+- [Pull #78](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/78) - Upgrade gatsby-remark-prismjs
+- [Pull #77](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/77) - Add more service urls and tweak a layout
 
 ## [2.0.3] - 2018-11-09
+
 ### Added
-- [Pull #70](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/70): Refactor the React logic and introduce Fragment
+
-- [Pull #63](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/63): We want `yarn.lock` in git
+- [Pull #70](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/70) - Refactor the React logic and introduce Fragment
-- [Pull #56](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/56): Add Simple Netlify Deploy Support
+- [Pull #63](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/63) - We want `yarn.lock` in git
-- [Pull #55](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/55): Fix prefix-links error upon deploy
+- [Pull #56](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/56) - Add Simple Netlify Deploy Support
-- [Pull #54](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/54): Improve RSS channel defaults
+- [Pull #55](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/55) - Fix prefix-links error upon deploy
-- [Pull #51](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/51): Decouple the node side code and the browser side code
+- [Pull #54](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/54) - Improve RSS channel defaults
-- [Pull #50](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/50): Fixed two typos.
+- [Pull #51](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/51) - Decouple the node side code, and the browser side code
-- [Pull #49](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/49): Fix twitter link in post details
+- [Pull #50](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/50) - Fixed two typos.
+- [Pull #49](https://github.com/alxshelepenok/gatsby-starter-lumen/pull/49) - Fix twitter link in post details

CODE_OF_CONDUCT.md

@@ -3,7 +3,7 @@
 ## Our Pledge
 
 In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
+contributors and maintainers pledge to making participation in our project, and
 our community a harassment-free experience for everyone, regardless of age, body
 size, disability, ethnicity, sex characteristics, gender identity and expression,
 level of experience, education, socio-economic status, nationality, personal
@@ -14,21 +14,21 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
+- Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
+- Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
+- Gracefully accepting constructive criticism
-* Focusing on what is best for the community
+- Focusing on what is best for the community
-* Showing empathy towards other community members
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
+- The use of sexualized language or imagery and unwelcome sexual attention or
   advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
+- Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
+- Public or private harassment
-* Publishing others' private information, such as a physical or electronic
+- Publishing others' private information, such as a physical or electronic
   address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Our Responsibilities

CONTRIBUTING.md

@@ -11,7 +11,7 @@ Please note we have a code of conduct, please follow it in all your interactions
    build.
 2. Update the README.md with details of changes to the interface, this includes new environment
    variables, exposed ports, useful file locations and container parameters.
-3. Increase the version numbers in any examples files and the README.md to the new version that this
+3. Increase the version numbers in any examples files, and the README.md to the new version that this
    Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you
    do not have permission to do that, you may request the second reviewer to merge it for you.
@@ -21,7 +21,7 @@ Please note we have a code of conduct, please follow it in all your interactions
 ### Our Pledge
 
 In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
+contributors and maintainers pledge to making participation in our project, and
 our community a harassment-free experience for everyone, regardless of age, body
 size, disability, ethnicity, gender identity and expression, level of experience,
 nationality, personal appearance, race, religion, or sexual identity and
@@ -32,21 +32,21 @@ orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
+- Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
+- Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
+- Gracefully accepting constructive criticism
-* Focusing on what is best for the community
+- Focusing on what is best for the community
-* Showing empathy towards other community members
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
+- The use of sexualized language or imagery and unwelcome sexual attention or
-advances
+  advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
+- Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
+- Public or private harassment
-* Publishing others' private information, such as a physical or electronic
+- Publishing others' private information, such as a physical or electronic
   address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ### Our Responsibilities

Dockerfile.development

@@ -1,6 +0,0 @@
-FROM node:alpine
-
-EXPOSE 8000
-
-VOLUME /usr/src/app
-WORKDIR /usr/src/app

Dockerfile.production

@@ -1,21 +0,0 @@
-FROM node:alpine as builder
-
-RUN apk update && apk add --no-cache make git python3 autoconf g++ libc6-compat libjpeg-turbo-dev libpng-dev nasm libtool automake vips-dev
-
-WORKDIR /usr/src/app
-COPY . .
-
-RUN yarn install
-RUN yarn build
-RUN rm -rf ./src ./node_modules /usr/local/lib/node_modules /usr/local/share/.cache/yarn/
-RUN mkdir -p /run/nginx
-
-FROM nginx:alpine
-
-RUN rm -rf /usr/share/nginx/html/*
-
-COPY --from=builder /usr/src/app/public /usr/share/nginx/html
-
-EXPOSE 80
-
-CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -12,31 +12,33 @@
 </p>
 
 ## Table of contents
-+ [Features](http://github.com/alxshelepenok/gatsby-starter-lumen#features)
+
-+ [Web Performance Tests](http://github.com/alxshelepenok/gatsby-starter-lumen#web-performance-tests)
+- [Features](http://github.com/alxshelepenok/gatsby-starter-lumen#features)
-+ [Quick Start](http://github.com/alxshelepenok/gatsby-starter-lumen#quick-start)
+- [Web Performance Tests](http://github.com/alxshelepenok/gatsby-starter-lumen#web-performance-tests)
-+ [Deploy with Netlify](http://github.com/alxshelepenok/gatsby-starter-lumen#deploy-with-netlify)
+- [Quick Start](http://github.com/alxshelepenok/gatsby-starter-lumen#quick-start)
-+ [Folder Structure](http://github.com/alxshelepenok/gatsby-starter-lumen#folder-structure)
+- [Deploy with Netlify](http://github.com/alxshelepenok/gatsby-starter-lumen#deploy-with-netlify)
-+ [Sponsors](http://github.com/alxshelepenok/gatsby-starter-lumen#sponsors)
+- [Folder Structure](http://github.com/alxshelepenok/gatsby-starter-lumen#folder-structure)
-+ [Contributors](http://github.com/alxshelepenok/gatsby-starter-lumen#contributors)
+- [Sponsors](http://github.com/alxshelepenok/gatsby-starter-lumen#sponsors)
-+ [License](http://github.com/alxshelepenok/gatsby-starter-lumen#license)
+- [Contributors](http://github.com/alxshelepenok/gatsby-starter-lumen#contributors)
+- [License](http://github.com/alxshelepenok/gatsby-starter-lumen#license)
 
 ## Features
-+ [Lost Grid](http://lostgrid.org).
+
-+ [Modern font stack](https://bitsofco.de/the-new-system-font-stack).
+- [Lost Grid](http://lostgrid.org).
-+ Beautiful typography inspired by [matejlatin/Gutenberg](https://github.com/matejlatin/Gutenberg).
+- [Modern font stack](https://bitsofco.de/the-new-system-font-stack).
-+ Syntax highlighting in code blocks using [PrismJS](http://prismjs.com).
+- Beautiful typography inspired by [matejlatin/Gutenberg](https://github.com/matejlatin/Gutenberg).
-+ [Mobile-First](https://medium.com/@mrmrs_/mobile-first-css-48bc4cc3f60f) approach in development.
+- Syntax highlighting in code blocks using [PrismJS](http://prismjs.com).
-+ Archive organized by tags and categories.
+- [Mobile-First](https://medium.com/@mrmrs_/mobile-first-css-48bc4cc3f60f) approach in development.
-+ Pagination support.
+- Archive organized by tags and categories.
-+ [Netlify CMS](https://www.netlifycms.org) support.
+- Pagination support.
-+ Google Analytics.
+- Google Analytics.
-+ Disqus Comments.
+- Disqus Comments.
-+ [Flow](https://flow.org/) static type checking.
+- [Flow](https://flow.org/) static type checking.
 
 ## Web Performance Tests
-+ Lighthouse Report - [WebPageTest](https://www.webpagetest.org/result/190510_FE_3f2b13d0beed320f477467d433f56f43/)
+
-+ Visual Comparison - [WebPageTest](https://www.webpagetest.org/video/compare.php?tests=190510_KZ_1228c343ccf04148619a5d0b89a41f71,190510_RE_b3bfad442f32c690a9f420fe46025b8d,190510_RS_3b5f0bff2d95161351dc6934cadbf1cf,190510_SC_5c458c451941f81b12911ccf4171a817,190510_63_52d5edd8743773815fbacb2e9c66d228,190510_AS_741b29f5af5a6e54980d82826d7bb5bb)
+- Lighthouse Report - [WebPageTest](https://www.webpagetest.org/result/190510_FE_3f2b13d0beed320f477467d433f56f43/)
+- Visual Comparison - [WebPageTest](https://www.webpagetest.org/video/compare.php?tests=190510_KZ_1228c343ccf04148619a5d0b89a41f71,190510_RE_b3bfad442f32c690a9f420fe46025b8d,190510_RS_3b5f0bff2d95161351dc6934cadbf1cf,190510_SC_5c458c451941f81b12911ccf4171a817,190510_63_52d5edd8743773815fbacb2e9c66d228,190510_AS_741b29f5af5a6e54980d82826d7bb5bb)
 
 ## Quick Start
 
@@ -66,35 +68,21 @@ Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is
 
 Open the `blog` directory in your code editor of choice and edit `src/templates/index-template.js`. Save your changes and the browser will update in real time!
 
-## Deploy with Netlify
-
-[Netlify](https://netlify.com) CMS can run in any frontend web environment, but the quickest way to try it out is by running it on a pre-configured starter site with Netlify. Use the button below to build and deploy your own copy of the repository:
-
-<a href="https://app.netlify.com/start/deploy?repository=https://github.com/alxshelepenok/gatsby-starter-lumen" target="_blank"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a>
-
-After clicking that button, you’ll authenticate with GitHub and choose a repository name. Netlify will then automatically create a repository in your GitHub account with a copy of the files from the template. Next, it will build and deploy the new site on Netlify, bringing you to the site dashboard when the build is complete. Next, you’ll need to set up Netlify’s Identity service to authorize users to log in to the CMS.
-
-## Deploy to Github Pages
-
-To deploy to github pages, simply do the following:
-
-- Ensure that your `package.json` file correctly reflects where this repo lives
-- Change the `pathPrefix` in your `config.js`
-- Run the standard deploy command
-
 ```sh
 yarn deploy
 ```
 
-
 #### Access Locally
+
 ```
 $ git clone https://github.com/[GITHUB_USERNAME]/[REPO_NAME].git
 $ cd [REPO_NAME]
 $ yarn
 $ yarn develop
 ```
+
 To test the CMS locally, you'll need run a production build of the site:
+
 ```
 $ yarn build
 $ gatsby serve
@@ -144,32 +132,34 @@ $ gatsby serve
 Development efforts are supported by the sponsors. I'm very grateful for their donations, please check them out!
 
 | <a href="https://www.browserstack.com" target="_blank"><img width="250" src="https://gist.githubusercontent.com/alxshelepenok/94cbc6dc4a2cb8167ee188ddab33893a/raw/f869c9a67db7bfd5440a49178195efe811d8f7d8/browserstack.svg"></a> | <a href="https://sentry.io" target="_blank"><img width="250" src="https://gist.githubusercontent.com/alxshelepenok/1a74dbe123b2f7ad538f41c94e2da0a2/raw/aaeb3b38ef0873bae1f23f3605696b4e65362e67/sentry.svg"></a> |
-:---: |:---: |
+| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
 
 ## Contributors
+
 Thanks goes to these wonderful people!
 
-[<img alt="vzhou842" src="https://avatars3.githubusercontent.com/u/10209814?v=4&s=117" width="117">](https://github.com/vzhou842) |[<img alt="alehel" src="https://avatars2.githubusercontent.com/u/22277624?v=4&s=117" width="117">](https://github.com/alehel) |[<img alt="abisz" src="https://avatars3.githubusercontent.com/u/7287780?v=4&s=117" width="117">](https://github.com/abisz) |[<img alt="remi-bruguier" src="https://avatars0.githubusercontent.com/u/7031328?v=4&s=117" width="117">](https://github.com/remi-bruguier) |[<img alt="mariolopjr" src="https://avatars3.githubusercontent.com/u/2067324?v=4&s=117" width="117">](https://github.com/mariolopjr) |[<img alt="ihororlovskyi" src="https://avatars3.githubusercontent.com/u/7969737?v=4&s=117" width="117">](https://github.com/ihororlovskyi) |
+| [<img alt="vzhou842" src="https://avatars3.githubusercontent.com/u/10209814?v=4&s=117" width="117">](https://github.com/vzhou842) | [<img alt="alehel" src="https://avatars2.githubusercontent.com/u/22277624?v=4&s=117" width="117">](https://github.com/alehel) | [<img alt="abisz" src="https://avatars3.githubusercontent.com/u/7287780?v=4&s=117" width="117">](https://github.com/abisz) | [<img alt="remi-bruguier" src="https://avatars0.githubusercontent.com/u/7031328?v=4&s=117" width="117">](https://github.com/remi-bruguier) | [<img alt="mariolopjr" src="https://avatars3.githubusercontent.com/u/2067324?v=4&s=117" width="117">](https://github.com/mariolopjr) | [<img alt="ihororlovskyi" src="https://avatars3.githubusercontent.com/u/7969737?v=4&s=117" width="117">](https://github.com/ihororlovskyi) |
-:---: |:---: |:---: |:---: |:---: |:---: |
+| :-------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------: |
-[vzhou842](https://github.com/vzhou842) |[alehel](https://github.com/alehel) |[abisz](https://github.com/abisz) |[remi-bruguier](https://github.com/remi-bruguier) |[mariolopjr](https://github.com/mariolopjr) |[ihororlovskyi](https://github.com/ihororlovskyi) |
+|                                              [vzhou842](https://github.com/vzhou842)                                              |                                              [alehel](https://github.com/alehel)                                              |                                             [abisz](https://github.com/abisz)                                              |                                             [remi-bruguier](https://github.com/remi-bruguier)                                              |                                             [mariolopjr](https://github.com/mariolopjr)                                              |                                             [ihororlovskyi](https://github.com/ihororlovskyi)                                              |
 
-[<img alt="timbroder" src="https://avatars2.githubusercontent.com/u/121503?v=4&s=117" width="117">](https://github.com/timbroder) |[<img alt="vinnymac" src="https://avatars0.githubusercontent.com/u/1832781?v=4&s=117" width="117">](https://github.com/vinnymac) |[<img alt="yodahuang" src="https://avatars2.githubusercontent.com/u/11242657?v=4&s=117" width="117">](https://github.com/yodahuang) |[<img alt="axelclark" src="https://avatars1.githubusercontent.com/u/16856928?v=4&s=117" width="117">](https://github.com/axelclark) |[<img alt="BigTony666" src="https://avatars2.githubusercontent.com/u/29159357?v=4&s=117" width="117">](https://github.com/BigTony666) |[<img alt="stigrune" src="https://avatars0.githubusercontent.com/u/1052748?v=4&s=117" width="117">](https://github.com/stigrune) |
+| [<img alt="timbroder" src="https://avatars2.githubusercontent.com/u/121503?v=4&s=117" width="117">](https://github.com/timbroder) | [<img alt="vinnymac" src="https://avatars0.githubusercontent.com/u/1832781?v=4&s=117" width="117">](https://github.com/vinnymac) | [<img alt="yodahuang" src="https://avatars2.githubusercontent.com/u/11242657?v=4&s=117" width="117">](https://github.com/yodahuang) | [<img alt="axelclark" src="https://avatars1.githubusercontent.com/u/16856928?v=4&s=117" width="117">](https://github.com/axelclark) | [<img alt="BigTony666" src="https://avatars2.githubusercontent.com/u/29159357?v=4&s=117" width="117">](https://github.com/BigTony666) | [<img alt="stigrune" src="https://avatars0.githubusercontent.com/u/1052748?v=4&s=117" width="117">](https://github.com/stigrune) |
-:---: |:---: |:---: |:---: |:---: |:---: |
+| :-------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: |
-[timbroder](https://github.com/timbroder) |[vinnymac](https://github.com/vinnymac) |[yodahuang](https://github.com/yodahuang) |[axelclark](https://github.com/axelclark) |[BigTony666](https://github.com/BigTony666) |[stigrune](https://github.com/stigrune) |
+|                                             [timbroder](https://github.com/timbroder)                                             |                                             [vinnymac](https://github.com/vinnymac)                                              |                                              [yodahuang](https://github.com/yodahuang)                                              |                                              [axelclark](https://github.com/axelclark)                                              |                                              [BigTony666](https://github.com/BigTony666)                                              |                                             [stigrune](https://github.com/stigrune)                                              |
 
-[<img alt="ybbarng" src="https://avatars2.githubusercontent.com/u/1793950?v=4&s=117" width="117">](https://github.com/ybbarng) |[<img alt="marktani" src="https://avatars1.githubusercontent.com/u/1780597?v=4&s=117" width="117">](https://github.com/marktani) |[<img alt="concreted" src="https://avatars2.githubusercontent.com/u/4016897?v=4&s=117" width="117">](https://github.com/concreted) |[<img alt="chmac" src="https://avatars0.githubusercontent.com/u/690997?v=4&s=117" width="117">](https://github.com/chmac) |[<img alt="charandas" src="https://avatars2.githubusercontent.com/u/542168?v=4&s=117" width="117">](https://github.com/charandas) |[<img alt="marcelabomfim" src="https://avatars0.githubusercontent.com/u/6224547?v=4&s=117" width="117">](https://github.com/marcelabomfim) |
+| [<img alt="ybbarng" src="https://avatars2.githubusercontent.com/u/1793950?v=4&s=117" width="117">](https://github.com/ybbarng) | [<img alt="marktani" src="https://avatars1.githubusercontent.com/u/1780597?v=4&s=117" width="117">](https://github.com/marktani) | [<img alt="concreted" src="https://avatars2.githubusercontent.com/u/4016897?v=4&s=117" width="117">](https://github.com/concreted) | [<img alt="chmac" src="https://avatars0.githubusercontent.com/u/690997?v=4&s=117" width="117">](https://github.com/chmac) | [<img alt="charandas" src="https://avatars2.githubusercontent.com/u/542168?v=4&s=117" width="117">](https://github.com/charandas) | [<img alt="marcelabomfim" src="https://avatars0.githubusercontent.com/u/6224547?v=4&s=117" width="117">](https://github.com/marcelabomfim) |
-:---: |:---: |:---: |:---: |:---: |:---: |
+| :----------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------: |
-[ybbarng](https://github.com/ybbarng) |[marktani](https://github.com/marktani) |[concreted](https://github.com/concreted) |[chmac](https://github.com/chmac) |[charandas](https://github.com/charandas) |[marcelabomfim](https://github.com/marcelabomfim) |
+|                                             [ybbarng](https://github.com/ybbarng)                                              |                                             [marktani](https://github.com/marktani)                                              |                                             [concreted](https://github.com/concreted)                                              |                                             [chmac](https://github.com/chmac)                                             |                                             [charandas](https://github.com/charandas)                                             |                                             [marcelabomfim](https://github.com/marcelabomfim)                                              |
 
-[<img alt="zollillo" src="https://avatars3.githubusercontent.com/u/8833904?v=4&s=117" width="117">](https://github.com/zollillo) |[<img alt="codejet" src="https://avatars3.githubusercontent.com/u/802203?v=4&s=117" width="117">](https://github.com/codejet) |[<img alt="reed-jones" src="https://avatars0.githubusercontent.com/u/11511864?v=4&s=117" width="117">](https://github.com/reed-jones) |[<img alt="rtveitch" src="https://avatars3.githubusercontent.com/u/25228001?v=4&s=117" width="117">](https://github.com/rtveitch) |[<img alt="SayakaOno" src="https://avatars0.githubusercontent.com/u/33141219?v=4&s=117" width="117">](https://github.com/SayakaOno) |[<img alt="swapnilmishra" src="https://avatars2.githubusercontent.com/u/875450?v=4&s=117" width="117">](https://github.com/swapnilmishra) |
+| [<img alt="zollillo" src="https://avatars3.githubusercontent.com/u/8833904?v=4&s=117" width="117">](https://github.com/zollillo) | [<img alt="codejet" src="https://avatars3.githubusercontent.com/u/802203?v=4&s=117" width="117">](https://github.com/codejet) | [<img alt="reed-jones" src="https://avatars0.githubusercontent.com/u/11511864?v=4&s=117" width="117">](https://github.com/reed-jones) | [<img alt="rtveitch" src="https://avatars3.githubusercontent.com/u/25228001?v=4&s=117" width="117">](https://github.com/rtveitch) | [<img alt="SayakaOno" src="https://avatars0.githubusercontent.com/u/33141219?v=4&s=117" width="117">](https://github.com/SayakaOno) | [<img alt="swapnilmishra" src="https://avatars2.githubusercontent.com/u/875450?v=4&s=117" width="117">](https://github.com/swapnilmishra) |
-:---: |:---: |:---: |:---: |:---: |:---: |
+| :------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: |
-[zollillo](https://github.com/zollillo) |[codejet](https://github.com/codejet) |[reed-jones](https://github.com/reed-jones) |[rtveitch](https://github.com/rtveitch) |[SayakaOno](https://github.com/SayakaOno) |[swapnilmishra](https://github.com/swapnilmishra) |
+|                                             [zollillo](https://github.com/zollillo)                                              |                                             [codejet](https://github.com/codejet)                                             |                                              [reed-jones](https://github.com/reed-jones)                                              |                                              [rtveitch](https://github.com/rtveitch)                                              |                                              [SayakaOno](https://github.com/SayakaOno)                                              |                                             [swapnilmishra](https://github.com/swapnilmishra)                                             |
 
-[<img alt="vvasiloud" src="https://avatars1.githubusercontent.com/u/5891530?v=4&s=117" width="117">](https://github.com/vvasiloud) |[<img alt="vstoms" src="https://avatars2.githubusercontent.com/u/22646173?v=4&s=117" width="117">](https://github.com/vstoms) |[<img alt="wichopy" src="https://avatars2.githubusercontent.com/u/24414632?v=4&s=117" width="117">](https://github.com/wichopy) |[<img alt="yairmark" src="https://avatars1.githubusercontent.com/u/28291977?v=4&s=117" width="117">](https://github.com/yairmark) |
+| [<img alt="vvasiloud" src="https://avatars1.githubusercontent.com/u/5891530?v=4&s=117" width="117">](https://github.com/vvasiloud) | [<img alt="vstoms" src="https://avatars2.githubusercontent.com/u/22646173?v=4&s=117" width="117">](https://github.com/vstoms) | [<img alt="wichopy" src="https://avatars2.githubusercontent.com/u/24414632?v=4&s=117" width="117">](https://github.com/wichopy) | [<img alt="yairmark" src="https://avatars1.githubusercontent.com/u/28291977?v=4&s=117" width="117">](https://github.com/yairmark) |
-:---: |:---: |:---: |:---: |
+| :--------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: |
-[vvasiloud](https://github.com/vvasiloud) |[vstoms](https://github.com/vstoms) |[wichopy](https://github.com/wichopy) |[yairmark](https://github.com/yairmark) |
+|                                             [vvasiloud](https://github.com/vvasiloud)                                              |                                              [vstoms](https://github.com/vstoms)                                              |                                              [wichopy](https://github.com/wichopy)                                              |                                              [yairmark](https://github.com/yairmark)                                              |
 
 ## License
+
 The MIT License (MIT)
 
 Copyright (c) 2016-2021 Alexander Shelepenok

config.js

@@ -1,50 +0,0 @@
-'use strict';
-
-module.exports = {
-  url: 'https://lumen.netlify.com',
-  pathPrefix: '/',
-  title: 'Blog by John Doe',
-  subtitle: 'Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.',
-  copyright: '© All rights reserved.',
-  disqusShortname: '',
-  postsPerPage: 4,
-  googleAnalyticsId: 'UA-73379983-2',
-  useKatex: false,
-  menu: [
-    {
-      label: 'Articles',
-      path: '/'
-    },
-    {
-      label: 'About me',
-      path: '/pages/about'
-    },
-    {
-      label: 'Contact me',
-      path: '/pages/contacts'
-    }
-  ],
-  author: {
-    name: 'John Doe',
-    photo: '/photo.jpg',
-    bio: 'Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.',
-    contacts: {
-      email: '',
-      facebook: '#',
-      telegram: '#',
-      twitter: '#',
-      github: '#',
-      rss: '',
-      vkontakte: '',
-      linkedin: '#',
-      instagram: '#',
-      line: '',
-      gitlab: '',
-      weibo: '',
-      codepen: '',
-      youtube: '',
-      soundcloud: '',
-      medium: '',
-    }
-  }
-};

content/config.json

@@ -0,0 +1,47 @@
+{
+  "title": "Blog by John Doe",
+  "url": "https://lumen.netlify.com",
+  "subtitle": "Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.",
+  "copyright": "© All rights reserved.",
+  "googleAnalyticsId": "UA-73379983-2",
+  "disqusShortname": "",
+  "postsPerPage": "4",
+  "pathPrefix": "/",
+  "menu": [
+    {
+      "label": "Articles",
+      "path": "/"
+    },
+    {
+      "label": "About me",
+      "path": "/pages/about"
+    },
+    {
+      "label": "Contact me",
+      "path": "/pages/contacts"
+    }
+  ],
+  "author": {
+    "name": "John Doe",
+    "photo": "/photo.jpg",
+    "bio": "Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.",
+    "contacts": {
+      "rss": "",
+      "email": "",
+      "github": "#",
+      "facebook": "#",
+      "telegram": "#",
+      "twitter": "#",
+      "vkontakte": "",
+      "linkedin": "#",
+      "instagram": "#",
+      "line": "",
+      "weibo": "",
+      "gitlab": "",
+      "medium": "",
+      "youtube": "",
+      "codepen": "",
+      "soundcloud": ""
+    }
+  }
+}

content/pages/about.md

@@ -8,6 +8,6 @@ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac tu
 
 ![Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.](/media/image-2.jpg)
 
-*Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.*
+_Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi._
 
 Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

content/pages/contacts.md

@@ -10,15 +10,15 @@ Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetr
 
 ![Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.](/media/image-4.jpg)
 
-*Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.*
+_Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi._
 
 ## Header Level 2
 
 Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
 
-+ **Lorem ipsum** dolor sit amet, consectetuer adipiscing elit.
+- **Lorem ipsum** dolor sit amet, consectetuer adipiscing elit.
-+ Aliquam tincidunt mauris eu risus.
+- Aliquam tincidunt mauris eu risus.
-+ Vestibulum auctor dapibus neque.
+- Vestibulum auctor dapibus neque.
 
 ### Header Level 3
 

content/posts/2016-01-12---The-Origins-of-Social-Stationery-Lettering.md

@@ -9,7 +9,7 @@ description: "Pellentesque habitant morbi tristique senectus et netus et malesua
 socialImage: "/media/image-3.jpg"
 ---
 
-**Pellentesque habitant morbi tristique** senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. *Aenean ultricies mi vitae est.* Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. 
+**Pellentesque habitant morbi tristique** senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. _Aenean ultricies mi vitae est._ Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
 
 Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. [Donec non enim](#) in turpis pulvinar facilisis.
 
@@ -17,8 +17,8 @@ Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aen
 
 ## Header Level 2
 
-+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-+ Aliquam tincidunt mauris eu risus.
+- Aliquam tincidunt mauris eu risus.
 
 Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat.
 
@@ -33,8 +33,8 @@ Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque i
 
 ### Header Level 3
 
-+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-+ Aliquam tincidunt mauris eu risus.
+- Aliquam tincidunt mauris eu risus.
 
 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
 

content/posts/2016-02-02---A-Brief-History-of-Typography.md

@@ -14,7 +14,7 @@ description: "Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, eui
 socialImage: "/media/image-0.jpg"
 ---
 
-**Pellentesque habitant morbi tristique** senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. *Aenean ultricies mi vitae est.* Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. 
+**Pellentesque habitant morbi tristique** senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. _Aenean ultricies mi vitae est._ Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
 
 Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. [Donec non enim](#) in turpis pulvinar facilisis.
 
@@ -22,8 +22,8 @@ Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aen
 
 ## Header Level 2
 
-+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-+ Aliquam tincidunt mauris eu risus.
+- Aliquam tincidunt mauris eu risus.
 
 Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat.
 
@@ -38,8 +38,8 @@ Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque i
 
 ### Header Level 3
 
-+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-+ Aliquam tincidunt mauris eu risus.
+- Aliquam tincidunt mauris eu risus.
 
 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
 

content/posts/2017-18-08---The-Birth-of-Movable-Type.md

@@ -70,7 +70,7 @@ In 1462, during a conflict between two archbishops, Mainz was sacked by archbish
 
 In January 1465, Gutenberg's achievements were recognized and he was given the title Hofmann (gentleman of the court) by von Nassau. This honor included a stipend, an annual court outfit, as well as 2,180 litres of grain and 2,000 litres of wine tax-free. It is believed he may have moved back to Mainz around this time, but this is not certain.
 
-***
+---
 
 Gutenberg died in 1468 and was buried in the Franciscan church at Mainz, his contributions largely unknown. This church and the cemetery were later destroyed, and Gutenberg's grave is now lost.
 
@@ -82,7 +82,7 @@ Gutenberg's early printing process, and what tests he may have made with movable
 
 ![Movable metal type, and composing stick, descended from Gutenberg's press. Photo by Willi Heidelbach. Licensed under CC BY 2.5](/media/movable-type.jpg)
 
-*Movable metal type, and composing stick, descended from Gutenberg's press. Photo by Willi Heidelbach. Licensed under CC BY 2.5*
+_Movable metal type, and composing stick, descended from Gutenberg's press. Photo by Willi Heidelbach. Licensed under CC BY 2.5_
 
 Gutenberg's technique of making movable type remains unclear. In the following decades, punches and copper matrices became standardized in the rapidly disseminating printing presses across Europe. Whether Gutenberg used this sophisticated technique or a somewhat primitive version has been the subject of considerable debate.
 

content/posts/2017-19-08---Humane-Typography-in-the-Digital-Age.md

@@ -32,7 +32,7 @@ The first printed books were, at first, perceived as inferior to the handwritten
 
 ![42-line-bible.jpg](/media/42-line-bible.jpg)
 
-*The 42–Line Bible, printed by Gutenberg.*
+_The 42–Line Bible, printed by Gutenberg._
 
 But, through this transition, the book lost a large part of its humanity. The machine took over most of the process but craftsmanship was still a part of it. The typefaces were cut manually by the first punch cutters. The paper was made by hand. The illustrations and ornaments were still being hand drawn. These were the remains of the craftsmanship that went almost extinct in the times of Eric Gill.
 
@@ -42,7 +42,7 @@ The first transition took away a large part of humanity from written communicati
 
 > In the new computer age the proliferation of typefaces and type manipulations represents a new level of visual pollution threatening our culture. Out of thousands of typefaces, all we need are a few basic ones, and trash the rest.
 >
-— Massimo Vignelli
+> — Massimo Vignelli
 
 Typography is not about typefaces. It’s not about what looks best, it’s about what feels right. What communicates the message best. Typography, in its essence, is about the message. “Typographical design should perform optically what the speaker creates through voice and gesture of his thoughts.”, as El Lissitzky, a famous Russian typographer, put it.
 
@@ -69,7 +69,7 @@ We’ve come close to “perfection” in the last five centuries. The letters a
 
 ![type-through-time.jpg](/media/type-through-time.jpg)
 
-*Type through 5 centuries.*
+_Type through 5 centuries._
 
 We lost a part of ourselves because of this chase after perfection. We forgot about the craftsmanship along the way. And the worst part is that we don’t care. The transition to the digital age made that clear. We choose typefaces like clueless zombies. There’s no meaning in our work. Type sizes, leading, margins… It’s all just a few clicks or lines of code. The message isn’t important anymore. There’s no more “why” behind the “what”.
 
@@ -77,4 +77,4 @@ We lost a part of ourselves because of this chase after perfection. We forgot ab
 
 Human beings aren’t perfect. Perfection is something that will always elude us. There will always be a small part of humanity in everything we do. No matter how small that part, we should make sure that it transcends the limits of the medium. We have to think about the message first. What typeface should we use and why? Does the typeface match the message and what we want to communicate with it? What will be the leading and why? Will there be more typefaces in our design? On what ground will they be combined? What makes our design unique and why? This is the part of humanity that is left in typography. It might be the last part. Are we really going to give it up?
 
-*Originally published by [Matej Latin](http://matejlatin.co.uk/) on [Medium](https://medium.com/design-notes/humane-typography-in-the-digital-age-9bd5c16199bd?ref=webdesignernews.com#.lygo82z0x).*
+_Originally published by [Matej Latin](http://matejlatin.co.uk/) on [Medium](https://medium.com/design-notes/humane-typography-in-the-digital-age-9bd5c16199bd?ref=webdesignernews.com#.lygo82z0x)._

docker-compose.development.yml

@@ -1,12 +0,0 @@
-version: '2'
-services:
-  web:
-    image: alxshelepenok/gatsby-starter-lumen:development
-    build:
-      context: ./
-      dockerfile: Dockerfile.development
-    tty: true
-    volumes:
-      - ./:/usr/src/app
-    ports:
-      - "8000:8000"

docker-compose.production.yml

@@ -1,12 +0,0 @@
-version: '2'
-services:
-  web:
-    image: alxshelepenok/gatsby-starter-lumen:production
-    build:
-      context: ./
-      dockerfile: Dockerfile.production
-    tty: true
-    volumes:
-      - ./:/usr/src/app
-    ports:
-      - "80:80"

flow-typed/npm/classnames_v2.x.x.js

@@ -1,23 +0,0 @@
-// flow-typed signature: a00cf41b09af4862583460529d5cfcb9
-// flow-typed version: c6154227d1/classnames_v2.x.x/flow_>=v0.104.x
-
-type $npm$classnames$Classes =
-  | string
-  | { [className: string]: *, ... }
-  | false
-  | void
-  | null;
-
-declare module "classnames" {
-  declare module.exports: (
-    ...classes: Array<$npm$classnames$Classes | $npm$classnames$Classes[]>
-  ) => string;
-}
-
-declare module "classnames/bind" {
-  declare module.exports: $Exports<"classnames">;
-}
-
-declare module "classnames/dedupe" {
-  declare module.exports: $Exports<"classnames">;
-}

flow-typed/npm/netlify-cms-app_vx.x.x.js

@@ -1,80 +0,0 @@
-// flow-typed signature: f7a01ad2bfbdcbd9940769b886f4bb48
-// flow-typed version: <<STUB>>/netlify-cms-app_v2.12.18/flow_v0.129.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'netlify-cms-app'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'netlify-cms-app' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'netlify-cms-app/dist/esm/extensions' {
-  declare module.exports: any;
-}
-
-declare module 'netlify-cms-app/dist/esm' {
-  declare module.exports: any;
-}
-
-declare module 'netlify-cms-app/dist/esm/locales' {
-  declare module.exports: any;
-}
-
-declare module 'netlify-cms-app/dist/netlify-cms-app' {
-  declare module.exports: any;
-}
-
-declare module 'netlify-cms-app/src/extensions' {
-  declare module.exports: any;
-}
-
-declare module 'netlify-cms-app/src' {
-  declare module.exports: any;
-}
-
-declare module 'netlify-cms-app/src/locales' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'netlify-cms-app/dist/esm/extensions.js' {
-  declare module.exports: $Exports<'netlify-cms-app/dist/esm/extensions'>;
-}
-declare module 'netlify-cms-app/dist/esm/index' {
-  declare module.exports: $Exports<'netlify-cms-app/dist/esm'>;
-}
-declare module 'netlify-cms-app/dist/esm/index.js' {
-  declare module.exports: $Exports<'netlify-cms-app/dist/esm'>;
-}
-declare module 'netlify-cms-app/dist/esm/locales.js' {
-  declare module.exports: $Exports<'netlify-cms-app/dist/esm/locales'>;
-}
-declare module 'netlify-cms-app/dist/netlify-cms-app.js' {
-  declare module.exports: $Exports<'netlify-cms-app/dist/netlify-cms-app'>;
-}
-declare module 'netlify-cms-app/src/extensions.js' {
-  declare module.exports: $Exports<'netlify-cms-app/src/extensions'>;
-}
-declare module 'netlify-cms-app/src/index' {
-  declare module.exports: $Exports<'netlify-cms-app/src'>;
-}
-declare module 'netlify-cms-app/src/index.js' {
-  declare module.exports: $Exports<'netlify-cms-app/src'>;
-}
-declare module 'netlify-cms-app/src/locales.js' {
-  declare module.exports: $Exports<'netlify-cms-app/src/locales'>;
-}

flow-typed/npm/react-disqus-comments_vx.x.x.js

@@ -1,67 +0,0 @@
-// flow-typed signature: fe55856ebce3b66ab6c0a8a6de309111
-// flow-typed version: <<STUB>>/react-disqus-comments_v1.4.0/flow_v0.129.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'react-disqus-comments'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'react-disqus-comments' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'react-disqus-comments/build/components/DisqusThread' {
-  declare module.exports: any;
-}
-
-declare module 'react-disqus-comments/build/main' {
-  declare module.exports: any;
-}
-
-declare module 'react-disqus-comments/dist/react-disqus-thread' {
-  declare module.exports: any;
-}
-
-declare module 'react-disqus-comments/dist/react-disqus-thread.min' {
-  declare module.exports: any;
-}
-
-declare module 'react-disqus-comments/lib/components/DisqusThread' {
-  declare module.exports: any;
-}
-
-declare module 'react-disqus-comments/lib/main' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'react-disqus-comments/build/components/DisqusThread.js' {
-  declare module.exports: $Exports<'react-disqus-comments/build/components/DisqusThread'>;
-}
-declare module 'react-disqus-comments/build/main.js' {
-  declare module.exports: $Exports<'react-disqus-comments/build/main'>;
-}
-declare module 'react-disqus-comments/dist/react-disqus-thread.js' {
-  declare module.exports: $Exports<'react-disqus-comments/dist/react-disqus-thread'>;
-}
-declare module 'react-disqus-comments/dist/react-disqus-thread.min.js' {
-  declare module.exports: $Exports<'react-disqus-comments/dist/react-disqus-thread.min'>;
-}
-declare module 'react-disqus-comments/lib/components/DisqusThread.js' {
-  declare module.exports: $Exports<'react-disqus-comments/lib/components/DisqusThread'>;
-}
-declare module 'react-disqus-comments/lib/main.js' {
-  declare module.exports: $Exports<'react-disqus-comments/lib/main'>;
-}

flow-typed/npm/react-helmet_vx.x.x.js

@@ -1,39 +0,0 @@
-// flow-typed signature: 6f9a156495d9cbd0d3987c641280e19f
-// flow-typed version: <<STUB>>/react-helmet_v6.1.0/flow_v0.129.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'react-helmet'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'react-helmet' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'react-helmet/es/Helmet' {
-  declare module.exports: any;
-}
-
-declare module 'react-helmet/lib/Helmet' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'react-helmet/es/Helmet.js' {
-  declare module.exports: $Exports<'react-helmet/es/Helmet'>;
-}
-declare module 'react-helmet/lib/Helmet.js' {
-  declare module.exports: $Exports<'react-helmet/lib/Helmet'>;
-}

flow-typed/npm/react-test-renderer_v16.x.x.js

@@ -1,79 +0,0 @@
-// flow-typed signature: 7bac6c05f7415881918d3d510109e739
-// flow-typed version: fce74493f0/react-test-renderer_v16.x.x/flow_>=v0.104.x
-
-// Type definitions for react-test-renderer 16.x.x
-// Ported from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-test-renderer
-
-type ReactComponentInstance = React$Component<any>;
-
-type ReactTestRendererJSON = {
-  type: string,
-  props: { [propName: string]: any, ... },
-  children: null | ReactTestRendererJSON[],
-  ...
-};
-
-type ReactTestRendererTree = ReactTestRendererJSON & {
-  nodeType: "component" | "host",
-  instance: ?ReactComponentInstance,
-  rendered: null | ReactTestRendererTree,
-  ...
-};
-
-type ReactTestInstance = {
-  instance: ?ReactComponentInstance,
-  type: string,
-  props: { [propName: string]: any, ... },
-  parent: null | ReactTestInstance,
-  children: Array<ReactTestInstance | string>,
-  find(predicate: (node: ReactTestInstance) => boolean): ReactTestInstance,
-  findByType(type: React$ElementType): ReactTestInstance,
-  findByProps(props: { [propName: string]: any, ... }): ReactTestInstance,
-  findAll(
-    predicate: (node: ReactTestInstance) => boolean,
-    options?: { deep: boolean, ... }
-  ): ReactTestInstance[],
-  findAllByType(
-    type: React$ElementType,
-    options?: { deep: boolean, ... }
-  ): ReactTestInstance[],
-  findAllByProps(
-    props: { [propName: string]: any, ... },
-    options?: { deep: boolean, ... }
-  ): ReactTestInstance[],
-  ...
-};
-
-type TestRendererOptions = { createNodeMock(element: React$Element<any>): any, ... };
-
-declare module "react-test-renderer" {
-  declare export type ReactTestRenderer = {
-    toJSON(): null | ReactTestRendererJSON,
-    toTree(): null | ReactTestRendererTree,
-    unmount(nextElement?: React$Element<any>): void,
-    update(nextElement: React$Element<any>): void,
-    getInstance(): ?ReactComponentInstance,
-    root: ReactTestInstance,
-    ...
-  };
-
-  declare type Thenable = { then(resolve: () => mixed, reject?: () => mixed): mixed, ... };
-
-  declare function create(
-    nextElement: React$Element<any>,
-    options?: TestRendererOptions
-  ): ReactTestRenderer;
-
-  declare function act(callback: () => void | Promise<void>): Thenable;
-}
-
-declare module "react-test-renderer/shallow" {
-  declare export default class ShallowRenderer {
-    static createRenderer(): ShallowRenderer;
-    getMountedInstance(): ReactTestInstance;
-    getRenderOutput<E: React$Element<any>>(): E;
-    getRenderOutput(): React$Element<any>;
-    render(element: React$Element<any>, context?: any): void;
-    unmount(): void;
-  }
-}

flow/css-module-stub.js

@@ -1,8 +0,0 @@
-// @flow strict
-type CSSModule = {
-  [key: string]: string,
-};
-
-const emptyCSSModule: CSSModule = {};
-
-export default emptyCSSModule;

gatsby-browser.js

@@ -1,4 +0,0 @@
-'use strict';
-
-require('./src/assets/scss/init.scss');
-require('./static/css/prismjs/theme.min.css');

gatsby-config.js

@@ -1,73 +1,50 @@
-'use strict';
+const config = require("./content/config.json");
-
-const siteConfig = require('./config.js');
-const postCssPlugins = require('./postcss-config.js');
 
 module.exports = {
-  pathPrefix: siteConfig.pathPrefix,
+  pathPrefix: config.pathPrefix,
   siteMetadata: {
-    url: siteConfig.url,
+    url: config.url,
-    title: siteConfig.title,
+    title: config.title,
-    subtitle: siteConfig.subtitle,
+    subtitle: config.subtitle,
-    copyright: siteConfig.copyright,
+    copyright: config.copyright,
-    disqusShortname: siteConfig.disqusShortname,
+    disqusShortname: config.disqusShortname,
-    menu: siteConfig.menu,
+    postsPerPage: config.postsPerPage,
-    author: siteConfig.author
+    menu: config.menu,
+    author: config.author,
   },
   plugins: [
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
-      options: {
-        path: `${__dirname}/static`,
-        name: 'assets'
-      }
-    },
-    {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        path: `${__dirname}/static/media`,
-        name: 'media'
-      }
-    },
-    {
-      resolve: 'gatsby-source-filesystem',
       options: {
         path: `${__dirname}/content`,
-        name: 'pages'
+        name: "content",
-      }
+      },
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-plugin-feed",
-      options: {
-        name: 'css',
-        path: `${__dirname}/static/css`
-      }
-    },
-    {
-      resolve: 'gatsby-plugin-feed',
       options: {
         query: `
           {
             site {
               siteMetadata {
-                site_url: url
+                url
                 title
-                description: subtitle
+                subtitle
               }
             }
           }
         `,
-        feeds: [{
+        feeds: [
-          serialize: ({ query: { site, allMarkdownRemark } }) => (
+          {
-            allMarkdownRemark.edges.map((edge) => ({
+            serialize: ({ query: { site, allMarkdownRemark } }) =>
+              allMarkdownRemark.edges.map(edge => ({
                 ...edge.node.frontmatter,
                 description: edge.node.frontmatter.description,
                 date: edge.node.frontmatter.date,
-              url: site.siteMetadata.site_url + edge.node.fields.slug,
+                url: site.siteMetadata.url + edge.node.fields.slug,
-              guid: site.siteMetadata.site_url + edge.node.fields.slug,
+                guid: site.siteMetadata.url + edge.node.fields.slug,
-              custom_elements: [{ 'content:encoded': edge.node.html }]
+                custom_elements: [{ "content:encoded": edge.node.html }],
-            }))
+              })),
-          ),
             query: `
               {
                 allMarkdownRemark(
@@ -93,61 +70,48 @@ module.exports = {
                 }
               }
             `,
-          output: '/rss.xml',
+            output: "/rss.xml",
-          title: siteConfig.title
+            title: config.title,
-        }]
+          },
-      }
+        ],
+      },
     },
     {
-      resolve: 'gatsby-transformer-remark',
+      resolve: "gatsby-transformer-remark",
       options: {
         plugins: [
-          'gatsby-remark-relative-images',
           {
-            resolve: 'gatsby-remark-katex',
+            resolve: "gatsby-remark-images",
-            options: {
-              strict: 'ignore'
-            }
-          },
-          {
-            resolve: 'gatsby-remark-images',
             options: {
               maxWidth: 960,
-              withWebp: true
+              withWebp: true,
-            }
+            },
           },
           {
-            resolve: 'gatsby-remark-responsive-iframe',
+            resolve: "gatsby-remark-responsive-iframe",
-            options: { wrapperStyle: 'margin-bottom: 1.0725rem' }
+            options: { wrapperStyle: "margin-bottom: 1.0725rem" },
           },
-          'gatsby-remark-autolink-headers',
+          "gatsby-remark-autolink-headers",
-          'gatsby-remark-prismjs',
+          "gatsby-remark-prismjs",
-          'gatsby-remark-copy-linked-files',
+          "gatsby-remark-copy-linked-files",
-          'gatsby-remark-smartypants',
+          "gatsby-remark-smartypants",
-          'gatsby-remark-external-links'
+          "gatsby-remark-external-links",
-        ]
+        ],
-      }
       },
-    'gatsby-transformer-sharp',
+    },
-    'gatsby-plugin-sharp',
+    "gatsby-transformer-sharp",
-    'gatsby-plugin-netlify',
+    "gatsby-plugin-sharp",
     {
-      resolve: 'gatsby-plugin-netlify-cms',
+      resolve: "gatsby-plugin-google-gtag",
       options: {
-        modulePath: `${__dirname}/src/cms/index.js`
+        trackingIds: [config.googleAnalyticsId],
-      }
-    },
-    {
-      resolve: 'gatsby-plugin-google-gtag',
-      options: {
-        trackingIds: [siteConfig.googleAnalyticsId],
         pluginConfig: {
-          head: true
+          head: true,
-        }
+        },
-      }
+      },
     },
     {
-      resolve: 'gatsby-plugin-sitemap',
+      resolve: "gatsby-plugin-sitemap",
       options: {
         query: `
           {
@@ -169,76 +133,71 @@ module.exports = {
             }
           }
         `,
-        output: '/sitemap.xml',
+        output: "/sitemap.xml",
-        serialize: ({ site, allSitePage }) => allSitePage.edges.map((edge) => ({
+        serialize: ({ site, allSitePage }) =>
+          allSitePage.edges.map(edge => ({
             url: site.siteMetadata.siteUrl + edge.node.path,
-          changefreq: 'daily',
+            changefreq: "daily",
-          priority: 0.7
+            priority: 0.7,
-        }))
+          })),
-      }
+      },
     },
     {
-      resolve: 'gatsby-plugin-manifest',
+      resolve: "gatsby-plugin-manifest",
       options: {
-        name: siteConfig.title,
+        name: config.title,
-        short_name: siteConfig.title,
+        short_name: config.title,
-        start_url: '/',
+        start_url: "/",
-        background_color: '#FFF',
+        background_color: "#FFF",
-        theme_color: '#F7A046',
+        theme_color: "#F7A046",
-        display: 'standalone',
+        display: "standalone",
-        icon: 'static/photo.jpg'
+        icon: "content/photo.jpg",
       },
     },
     {
-      resolve: 'gatsby-plugin-offline',
+      resolve: "gatsby-plugin-offline",
       options: {
         workboxConfig: {
-          runtimeCaching: [{
+          runtimeCaching: [
-            // Use cacheFirst since these don't need to be revalidated (same RegExp
+            {
-            // and same reason as above)
               urlPattern: /(\.js$|\.css$|[^:]static\/)/,
-            handler: 'CacheFirst',
+              handler: "CacheFirst",
             },
             {
-            // page-data.json files, static query results and app-data.json
-            // are not content hashed
               urlPattern: /^https?:.*\/page-data\/.*\.json/,
-            handler: 'StaleWhileRevalidate',
+              handler: "StaleWhileRevalidate",
             },
             {
-            // Add runtime caching of various other page resources
+              urlPattern:
-            urlPattern: /^https?:.*\.(png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/,
+                /^https?:.*\.(png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/,
-            handler: 'StaleWhileRevalidate',
+              handler: "StaleWhileRevalidate",
             },
             {
-            // Google Fonts CSS (doesn't end in .css so we need to specify it)
               urlPattern: /^https?:\/\/fonts\.googleapis\.com\/css/,
-            handler: 'StaleWhileRevalidate',
+              handler: "StaleWhileRevalidate",
             },
           ],
         },
       },
     },
-    'gatsby-plugin-catch-links',
+    "gatsby-plugin-catch-links",
-    'gatsby-plugin-react-helmet',
+    "gatsby-plugin-react-helmet",
     {
-      resolve: 'gatsby-plugin-sass',
+      resolve: "gatsby-plugin-sass",
       options: {
-        implementation: require('sass'),
+        implementation: require("sass"),
-        postCssPlugins: [...postCssPlugins],
         cssLoaderOptions: {
-          camelCase: false
+          camelCase: false,
-        }
+        },
-      }
+      },
     },
     {
-      resolve: '@sentry/gatsby',
+      resolve: "@sentry/gatsby",
       options: {
         dsn: process.env.SENTRY_DSN,
-        tracesSampleRate: 1
+        tracesSampleRate: 1,
-      }
       },
-    'gatsby-plugin-flow',
+    },
-    'gatsby-plugin-optimize-svgs'
+    "gatsby-plugin-optimize-svgs",
-  ]
+  ],
 };

gatsby-node.js

@@ -1,4 +1,9 @@
-'use strict';
+"use strict";
 
-exports.createPages = require('./gatsby/create-pages');
+require("source-map-support").install();
-exports.onCreateNode = require('./gatsby/on-create-node');
+require("ts-node").register();
+
+const { createPages } = require("./internal/gatsby/create-pages");
+const { onCreateNode } = require("./internal/gatsby/on-create-node");
+
+module.exports = { createPages, onCreateNode };

gatsby-ssr.js

@@ -1,3 +0,0 @@
-'use strict';
-
-exports.onRenderBody = require('./gatsby/on-render-body.js');

gatsby/create-pages.js

@@ -1,74 +0,0 @@
-'use strict';
-
-const path = require('path');
-const _ = require('lodash');
-const createCategoriesPages = require('./pagination/create-categories-pages.js');
-const createTagsPages = require('./pagination/create-tags-pages.js');
-const createPostsPages = require('./pagination/create-posts-pages.js');
-
-const createPages = async ({ graphql, actions }) => {
-  const { createPage } = actions;
-
-  // 404
-  createPage({
-    path: '/404',
-    component: path.resolve('./src/templates/not-found-template.js')
-  });
-
-  // Tags list
-  createPage({
-    path: '/tags',
-    component: path.resolve('./src/templates/tags-list-template.js')
-  });
-
-  // Categories list
-  createPage({
-    path: '/categories',
-    component: path.resolve('./src/templates/categories-list-template.js')
-  });
-
-  // Posts and pages from markdown
-  const result = await graphql(`
-    {
-      allMarkdownRemark(
-        filter: { frontmatter: { draft: { ne: true } } }
-      ) {
-        edges {
-          node {
-            frontmatter {
-              template
-            }
-            fields {
-              slug
-            }
-          }
-        }
-      }
-    }
-  `);
-
-  const { edges } = result.data.allMarkdownRemark;
-
-  _.each(edges, (edge) => {
-    if (_.get(edge, 'node.frontmatter.template') === 'page') {
-      createPage({
-        path: edge.node.fields.slug,
-        component: path.resolve('./src/templates/page-template.js'),
-        context: { slug: edge.node.fields.slug }
-      });
-    } else if (_.get(edge, 'node.frontmatter.template') === 'post') {
-      createPage({
-        path: edge.node.fields.slug,
-        component: path.resolve('./src/templates/post-template.js'),
-        context: { slug: edge.node.fields.slug }
-      });
-    }
-  });
-
-  // Feeds
-  await createTagsPages(graphql, actions);
-  await createCategoriesPages(graphql, actions);
-  await createPostsPages(graphql, actions);
-};
-
-module.exports = createPages;

gatsby/on-create-node.js

@@ -1,38 +0,0 @@
-'use strict';
-
-const _ = require('lodash');
-const { createFilePath } = require('gatsby-source-filesystem');
-
-const onCreateNode = ({ node, actions, getNode }) => {
-  const { createNodeField } = actions;
-
-  if (node.internal.type === 'MarkdownRemark') {
-    if (typeof node.frontmatter.slug !== 'undefined') {
-      const dirname = getNode(node.parent).relativeDirectory;
-      createNodeField({
-        node,
-        name: 'slug',
-        value: `/${dirname}/${node.frontmatter.slug}`
-      });
-    } else {
-      const value = createFilePath({ node, getNode });
-      createNodeField({
-        node,
-        name: 'slug',
-        value
-      });
-    }
-
-    if (node.frontmatter.tags) {
-      const tagSlugs = node.frontmatter.tags.map((tag) => `/tag/${_.kebabCase(tag)}/`);
-      createNodeField({ node, name: 'tagSlugs', value: tagSlugs });
-    }
-
-    if (node.frontmatter.category) {
-      const categorySlug = `/category/${_.kebabCase(node.frontmatter.category)}/`;
-      createNodeField({ node, name: 'categorySlug', value: categorySlug });
-    }
-  }
-};
-
-module.exports = onCreateNode;

gatsby/on-render-body.js

@@ -1,22 +0,0 @@
-'use strict';
-
-const React = require('react');
-const siteConfig = require('../config.js');
-
-// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
-const katexStylesheet = require('!css-loader!../static/css/katex/katex.min.css');
-
-const onRenderBody = ({ setHeadComponents }) => {
-  const { useKatex } = siteConfig;
-
-  if (useKatex) {
-    setHeadComponents([
-      React.createElement('style', {
-        key: 'katex-inline-stylesheet',
-        dangerouslySetInnerHTML: { __html: katexStylesheet.toString() }
-      })
-    ]);
-  }
-};
-
-module.exports = onRenderBody;

gatsby/pagination/create-categories-pages.js

@@ -1,45 +0,0 @@
-'use strict';
-
-const _ = require('lodash');
-const path = require('path');
-const siteConfig = require('../../config.js');
-
-module.exports = async (graphql, actions) => {
-  const { createPage } = actions;
-  const { postsPerPage } = siteConfig;
-
-  const result = await graphql(`
-    {
-      allMarkdownRemark(
-        filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } }
-      ) {
-        group(field: frontmatter___category) {
-          fieldValue
-          totalCount
-        }
-      }
-    }
-  `);
-
-  _.each(result.data.allMarkdownRemark.group, (category) => {
-    const numPages = Math.ceil(category.totalCount / postsPerPage);
-    const categorySlug = `/category/${_.kebabCase(category.fieldValue)}`;
-
-    for (let i = 0; i < numPages; i += 1) {
-      createPage({
-        path: i === 0 ? categorySlug : `${categorySlug}/page/${i}`,
-        component: path.resolve('./src/templates/category-template.js'),
-        context: {
-          category: category.fieldValue,
-          currentPage: i,
-          postsLimit: postsPerPage,
-          postsOffset: i * postsPerPage,
-          prevPagePath: i <= 1 ? categorySlug : `${categorySlug}/page/${i - 1}`,
-          nextPagePath: `${categorySlug}/page/${i + 1}`,
-          hasPrevPage: i !== 0,
-          hasNextPage: i !== numPages - 1
-        }
-      });
-    }
-  });
-};

gatsby/pagination/create-posts-pages.js

@@ -1,35 +0,0 @@
-'use strict';
-
-const path = require('path');
-const siteConfig = require('../../config.js');
-
-module.exports = async (graphql, actions) => {
-  const { createPage } = actions;
-
-  const result = await graphql(`
-    {
-      allMarkdownRemark(
-        filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } }
-      ) { totalCount }
-    }
-  `);
-
-  const { postsPerPage } = siteConfig;
-  const numPages = Math.ceil(result.data.allMarkdownRemark.totalCount / postsPerPage);
-
-  for (let i = 0; i < numPages; i += 1) {
-    createPage({
-      path: i === 0 ? '/' : `/page/${i}`,
-      component: path.resolve('./src/templates/index-template.js'),
-      context: {
-        currentPage: i,
-        postsLimit: postsPerPage,
-        postsOffset: i * postsPerPage,
-        prevPagePath: i <= 1 ? '/' : `/page/${i - 1}`,
-        nextPagePath: `/page/${i + 1}`,
-        hasPrevPage: i !== 0,
-        hasNextPage: i !== numPages - 1
-      }
-    });
-  }
-};

gatsby/pagination/create-tags-pages.js

@@ -1,45 +0,0 @@
-'use strict';
-
-const _ = require('lodash');
-const path = require('path');
-const siteConfig = require('../../config.js');
-
-module.exports = async (graphql, actions) => {
-  const { createPage } = actions;
-  const { postsPerPage } = siteConfig;
-
-  const result = await graphql(`
-    {
-      allMarkdownRemark(
-        filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } }
-      ) {
-        group(field: frontmatter___tags) {
-          fieldValue
-          totalCount
-        }
-      }
-    }
-  `);
-
-  _.each(result.data.allMarkdownRemark.group, (tag) => {
-    const numPages = Math.ceil(tag.totalCount / postsPerPage);
-    const tagSlug = `/tag/${_.kebabCase(tag.fieldValue)}`;
-
-    for (let i = 0; i < numPages; i += 1) {
-      createPage({
-        path: i === 0 ? tagSlug : `${tagSlug}/page/${i}`,
-        component: path.resolve('./src/templates/tag-template.js'),
-        context: {
-          tag: tag.fieldValue,
-          currentPage: i,
-          postsLimit: postsPerPage,
-          postsOffset: i * postsPerPage,
-          prevPagePath: i <= 1 ? tagSlug : `${tagSlug}/page/${i - 1}`,
-          nextPagePath: `${tagSlug}/page/${i + 1}`,
-          hasPrevPage: i !== 0,
-          hasNextPage: i !== numPages - 1
-        }
-      });
-    }
-  });
-};

internal/definitions/scss.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export = styles;
+}

internal/gatsby/constants/index.ts

@@ -0,0 +1,2 @@
+export { default as routes } from "./routes";
+export { default as templates } from "./templates";

internal/gatsby/constants/routes.ts

@@ -0,0 +1,10 @@
+const routes = Object.freeze({
+  notFoundRoute: "/404",
+  categoriesListRoute: "/categories",
+  categoryRoute: "/category",
+  tagsListRoute: "/tags",
+  tagRoute: "/tag",
+  indexRoute: "/",
+});
+
+export default routes;

internal/gatsby/constants/templates.ts

@@ -0,0 +1,12 @@
+import path from "path";
+
+const templates = Object.freeze({
+  categoriesTemplate: path.resolve("./src/templates/categories-template.tsx"),
+  notFoundTemplate: path.resolve("./src/templates/not-found-template.tsx"),
+  indexTemplate: path.resolve("./src/templates/index-template.tsx"),
+  tagsTemplate: path.resolve("./src/templates/tags-template.tsx"),
+  pageTemplate: path.resolve("./src/templates/page-template.tsx"),
+  postTemplate: path.resolve("./src/templates/post-template.tsx"),
+});
+
+export default templates;

internal/gatsby/create-pages.ts

@@ -0,0 +1,142 @@
+import { GatsbyNode } from "gatsby";
+
+import * as constants from "./constants";
+import * as queries from "./queries";
+import * as utils from "./utils";
+
+type CreateWithPagination = (parameters: {
+  group?: string;
+  template: string;
+  total: number;
+  page: number;
+  path: string;
+}) => void;
+
+const getPaginationPath = (basePath: string, page: number): string =>
+  [basePath, "page", page].join("/");
+
+const createPages: GatsbyNode["createPages"] = async ({ graphql, actions }) => {
+  const { createPage } = actions;
+
+  createPage({
+    path: constants.routes.notFoundRoute,
+    component: constants.templates.notFoundTemplate,
+    context: {},
+  });
+
+  createPage({
+    path: constants.routes.tagsListRoute,
+    component: constants.templates.tagsTemplate,
+    context: {},
+  });
+
+  createPage({
+    path: constants.routes.categoriesListRoute,
+    component: constants.templates.categoriesTemplate,
+    context: {},
+  });
+
+  const pages = await queries.pagesQuery(graphql);
+
+  pages.forEach(edge => {
+    const { node } = edge;
+
+    if (node?.frontmatter?.template === "page" && node?.fields?.slug) {
+      createPage({
+        path: node.fields.slug,
+        component: constants.templates.pageTemplate,
+        context: { slug: node.fields.slug },
+      });
+    } else if (node?.frontmatter?.template === "post" && node?.fields?.slug) {
+      createPage({
+        path: node.fields.slug,
+        component: constants.templates.postTemplate,
+        context: { slug: node.fields.slug },
+      });
+    }
+  });
+
+  const createWithPagination: CreateWithPagination = ({
+    group,
+    template,
+    page,
+    path,
+    total,
+  }) => {
+    createPage({
+      component: template,
+      path: page === 0 ? path : getPaginationPath(path, page),
+      context: {
+        group,
+        pagination: {
+          currentPage: page,
+          prevPagePath:
+            page <= 1 ? path : getPaginationPath(path, utils.decrement(page)),
+          nextPagePath: getPaginationPath(path, utils.increment(page)),
+          hasNextPage: page !== utils.decrement(total),
+          hasPrevPage: page !== 0,
+        },
+      },
+    });
+  };
+
+  const categories = await queries.categoriesQuery(graphql);
+  const metadata = await queries.metadataQuery(graphql);
+  const postsLimit = metadata?.postsLimit ?? 1;
+
+  categories.forEach(category => {
+    const total = Math.ceil(category.totalCount / postsLimit);
+    const path = utils.concat(
+      constants.routes.categoryRoute,
+      "/",
+      utils.toKebabCase(category.fieldValue),
+    );
+
+    for (let page = 0; page < total; page += 1) {
+      createWithPagination({
+        group: category.fieldValue,
+        template: constants.templates.categoriesTemplate,
+        total,
+        page,
+        path,
+      });
+    }
+  });
+
+  const tags = await queries.tagsQuery(graphql);
+
+  tags.forEach(tag => {
+    const path = utils.concat(
+      constants.routes.tagRoute,
+      "/",
+      utils.toKebabCase(tag.fieldValue),
+    );
+
+    const total = Math.ceil(tag.totalCount / postsLimit);
+
+    for (let page = 0; page < total; page += 1) {
+      createWithPagination({
+        group: tag.fieldValue,
+        template: constants.templates.categoriesTemplate,
+        total,
+        page,
+        path,
+      });
+    }
+  });
+
+  const path = constants.routes.indexRoute;
+  const posts = await queries.postsQuery(graphql);
+  const total = Math.ceil(posts?.edges?.length ?? 0 / postsLimit);
+
+  for (let page = 0; page < total; page += 1) {
+    createWithPagination({
+      template: constants.templates.indexTemplate,
+      total,
+      page,
+      path,
+    });
+  }
+};
+
+export { createPages };

internal/gatsby/on-create-node.ts

@@ -0,0 +1,58 @@
+import { GatsbyNode } from "gatsby";
+import { createFilePath } from "gatsby-source-filesystem";
+
+import * as constants from "./constants";
+import * as types from "./types";
+import * as utils from "./utils";
+
+const onCreateNode: GatsbyNode["onCreateNode"] = ({
+  node,
+  actions,
+  getNode,
+}) => {
+  const { createNodeField } = actions;
+
+  if (node.internal.type === "MarkdownRemark") {
+    const { frontmatter, parent }: types.Edge["node"] = node;
+    const { tags, category, slug } = frontmatter || {};
+
+    if (slug) {
+      const dirname = parent && getNode(parent)?.relativeDirectory;
+      const value =
+        typeof dirname === "string"
+          ? utils.concat("/", dirname, "/", slug)
+          : utils.concat("/", slug);
+
+      createNodeField({ node, name: "slug", value });
+    } else {
+      const value = createFilePath({ node, getNode });
+      createNodeField({ node, name: "slug", value });
+    }
+
+    if (tags) {
+      const value = tags.map(tag =>
+        utils.concat(
+          constants.routes.tagRoute,
+          "/",
+          utils.toKebabCase(tag),
+          "/",
+        ),
+      );
+
+      createNodeField({ node, name: "tagSlugs", value });
+    }
+
+    if (category) {
+      const value = utils.concat(
+        constants.routes.categoryRoute,
+        "/",
+        utils.toKebabCase(category),
+        "/",
+      );
+
+      createNodeField({ node, name: "categorySlug", value });
+    }
+  }
+};
+
+export { onCreateNode };

internal/gatsby/queries/categories-query.ts

@@ -0,0 +1,32 @@
+import { CreatePagesArgs } from "gatsby";
+
+interface CategoriesQueryResult {
+  allMarkdownRemark: {
+    group: Array<{
+      fieldValue: string;
+      totalCount: number;
+    }>;
+  };
+}
+
+const categoriesQuery = async (graphql: CreatePagesArgs["graphql"]) => {
+  const result = await graphql<CategoriesQueryResult>(`
+    {
+      allMarkdownRemark(
+        filter: {
+          frontmatter: { template: { eq: "post" }, draft: { ne: true } }
+        }
+        sort: { order: DESC, fields: [frontmatter___date] }
+      ) {
+        group(field: frontmatter___category) {
+          fieldValue
+          totalCount
+        }
+      }
+    }
+  `);
+
+  return result?.data?.allMarkdownRemark?.group ?? [];
+};
+
+export default categoriesQuery;

internal/gatsby/queries/index.ts

@@ -0,0 +1,5 @@
+export { default as categoriesQuery } from "./categories-query";
+export { default as metadataQuery } from "./metadata-query";
+export { default as postsQuery } from "./posts-query";
+export { default as pagesQuery } from "./pages-query";
+export { default as tagsQuery } from "./tags-query";

internal/gatsby/queries/metadata-query.ts

@@ -0,0 +1,23 @@
+import { CreatePagesArgs } from "gatsby";
+
+interface MetadataQueryResult {
+  site: {
+    siteMetadata: {
+      postsLimit?: number;
+    };
+  };
+}
+
+const metadataQuery = async (graphql: CreatePagesArgs["graphql"]) => {
+  const result = await graphql<MetadataQueryResult>(`
+    query SiteMetaData {
+      site {
+        postsLimit
+      }
+    }
+  `);
+
+  return result?.data?.site.siteMetadata ?? {};
+};
+
+export default metadataQuery;

internal/gatsby/queries/pages-query.ts

@@ -0,0 +1,32 @@
+import { CreatePagesArgs } from "gatsby";
+
+import * as types from "../types";
+
+export interface PagesQueryResult {
+  allMarkdownRemark: {
+    edges?: Array<types.Edge>;
+  };
+}
+
+const pagesQuery = async (graphql: CreatePagesArgs["graphql"]) => {
+  const result = await graphql<PagesQueryResult>(`
+    {
+      allMarkdownRemark(filter: { frontmatter: { draft: { ne: true } } }) {
+        edges {
+          node {
+            frontmatter {
+              template
+            }
+            fields {
+              slug
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  return result?.data?.allMarkdownRemark?.edges ?? [];
+};
+
+export default pagesQuery;

internal/gatsby/queries/posts-query.ts

@@ -0,0 +1,29 @@
+import { CreatePagesArgs } from "gatsby";
+
+import * as types from "../types";
+
+export interface PostsQueryResult {
+  allMarkdownRemark: {
+    edges?: Array<types.Edge>;
+  };
+}
+
+const postsQuery = async (graphql: CreatePagesArgs["graphql"]) => {
+  const result = await graphql<PostsQueryResult>(`
+    {
+      allMarkdownRemark(filter: { frontmatter: { draft: { ne: true } } }) {
+        edges {
+          node {
+            fields {
+              slug
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  return result?.data?.allMarkdownRemark;
+};
+
+export default postsQuery;

internal/gatsby/queries/tags-query.ts

@@ -0,0 +1,31 @@
+import { CreatePagesArgs } from "gatsby";
+
+interface TagsQueryResult {
+  allMarkdownRemark: {
+    group: Array<{
+      fieldValue: string;
+      totalCount: number;
+    }>;
+  };
+}
+
+const tagsQuery = async (graphql: CreatePagesArgs["graphql"]) => {
+  const result = await graphql<TagsQueryResult>(`
+    {
+      allMarkdownRemark(
+        filter: {
+          frontmatter: { template: { eq: "post" }, draft: { ne: true } }
+        }
+      ) {
+        group(field: frontmatter___tags) {
+          fieldValue
+          totalCount
+        }
+      }
+    }
+  `);
+
+  return result?.data?.allMarkdownRemark?.group || [];
+};
+
+export default tagsQuery;

internal/gatsby/types/edge.ts

@@ -0,0 +1,25 @@
+import { Node as GatsbyNode } from "gatsby";
+
+interface Frontmatter {
+  slug?: string;
+  template?: string;
+  category?: string;
+  tags?: Array<string>;
+}
+
+interface Fields {
+  slug?: string;
+  categorySlug?: string;
+  tagSlugs?: Array<string>;
+}
+
+interface Node extends GatsbyNode {
+  fields?: Fields;
+  frontmatter?: Frontmatter;
+}
+
+interface Edge {
+  node: Node;
+}
+
+export default Edge;

internal/gatsby/types/index.ts

@@ -0,0 +1 @@
+export type { default as Edge } from "./edge";

internal/gatsby/utils/concat.ts

@@ -0,0 +1,3 @@
+const concat = (...args: string[]): string => args.join("");
+
+export default concat;

internal/gatsby/utils/decrement.ts

@@ -0,0 +1,3 @@
+const decrement = (n: number): number => n - 1;
+
+export default decrement;

internal/gatsby/utils/increment.ts

@@ -0,0 +1,3 @@
+const increment = (n: number): number => n + 1;
+
+export default increment;

internal/gatsby/utils/index.ts

@@ -0,0 +1,4 @@
+export { default as toKebabCase } from "./to-kebab-case";
+export { default as decrement } from "./decrement";
+export { default as increment } from "./increment";
+export { default as concat } from "./concat";

internal/gatsby/utils/to-kebab-case.ts

@@ -0,0 +1,6 @@
+const toKebabCase = (str: string = ""): string => str.toLowerCase()
+  .replace(/[^\w\s]/gi, "")
+  .split(" ").join("-")
+  .split("_").join("-");
+
+export default toKebabCase;

internal/testing/__mocks__/all-markdown-remark.ts

@@ -0,0 +1,52 @@
+export default {
+  allMarkdownRemark: {
+    group: [
+      {
+        fieldValue: "typography",
+        totalCount: 1,
+      },
+      {
+        fieldValue: "design inspiration",
+        totalCount: 1,
+      },
+    ],
+    edges: [
+      {
+        node: {
+          id: "08870ea6-bdc8-4ec6-bf72-1e7d4488eb72",
+          fields: {
+            slug: "/posts/perfecting-the-art-of-perfection",
+            categorySlug: "/typography",
+          },
+          frontmatter: {
+            date: "2016-09-01",
+            description:
+              "An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.",
+            category: "typography",
+            title: "Perfecting the Art of Perfection",
+            template: "post",
+          },
+          html: "",
+        },
+      },
+      {
+        node: {
+          id: "066adc91-f87a-4e57-9fef-7a677baf5c1d",
+          fields: {
+            slug: "/posts/the-birth-of-movable-type",
+            categorySlug: "/design-inspiration",
+          },
+          frontmatter: {
+            date: "2016-09-01",
+            description:
+              "German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western world’s first major printed books, the “Forty–Two–Line” Bible.",
+            category: "design inspiration",
+            title: "Johannes Gutenberg: The Birth of Movable Type",
+            template: "post",
+          },
+          html: "",
+        },
+      },
+    ],
+  },
+};

internal/testing/__mocks__/author.ts

@@ -0,0 +1,8 @@
+import contacts from "./contacts";
+
+export default {
+  photo: "/static/photo.jpg",
+  bio: "Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.",
+  name: "John Doe",
+  contacts,
+};

internal/testing/__mocks__/contacts.ts

@@ -0,0 +1,8 @@
+export default {
+  rss: "#",
+  email: "#",
+  github: "#",
+  twitter: "#",
+  telegram: "#",
+  vkontakte: "#",
+};

internal/testing/__mocks__/gatsby.ts

@@ -0,0 +1,28 @@
+import React from "react";
+
+const gatsby = jest.requireActual("gatsby");
+
+export default {
+  ...gatsby,
+  graphql: jest.fn(),
+  Link: jest
+    .fn()
+    .mockImplementation(
+      ({
+        activeClassName,
+        activeStyle,
+        getProps,
+        innerRef,
+        ref,
+        replace,
+        to,
+        ...rest
+      }) =>
+        React.createElement("a", {
+          ...rest,
+          href: to,
+        }),
+    ),
+  StaticQuery: jest.fn(),
+  useStaticQuery: jest.fn(),
+};

internal/testing/__mocks__/index.ts

@@ -0,0 +1,7 @@
+export { default as allMarkdownRemark } from "./all-markdown-remark";
+export { default as markdownRemark } from "./markdown-remark";
+export { default as siteMetadata } from "./site-metadata";
+export { default as pageContext } from "./page-context";
+export { default as contacts } from "./contacts";
+export { default as author } from "./author";
+export { default as menu } from "./menu";

internal/testing/__mocks__/markdown-remark.ts

@@ -0,0 +1,16 @@
+export default {
+  id: "08870ea6-bdc8-4ec6-bf72-1e7d4488eb72",
+  fields: {
+    slug: "/posts/perfecting-the-art-of-perfection",
+    categorySlug: "/typography",
+  },
+  frontmatter: {
+    date: "2016-09-01",
+    description:
+      "An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.",
+    category: "typography",
+    title: "Perfecting the Art of Perfection",
+    template: "post",
+  },
+  html: "",
+};

internal/testing/__mocks__/menu.ts

@@ -0,0 +1,5 @@
+export default [
+  { label: "Articles", path: "/" },
+  { label: "About Me", path: "/pages/about" },
+  { label: "Contact Me", path: "/pages/contacts" },
+];

internal/testing/__mocks__/page-context.ts

@@ -0,0 +1,12 @@
+export default {
+  pageContext: {
+    group: "typography",
+    pagination: {
+      currentPage: 2,
+      prevPagePath: "/typography/page/1",
+      nextPagePath: "/typography/page/3",
+      hasNextPage: true,
+      hasPrevPage: true,
+    },
+  },
+};

internal/testing/__mocks__/site-metadata.ts

@@ -0,0 +1,17 @@
+import author from "./author";
+import menu from "./menu";
+
+export default {
+  site: {
+    siteMetadata: {
+      url: "https://www.lumen.local",
+      title: "Blog by John Doe",
+      subtitle:
+        "Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.",
+      copyright: "All rights reserved.",
+      postsPerPage: 4,
+      author,
+      menu,
+    },
+  },
+};

internal/testing/jest-config.ts

@@ -0,0 +1,30 @@
+import type { Config } from "@jest/types";
+
+import swc from "./swc-config";
+
+const jestConfig: Config.InitialOptions = {
+  testEnvironment: "jsdom",
+  rootDir: "../../",
+  moduleNameMapper: {
+    "@/hooks": ["<rootDir>/src/hooks"],
+    "@/utils": ["<rootDir>/src/utils"],
+    "@/constants": ["<rootDir>/src/constants"],
+    "@/utils/([^\\.]*)$": ["<rootDir>/src/utils"],
+    "@/pages/([^\\.]*)$": ["<rootDir>/src/pages/$1"],
+    "@/hooks/([^\\.]*)$": ["<rootDir>/src/hooks/$1"],
+    "@/mocks": ["<rootDir>/internal/testing/__mocks__"],
+    "@/scss/([^\\.]*)$": ["<rootDir>/src/assets/scss/$1"],
+    "@/constants/([^\\.]*)$": ["<rootDir>/src/constants/$1"],
+    "@/images/([^\\.]*)$": ["<rootDir>/src/assets/images/$1"],
+    "@/components/([^\\.]*)$": ["<rootDir>/src/components/$1"],
+    ".+\\.(css|sass|scss)$": "identity-obj-proxy",
+    ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "identity-obj-proxy",
+  },
+  transform: { "^.+\\.(t)sx?$": ["@swc/jest", swc] },
+  setupFiles: ["<rootDir>/internal/testing/jest-setup.ts"],
+  testPathIgnorePatterns: ["node_modules", ".cache", "public"],
+  transformIgnorePatterns: ["node_modules/(?!(gatsby)/)"],
+};
+
+export default jestConfig;

internal/testing/jest-setup.ts

@@ -0,0 +1 @@
+jest.mock("gatsby", () => jest.requireActual("./__mocks__/gatsby").default);

internal/testing/swc-config.ts

@@ -0,0 +1,19 @@
+const config = {
+  sourceMaps: true,
+  module: {
+    type: "commonjs",
+  },
+  jsc: {
+    parser: {
+      syntax: "typescript",
+      tsx: true,
+    },
+    transform: {
+      react: {
+        runtime: "automatic",
+      },
+    },
+  },
+};
+
+export default config;

jest/__fixtures__/all-markdown-remark.js

@@ -1,46 +0,0 @@
-'use strict';
-
-module.exports = {
-  allMarkdownRemark: {
-    group: [
-      {
-        fieldValue: 'test_0',
-        totalCount: 1
-      },
-      {
-        fieldValue: 'test_1',
-        totalCount: 2
-      }
-    ],
-    edges: [
-      {
-        node: {
-          fields: {
-            slug: '/test_0',
-            categorySlug: '/test'
-          },
-          frontmatter: {
-            date: '2016-09-01',
-            description: 'test_0',
-            category: 'test',
-            title: 'test_0'
-          }
-        }
-      },
-      {
-        node: {
-          fields: {
-            slug: '/test_1',
-            categorySlug: '/test'
-          },
-          frontmatter: {
-            date: '2016-09-01',
-            description: 'test_1',
-            category: 'test',
-            title: 'test_1'
-          }
-        }
-      }
-    ]
-  }
-};

jest/__fixtures__/markdown-remark.js

@@ -1,23 +0,0 @@
-'use strict';
-
-module.exports = {
-  markdownRemark: {
-    id: 'test-123',
-    html: '<p>test</p>',
-    fields: {
-      tagSlugs: [
-        '/test_0',
-        '/test_1'
-      ]
-    },
-    frontmatter: {
-      date: '2016-09-01',
-      description: 'test',
-      title: 'test',
-      tags: [
-        'test_0',
-        'test_1'
-      ]
-    }
-  }
-};

jest/__fixtures__/page-context.js

@@ -1,13 +0,0 @@
-'use strict';
-
-module.exports = {
-  pageContext: {
-    tag: 'test',
-    category: 'test',
-    currentPage: 1,
-    prevPagePath: '/page/1',
-    nextPagePath: '/page/3',
-    hasNextPage: true,
-    hasPrevPage: true
-  }
-};

jest/__fixtures__/site-metadata.js

@@ -1,41 +0,0 @@
-'use strict';
-
-module.exports = {
-  site: {
-    siteMetadata: {
-      url: 'http://localhost',
-      title: 'Test title',
-      subtitle: 'Test subtitle',
-      copyright: 'Test copyright',
-      disqusShortname: '',
-      postsPerPage: 4,
-      menu: [
-        {
-          label: 'Test label 1',
-          path: '/test/1/'
-        },
-        {
-          label: 'Test label 2',
-          path: '/test/2/'
-        },
-        {
-          label: 'Test label 3',
-          path: '/test/3/'
-        }
-      ],
-      author: {
-        name: 'Test name',
-        photo: '/test.jpg',
-        bio: 'Test bio',
-        contacts: {
-          email: '#',
-          telegram: '#',
-          twitter: '#',
-          github: '#',
-          rss: '#',
-          vkontakte: '#'
-        }
-      }
-    }
-  }
-};