So much stuff

Wrap root element in SSR to provide Store context Update browserlist (MVP) Moved custom MDX components to src Housekeeping Rreplaced react with preact in PROD !!!!!! Mixin for themes Footer fninished Projects finished Pages itself finished Tested Riot API Updated todos Thoughts about Privacy/Cookies Using frontmatter for MDX now (yassss)
muuvmuuv · Jan 16, 2020 · ff3d5b3 · ff3d5b3
1 parent 84ebadd
commit ff3d5b3
Show file tree

Hide file tree

Showing 71 changed files with 668 additions and 650 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -1 +1,2 @@
+last 1 version
 > 1% in DE
diff --git a/.env.development b/.env.development
@@ -6,3 +6,6 @@
 
 # siteMetdata
 SITE_URL=http://localhost:8000
+
+# Riot
+RIOT_API_KEY="RGAPI-d4da9adb-5e50-48da-818c-d00ec0fc9651"
diff --git a/ISSUES.md b/ISSUES.md
diff --git a/TODO.md b/TODO.md
@@ -22,11 +22,13 @@
     - [ ] Test
   - [ ] Everything pushed to master -> marvin.digital
   - [ ] Everything pushed to development -> dev.marvin.digital
-- [ ] replace React with [Preact][1] (check if it works when finished)
+- [x] replace React with [Preact][1] (check if it works when finished)
+- [x] add version to GraphQL data not as file...
 - [ ] new image for start: me while coding
 - [ ] new image for start: me while writing
-- [ ] put scss theme stuff in own mixin for compat.
-- [ ] Add footer with: version, social-media, imprint, changelog, copyright
+- [ ] MDX pages are not using remark images plugin
+- [x] put scss theme stuff in own mixin for compat.
+- [x] Add footer with: version, social-media, imprint, changelog, copyright
       notice
 - [x] test react helmet async
 - [x] add "increase version" by script
@@ -35,12 +37,13 @@
 - [x] add github bots to auto update dependencies
 - [x] add lighthouse from M8FINDER project
 - [ ] add scroll to top
-- [ ] use CSS blend modes (overlay)
+- [ ] ~~use CSS blend modes (overlay)~~
 - [ ] add League of Legends API to show profile and stats
+  - https://developer.riotgames.com/apis
 - [x] add classes to tags https://github.com/gatsbyjs/gatsby/issues/17824
 - [ ] use Inter variable Font: https://rsms.me/inter/var-test.html
 - [ ] set font feature settings (numbers, dates, etc.):
-      https://rsms.me/inter/#features
+  - https://rsms.me/inter/#features
 - [ ] Upload all writings
   - [ ] Grammatical corrections
   - [ ] Find images on Unsplash
@@ -56,17 +59,17 @@
 - [ ] PWA: add service worker for offline usage
 - [ ] ~~add tests?!~~
 - [ ] ~~move from bash script to [Nim][2]~~
-- [ ] check markdown for ["Vary sentence length"][3]
-- [ ] check markdown for [Readability][4]
-- [ ] generate [rich snippets][5]
+- [ ] (auto) check markdown for ["Vary sentence length"][3]
+- [ ] (auto) check markdown for [Readability][4]
+- [ ] (auto) generate [rich snippets][5]
 - [ ] use [Scheme customizations][6] to map post meta e.g. for authors
-- [ ] use [Guess.js][7]
+- [ ] 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]
   - [ ] new color profile
   - [ ] use better [color system][10]
-  - [ ] light theme
-- [ ] Eventually by Font; [ZOOM-PRO][9]
-- [ ] use external CMS service for data instead of file based
+- [x] light theme
+- [ ] ~~Eventually new Font: [ZOOM-PRO][9]~~ (too expensive)
+- [ ] !!! use external CMS service for data instead of file based !!!
 - [ ] open source the code 🤫 (requires above)
 
 [1]: https://www.gatsbyjs.org/packages/gatsby-plugin-preact/

diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -4,37 +4,24 @@
  * @see https://www.gatsbyjs.org/docs/browser-apis/
  */
 
-const React = require('react')
-const { MDXProvider } = require('@mdx-js/react')
-
-const { isProd, isDev } = require('./gatsby/environment')
-
+// const { isDev } = require('./gatsby/environment')
 const printCorporateMessage = require('./gatsby/browser/corporateMessage')
 const setDefaultTime = require('./gatsby/browser/defaultTime')
-const mdxCustomComponents = require('./gatsby/browser/mdxCustomComponents')
 
 require('./src/styles/app.scss')
 
+exports.wrapRootElement = require('./gatsby/wrapRootElement')
+// exports.wrapPageElement = require('./gatsby/wrapPageElement')
+
 exports.onClientEntry = () => {
   setDefaultTime()
 }
 
 exports.onInitialClientRender = () => {
-  if (isProd) {
-    printCorporateMessage()
-  }
-}
-
-exports.onRouteUpdate = ({ location }) => {
-  const path = location.pathname + location.search + location.hash
-
-  if (isDev) {
-    console.info('Track pageview of:', path)
-  }
+  printCorporateMessage()
 }
 
-exports.wrapRootElement = ({ element }) => (
-  <MDXProvider components={mdxCustomComponents.components}>
-    {element}
-  </MDXProvider>
-)
+// exports.onRouteUpdate = ({ location }) => {
+//   const path = location.pathname + location.search + location.hash
+//   console.info('Track pageview of:', path)
+// }
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -9,11 +9,52 @@ require('dotenv').config({
 })
 
 const path = require('path')
-const { yellow } = require('kleur')
+const { yellow, blue } = require('kleur')
 const { getPkgVersion, siteMetadata } = require('./gatsby/utils')
 const { activeEnv, isDev } = require('./gatsby/environment')
 
-console.log(`Using environment: ${yellow(activeEnv)}\n`)
+console.log(`Environment: ${yellow(activeEnv)}\n`)
+console.log(`Version: ${blue(siteMetadata.version)}\n`)
+process.env.GATSBY_APP_VERSION = siteMetadata.version
+
+// https://www.gatsbyjs.org/docs/mdx/plugins/
+const commonRemarkPlugins = [
+  {
+    resolve: 'gatsby-remark-images',
+    options: {
+      maxWidth: 1600,
+      backgroundColor: 'transparent',
+      linkImagesToOriginal: true,
+      quality: 75,
+      withWebp: true,
+      showCaptions: true,
+    },
+  },
+  {
+    resolve: 'gatsby-remark-emoji',
+    options: {
+      emojiConversion: 'shortnameToUnicode',
+    },
+  },
+  {
+    resolve: `gatsby-remark-prismjs`,
+    options: {
+      noInlineHighlight: true,
+      prompt: {
+        user: 'root',
+        host: 'localhost',
+        global: false,
+      },
+      // BUG: https://github.com/gatsbyjs/gatsby/issues/17997
+      // BUG: https://github.com/gatsbyjs/gatsby/issues/20642
+      // plugins: [
+      //   require.resolve(
+      //     'prismjs/plugins/show-invisibles/prism-show-invisibles'
+      //   ),
+      // ],
+    },
+  },
+]
 
 module.exports = {
   siteMetadata,
@@ -50,19 +91,17 @@ module.exports = {
       },
     },
     {
-      resolve: `gatsby-plugin-mdx`,
+      resolve: `gatsby-source-filesystem`,
       options: {
-        defaultLayouts: {
-          // would work, but can not pass props to it so useless to give e.g. a page title
-          // default: require.resolve('./src/templates/PageSingle.jsx'),
-        },
+        name: `images`,
+        path: `${__dirname}/src/images`,
       },
     },
     {
       resolve: `gatsby-source-filesystem`,
       options: {
-        name: `images`,
-        path: `${__dirname}/src/images`,
+        name: `pages`,
+        path: `${__dirname}/src/pages/`,
       },
     },
     {
@@ -79,6 +118,15 @@ module.exports = {
         path: `${__dirname}/content/writings`,
       },
     },
+    {
+      resolve: `gatsby-plugin-mdx`,
+      options: {
+        defaultLayouts: {
+          default: require.resolve('./src/templates/PageSingle.jsx'),
+        },
+        gatsbyRemarkPlugins: [...commonRemarkPlugins],
+      },
+    },
     {
       resolve: 'gatsby-transformer-remark',
       options: {
@@ -91,34 +139,7 @@ module.exports = {
         pedantic: true,
         gfm: true,
         plugins: [
-          {
-            resolve: 'gatsby-remark-images',
-            options: {
-              maxWidth: 1600,
-              backgroundColor: 'transparent',
-              linkImagesToOriginal: true,
-              quality: 75,
-              withWebp: true,
-              showCaptions: true,
-            },
-          },
-          {
-            resolve: 'gatsby-remark-emoji',
-            options: {
-              emojiConversion: 'shortnameToUnicode',
-            },
-          },
-          {
-            resolve: `gatsby-remark-prismjs`,
-            options: {
-              noInlineHighlight: true,
-              prompt: {
-                user: 'root',
-                host: 'localhost',
-                global: false,
-              },
-            },
-          },
+          ...commonRemarkPlugins,
           {
             resolve: 'gatsby-remark-external-links',
             options: {
@@ -128,6 +149,7 @@ module.exports = {
           },
           `remark-checkbox-spanner`,
           {
+            // TODO: try to replace this in the future with MDX custom components/shortcodes
             resolve: `remark-custom-classes`,
             options: {
               root: {

diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -3,3 +3,6 @@
  *
  * @see https://www.gatsbyjs.org/docs/ssr-apis/
  */
+
+exports.wrapRootElement = require('./gatsby/wrapRootElement')
+// exports.wrapPageElement = require('./gatsby/wrapPageElement')
diff --git a/gatsby/browser/corporateMessage.js b/gatsby/browser/corporateMessage.js
@@ -1,5 +1,4 @@
 const consoleImage = require('./consoleImage')
-const version = require('../../static/version')
 
 /**
  * Print some cool stuff to the console.
@@ -38,7 +37,12 @@ module.exports = () => {
     border-bottom-right-radius: 3px;
   `
 
-  console.log(`%cMarvin/Design%cv${version}`, styleName, styleVersion)
+  console.log(
+    `%cMarvin/Design`,
+    `%cv${process.env.GATSBY_APP_VERSION}`,
+    styleName,
+    styleVersion
+  )
   console.log(
     `%c
 Welcome fellow %cdeveloper%c!  🎉
@@ -50,5 +54,6 @@ https://github.com/muuvmuuv/portfolio 🔒
     styleBold,
     styleShared
   )
+
   consoleImage(`${window.location.origin}/me.gif`, 50)
 }
diff --git a/gatsby/browser/defaultTime.js b/gatsby/browser/defaultTime.js
@@ -1,15 +1,16 @@
 const dayjs = require('dayjs')
 const UTC = require('dayjs/plugin/utc')
 const LocalizedFormat = require('dayjs/plugin/localizedFormat')
+
 const { isDev } = require('../environment.js')
 
 const availableLanguages = ['en', 'de']
 
 // include locale for each available language
 require('dayjs/locale/de')
 
-const localeHelper = lang => {
-  const locale = availableLanguages.find(locale => {
+const localeHelper = (lang) => {
+  const locale = availableLanguages.find((locale) => {
     if (locale === lang) {
       return true
     }