Add language to writings

Add keywords to writings
Add theme switch
Add Layout component to add initial Helmet att
Rename all scss modules with an underscore
Added Storage module

Author: muuvmuuv

.prettierrc

@@ -3,5 +3,6 @@
   "semi": false,
   "singleQuote": true,
   "proseWrap": "always",
-  "endOfLine": "lf"
+  "endOfLine": "lf",
+  "arrowParens": "always"
 }

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

@@ -3,15 +3,14 @@ title: Der Morgen, die Nacht
 description: Ein kleines süßes Gedicht
 created: 02-23-2015
 modified: 07-12-2019
-language: de
 
 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]
+language: de
 keywords: [dreams]
 ---
 

content/writings/__demo__/index.md

@@ -4,15 +4,14 @@ description: Ein kleines süßes Gedicht
 slug: custom slug
 created: 09-23-2019
 modified: 07-12-2019
-language: en
 
 header:
   image: image.jpg
   author: Daniil Vnoutchkov
   link: https://unsplash.com/@daniilvnoutchkov?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge
   source: unsplash
 
-tags: [german]
+language: en
 keywords: [dreams]
 ---
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "marvin-digital",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "private": true,
   "description": "Portfolio of Marvin Heilemann (@muuvmuuv)",
   "repository": {
@@ -40,32 +40,32 @@
   "dependencies": {
     "@ibm/plex": "^4.0.2",
     "dayjs": "^1.8.19",
-    "gatsby": "^2.18.18",
-    "gatsby-image": "^2.2.37",
+    "gatsby": "^2.18.21",
+    "gatsby-image": "^2.2.38",
     "gatsby-plugin-breadcrumb": "^6.3.0",
-    "gatsby-plugin-canonical-urls": "^2.1.18",
-    "gatsby-plugin-catch-links": "^2.1.21",
+    "gatsby-plugin-canonical-urls": "^2.1.19",
+    "gatsby-plugin-catch-links": "^2.1.24",
     "gatsby-plugin-humans-txt": "^1.1.4",
-    "gatsby-plugin-layout": "^1.1.18",
-    "gatsby-plugin-manifest": "^2.2.34",
+    "gatsby-plugin-layout": "^1.1.21",
+    "gatsby-plugin-manifest": "^2.2.37",
     "gatsby-plugin-module-resolver": "^1.0.3",
-    "gatsby-plugin-postcss": "^2.1.18",
-    "gatsby-plugin-preact": "^3.1.24",
+    "gatsby-plugin-postcss": "^2.1.19",
+    "gatsby-plugin-preact": "^3.1.25",
     "gatsby-plugin-purgecss": "^4.0.1",
-    "gatsby-plugin-react-helmet": "^3.1.18",
+    "gatsby-plugin-react-helmet": "^3.1.21",
     "gatsby-plugin-remove-generator": "^1.0.4",
     "gatsby-plugin-robots-txt": "^1.5.0",
-    "gatsby-plugin-sass": "^2.1.26",
-    "gatsby-plugin-sharp": "^2.3.10",
-    "gatsby-plugin-sitemap": "^2.2.24",
+    "gatsby-plugin-sass": "^2.1.27",
+    "gatsby-plugin-sharp": "^2.3.13",
+    "gatsby-plugin-sitemap": "^2.2.25",
     "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
     "gatsby-remark-emoji": "0.0.3",
-    "gatsby-remark-images": "^3.1.39",
-    "gatsby-remark-prismjs": "^3.3.29",
-    "gatsby-source-filesystem": "^2.1.43",
-    "gatsby-transformer-json": "^2.2.22",
-    "gatsby-transformer-remark": "^2.6.45",
-    "gatsby-transformer-sharp": "^2.3.9",
+    "gatsby-remark-images": "^3.1.42",
+    "gatsby-remark-prismjs": "^3.3.30",
+    "gatsby-source-filesystem": "^2.1.46",
+    "gatsby-transformer-json": "^2.2.25",
+    "gatsby-transformer-remark": "^2.6.48",
+    "gatsby-transformer-sharp": "^2.3.12",
     "kleur": "^3.0.3",
     "node-sass": "^4.13.0",
     "postcss-easing-gradients": "^3.0.1",
@@ -83,7 +83,7 @@
     "del-cli": "^3.0.0",
     "eslint": "^6.8.0",
     "eslint-config-react-app": "^5.1.0",
-    "gatsby-plugin-remove-trailing-slashes": "^2.1.17",
+    "gatsby-plugin-remove-trailing-slashes": "^2.1.20",
     "lighthouse": "^5.6.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",

package.json

@@ -4,15 +4,18 @@ import Backdrop from './Backdrop'
 import Time from './Time'
 import Language from './Language'
 import Separator from './Separator'
+import Keywords from './Keywords'
 
-const HeroWritings = ({ img, title, lang, time }) => (
+const HeroWritings = ({ img, title, keywords, lang, time }) => (
   <div id="hero">
     <Backdrop img={img.image.childImageSharp.fluid}></Backdrop>
 
     <div className="container">
       <div className="post-title">
         <h1>{title}</h1>
         <h2>
+          <Keywords list={keywords} />
+          <Separator />
           <Time date={time} format="LL" />
           <Separator />
           <Language lang={lang} />

src/components/HeroWritings.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const Keywords = ({ list }) => (
+  <span className="keywords">
+    {list.map((item, i) => (
+      <span key={i}>
+        {item}
+        {list.length > i + 1 ? ', ' : ''}
+      </span>
+    ))}
+  </span>
+)
+
+export default Keywords

src/components/Keywords.jsx

@@ -0,0 +1,41 @@
+import React, { useContext } from 'react'
+
+import { Theme } from '../store'
+import { modes } from '../store/theme'
+
+/**
+ * @link https://codepen.io/muuvmuuv/pen/jOEzYLa?editors=0110
+ */
+const ThemeSwitch = () => {
+  const themeState = useContext(Theme.State)
+
+  const current = modes.findIndex((m) => m === themeState.mode)
+  const index = current + 1 >= modes.length ? 0 : current + 1
+  const nextMode = modes[index]
+
+  function toggleTheme(event) {
+    const element = event.target
+    element.classList.add('animating')
+    themeState.toggle()
+  }
+
+  function onAnimationEnd(event) {
+    const element = event.target
+    element.classList.remove('animating')
+  }
+
+  return (
+    <button
+      id="theme-switch"
+      onKeyPress={toggleTheme}
+      onClick={toggleTheme}
+      mode={themeState.mode}
+      theme={themeState.theme}
+      onAnimationEnd={onAnimationEnd}
+      aria-label={`Switch to ${nextMode} appearance`}
+      title={`Switch to ${nextMode} appearance`}
+    ></button>
+  )
+}
+
+export default ThemeSwitch

src/components/ThemeSwitch.jsx

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react'
+import { Helmet } from 'react-helmet-async'
+
+import { Theme } from '../store'
+
+const Layout = ({ children }) => {
+  const themeState = useContext(Theme.State)
+
+  return (
+    <>
+      <Helmet
+        htmlAttributes={{
+          theme: themeState.theme,
+        }}
+      />
+
+      {children}
+    </>
+  )
+}
+
+export default Layout

src/layouts/Layout.jsx

@@ -1,18 +1,13 @@
 import React from 'react'
 
 import Logo from '../components/Logo'
-import Navigation from '../components/Navigation'
 import Breadcrumb from '../components/Breadcrumb'
+import Navigation from '../components/Navigation'
+import ThemeSwitch from '../components/ThemeSwitch'
 
 class Header extends React.PureComponent {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      sticky: false,
-    }
-
-    this.handleScroll = this.handleScroll.bind(this)
+  state = {
+    sticky: false,
   }
 
   componentDidMount() {
@@ -24,7 +19,7 @@ class Header extends React.PureComponent {
   }
 
   // TODO: test this with SSR
-  handleScroll(event) {
+  handleScroll = (event) => {
     this.setState({
       sticky: window.pageYOffset > 0,
     })
@@ -36,6 +31,7 @@ class Header extends React.PureComponent {
         <Logo />
         <Breadcrumb />
         <Navigation />
+        <ThemeSwitch />
       </header>
     )
   }

src/layouts/header.jsx

@@ -3,12 +3,15 @@ import { HelmetProvider } from 'react-helmet-async'
 
 import { Store } from '../store'
 import Header from './Header'
+import Layout from './Layout'
 
 const App = ({ children }) => (
   <Store>
     <HelmetProvider>
-      <Header></Header>
-      <main>{children}</main>
+      <Layout>
+        <Header></Header>
+        <main>{children}</main>
+      </Layout>
     </HelmetProvider>
   </Store>
 )

src/layouts/index.jsx

@@ -6,6 +6,7 @@ import { isDev } from '../environment'
 import Link from '../components/Link'
 import SEO from '../components/SEO'
 import { History } from '../store'
+import Time from '../components/Time'
 
 const Page = ({
   pageContext: { breadcrumb },
@@ -40,11 +41,16 @@ const Page = ({
 
       <div className="container container--medium">
         <div className="list">
-          {edges.map(({ node }, index) => (
-            <Link key={index} to={node.fields.slug}>
-              <h2>{node.frontmatter.title}</h2>
-              <p>{node.excerpt}</p>
-            </Link>
+          {edges.map(({ node: { frontmatter, fields, excerpt } }, index) => (
+            <div className="item" key={index}>
+              <Link to={fields.slug}>
+                <header>
+                  <h2>{frontmatter.title}</h2>
+                  <Time date={frontmatter.created} />
+                </header>
+                <p>{excerpt}</p>
+              </Link>
+            </div>
           ))}
         </div>
       </div>
@@ -65,6 +71,8 @@ export const pageQuery = graphql`
         node {
           frontmatter {
             title
+            keywords
+            created
           }
           fields {
             slug

src/pages/writings.jsx

@@ -0,0 +1,40 @@
+function setItem(key, data) {
+  return new Promise((resolve, reject) => {
+    if (!key || !data) {
+      reject('No key or data provided!')
+    }
+    localStorage.setItem(key, JSON.stringify(data))
+    resolve()
+  })
+}
+
+function getItem(key) {
+  return new Promise((resolve, reject) => {
+    if (!key) {
+      reject('No key provided!')
+    }
+    let content = localStorage.getItem(key)
+    content = JSON.parse(content)
+    resolve(content)
+  })
+}
+
+function removeItem(key) {
+  return new Promise((resolve, reject) => {
+    if (!key) {
+      reject('No key provided!')
+    }
+    localStorage.removeItem(key)
+    resolve()
+  })
+}
+
+function clearAll() {
+  return new Promise(resolve => {
+    localStorage.clear()
+    resolve()
+  })
+}
+
+const Storage = { setItem, getItem, removeItem, clearAll }
+export default Storage

src/storage.js

@@ -7,16 +7,16 @@
 
 import React from 'react'
 
-import { Scheme } from './scheme'
+import { Theme } from './theme'
 import { History } from './history'
 import { Nav } from './nav'
 
-const providers = [<Scheme.Provider />, <History.Provider />, <Nav.Provider />]
+const providers = [<Theme.Provider />, <History.Provider />, <Nav.Provider />]
 
 const Store = ({ children: initial }) =>
   providers.reduce(
     (children, parent) => React.cloneElement(parent, { children }),
     initial
   )
 
-export { Store, Scheme, History, Nav }
+export { Store, Theme, History, Nav }