upgrade to gatsby 3, add gatsby image component

gatsby-config.js

@@ -5,28 +5,45 @@
  */
 
 module.exports = {
-  pathPrefix: `/ctdo`,
+  pathPrefix: '/ctdo',
   plugins: [
     {
-      resolve: `gatsby-source-filesystem`,
+      resolve: 'gatsby-source-filesystem',
       options: {
-        name: `pages`,
+        name: 'pages',
         path: `${__dirname}/src/webpages`,
       },
     },
     {
-      resolve: `gatsby-source-filesystem`,
+      resolve: 'gatsby-source-filesystem',
       options: {
-        name: `blog`,
+        name: 'blog',
         path: `${__dirname}/blog`,
       },
     },
     {
-      resolve: `gatsby-plugin-mdx`,
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/src/images`,
+      },
+    },
+    {
+      resolve: 'gatsby-plugin-mdx',
       options: {
-        extensions: [`.mdx`, `.md`],
-        gatsbyRemarkPlugins: [],
+        extensions: ['.mdx', '.md'],
+        gatsbyRemarkPlugins: [
+          {
+            resolve: `gatsby-remark-images`,
+            options: {
+              maxWidth: 1000,
+              pathPrefix: '/ctdo',
+            },
+          },
+        ],
       },
     },
+    'gatsby-plugin-sharp',
+    'gatsby-plugin-image',
+    `gatsby-plugin-react-helmet`,
   ],
 }

package.json

@@ -16,14 +16,19 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.5.1",
     "@mdx-js/react": "^1.5.1",
-    "gatsby": "^2.18.8",
-    "gatsby-plugin-mdx": "^1.0.62",
-    "gatsby-source-filesystem": "^2.1.42",
-    "gatsby-transformer-remark": "^2.6.42",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "gatsby": "^3.5.0",
+    "gatsby-plugin-image": "^1.5.0",
+    "gatsby-plugin-mdx": "^2.5.0",
+    "gatsby-plugin-react-helmet": "^4.5.0",
+    "gatsby-plugin-sharp": "^3.5.0",
+    "gatsby-remark-images": "^5.2.0",
+    "gatsby-source-filesystem": "^3.5.0",
+    "gatsby-transformer-remark": "^4.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0"
   },
   "devDependencies": {
-    "prettier": "^1.19.1"
+    "prettier": "^2.3.0"
   }
 }

src/components/accordion.js

@@ -1,7 +1,7 @@
 import React from "react"
-import accordionStyles from "./accordion.module.css"
+import * as accordionStyles from "./accordion.module.css"
 
-export default ({ title, children }) => {
+export default function Accordion({ title, children }) {
   return (
     <div>
       <input type="checkbox" id={`tab-${title}`} name={`tab-${title}`} />

src/components/footer.js

@@ -1,26 +1,28 @@
 import React from "react"
-import footerStyles from "./footer.module.css"
+import * as footerStyles from "./footer.module.css"
 import { Link } from "gatsby"
 
-export default ({ editLink }) => (
-  <footer className={footerStyles.footer}>
-    <div className={footerStyles.footerContent}>
-      {editLink ? (
-        <a
-          className={footerStyles.footerItem}
-          href={editLink}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Seite bearbeiten
-        </a>
-      ) : null}
-      <Link className={footerStyles.footerItem} to="/impressum/">
-        Impressum
-      </Link>
-      <Link className={footerStyles.footerItem} to="/datenschutz/">
-        Datenschutzerklärung
-      </Link>
-    </div>
-  </footer>
-)
+export default function Footer({ editLink }) {
+  return (
+    <footer className={footerStyles.footer}>
+      <div className={footerStyles.footerContent}>
+        {editLink ? (
+          <a
+            className={footerStyles.footerItem}
+            href={editLink}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Seite bearbeiten
+          </a>
+        ) : null}
+        <Link className={footerStyles.footerItem} to="/impressum/">
+          Impressum
+        </Link>
+        <Link className={footerStyles.footerItem} to="/datenschutz/">
+          Datenschutzerklärung
+        </Link>
+      </div>
+    </footer>
+  )
+}

src/components/layout.js

@@ -1,14 +1,16 @@
 import React from 'react'
 import Nav from '../components/nav'
 import Footer from '../components/footer'
-import layoutStyles from './layout.module.css'
+import * as layoutStyles from './layout.module.css'
 
-export default ({ path, editLink, children }) => (
-  <>
-    <Nav path={path} />
-    <main className={layoutStyles.layout}>
-      <article>{children}</article>
-    </main>
-    <Footer editLink={editLink} />
-  </>
-)
+export default function Layout({ path, editLink, children }) {
+  return (
+    <>
+      <Nav path={path} />
+      <main className={layoutStyles.layout}>
+        <article>{children}</article>
+      </main>
+      <Footer editLink={editLink} />
+    </>
+  )
+}

src/components/nav.js

@@ -1,18 +1,19 @@
 import React from 'react'
-import navStyles from './nav.module.css'
+import * as navStyles from './nav.module.css'
 import { Link } from 'gatsby'
+import { StaticImage } from "gatsby-plugin-image"
 
 let pages = [
   ['home', '/', navStyles.desktopOnly],
-  ['zeiten & location', '/treff', ''],
-  ['events', '/events', ''],
-  ['über uns', '/about', ''],
-  ['kontakt', '/kontakt', ''],
-  ['verein', '/verein', ''],
-  ['supporte uns', '/support', ''],
+  ['zeiten & location', '/treff/', ''],
+  ['events', '/events/', ''],
+  ['über uns', '/about/', ''],
+  ['kontakt', '/kontakt/', ''],
+  ['verein', '/verein/', ''],
+  ['supporte uns', '/support/', ''],
 ]
 
-export default ({ path }) => {
+export default function Nav({ path }) {
   // nav items should always be active in the staticly generated html
   const isSSR = typeof window === 'undefined'
   const activeClasses = link =>
@@ -23,8 +24,15 @@ export default ({ path }) => {
       <header className={navStyles.header}>
         <Link to="/">
           <div className={navStyles.headerContent}>
-            {/* todo: fix image links in prod by using the gatsby component */}
-            <img alt="CTDO-Logo" width="80rem" src="/logo_ctdo.svg" />
+            <span className={navStyles.logoContainer}>
+              <StaticImage
+                className={navStyles.logo}
+                src="../images/logo_ctdo.svg"
+                alt="CTDO-Logo"
+                loading="eager"
+                placeholder="none"
+              />
+            </span>
             <span>
               <span className={navStyles.chaos}>Chaostreff</span> Dortmund
             </span>

src/components/nav.module.css

@@ -11,12 +11,13 @@
   align-items: center;
 }
 
-.headerContent img {
+.logo {
   margin-right: 1rem;
+  width: 5rem;
 }
 
 @media only screen and (max-width: 600px) {
-  .headerContent img {
+  .logoContainer {
     display: none;
   }
 }

src/components/nextTopic.js

@@ -5,7 +5,7 @@ const WEEK = 7
 // for easier mocking in tests
 var today = new Date()
 
-export default () => {
+export default function NextTopic() {
   // don't put the nextTopic date in the staticly generated html
   // because it would be outdated rather quickly
   const isSSR = typeof window === "undefined"

src/components/osmMap.js

@@ -1,7 +1,7 @@
 import React from "react"
-import mapStyles from "./osmMap.module.css"
+import * as mapStyles from "./osmMap.module.css"
 
-export default () => {
+export default function OsmMap() {
   return (
     <>
       <iframe
@@ -11,7 +11,11 @@ export default () => {
       ></iframe>
       <br />
       <small>
-        <a href="https://www.openstreetmap.org/?mlat=51.52769&amp;mlon=7.46500#map=19/51.52769/7.46500">
+        <a
+          href="https://www.openstreetmap.org/?mlat=51.52769&amp;mlon=7.46500#map=19/51.52769/7.46500"
+          target="_blank"
+          rel="noreferrer"
+        >
           In OpenStreetMap öffnen
         </a>
       </small>

src/components/roomState.js

@@ -7,7 +7,7 @@ const roomStateData = {
   error: { text: 'laut API kaputt', color: '#ee3333' },
 }
 
-export default () => {
+export default function RoomState() {
   const [openState, setOpenState] = useState('loading')
 
   useEffect(() => {

src/styles/fonts.css

@@ -2,6 +2,7 @@
   font-family: "Space Mono";
   font-style: bold;
   font-weight: 700;
+  font-display: swap;
   src: url("../../static/fonts/space-mono-v5-latin-700.eot"); /* IE9 Compat Modes */
   src: local("Space Mono"), local("SpaceMono-Regular"),
     url("../../static/fonts/space-mono-v5-latin-700.eot?#iefix")
@@ -21,6 +22,7 @@
   font-family: "Source Sans Pro";
   font-style: normal;
   font-weight: 400;
+  font-display: swap;
   src: url("../../static/fonts/source-sans-pro-v13-latin-regular.eot"); /* IE9 Compat Modes */
   src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
     url("../../static/fonts/source-sans-pro-v13-latin-regular.eot?#iefix")
@@ -43,6 +45,7 @@
   font-family: "Source Sans Pro";
   font-style: italic;
   font-weight: 400;
+  font-display: swap;
   src: url("../../static/fonts/source-sans-pro-v13-latin-italic.eot"); /* IE9 Compat Modes */
   src: local("Source Sans Pro Italic"), local("SourceSansPro-Italic"),
     url("../../static/fonts/source-sans-pro-v13-latin-italic.eot?#iefix")
@@ -65,6 +68,7 @@
   font-family: "Source Sans Pro";
   font-style: normal;
   font-weight: 700;
+  font-display: swap;
   src: url("../../static/fonts/source-sans-pro-v13-latin-700.eot"); /* IE9 Compat Modes */
   src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"),
     url("../../static/fonts/source-sans-pro-v13-latin-700.eot?#iefix")

src/templates/blogTemplate.js

@@ -1,8 +1,9 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { graphql } from 'gatsby'
 import Layout from '../components/layout'
 import { MDXRenderer } from 'gatsby-plugin-mdx'
 import { MDXProvider } from '@mdx-js/react'
+import { Helmet } from "react-helmet"
 
 const MdLeakH1 = props => <h2 {...props}># {props.children}</h2>
 const MdLeakH2 = props => <h3 {...props}>## {props.children}</h3>
@@ -24,17 +25,21 @@ export default function Template({
     body,
   } = data.mdx
 
-  useEffect(() => {
-    document.title = `ctdo - ${title.toLowerCase()}`
-  }, [title])
-
   return (
-    <Layout path={path}>
-      <MdLeakH1>{title}</MdLeakH1>
-      <MDXProvider components={components}>
-        <MDXRenderer>{body}</MDXRenderer>
-      </MDXProvider>
-    </Layout>
+    <>
+      <Helmet
+        htmlAttributes={{
+          lang: 'de',
+        }}
+        title={`ctdo - ${title.toLowerCase()}`}
+      />
+      <Layout path={path}>
+        <MdLeakH1>{title}</MdLeakH1>
+        <MDXProvider components={components}>
+          <MDXRenderer>{body}</MDXRenderer>
+        </MDXProvider>
+      </Layout>
+    </>
   )
 }
 

src/templates/siteTemplate.js

@@ -1,8 +1,9 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { graphql } from 'gatsby'
 import Layout from '../components/layout'
 import { MDXRenderer } from 'gatsby-plugin-mdx'
 import { MDXProvider } from '@mdx-js/react'
+import { Helmet } from "react-helmet"
 
 const ide =
   'https://repos.ctdo.de/neri/ctdo-homepage/_edit/master/src/webpages/'
@@ -27,18 +28,22 @@ export default function Template({
     body,
   } = data.mdx
 
-  useEffect(() => {
-    document.title = `ctdo - ${title.toLowerCase()}`
-  }, [title])
-
   const editLink = edit ? ide + edit : null
 
   return (
-    <Layout path={path} editLink={editLink}>
-      <MDXProvider components={components}>
-        <MDXRenderer>{body}</MDXRenderer>
-      </MDXProvider>
-    </Layout>
+    <>
+      <Helmet
+        htmlAttributes={{
+          lang: 'de',
+        }}
+        title={`ctdo - ${title.toLowerCase()}`}
+      />
+      <Layout path={path} editLink={editLink}>
+        <MDXProvider components={components}>
+          <MDXRenderer>{body}</MDXRenderer>
+        </MDXProvider>
+      </Layout>
+    </>
   )
 }
 

src/webpages/home.md

@@ -7,9 +7,7 @@ edit: 'home.md'
 import { Link } from "gatsby"
 import RoomState from "../components/roomState.js"
 
-<!-- todo: fix image links in prod by using the gatsby component -->
-
-<img width="100%" alt="Raum 2 mit gemütlichen Sofas" src="/header.jpg"></img>
+![Raum 2 mit gemütlichen Sofas](../images/header.jpg)
 
 # Räume sind <RoomState/>