Removed remark for MDX and housekeeping

TODO.md

@@ -8,8 +8,8 @@
 - [x] use Gatsby Link component
 - [x] put null/false/true into own component
 - [x] this fonts must be loaded in order
-  - Sync: Abril Fatface
-  - Sync: IBM Plex Mono
+  - ~~Sync: Abril Fatface~~
+  - ~~Sync: IBM Plex Mono~~
   - Async: Inter
 - [x] replace package.json with version.txt to reduce size
 - [x] add custom slug to all pages
@@ -42,16 +42,20 @@
 - [x] update mobile navigation
 - [x] add scroll to top
 - [x] check description, keywords and title on all pages
-- [ ] add md table of contents (for whatever reason, this is not working...)
+- [ ] add md table of contents (~~for whatever reason, this is not working...~~ thanks
+      MDX)
 - [x] use [auto-changelog](https://github.com/CookPete/auto-changelog) for the changelog
       page
 - [ ] image opening on big vertical images is broken, add max height and width + scrolling
       with mouse move
   - [ ] optimize image container to be bigger than the rest of the content (-margin?)
+  - [ ] add buttons download and full screen view
 - [ ] new image for start: me while coding
 - [ ] new image for start: me while writing
 - [x] skip this messy shit with elements wrapped in container tags
 - [ ] create page transitions: https://github.com/react-spring/react-spring/issues/894
+- [x] replace markdown remark with mdx
+  - [ ] add checkbox spanner to mdx
 - [x] writings no image => small hero
 - [x] put scss theme stuff in own mixin for compat.
 - [x] Add footer with: version, social-media, imprint, changelog, copyright notice
@@ -109,11 +113,12 @@
 - [ ] use [Scheme customizations][6] to map post meta e.g. for authors
 - [ ] use [Guess.js][7] <- this is just awesome, if it works with Gatsby
 - [ ] use new iPad and Apple Pencil to make ["Marvin/Design"-Logo][8]
+  - [x] current logo is ok!
   - [ ] new color profile
   - [ ] use better [color system][10]
 - [x] light theme
 - [ ] ~~Eventually new Font: [ZOOM-PRO][9]~~ (too expensive)
-- [x] open source the code 🤫 (requires above)
+- [x] open source the code 🤫
 
 [1]: https://www.gatsbyjs.org/packages/gatsby-plugin-preact/
 [2]: https://nim-lang.org/docs/tut1.html
@@ -122,7 +127,6 @@
 [5]: https://www.gatsbyjs.org/docs/seo/
 [6]: https://www.gatsbyjs.org/docs/schema-customization/#foreign-key-fields
 [7]: https://github.com/guess-js/guess/issues/233#issuecomment-537542342
-[8]:
-  https://cdn.dribbble.com/uploads/2566/original/3b90b34984de0d727ac99e2fc28afda8.png?1569966332
+[8]: https://cdn.dribbble.com/uploads/2566/original/3b90b34984de0d727ac99e2fc28afda8.png
 [9]: https://thedesignersfoundry.com/zoom-pro
 [10]: https://stripe.com/de/blog/accessible-color-systems

gatsby-config.js

@@ -12,7 +12,6 @@ require('dotenv').config({
 const { yellow, blue, bold } = require('kleur')
 const { getVersion, transformVersion } = require('./utils/version')
 const { activeEnv, isAudit, isProd } = require('./utils/environment')
-const commonRemark = require('./gatsby/config/commonRemark')
 const siteMetadata = require('./metadata')
 
 console.log(bold(siteMetadata.siteTitle))
@@ -24,7 +23,7 @@ module.exports = {
   siteMetadata,
   plugins: [
     `gatsby-plugin-preact`,
-    `gatsby-plugin-layout`,
+    // `gatsby-plugin-layout`,
     `gatsby-plugin-react-helmet-async`,
     {
       resolve: `gatsby-plugin-canonical-urls`,
@@ -120,36 +119,30 @@ module.exports = {
     {
       resolve: `gatsby-plugin-mdx`,
       options: {
+        extensions: [`.mdx`, `.md`],
         defaultLayouts: {
           default: require.resolve('./src/templates/PageSingle.jsx'),
         },
-        gatsbyRemarkPlugins: [...commonRemark],
-      },
-    },
-    {
-      resolve: 'gatsby-transformer-remark',
-      options: {
-        excerpt_separator: `<!-- EXCERPT -->`,
-        tableOfContents: {
-          maxDepth: 3,
-        },
-        commonmark: true,
-        footnotes: true,
-        pedantic: true,
-        gfm: true,
-        plugins: [
-          ...commonRemark,
+        gatsbyRemarkPlugins: [
+          'gatsby-remark-autolink-headers',
+          'gatsby-remark-check-links',
           {
-            resolve: 'gatsby-remark-external-links',
+            resolve: 'gatsby-remark-images',
             options: {
-              target: '_blank',
-              rel: 'nofollow',
+              maxWidth: 1200,
+              backgroundColor: 'transparent',
+              linkImagesToOriginal: true,
+              quality: 75,
+              withWebp: true,
+              showCaptions: true,
+            },
+          },
+          {
+            resolve: 'gatsby-remark-emoji',
+            options: {
+              emojiConversion: 'shortnameToUnicode',
             },
           },
-          'gatsby-remark-check-links',
-          `remark-checkbox-spanner`,
-          // TODO: remove plugin `remark-custom-classes`
-          // `remark-prismjs`,
         ],
       },
     },
@@ -178,25 +171,6 @@ module.exports = {
         ],
       },
     },
-    {
-      resolve: 'gatsby-plugin-manifest',
-      options: {
-        name: siteMetadata.siteTitle,
-        short_name: siteMetadata.siteTitleShort,
-        start_url: '/?source=pwa',
-        background_color: '#1f242e', // must equal `--background-color` in `./src/styles/themes/_<theme>.scss`
-        theme_color: '#fafcff', // how the UI should be tinted
-        display: 'standalone',
-        icon: './static/favicon.svg',
-      },
-    },
-    {
-      resolve: `gatsby-plugin-offline`,
-      options: {
-        appendScript: require.resolve(`./src/sw.js`),
-        precachePages: [`/about/`, `/imprint/`, `/credits/`, `/changelog/`],
-      },
-    },
     {
       resolve: `gatsby-plugin-humans-txt`,
       options: {
@@ -231,6 +205,18 @@ module.exports = {
         ],
       },
     },
+    {
+      resolve: 'gatsby-plugin-manifest',
+      options: {
+        name: siteMetadata.siteTitle,
+        short_name: siteMetadata.siteTitleShort,
+        start_url: '/?source=pwa',
+        background_color: '#1f242e', // must equal `--background-color` in `./src/styles/themes/_<theme>.scss`
+        theme_color: '#fafcff', // how the UI should be tinted
+        display: 'standalone',
+        icon: './static/favicon.svg',
+      },
+    },
     {
       resolve: 'gatsby-plugin-remove-generator',
       options: {
@@ -252,5 +238,23 @@ module.exports = {
         ])}.0/treemap.html`,
       },
     },
+    {
+      resolve: `gatsby-plugin-offline`,
+      options: {
+        appendScript: require.resolve(`./src/sw.js`),
+        precachePages: [
+          `/about/`,
+          `/imprint/`,
+          `/credits/`,
+          `/changelog/`,
+          '/projects/',
+          '/projects/*',
+          '/photography/',
+          '/photography/*',
+          '/writings/',
+          '/writings/*',
+        ],
+      },
+    },
   ],
 }

gatsby/node/createPages.js

@@ -1,17 +1,18 @@
+const fs = require('fs')
 const path = require('path')
 const { bold, dim } = require('kleur')
 
 const { isDev } = require('../../utils/environment')
 const { removeTrailingSlash, stringCapitalize } = require('../../utils/helper')
 
-module.exports = async ({ graphql, actions }) => {
+module.exports = async ({ graphql, actions, reporter }) => {
   const { createPage } = actions
 
   const {
-    data: { allMarkdownRemark },
+    data: { allMdx },
   } = await graphql(`
     {
-      allMarkdownRemark(filter: { fields: { slug: { ne: null } } }) {
+      allMdx(filter: { fields: { slug: { ne: null } } }) {
         edges {
           node {
             frontmatter {
@@ -28,7 +29,7 @@ module.exports = async ({ graphql, actions }) => {
     }
   `)
 
-  allMarkdownRemark.edges.forEach(({ node }) => {
+  allMdx.edges.forEach(({ node }) => {
     if (isDev) {
       console.log()
       console.log(dim(`Creating page`))
@@ -39,8 +40,14 @@ module.exports = async ({ graphql, actions }) => {
     }
 
     const templateName = stringCapitalize(node.fields.source)
+    const templatePath = path.resolve(`./src/templates/${templateName}Single.jsx`)
     const slug = removeTrailingSlash(node.fields.slug)
 
+    if (!fs.existsSync(templatePath)) {
+      reporter.info(`No template exist for: ${templateName}`)
+      return
+    }
+
     return createPage({
       path: slug,
       component: path.resolve(`./src/templates/${templateName}Single.jsx`),

gatsby/node/onCreateNode.js

@@ -7,52 +7,54 @@ const { stringSlugify } = require('../../utils/helper')
 module.exports = async ({ node, getNode, actions }) => {
   const { createNodeField } = actions
 
-  if (node.internal.type === 'MarkdownRemark') {
+  if ([`MarkdownRemark`, `Mdx`].includes(node.internal.type)) {
+    if (node.frontmatter.published === false && isProd) {
+      return // skip this unpublished stuff only in production
+    }
+
     const fileNode = getNode(node.parent)
     const source = fileNode.sourceInstanceName
 
     if (isDev) {
       console.log()
-      console.log(dim('Creating node'))
+      console.log(dim(`Creating ${source} node`))
       console.log(bold(fileNode.relativePath))
+      console.log(node.frontmatter)
       console.log(fileNode)
     }
 
-    let frontmatterDefault = {
+    let slug = node.frontmatter.slug || undefined
+    if (!slug) {
+      slug = createFilePath({ node, getNode })
+    }
+    slug = stringSlugify(slug)
+
+    let defaults = {
       published: true,
-      categories: [],
-      tags: [],
     }
 
     switch (source) {
       case 'projects':
-        frontmatterDefault = {
-          ...frontmatterDefault,
+        defaults = {
+          ...defaults,
+          categories: [],
+          tags: [],
           status: 'wip',
           website: '',
           team: [],
           roles: [],
         }
+        node.frontmatter = { ...defaults, ...node.frontmatter }
+        break
+      case 'writings':
+        defaults = {
+          ...defaults,
+          categories: [],
+          tags: [],
+        }
+        node.frontmatter = { ...defaults, ...node.frontmatter }
         break
-      case 'package':
-        return
-    }
-
-    node.frontmatter = { ...frontmatterDefault, ...node.frontmatter }
-
-    if (node.frontmatter.published === false && isProd) {
-      return // skip this unpublished trash only in production
-    }
-
-    if (isDev) {
-      console.log(node.frontmatter)
-    }
-
-    let slug = node.frontmatter.slug
-    if (!slug) {
-      slug = createFilePath({ node, getNode })
     }
-    slug = stringSlugify(slug)
 
     createNodeField({
       node,