Added icons

Housekeeping
Cleaning
Optimized MDX layout
Done hooks
Added footer
More light/dark theme

.vscode/settings.json

@@ -1,7 +1,9 @@
 {
   "cSpell.words": [
     "dayjs",
-    "taskz"
+    "dribbble",
+    "taskz",
+    "xing"
   ],
   "todo-tree.filtering.excludeGlobs": [
     "**/*.md",

gatsby-config.js

@@ -34,7 +34,30 @@ module.exports = {
     'gatsby-transformer-json',
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
-    `gatsby-plugin-mdx`,
+    {
+      resolve: 'gatsby-plugin-react-svg',
+      options: {
+        rule: {
+          include: /\.svg$/,
+          options: {
+            props: {
+              preserveAspectRatio: 'xMidYMid meet',
+              width: '100%',
+              height: '100%',
+            },
+          },
+        },
+      },
+    },
+    {
+      resolve: `gatsby-plugin-mdx`,
+      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'),
+        },
+      },
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {

metadata.js

@@ -35,6 +35,20 @@ module.exports = {
       link: '/writings',
     },
   ],
+  footerLinks: [
+    {
+      name: 'Credits',
+      link: '/credits',
+    },
+    {
+      name: 'Changelog',
+      link: '/changelog',
+    },
+    {
+      name: 'Imprint',
+      link: '/imprint',
+    },
+  ],
   socialLinks: [
     {
       name: 'Twitter',

package.json

@@ -56,6 +56,7 @@
     "gatsby-plugin-preact": "^3.1.25",
     "gatsby-plugin-purgecss": "^4.0.1",
     "gatsby-plugin-react-helmet": "^3.1.21",
+    "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-remove-generator": "^1.0.4",
     "gatsby-plugin-robots-txt": "^1.5.0",
     "gatsby-plugin-sass": "^2.1.27",
@@ -71,7 +72,9 @@
     "gatsby-transformer-json": "^2.2.25",
     "gatsby-transformer-remark": "^2.6.48",
     "gatsby-transformer-sharp": "^2.3.12",
+    "ionicons": "^4.6.3",
     "kleur": "^3.0.3",
+    "lodash": "^4.17.15",
     "node-sass": "^4.13.0",
     "postcss-easing-gradients": "^3.0.1",
     "preact": "^10.2.1",

src/components/Icon.jsx

@@ -0,0 +1,62 @@
+import React from 'react'
+
+import AngularIcon from '../images/icons/angular.svg'
+import AppleIcon from '../images/icons/apple.svg'
+import CodepenIcon from '../images/icons/codepen.svg'
+import DiscordIcon from '../images/icons/discord.svg'
+import DribbbleIcon from '../images/icons/dribbble.svg'
+import GithubIcon from '../images/icons/github.svg'
+import HackernewsIcon from '../images/icons/hackernews.svg'
+import InstagramIcon from '../images/icons/instagram.svg'
+import IonicIcon from '../images/icons/ionic.svg'
+import LeagueOfLegendsIcon from '../images/icons/league-of-legends.svg'
+import MarkdownIcon from '../images/icons/markdown.svg'
+import NodejsIcon from '../images/icons/nodejs.svg'
+import NpmIcon from '../images/icons/npm.svg'
+import PythonIcon from '../images/icons/python.svg'
+import SassIcon from '../images/icons/sass.svg'
+import SteamIcon from '../images/icons/steam.svg'
+import TwitchIcon from '../images/icons/twitch.svg'
+import TwitterIcon from '../images/icons/twitter.svg'
+import UnsplashIcon from '../images/icons/unsplash.svg'
+import WindowsIcon from '../images/icons/windows.svg'
+import WordpressIcon from '../images/icons/wordpress.svg'
+import XingIcon from '../images/icons/xing.svg'
+import YoutubeIcon from '../images/icons/youtube.svg'
+
+const icons = {
+  angular: <AngularIcon />,
+  apple: <AppleIcon />,
+  codepen: <CodepenIcon />,
+  discord: <DiscordIcon />,
+  dribbble: <DribbbleIcon />,
+  github: <GithubIcon />,
+  hackernews: <HackernewsIcon />,
+  instagram: <InstagramIcon />,
+  ionic: <IonicIcon />,
+  lol: <LeagueOfLegendsIcon />,
+  markdown: <MarkdownIcon />,
+  nodejs: <NodejsIcon />,
+  npm: <NpmIcon />,
+  python: <PythonIcon />,
+  sass: <SassIcon />,
+  steam: <SteamIcon />,
+  twitch: <TwitchIcon />,
+  twitter: <TwitterIcon />,
+  unsplash: <UnsplashIcon />,
+  windows: <WindowsIcon />,
+  wordpress: <WordpressIcon />,
+  xing: <XingIcon />,
+  youtube: <YoutubeIcon />,
+}
+
+const Icon = ({ name }) => {
+  const IconElement = icons[name] || <span>Icon not found</span>
+  return (
+    <span className="icon" name={name}>
+      {IconElement}
+    </span>
+  )
+}
+
+export default Icon

src/components/logo.jsx

@@ -1,28 +1,19 @@
 import React from 'react'
-import { useStaticQuery, graphql } from 'gatsby'
+import { Link } from 'gatsby'
 
-import logo from '../images/logo-white.svg'
+import { useSiteData } from '../hooks/use-site-data'
+import LogoComponent from '../images/logo.svg'
 
 const Logo = () => {
-  const data = useStaticQuery(query)
+  const sitedata = useSiteData()
 
   return (
-    <div id="logo">
-      <a href="/">
-        <img src={logo} alt={data.site.siteMetadata.title} />
-      </a>
+    <div className="logo">
+      <Link href="/">
+        <LogoComponent alt={`Logo of ${sitedata.title}`} />
+      </Link>
     </div>
   )
 }
 
-const query = graphql`
-  query SiteMetaQuery {
-    site {
-      siteMetadata {
-        title
-      }
-    }
-  }
-`
-
 export default Logo

src/components/navigation.jsx

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react'
 
 import { Nav } from '../store'
-import { useSiteMetadata } from '../hooks/use-site-metadata'
+import { useMenuLinks } from '../hooks/use-menu-links'
 import Link from './Link'
 
 const Navigation = () => {
-  const { menuLinks } = useSiteMetadata()
+  const menuLinks = useMenuLinks()
   const navState = useContext(Nav.State)
   const navDispatch = useContext(Nav.Dispatch)
 

src/hooks/use-footer-links.js

@@ -0,0 +1,20 @@
+import { useStaticQuery, graphql } from 'gatsby'
+
+export const useFooterLinks = () => {
+  const results = useStaticQuery(
+    graphql`
+      query FooterLinks {
+        site {
+          siteMetadata {
+            footerLinks {
+              name
+              link
+            }
+          }
+        }
+      }
+    `
+  )
+
+  return results.site.siteMetadata.footerLinks
+}