Update

.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  globals: {
+    __PATH_PREFIX__: true,
+  },
+  extends: `react-app`,
+}

TODO.md

@@ -1,3 +1,10 @@
+- [x] add eslint
+- [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
+  - Async: Inter
 - [ ] add md table of contents
 - [ ] add NOW deployment
 - [ ] add bundle analyzer

content/portfolio/__demo__/index.md → content/projects/__demo__/index.md

@@ -12,6 +12,7 @@ status: wip
 website: https://marvin.digital/
 team:
   - name: Marvin Heilemann
+    link: https://github.com/muuvmuuv/portfolio
 
 tags: [website, re-design]
 categories: [website]

content/writings/Der Morgen, die Nacht/index.md

@@ -0,0 +1,44 @@
+---
+title: Der Morgen, die Nacht
+description: Ein kleines süßes Gedicht
+created: 02-23-2015
+modified: 07-12-2019
+
+header:
+  image: image.jpg
+  author: Luis Alfonso Orellana
+  link: https://unsplash.com/@alphonzs?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge
+  source: unsplash
+
+tags: [german]
+keywords: [dreams]
+---
+
+Ich Träume, und entdecke verborgene Liebe und Schönheit. Streife durch Wälder,
+stecke meine Füße in den warmen Sand am glasklaren Meer und staune über die
+vielen Sterne die unseren Nachthimmel bedecken. Viele Nächte träume ich von dem
+und Worten die ich wieder gedenke zu sagen, wenn der hellste Stern auftaucht.
+Worte die so viel bedeuten, dass sie nur der Traum spricht. Worte die so viel
+Verantwortung tragen und Worte welche genauso beschützen.
+
+Am Morgen schaue ich in das Klare dessen diese Worte bestimmt sind. Nur die
+Schönheit der Natur könnte es mit ihr aufnehmen. Schönheit und Einzigartigkeit,
+welche sich nicht ausdrücken lässt. Zärtlichkeit die sich nur durch die des
+Wassers, dass sich seinen Weg durch Steine und allen anderen Sorgen nimmt,
+beschreiben lässt. Wenn ich durch das sanfte Gold streife und am warmen ihrer
+festhalte, in ihre Paare der Fesselung schaue und begreife wie mir geschieht.
+Ich möchte sie aussprechen, die Worte welche eine Zukunft bilden. Worte welche
+nach dem sie gesprochen wurden, nicht zurückgenommen werden können. Es beginnt
+ein Schmerz der, Schmerz der keine Sekunden, sondern Minuten anhält. Schmerz,
+welcher Bedeutung hat.
+
+Zeigt der Schmerz; Leidenschaft oder das Gefühl geborgen und entflohen zu sein.
+Die Gründe dieses schönen Gefühls, sind kein Schmerz, der nicht gerne ertragen
+wird, sondern Schmerz welcher schützt. Schützt vor Leidenschaft, welche Falsch
+gesprochen wird. Schützt vor Geborgenheit und dem Willen allem schlechten zu
+entfliehen. Sobald ich meine Augen wieder schließe, der Tag sein Ende und alle
+Wahrheit sein Gedanken nimmt, fällt die Nacht hinein. Die der man verfällt und
+die welche einem tiefe Wünsche und Gefühle wahr werden lässt. Nacht die einem
+alle Angst und den Schmerz nimmt Worte zu sagen. In der kein Mut benötigt wird
+und kein Herz einen aufhält eventuell das falsche zu tun. Manchmal ist der
+Stern, der so Hell erscheint auch der welcher am nächsten unerreichbar ist.

data.txt

@@ -0,0 +1,97 @@
+{
+  "allMarkdownRemark": {
+    "edges": [
+      {
+        "node": {
+          "frontmatter": {
+            "published": true
+          },
+          "fields": {
+            "slug": "/eyecall/",
+            "source": "projects",
+            "started": "01-11-2016",
+            "ended": "01-27-2017"
+          }
+        }
+      },
+      {
+        "node": {
+          "frontmatter": {
+            "published": true
+          },
+          "fields": {
+            "slug": "/m8finder/",
+            "source": "projects",
+            "started": "08-03-2018",
+            "ended": null
+          }
+        }
+      },
+      {
+        "node": {
+          "frontmatter": {
+            "published": true
+          },
+          "fields": {
+            "slug": "/__demo__/",
+            "source": "projects",
+            "started": "09-23-2019",
+            "ended": "09-28-2019"
+          }
+        }
+      },
+      {
+        "node": {
+          "frontmatter": {
+            "published": true
+          },
+          "fields": {
+            "slug": "/additive/",
+            "source": "projects",
+            "started": null,
+            "ended": "01-10-2019"
+          }
+        }
+      },
+      {
+        "node": {
+          "frontmatter": {
+            "published": true
+          },
+          "fields": {
+            "slug": "/isabella-gensch/",
+            "source": "projects",
+            "started": null,
+            "ended": null
+          }
+        }
+      },
+      {
+        "node": {
+          "frontmatter": {
+            "published": true
+          },
+          "fields": {
+            "slug": "/influxe-gaming/",
+            "source": "projects",
+            "started": null,
+            "ended": null
+          }
+        }
+      },
+      {
+        "node": {
+          "frontmatter": {
+            "published": true
+          },
+          "fields": {
+            "slug": "/ef-education-first/",
+            "source": "projects",
+            "started": null,
+            "ended": null
+          }
+        }
+      }
+    ]
+  }
+}

gatsby-browser.js

@@ -1,5 +1,74 @@
-require('./src/styles/app.scss')
-
+const pkg = require('./package.json')
+const { isProd } = require('./gatsby/utils')
 const dayjs = require('dayjs')
+const UTC = require('dayjs/plugin/utc')
+const LocalizedFormat = require('dayjs/plugin/localizedFormat')
+
+require('./src/styles/app.scss')
 require('dayjs/locale/de')
-dayjs.locale('de')
+
+exports.onInitialClientRender = () => {
+  setDefaultTime()
+
+  if (isProd) {
+    printCorporateMessage()
+  }
+}
+
+function setDefaultTime() {
+  dayjs.extend(LocalizedFormat)
+  dayjs.extend(UTC)
+  dayjs.locale('en')
+
+  if (window.isDev) {
+    console.log('Preferred language:', window.navigator.language)
+  }
+}
+
+function printCorporateMessage() {
+  const colorPrimary = '#00e2a1'
+  const colorDark = '#1f242e'
+
+  const styleShared = `
+    font-family: 'Inter', sans-serif;
+    font-size: 16px;
+    line-height: 1.8;
+  `
+  const styleBold = styleShared + 'font-weight: 700;'
+  const styleBadge = `
+    padding: 0px 8px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    font-size: 12px;
+    color: #FFFFFF;
+  `
+  const styleName =
+    styleShared +
+    styleBadge +
+    `
+    background: ${colorPrimary};
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  `
+  const styleVersion =
+    styleShared +
+    styleBadge +
+    `
+    background: ${colorDark};
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  `
+
+  console.log(`%cMarvin/Design%cv${pkg.version}`, styleName, styleVersion)
+  console.log(
+    `%c
+Welcome fellow %cdeveloper%c!  🎉
+I'm happy to see you here. If you want to have look on my code
+and the architecture, my portfolio is available on GitHub:
+https://github.com/muuvmuuv/portfolio 🔒
+    `,
+    styleShared,
+    styleBold,
+    styleShared
+  )
+}

gatsby-config.js

@@ -1,17 +1,19 @@
 const { yellow } = require('kleur')
+const { activeEnv } = require('./gatsby/utils')
+const metadata = require('./metadata')
+const { parsed } = require('dotenv').config()
 
-const activeEnv =
-  process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || 'development'
-const isDev = activeEnv === 'development'
+console.log(`Using environment: ${yellow(activeEnv)}\n`)
 
-console.log(`Using environment config: ${yellow(activeEnv)}\n`)
+const siteMetadata = {
+  ...metadata,
+  ...{
+    siteUrl: parsed.SITE_URL,
+  },
+}
 
 module.exports = {
-  siteMetadata: {
-    title: `Marvin/Digital`,
-    author: `muuvmuuv`,
-    description: `Projects Marvin Heilemann has been working on now and in the past.`,
-  },
+  siteMetadata,
   plugins: [
     'gatsby-plugin-layout',
     `gatsby-plugin-react-helmet`,
@@ -41,8 +43,15 @@ module.exports = {
     {
       resolve: `gatsby-source-filesystem`,
       options: {
-        name: `portfolio`,
-        path: `${__dirname}/content/portfolio`,
+        name: `projects`,
+        path: `${__dirname}/content/projects`,
+      },
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `writings`,
+        path: `${__dirname}/content/writings`,
       },
     },
     {