Update

TODO.md

@@ -10,16 +10,17 @@
 - [ ] add md table of contents
 - [x] test purgecss with classes from Markdown files
 - [ ] add NOW deployment
-  - [ ] Setup Nameserver
+  - [x] Setup Nameserver
+    - [ ] Test
   - [ ] Everything pushed to master -> marvin.digital
   - [ ] Everything pushed to development -> dev.marvin.digital
   - [ ] Everything pushed to by hand -> dev.marvin.digital
 - [ ] ~~replace React with [Preact][1]~~
-- [ ] test react helmet async
+- [x] test react helmet async
 - [x] add "increase version" by script
 - [x] add bundle analyzer
 - [x] analyze via bundlephobia
-- [ ] add github bots to auto update dependencies
+- [x] add github bots to auto update dependencies
 - [x] add lighthouse from M8FINDER project
 - [ ] add League of Legends API to show profile and stats
 - [ ] add classes to tags https://github.com/gatsbyjs/gatsby/issues/17824

gatsby-config.js

@@ -17,9 +17,10 @@ module.exports = {
     'gatsby-plugin-layout',
     `gatsby-plugin-react-helmet`,
     {
-      resolve: 'gatsby-plugin-react-helmet-canonical-urls',
+      resolve: `gatsby-plugin-canonical-urls`,
       options: {
-        siteUrl: process.env.GATSBY_SITE_URL,
+        siteUrl: process.env.SITE_URL,
+        stripQueryString: true,
       },
     },
     `gatsby-plugin-sass`,

package.json

@@ -44,14 +44,14 @@
     "dotenv": "^8.1.0",
     "gatsby": "^2.15.28",
     "gatsby-image": "^2.2.23",
+    "gatsby-plugin-canonical-urls": "^2.1.10",
     "gatsby-plugin-catch-links": "^2.1.12",
     "gatsby-plugin-humans-txt": "^1.1.4",
     "gatsby-plugin-layout": "^1.1.10",
     "gatsby-plugin-manifest": "^2.2.20",
     "gatsby-plugin-postcss": "^2.1.10",
     "gatsby-plugin-purgecss": "^4.0.1",
     "gatsby-plugin-react-helmet": "^3.1.10",
-    "gatsby-plugin-react-helmet-canonical-urls": "^1.2.0",
     "gatsby-plugin-robots-txt": "^1.5.0",
     "gatsby-plugin-sass": "^2.1.17",
     "gatsby-plugin-sharp": "^2.2.27",
@@ -69,7 +69,6 @@
     "prop-types": "^15.7.2",
     "react": "^16.10.1",
     "react-dom": "^16.10.1",
-    "react-helmet": "^5.2.1",
     "react-helmet-async": "^1.0.3"
   },
   "devDependencies": {

src/components/SEO.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
+import { Helmet } from 'react-helmet-async'
 import { StaticQuery, graphql } from 'gatsby'
 
 const SEO = ({
@@ -17,6 +17,8 @@ const SEO = ({
     render={data => {
       const metaDescription = description || data.site.siteMetadata.description
 
+      console.log(data)
+
       // set default social-media images
       if (!ogImage) {
         ogImage = `${data.site.siteMetadata.siteUrl}/og-image.jpg`
@@ -33,62 +35,32 @@ const SEO = ({
           title={title}
           defaultTitle={data.site.siteMetadata.title}
           titleTemplate={`%s | ${data.site.siteMetadata.title}`}
-          meta={[
-            {
-              name: 'language',
-              content: lang,
-            },
-            {
-              name: 'description',
-              content: metaDescription,
-            },
-            {
-              property: 'og:title',
-              content: title,
-            },
-            {
-              property: 'og:description',
-              content: metaDescription,
-            },
-            {
-              property: 'og:type',
-              content: 'website',
-            },
-            {
-              property: 'og:image',
-              content: ogImage,
-            },
-            {
-              name: 'twitter:card',
-              content: 'summary_large_image',
-            },
-            {
-              name: 'twitter:creator',
-              content: `@${data.site.siteMetadata.author}`,
-            },
-            {
-              name: 'twitter:title',
-              content: title,
-            },
-            {
-              name: 'twitter:description',
-              content: metaDescription,
-            },
-            {
-              name: 'twitter:image',
-              content: twitterCard,
-            },
-          ]
-            .concat(
-              keywords && keywords.length > 0
-                ? {
-                    name: 'keywords',
-                    content: keywords.join(', '),
-                  }
-                : []
-            )
-            .concat(meta)}
-        />
+          meta={meta.concat(
+            keywords && keywords.length > 0
+              ? {
+                  name: 'keywords',
+                  content: keywords.join(', '),
+                }
+              : []
+          )}
+        >
+          <meta name="language" content={lang} />
+          <meta name="description" content={metaDescription} />
+
+          <meta name="og:title" content={title} />
+          <meta name="og:description" content={metaDescription} />
+          <meta name="og:type" content="website" />
+          <meta name="og:image" content={ogImage} />
+
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta
+            name="twitter:creator"
+            content={`@${data.site.siteMetadata.author}`}
+          />
+          <meta name="twitter:title" content={title} />
+          <meta name="twitter:description" content={metaDescription} />
+          <meta name="twitter:image" content={twitterCard} />
+        </Helmet>
       )
     }}
   />

src/layouts/index.jsx

@@ -1,15 +1,12 @@
 import React from 'react'
 import { ContextProviderComponent } from '../context'
-import { Helmet, HelmetProvider } from 'react-helmet-async'
+import { HelmetProvider } from 'react-helmet-async'
 
 import Header from './Header'
 
 const Layout = ({ children }) => (
   <ContextProviderComponent>
     <HelmetProvider>
-      <Helmet>
-        <meta name="name" content="content" />
-      </Helmet>
       <Header></Header>
       <main>{children}</main>
     </HelmetProvider>

src/pages/404.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Helmet from 'react-helmet'
+import { Helmet } from 'react-helmet-async'
 import { ContextConsumer } from '../context'
 import SEO from '../components/SEO'
 

src/pages/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Helmet from 'react-helmet'
+import { Helmet } from 'react-helmet-async'
 import { useStaticQuery, graphql } from 'gatsby'
 import { Link } from 'gatsby'
 import { ContextConsumer } from '../context'

src/pages/projects.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useStaticQuery, graphql } from 'gatsby'
-import Helmet from 'react-helmet'
+import { Helmet } from 'react-helmet-async'
 import { ContextConsumer } from '../context'
 import SEO from '../components/SEO'
 

src/pages/writings.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useStaticQuery, graphql, Link } from 'gatsby'
-import Helmet from 'react-helmet'
+import { Helmet } from 'react-helmet-async'
 import { ContextConsumer } from '../context'
 import SEO from '../components/SEO'
 import { isDev } from '../environment'

src/templates/ProjectsSingle.jsx

@@ -1,6 +1,6 @@
 import { graphql } from 'gatsby'
 import React from 'react'
-import Helmet from 'react-helmet'
+import { Helmet } from 'react-helmet-async'
 
 import HeroProjects from '../components/HeroProjects'
 import SEO from '../components/SEO'

src/templates/WritingsSingle.jsx

@@ -1,6 +1,6 @@
 import { graphql } from 'gatsby'
 import React from 'react'
-import Helmet from 'react-helmet'
+import { Helmet } from 'react-helmet-async'
 
 import SEO from '../components/SEO'
 import { isDev } from '../environment'