added comments and post about comments

2020-09-05 19:15:40 +02:00 · 2020-09-05 19:15:40 +02:00 · a85e429f4d
parent 5689ce6332
commit a85e429f4d
8 changed files with 191 additions and 212 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -22,5 +22,6 @@
        "react"
    ],
    "rules": {
+        "comma-dangle": ["error", "never"]
    }
 }
--- a/content/blog/002-deployment/index.md
+++ b/content/blog/002-deployment/index.md
@ -19,16 +19,18 @@ Some time ago I listened to [an episode of the podcast .Net rocks](https://dotne
 # How this is built

 Gatsby has a [template for blogs](https://github.com/gatsbyjs/gatsby-starter-blog). Using
-
-    npx gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
+```bash
+npx gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
+```

 I let gatsby create an instance of the blog template for me. From this template I got going with `npx gatsby develop` and started off with deleting a lot of files I didn't need. I also did some changes to the style. I have absolutely no background in anything even remotely related to making things look good, so I just went with what I had in my mind at that very moment (any feedback and suggestions are very welcome). The `gatsby new` command did also initialize a [`git`]() repository so I just had to commit my new changes. For better availability I then pushed the repository to [my self-hosted git server](https://code.while-false.de/stephan/blog).

 # How this is run

 I mentioned `docker` before. [It seems to be officially supported](https://github.com/gatsbyjs/gatsby-docker). I just went with the documentation and tried to get it to run. First, I created a `Dockerfile` in the project with just one line of content:
-
-    FROM gatsbyjs/gatsby:onbuild
+```docker
+FROM gatsbyjs/gatsby:onbuild
+```

 Then, I could build first the gatsby project with `npx gatsby build` and use the optimized output from that to build a docker image with `docker build -t while-false/blog .` from the context of my project root. Next, I started a container from the newly created image with `docker run -d --name blog -p 8080:80 while-false/blog`. It worked on my laptop for `localhost:8080`, I saw the blog I just built. Nice!

--- a/content/blog/004-comments/index.md
+++ b/content/blog/004-comments/index.md
@ -0,0 +1,86 @@
+---
+title: Comments
+date: "2020-09-05T17:56:22.339Z"
+description: I would love to hear from you!
+---
+
+## Where do comments live?
+
+I built this blog with [`GatsbyJS`](https://www.gatsbyjs.org/), which is optimized for static content. It works great for everything that exists when I build the code and create another docker image. But now I want to add comments from my readers. Which of course aren't static and don't exist on compile-time. So it seems GatsbyJS would not be the right tool for the job.
+
+Luckily, GatsbyJS is expandable. There even is a [guide on how to integrate comments](https://www.gatsbyjs.com/docs/adding-comments/) in a blog on the gatsby website itself. But it assumes you just go and use some external service like disqus (although it does mention several alternatives). I didn't want to outsource that, the whole point of this blog is to run things myself and learn from that.
+
+What I found was [Commento](https://commento.io/). It focusses around privacy and can be [self-hosted](https://docs.commento.io/installation/self-hosting/) instead of using an external service. It even has docker support. I quickly set up my very own instance on my server:
+
+```bash
+docker run -d --name blog-commento \
+  -e "COMMENTO_ORIGIN=https://comments.while-false.de" \
+  -e "COMMENTO_POSTGRES=postgres://commentoDbUser:SuperSecretPassword@db_postgres/commento?sslmode=disable" \
+  registry.gitlab.com/commento/commento
+```
+*(In reality, I use a few more parameters and steps required for my specific hosting setup, which I will explain in a future post)*
+
+So my blog itself can still be static and throught the magic of gatsby's automatic optimization blazing fast, while the dynamic comments are handled by an external server, which I can fully control as I host it myself.
+
+## Include the comments in the blog
+
+Next, I followed the [documentation for commento](https://docs.commento.io/installation/self-hosting/register-your-website/) and registered the blog on my commento instance. Easy.
+
+Now to the tricky part. The static Gatsby.js website must embed the dynamic comments from the commento server. Again, I am lucky and found that [someone already did exactly that](https://itnext.io/adding-commento-to-react-apps-like-gatsby-871824fb57ae). With some small tweaks, this is what I use:
+
+```js
+import React, { useEffect } from 'react';
+
+/**
+ * Helper to add scripts to the page.
+ * @param {string} src The source path for the script to insert.
+ * @param {string} id The unique identifier for the script element to insert.
+ * @param {HTMLElement} parentElement The DOM element to insert the script into.
+ */
+const insertScript = (src, id, parentElement) => {
+  const script = window.document.createElement('script');
+  script.async = true;
+  script.src = src;
+  script.id = id;
+  parentElement.appendChild(script);
+  return script;
+};
+
+/**
+ * Helper to remove scripts from the page.
+ * @param {string} id The unique identifier for the script element to remove.
+ * @param {HTMLElement} parentElement The DOM element to remove the script from
+ */
+const removeScript = (id, parentElement) => {
+  const script = window.document.getElementById(id);
+  if (script) {
+    parentElement.removeChild(script);
+  }
+};
+
+
+const Commento = ({ id }) => {
+  useEffect(() => {
+    // If there's no window there's nothing to do for us
+    if (!window) {
+      return;
+    }
+    const { document } = window;
+    // In case our #commento container exists we can add our commento script
+    if (document.getElementById('commento')) {
+      insertScript('https://comments.while-false.de/js/commento.js', 'commento-script', document.body);
+    }
+    // Cleanup; remove the script from the page
+    return () => removeScript('commento-script', document.body);
+  }, [id]);
+  return <div id="commento" />;
+};
+
+export default Commento;
+```
+
+This component itself is evaluated at runtime (it uses `useEffect`, which gatsby understands as non-static). It dynamically loads the scripts required by commento. The commento component is then included in my default blog-post template component by adding the line `<Commento id={this.props.slug} />`. The slug is the part of the URL after the hostname, i.e. `004-comments/` for this page. Thus, commento differentiates which comment belongs to which page.
+
+Now, users can register and directly comment or comment anonymously with a required moderator review (which is me). Also, markdown, up- and downvoting, sorting, sticky, replies and moderation tools are included. Give it a try, I'd love to hear from you!
+
+In the next few days I will tinker around with commento's settings for moderation notification emails, custom styling and comment analytics (number of views and number of comments).
--- a/gatsby-node.js
+++ b/gatsby-node.js
@ -24,7 +24,7 @@ exports.createPages = async ({ graphql, actions }) => {
          }
        }
      }
-    `,
+    `
  );

  if (result.errors) {
--- a/package.json
+++ b/package.json
@ -2,10 +2,10 @@
  "name": "while-false-blog",
  "private": true,
  "description": "A simple blog powered by Gatsby and Markdown",
-  "version": "0.1.0",
-  "author": "Stephan Dörfler <st.doerfler@outlook.com>",
+  "version": "1.0.0",
+  "author": "Stephan Dörfler <stephan@while-false.de>",
  "dependencies": {
-    "gatsby": "^2.22.17",
+    "gatsby": "^2.23.3",
    "gatsby-cli": "^2.12.45",
    "gatsby-image": "^2.4.6",
    "gatsby-plugin-feed": "^2.5.4",
@ -23,6 +23,7 @@
    "gatsby-source-filesystem": "^2.3.10",
    "gatsby-transformer-remark": "^2.8.14",
    "gatsby-transformer-sharp": "^2.5.4",
+    "global": "^4.4.0",
    "prismjs": "^1.20.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
--- a/src/styles/global.css
+++ b/src/styles/global.css
@ -1,3 +1,7 @@
 body {
    background-color: #e3dcc2;
-}
+}
+
+#commento-textarea-root {
+  background-color: #00000010;
+}
--- a/src/templates/blog-post.js
+++ b/src/templates/blog-post.js
@ -48,7 +48,10 @@ class BlogPostTemplate extends React.Component {
          />
          <footer>
            <Bio />
-            <Commento id={this.props.slug} />
+            <div>
+              <h2>Comments</h2>
+              <Commento id={this.props.slug} />
+            </div>
          </footer>
        </article>

--- a/yarn.lock
+++ b/yarn.lock
@ -3180,10 +3180,10 @@ babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.8.0:
    cosmiconfig "^6.0.0"
    resolve "^1.12.0"

-babel-plugin-remove-graphql-queries@^2.9.3:
-  version "2.9.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.9.3.tgz#afed7ed58596e84e29914a4ecc88471e0ea76766"
-  integrity sha512-EfMoizTX4/aUVN/cbWCU+uythWT5Xjh29npZnyTwBL2b16JH7WM9vbVMJQoCi+26HfRpKJS6SJfDcUT12wc3Mg==
+babel-plugin-remove-graphql-queries@^2.9.5:
+  version "2.9.5"
+  resolved "https://registry.yarnpkg.com/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.9.5.tgz#b094d01e39d911e92317d38bee04bf4b2bf7c156"
+  integrity sha512-z0T2dMz6V8a8hC11NFDwnuT5xR0k4Vu4Zie4A5BPchQOe59uHpbaM54mMl66FUA/iLTfYC11xez1N3Wc1gV20w==

 babel-plugin-syntax-jsx@^6.18.0:
  version "6.18.0"
@ -3246,10 +3246,10 @@ babel-preset-fbjs@^3.3.0:
    "@babel/plugin-transform-template-literals" "^7.0.0"
    babel-plugin-syntax-trailing-function-commas "^7.0.0-beta.0"

-babel-preset-gatsby@^0.4.8:
-  version "0.4.8"
-  resolved "https://registry.yarnpkg.com/babel-preset-gatsby/-/babel-preset-gatsby-0.4.8.tgz#333d2e79b80186bc4d5ceadfaa07302696a0d976"
-  integrity sha512-U2Ex9XKYk2SbSabZIvQ/r5aKzrQibmxtyZ1SxGC0HNsjLU1QdWCCs+jeoiClWyi036y/4wmvHTxPjOOM2KdIZQ==
+babel-preset-gatsby@^0.4.9:
+  version "0.4.9"
+  resolved "https://registry.yarnpkg.com/babel-preset-gatsby/-/babel-preset-gatsby-0.4.9.tgz#738460c86a172c9fc649c66e12db9b137c50a71a"
+  integrity sha512-Jh8d7d36O2G/bTofQohOuEPBbGwDY6JftiC2U4LCtnZ4WILCvMSnf1DvIP6Y9ZDNuVy8ETb2AzmAfW1Ys6jA1Q==
  dependencies:
    "@babel/plugin-proposal-class-properties" "^7.10.1"
    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.1"
@ -3263,7 +3263,7 @@ babel-preset-gatsby@^0.4.8:
    babel-plugin-dynamic-import-node "^2.3.3"
    babel-plugin-macros "^2.8.0"
    babel-plugin-transform-react-remove-prop-types "^0.4.24"
-    gatsby-core-utils "^1.3.4"
+    gatsby-core-utils "^1.3.5"

 babel-runtime@^6.26.0:
  version "6.26.0"
@ -6782,10 +6782,10 @@ functional-red-black-tree@^1.0.1:
  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=

-gatsby-admin@^0.1.58:
-  version "0.1.58"
-  resolved "https://registry.yarnpkg.com/gatsby-admin/-/gatsby-admin-0.1.58.tgz#b1cb8325cef1dc79a2e4ff1bc3261ee53695a407"
-  integrity sha512-Tum3Avxp7gVH15S9AVRtQ0Ci4mYeQt3Kjvshjs25LPwcUYqr5Uze0kKTeqSlJjXfjxnIIXrHxEza8mzgGq9uzQ==
+gatsby-admin@^0.1.67:
+  version "0.1.67"
+  resolved "https://registry.yarnpkg.com/gatsby-admin/-/gatsby-admin-0.1.67.tgz#2813d25ed25f11375500fbe9399ee64ea7a97d66"
+  integrity sha512-8TCI6TEycyb3qWmrRm6GieCMVsNnuAkbMXwl8grg5Vyi0UA2oGxilTTwfQERjLNfpsPpuI0rn0197clgYZCwQA==
  dependencies:
    "@emotion/core" "^10.0.28"
    "@emotion/styled" "^10.0.27"
@ -6793,12 +6793,13 @@ gatsby-admin@^0.1.58:
    "@typescript-eslint/parser" "^2.28.0"
    csstype "^2.6.10"
    formik "^2.1.4"
-    gatsby "^2.22.17"
+    gatsby "^2.23.3"
    gatsby-interface "0.0.167"
-    gatsby-plugin-typescript "^2.4.4"
-    gatsby-source-graphql "^2.5.3"
+    gatsby-plugin-typescript "^2.4.6"
+    gatsby-source-graphql "^2.5.4"
    react "^16.12.0"
    react-dom "^16.12.0"
+    react-helmet "^6.0.0"
    react-icons "^3.10.0"
    strict-ui "^0.1.3"
    subscriptions-transport-ws "^0.9.16"
@ -6807,54 +6808,6 @@ gatsby-admin@^0.1.58:
    urql "^1.9.7"
    yup "^0.29.1"

-gatsby-cli@^2.12.42:
-  version "2.12.42"
-  resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-2.12.42.tgz#52482bb70e6caaa8c53523b738c7b9463561cdc9"
-  integrity sha512-R7uRTthtMV6aXqwz4rEdZg3NGF5EYqsEmq9UwS9C5ErVPzdbN6MpR0QitJ6D775Fr62r8rbu0CuiyDpJ2vGUTg==
-  dependencies:
-    "@babel/code-frame" "^7.10.1"
-    "@babel/runtime" "^7.10.2"
-    "@hapi/joi" "^15.1.1"
-    better-opn "^1.0.0"
-    bluebird "^3.7.2"
-    chalk "^2.4.2"
-    clipboardy "^2.3.0"
-    common-tags "^1.8.0"
-    configstore "^5.0.1"
-    convert-hrtime "^3.0.0"
-    core-js "^2.6.11"
-    envinfo "^7.5.1"
-    execa "^3.4.0"
-    fs-exists-cached "^1.0.0"
-    fs-extra "^8.1.0"
-    gatsby-core-utils "^1.3.4"
-    gatsby-recipes "^0.1.36"
-    gatsby-telemetry "^1.3.10"
-    hosted-git-info "^3.0.4"
-    ink "^2.7.1"
-    ink-spinner "^3.0.1"
-    is-valid-path "^0.1.1"
-    lodash "^4.17.15"
-    meant "^1.0.1"
-    node-fetch "^2.6.0"
-    object.entries "^1.1.2"
-    opentracing "^0.14.4"
-    pretty-error "^2.1.1"
-    progress "^2.0.3"
-    prompts "^2.3.2"
-    react "^16.8.0"
-    redux "^4.0.5"
-    resolve-cwd "^3.0.0"
-    semver "^6.3.0"
-    signal-exit "^3.0.3"
-    source-map "0.7.3"
-    stack-trace "^0.0.10"
-    strip-ansi "^5.2.0"
-    update-notifier "^3.0.1"
-    uuid "3.4.0"
-    yargs "^15.3.1"
-    yurnalist "^1.1.2"
-
 gatsby-cli@^2.12.45:
  version "2.12.45"
  resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-2.12.45.tgz#5f99e8ea96264c55e981d13147c1a387c9bf1164"
@ -6934,10 +6887,10 @@ gatsby-design-tokens@^2.0.2:
  dependencies:
    hex2rgba "^0.0.1"

-gatsby-graphiql-explorer@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/gatsby-graphiql-explorer/-/gatsby-graphiql-explorer-0.4.4.tgz#21f62f2dbb363e783cde1fd8569c8f64594ce647"
-  integrity sha512-9WLWrE7DUOFJ9PQ1ntEQceC0z9JEndRANTkpCTB7MWEBL/fvuj6+oDgmpW/eJPT2KkMuAP+g4o5bKld52MneRA==
+gatsby-graphiql-explorer@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/gatsby-graphiql-explorer/-/gatsby-graphiql-explorer-0.4.5.tgz#63795dc891e0ddc25436f51495342f0f7a2a0a1f"
+  integrity sha512-5ykkwnMhmIAzcxvVCnvYEk8HmEoFDZLeRET3Ug4sCthYvfucqzG6JJ3RuMGhPElu6Sat0vSS6XKwQ5EPu/sWTA==
  dependencies:
    "@babel/runtime" "^7.10.2"

@ -6970,25 +6923,25 @@ gatsby-interface@0.0.167:
    lodash.sample "^4.2.1"
    theme-ui "^0.2.49"

-gatsby-link@^2.4.4:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-2.4.4.tgz#5887e45f839bba82dfa138b18ed2ce2ec0bcaf9f"
-  integrity sha512-saWuA7jmN+p0qrZ9kyWVdvWBBM0Dd1X5PvnEUgZ1pa2jpymbJaDnxYOzTBJr9PCmV9IeMA1z5sqxKkMcPp4LGw==
+gatsby-link@^2.4.6:
+  version "2.4.6"
+  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-2.4.6.tgz#5fdd2b16175e33ed51f20c9e5d1d0cc3eb2fe7f6"
+  integrity sha512-jOYEJa860KHcVOZ/6gjMv2EnCG7StdD4mLEGEMcEC8mzn4PWHQXHYsGdXcOvjn6SaqJ888hWuYjik5Jm8xW+cg==
  dependencies:
    "@babel/runtime" "^7.10.2"
    "@types/reach__router" "^1.3.3"
    prop-types "^15.7.2"

-gatsby-page-utils@^0.2.8:
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/gatsby-page-utils/-/gatsby-page-utils-0.2.8.tgz#9f49415c92d041bc2d06d37376b35dd20b122004"
-  integrity sha512-LlWDt8Eg6hB5RM601f1P7L2NQ17m4//n+OtMwNpSYjhgklyCw2JHmDWj8fqEGjyMYFLbFFiVurCiYqBbvtc2ng==
+gatsby-page-utils@^0.2.9:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/gatsby-page-utils/-/gatsby-page-utils-0.2.9.tgz#567eb9b446d27a2cbcc99ca8bb6a321e2cfd1a65"
+  integrity sha512-Mh3QbDdKKrvbJRHtMsBvo+sDTaGfcTiXCFGTkFu2VbL3P6mZySFJ8fDLb9SbQvwvMVw/vD5IZT1KJerfmgfvGQ==
  dependencies:
    "@babel/runtime" "^7.10.2"
    bluebird "^3.7.2"
    chokidar "3.4.0"
    fs-exists-cached "^1.0.0"
-    gatsby-core-utils "^1.3.4"
+    gatsby-core-utils "^1.3.5"
    glob "^7.1.6"
    lodash "^4.17.15"
    micromatch "^3.1.10"
@ -7032,15 +6985,15 @@ gatsby-plugin-offline@^3.2.8:
    lodash "^4.17.15"
    workbox-build "^4.3.1"

-gatsby-plugin-page-creator@^2.3.8:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-page-creator/-/gatsby-plugin-page-creator-2.3.8.tgz#0b45574426652edcb75803a18a2bf570418b8434"
-  integrity sha512-qREefPFXGg6HY5TVhtKFyhrolKfz4vygdBdpDnhxhDVwBNvT49GSzEXZDgNBFJrd4OzZ5CoI4Z38I/Mxz1760A==
+gatsby-plugin-page-creator@^2.3.9:
+  version "2.3.9"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-page-creator/-/gatsby-plugin-page-creator-2.3.9.tgz#b0793cf1340dc903560791fea4948c28b2d302ad"
+  integrity sha512-ZNfjSoJ3AyACP5FWo0rwoeuIoZdD58le7oCmcVHVks/KOS/pJVGn8GwcrHE6xxCNM4KzqdfNBGZVyM+7RUASyA==
  dependencies:
    "@babel/runtime" "^7.10.2"
    bluebird "^3.7.2"
    fs-exists-cached "^1.0.0"
-    gatsby-page-utils "^0.2.8"
+    gatsby-page-utils "^0.2.9"
    glob "^7.1.6"
    lodash "^4.17.15"
    micromatch "^3.1.10"
@ -7077,10 +7030,10 @@ gatsby-plugin-sharp@^2.6.10:
    svgo "1.3.2"
    uuid "^3.4.0"

-gatsby-plugin-typescript@^2.4.4:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.4.4.tgz#481ba616b608d55ccf3aa869bdfbd2731d68fc1d"
-  integrity sha512-BWTqUEQ70DrqXQIEE5hl+0NK19ggDLksGZdt4OYJF3cFUmYn6sNhYu9cvKLcj4DLSxFVe1fJl7vK9n0HLdCwRA==
+gatsby-plugin-typescript@^2.4.6:
+  version "2.4.6"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.4.6.tgz#8c1c53510678978303ce9cd489e69f6696409bd8"
+  integrity sha512-RfI2/k5XHmyNHjKDZDEPha/TNoY0Wh6zeBteqmidoPsJ2GfeFhyyxFxuRak+wYpZqdMh/aVwaJoF9Q1OiS4woQ==
  dependencies:
    "@babel/core" "^7.10.2"
    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.1"
@ -7088,7 +7041,7 @@ gatsby-plugin-typescript@^2.4.4:
    "@babel/plugin-proposal-optional-chaining" "^7.10.1"
    "@babel/preset-typescript" "^7.10.1"
    "@babel/runtime" "^7.10.2"
-    babel-plugin-remove-graphql-queries "^2.9.3"
+    babel-plugin-remove-graphql-queries "^2.9.5"

 gatsby-plugin-typography@^2.5.3:
  version "2.5.3"
@ -7097,83 +7050,15 @@ gatsby-plugin-typography@^2.5.3:
  dependencies:
    "@babel/runtime" "^7.10.2"

-gatsby-react-router-scroll@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-3.0.2.tgz#9206c3d7a04d14b507431a4032e842d83c21b4cf"
-  integrity sha512-1W+16VxanVJ7RD3LmT0EgpUa7n/GgleJmcHg7ujcI7c2gvroJCTlRKxmu5VB6kVFSlZvUh3KPHdBqKxhPsU0DQ==
+gatsby-react-router-scroll@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-3.0.3.tgz#3c373fe96efe63259235bb5f5f79eca837ab19d1"
+  integrity sha512-VwwF1kmehIbjZek5MeMvf3SySoJUbUhQVQIsteWLqOPU3shz7b1sLpcLu3o0knUn7ml+8NB3rG2Yjb0a/LPBpA==
  dependencies:
    "@babel/runtime" "^7.10.2"
    scroll-behavior "^0.9.12"
    warning "^3.0.0"

-gatsby-recipes@^0.1.36:
-  version "0.1.36"
-  resolved "https://registry.yarnpkg.com/gatsby-recipes/-/gatsby-recipes-0.1.36.tgz#a40211b23c11255cd6187b3282d5d2d9bb16441c"
-  integrity sha512-nDIPCOUkwVGwAap7dITKXSrKJ06er0xgs0LTlB5y+ylQ/2NkyY6g1V+DiFF4/SLLjl9iTxNPgtzffoX+5OXSaw==
-  dependencies:
-    "@babel/core" "^7.10.2"
-    "@babel/generator" "^7.10.2"
-    "@babel/helper-plugin-utils" "^7.10.1"
-    "@babel/plugin-transform-react-jsx" "^7.10.1"
-    "@babel/standalone" "^7.10.2"
-    "@babel/template" "^7.10.1"
-    "@babel/types" "^7.10.2"
-    "@hapi/hoek" "8.x"
-    "@hapi/joi" "^15.1.1"
-    "@mdx-js/mdx" "^1.6.5"
-    "@mdx-js/react" "^1.6.5"
-    "@mdx-js/runtime" "^1.6.5"
-    acorn "^7.2.0"
-    acorn-jsx "^5.2.0"
-    cors "^2.8.5"
-    debug "^4.1.1"
-    detect-port "^1.3.0"
-    execa "^4.0.2"
-    express "^4.17.1"
-    express-graphql "^0.9.0"
-    fs-extra "^8.1.0"
-    gatsby-core-utils "^1.3.4"
-    gatsby-telemetry "^1.3.10"
-    glob "^7.1.6"
-    graphql "^14.6.0"
-    graphql-compose "^6.3.8"
-    graphql-subscriptions "^1.1.0"
-    graphql-tools "^6.0.5"
-    graphql-type-json "^0.3.1"
-    hicat "^0.7.0"
-    html-tag-names "^1.1.5"
-    ink "^2.7.1"
-    ink-box "^1.0.0"
-    ink-link "^1.1.0"
-    ink-select-input "^3.1.2"
-    ink-spinner "^3.0.1"
-    is-binary-path "^2.1.0"
-    is-blank "^2.1.0"
-    is-string "^1.0.5"
-    is-url "^1.2.4"
-    jest-diff "^25.5.0"
-    lodash "^4.17.15"
-    mkdirp "^0.5.1"
-    node-fetch "^2.6.0"
-    pkg-dir "^4.2.0"
-    prettier "^2.0.5"
-    react-reconciler "^0.25.1"
-    remark-mdx "^1.6.5"
-    remark-parse "^6.0.3"
-    remark-stringify "^8.0.0"
-    resolve-cwd "^3.0.0"
-    semver "^7.3.2"
-    single-trailing-newline "^1.0.0"
-    strip-ansi "^6.0.0"
-    style-to-object "^0.3.0"
-    subscriptions-transport-ws "^0.9.16"
-    svg-tag-names "^2.0.1"
-    unified "^8.4.2"
-    unist-util-visit "^2.0.2"
-    urql "^1.9.7"
-    ws "^7.3.0"
-    xstate "^4.10.0"
-
 gatsby-recipes@^0.1.39:
  version "0.1.39"
  resolved "https://registry.yarnpkg.com/gatsby-recipes/-/gatsby-recipes-0.1.39.tgz#6bd079e0011fbe41c14b371f9b757bcaa377c3ad"
@ -7324,10 +7209,10 @@ gatsby-source-filesystem@^2.3.10:
    valid-url "^1.0.9"
    xstate "^4.10.0"

-gatsby-source-graphql@^2.5.3:
-  version "2.5.3"
-  resolved "https://registry.yarnpkg.com/gatsby-source-graphql/-/gatsby-source-graphql-2.5.3.tgz#353f2949502bf73875caf06653a68265923b9fa7"
-  integrity sha512-6WiEdyCpjFKFUzWvY26jrQUF3sBg5F0cpVLndJtSMtwvv6GYeiqllhMC2f8ygGYZvUVBCq1NHN/5Z/wGd0d0ww==
+gatsby-source-graphql@^2.5.4:
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/gatsby-source-graphql/-/gatsby-source-graphql-2.5.4.tgz#fc2eba5e6128bbe2af06c7e1405fca4370fba5dc"
+  integrity sha512-lP8/GS6f1SMQXa4q72iH/CAAZQ/RxwgADPdFSAZS8e7fNkdlhUYpUqY69mdmQxwv5iMqaHMVQTdQmuiKcyQYXg==
  dependencies:
    "@babel/runtime" "^7.10.2"
    apollo-link "1.2.14"
@ -7339,29 +7224,6 @@ gatsby-source-graphql@^2.5.3:
    node-fetch "^1.7.3"
    uuid "^3.4.0"

-gatsby-telemetry@^1.3.10:
-  version "1.3.10"
-  resolved "https://registry.yarnpkg.com/gatsby-telemetry/-/gatsby-telemetry-1.3.10.tgz#19a8f450b14f42a8d5dcb8b704bcc17d9ff45dd9"
-  integrity sha512-Lp2DJhuPh5f5swYfIMcSYfXMi1bdoiO8Z2b3ZW2m+mDZk77dwEQg3dZPXlLyHGxboiO0D8Q7Jz6Fin9mO0T3CA==
-  dependencies:
-    "@babel/code-frame" "^7.10.1"
-    "@babel/runtime" "^7.10.2"
-    bluebird "^3.7.2"
-    boxen "^4.2.0"
-    configstore "^5.0.1"
-    envinfo "^7.5.1"
-    fs-extra "^8.1.0"
-    gatsby-core-utils "^1.3.4"
-    git-up "4.0.1"
-    is-docker "2.0.0"
-    lodash "^4.17.15"
-    node-fetch "2.6.0"
-    resolve-cwd "^2.0.0"
-    source-map "^0.7.3"
-    stack-trace "^0.0.10"
-    stack-utils "1.0.2"
-    uuid "3.4.0"
-
 gatsby-telemetry@^1.3.11:
  version "1.3.11"
  resolved "https://registry.yarnpkg.com/gatsby-telemetry/-/gatsby-telemetry-1.3.11.tgz#2a5743387d84e796e11f9577f9981c9b46c34e11"
@ -7425,10 +7287,10 @@ gatsby-transformer-sharp@^2.5.4:
    semver "^5.7.1"
    sharp "^0.25.1"

-gatsby@^2.22.17:
-  version "2.22.17"
-  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-2.22.17.tgz#e455dc49fedf564b4d7a1e62564a606caf09245f"
-  integrity sha512-drdf4oIpQhX24fqEOzwmbX0qCzY8QDbmqQQ/6GzNgfSd90mTDwYCA7gCxIrzTE9GGwYDGdlokwwq6hONtIoIVA==
+gatsby@^2.23.3:
+  version "2.23.3"
+  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-2.23.3.tgz#d5d7bbe9c68b9d5f982520b06c6a057e034bc2c3"
+  integrity sha512-uVRJUQuTga7GMag9Rrb+3amjSVoGDPgSTXivhDXW/TzR5ouBr6/rudjcDTruRwFnKsAwUExrYMMXPRCwkMFctQ==
  dependencies:
    "@babel/code-frame" "^7.10.1"
    "@babel/core" "^7.10.2"
@ -7452,8 +7314,8 @@ gatsby@^2.22.17:
    babel-loader "^8.1.0"
    babel-plugin-add-module-exports "^0.3.3"
    babel-plugin-dynamic-import-node "^2.3.3"
-    babel-plugin-remove-graphql-queries "^2.9.3"
-    babel-preset-gatsby "^0.4.8"
+    babel-plugin-remove-graphql-queries "^2.9.5"
+    babel-preset-gatsby "^0.4.9"
    better-opn "1.0.0"
    better-queue "^3.8.10"
    bluebird "^3.7.2"
@ -7492,15 +7354,15 @@ gatsby@^2.22.17:
    flat "^4.1.0"
    fs-exists-cached "1.0.0"
    fs-extra "^8.1.0"
-    gatsby-admin "^0.1.58"
-    gatsby-cli "^2.12.42"
-    gatsby-core-utils "^1.3.4"
-    gatsby-graphiql-explorer "^0.4.4"
-    gatsby-link "^2.4.4"
-    gatsby-plugin-page-creator "^2.3.8"
-    gatsby-plugin-typescript "^2.4.4"
-    gatsby-react-router-scroll "^3.0.2"
-    gatsby-telemetry "^1.3.10"
+    gatsby-admin "^0.1.67"
+    gatsby-cli "^2.12.45"
+    gatsby-core-utils "^1.3.5"
+    gatsby-graphiql-explorer "^0.4.5"
+    gatsby-link "^2.4.6"
+    gatsby-plugin-page-creator "^2.3.9"
+    gatsby-plugin-typescript "^2.4.6"
+    gatsby-react-router-scroll "^3.0.3"
+    gatsby-telemetry "^1.3.11"
    glob "^7.1.6"
    got "8.3.2"
    graphql "^14.6.0"
@ -7744,7 +7606,7 @@ global-prefix@^1.0.1:
    is-windows "^1.0.1"
    which "^1.2.14"

-global@^4.3.0:
+global@^4.3.0, global@^4.4.0:
  version "4.4.0"
  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
@ -12461,6 +12323,11 @@ react-fast-compare@^2.0.1, react-fast-compare@^2.0.2:
  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==

+react-fast-compare@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-focus-lock@^2.3.1:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.3.1.tgz#9d5d85899773609c7eefa4fc54fff6a0f5f2fc47"
@ -12483,6 +12350,16 @@ react-helmet@^5.2.1:
    react-fast-compare "^2.0.2"
    react-side-effect "^1.1.0"

+react-helmet@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 react-hot-loader@^4.12.21:
  version "4.12.21"
  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.21.tgz#332e830801fb33024b5a147d6b13417f491eb975"
@ -12565,6 +12442,11 @@ react-side-effect@^1.1.0:
  dependencies:
    shallowequal "^1.0.1"

+react-side-effect@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.0.tgz#1ce4a8b4445168c487ed24dab886421f74d380d3"
+  integrity sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg==
+
 react-style-singleton@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.0.tgz#7396885332e9729957f9df51f08cadbfc164e1c4"