Recreated all icons to have a strict size

Import all icons at once with require.context
Accessibility for icons
Updated MIP post
Updated components for Icon update
Changed theme switch design
Added todos

TODO.md

@@ -49,6 +49,8 @@
       with mouse move
 - [ ] new image for start: me while coding
 - [ ] new image for start: me while writing
+- [ ] skip this messy shit with elements wrapped in container tags
+- [ ] create page transitions: https://github.com/react-spring/react-spring/issues/894
 - [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
@@ -93,7 +95,7 @@
 - [ ] check all pages with reduced motion
 - [ ] check all pages with reduced transparency
 - [ ] remove source maps in production builds
-- [ ] add new theme switch design, current does not work properly with `mix-blend-mode`
+- [x] add new theme switch design, current does not work properly with `mix-blend-mode`
 - [x] PWA: add service worker for offline usage (`gatsby-plugin-offline`)
 - [x] ~~add tests?!~~
 - [x] ~~move from bash script to [Nim][2]~~

content/projects/add-mip/index.md

@@ -1,8 +1,8 @@
 ---
 title: MIP
 subtitle: The interall employee web interface called MIP
-image: preview.jpg
-thumb: preview.jpg
+image: performance.jpg
+thumb: home.jpg
 
 status: finished
 started: 2019-02-12
@@ -19,3 +19,6 @@ about events for example.
 
 I have re-created the complete website in Wordpress and also added an API for the
 performance dashboard.
+
+![Shows the home page](home.jpg) ![Shows the performance page](performance.jpg)
+![Shows the blog page](blog.jpg) ![Shows a single blog post](single.jpg)

metadata.js

@@ -96,7 +96,7 @@ module.exports = {
     },
     {
       name: 'League of Legends',
-      icon: 'lol',
+      icon: 'league-of-legends',
       user: 'muuvmuuv',
       link: 'https://blitz.gg/lol/profile/euw1/muuvmuuv',
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marvin-digital",
-  "version": "3.12.0",
+  "version": "3.13.0",
   "private": true,
   "description": "Portfolio of and by Marvin Heilemann (@muuvmuuv)",
   "repository": "git@github.com:muuvmuuv/portfolio.git",
@@ -40,6 +40,7 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.5.5",
     "@mdx-js/react": "^1.5.5",
+    "@react-spring/web": "^9.0.0-beta.34",
     "dayjs": "^1.8.19",
     "gatsby": "^2.19.8",
     "gatsby-image": "^2.2.39",
@@ -113,4 +114,4 @@
     "stylelint-scss": "^3.14.2",
     "taskz": "^1.3.0"
   }
-}
+}

src/components/Icon.jsx

@@ -1,70 +1,40 @@
-import React from 'react'
+import React, { createElement } 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 = {}
 
-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 />,
-  link: '↗',
-  'arrow-top': '↑',
-  'arrow-left': '←',
-  'arrow-bottom': '↓',
-  'arrow-right': '→',
+// TODO: check if this does not increase the overall bundlesize
+function importAll(resolve) {
+  resolve.keys().forEach((file) => {
+    const ext = /(?:\.([^.]+))?$/.exec(file)
+    const name = file
+      .replace('./', '')
+      .replace(ext[0], '')
+      .toLowerCase()
+
+    icons[name] = createElement(resolve(file))
+  })
 }
+importAll(require.context('../images/icons', false, /\.svg$/))
 
 const Icon = ({ name, textOnly }) => {
-  const IconElement = icons[name] || <span>Icon not found</span>
+  const IconElement = icons[name] || (
+    <span aria-hidden="true" aria-label="Icon not found">
+      ⚠
+    </span>
+  )
 
   let classes = 'icon'
   if (textOnly) {
     classes += ' icon-text'
   }
 
   return (
-    <span className={classes} name={name}>
+    <span
+      className={classes}
+      name={name}
+      aria-hidden="true"
+      aria-label={`An icon which shows "${name}"`}
+    >
       {IconElement}
     </span>
   )

src/components/Navigation.jsx

@@ -58,7 +58,7 @@ const Navigation = () => {
                     className="nav-link"
                   >
                     {name}
-                    <Icon name="link" textOnly={true} />
+                    <Icon name="arrow-top-right" />
                   </a>
                 ) : (
                   <Link to={link} className="nav-link" activeClassName="active">

src/components/ScrollToTop.jsx

@@ -45,7 +45,7 @@ export default class ScrollToTop extends React.Component {
         tabIndex="0"
         role="button"
       >
-        <Icon name="arrow-top" textOnly={true} />
+        <Icon name="arrow-top" />
       </div>
     )
   }

src/components/ThemeIcons.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import LightSVG from '../images/theme/light.svg'
+import DarkSVG from '../images/theme/dark.svg'
+import AutoLightSVG from '../images/theme/auto-light.svg'
+import AutoDarkSVG from '../images/theme/auto-dark.svg'
+import HighContrastSVG from '../images/theme/hc.svg'
+
+export const Light = () => (
+  <path
+    id="icon-light"
+    fill="var(--color-light)"
+    fillRule="evenodd"
+    d={LightSVG().props.children.props.d}
+  />
+)
+
+export const Dark = () => (
+  <path
+    id="icon-dark"
+    fill="var(--color-dark)"
+    fillRule="evenodd"
+    d={DarkSVG().props.children.props.d}
+  />
+)
+
+export const AutoLight = () => (
+  <path
+    id="icon-auto-light"
+    fill="var(--color-light)"
+    fillRule="evenodd"
+    d={AutoLightSVG().props.children.props.d}
+  />
+)
+
+export const AutoDark = () => (
+  <path
+    id="icon-auto-dark"
+    fill="var(--color-dark)"
+    fillRule="evenodd"
+    d={AutoDarkSVG().props.children.props.d}
+  />
+)
+
+export const HighContrast = () => (
+  <path
+    id="icon-high-contrast"
+    fill="var(--color-06)"
+    fillRule="evenodd"
+    d={HighContrastSVG().props.children.props.d}
+  />
+)

src/components/ThemeSwitch.jsx

@@ -1,6 +1,8 @@
 import React, { useContext } from 'react'
+import { animated, useTransition, config } from '@react-spring/web'
 
-import { ThemeContext, modes } from '../store/theme'
+import { ThemeContext, modes, Mode } from '../store/theme'
+import { Light, Dark, AutoLight, AutoDark } from './ThemeIcons'
 
 const ThemeSwitch = () => {
   const { mode, toggle, theme } = useContext(ThemeContext)
@@ -9,28 +11,50 @@ const ThemeSwitch = () => {
   const index = current + 1 >= modes.length ? 0 : current + 1
   const nextMode = modes[index]
 
-  function toggleTheme(event) {
-    const element = event.target
-    element.classList.add('animating')
+  function toggleTheme() {
     toggle()
   }
 
-  function onAnimationEnd(event) {
-    const element = event.target
-    element.classList.remove('animating')
+  let svgIcon = ''
+  switch (mode) {
+    case Mode.LIGHT:
+      svgIcon = Light
+      break
+    case Mode.DARK:
+      svgIcon = Dark
+      break
+    case Mode.AUTO:
+      if (theme === Mode.LIGHT) {
+        svgIcon = AutoLight
+      } else {
+        svgIcon = AutoDark
+      }
+      break
   }
 
+  const transitions = useTransition(svgIcon, null, {
+    from: { opacity: 0 },
+    enter: { opacity: 1 },
+    leave: { opacity: 0 },
+    config: config.stiff,
+  })
+
   return (
     <button
       id="theme-switch"
       onKeyPress={toggleTheme}
       onClick={toggleTheme}
       mode={mode}
       theme={theme}
-      onAnimationEnd={onAnimationEnd}
       aria-label={`Switch to ${nextMode} appearance`}
       title={`Switch to ${nextMode} appearance`}
-    ></button>
+    >
+      {transitions.map(({ item: SVGElement, props, key }) => (
+        <animated.svg style={{ ...props }} key={key} viewBox="0 0 64 64">
+          <SVGElement />
+        </animated.svg>
+      ))}
+    </button>
   )
 }
 

src/elements/Link.jsx

@@ -18,7 +18,7 @@ const Link = ({ href, children }) => {
   return (
     <a href={href} target="_blank" rel="noopener noreferrer nofollow">
       {children}
-      <Icon name="link" textOnly={true} />
+      <Icon name="arrow-top-right" />
     </a>
   )
 }