Cleanup

Accessibility

ISSUES.md

@@ -1,17 +1,3 @@
 # Open issues that affect this project
 
 > Format: `// BUG: #<NUMBER>`
-
-- [#1: PostCss plugin is not executed when using Scss](#1-postcss-plugin-is-not-executed-when-using-scss)
-- [#2: Remove console warning about empty code block language](#2-remove-console-warning-about-empty-code-block-language)
-
-## #1: PostCss plugin is not executed when using Scss
-
-- https://github.com/gatsbyjs/gatsby/issues/17887
-- https://github.com/larsenwork/postcss-easing-gradients/issues/11
-- https://github.com/w3c/csswg-drafts/issues/1332
-- https://larsenwork.com/easing-gradients/
-
-## #2: Remove console warning about empty code block language
-
-- https://github.com/chasm/gatsby-remark-prismjs/issues/4

TODO.md

@@ -22,7 +22,7 @@
     - [ ] Test
   - [ ] Everything pushed to master -> marvin.digital
   - [ ] Everything pushed to development -> dev.marvin.digital
-- [ ] replace React with [Preact][1] (check if it works now)
+- [ ] replace React with [Preact][1] (check if it works when finished)
 - [ ] new image for start: me while coding
 - [ ] new image for start: me while writing
 - [ ] Add footer with: version, social-media, imprint, changelog, copyright
@@ -33,12 +33,13 @@
 - [x] analyze via bundlephobia
 - [x] add github bots to auto update dependencies
 - [x] add lighthouse from M8FINDER project
-- [ ] use better [color system][10]
+- [ ] add scroll to top
 - [ ] use CSS blend modes (overlay)
 - [ ] add League of Legends API to show profile and stats
-- [ ] add classes to tags https://github.com/gatsbyjs/gatsby/issues/17824
+- [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: https://rsms.me/inter/#features
+- [ ] set font feature settings (numbers, dates, etc.):
+      https://rsms.me/inter/#features
 - [ ] Upload all writings
   - [ ] Grammatical corrections
   - [ ] Find images on Unsplash
@@ -47,11 +48,12 @@
   - [ ] Update images
 - [ ] Upload some photos (best off's)
 - [ ] setup SimpleAnalytics
+- [ ] check pages with Firefox Axe
 - [ ] check all pages with screen reader
 - [ ] check all pages with reduced motion
 - [ ] check all pages with reduced transparency
 - [ ] PWA: add service worker for offline usage
-- [ ] add tests?!
+- [ ] ~~add tests?!~~
 - [ ] ~~move from bash script to [Nim][2]~~
 - [ ] check markdown for ["Vary sentence length"][3]
 - [ ] check markdown for [Readability][4]
@@ -60,10 +62,11 @@
 - [ ] use [Guess.js][7]
 - [ ] use new iPad and Apple Pencil to make ["Marvin/Design"-Logo][8]
   - [ ] new color profile
-  - [ ] light theme (will be default, with auto switch based on OS appearance)
+  - [ ] use better [color system][10]
+  - [ ] light theme
 - [ ] Eventually by Font; [ZOOM-PRO][9]
 - [ ] use external CMS service for data instead of file based
-- [ ] open source the code 🤫
+- [ ] open source the code 🤫 (requires above)
 
 [1]: https://www.gatsbyjs.org/packages/gatsby-plugin-preact/
 [2]: https://nim-lang.org/docs/tut1.html

gatsby-config.js

@@ -85,7 +85,6 @@ module.exports = {
             },
           },
           {
-            // BUG: #2
             resolve: `gatsby-remark-prismjs`,
             options: {
               noInlineHighlight: true,
@@ -96,6 +95,13 @@ module.exports = {
               },
             },
           },
+          {
+            resolve: 'gatsby-remark-external-links',
+            options: {
+              target: '_blank',
+              rel: 'nofollow',
+            },
+          },
           `remark-checkbox-spanner`,
           {
             resolve: `remark-custom-classes`,
@@ -116,6 +122,7 @@ module.exports = {
               },
             },
           },
+          'gatsby-remark-check-links',
         ],
       },
     },

package.json

@@ -14,7 +14,7 @@
     "build": "gatsby build",
     "rebuild": "run-s clean build",
     "compose": "npm run build && make up",
-    "clean": "del-cli ./public/** ./.cache",
+    "clean": "gatsby clean",
     "−−−−−−−−−−−−−−−−−−−−  DEPLOY  −−−−−−−−−−−−−−−−–−−−−−−": "",
     "deploy": "run-s rebuild lint test now",
     "now": "run-s now-deploy now-alias-version now-notify",
@@ -59,7 +59,9 @@
     "gatsby-plugin-sharp": "^2.3.13",
     "gatsby-plugin-sitemap": "^2.2.25",
     "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
+    "gatsby-remark-check-links": "^2.1.0",
     "gatsby-remark-emoji": "0.0.3",
+    "gatsby-remark-external-links": "0.0.4",
     "gatsby-remark-images": "^3.1.42",
     "gatsby-remark-prismjs": "^3.3.30",
     "gatsby-source-filesystem": "^2.1.46",
@@ -92,4 +94,4 @@
     "taskz": "^1.3.0",
     "typescript": "^3.7.4"
   }
-}
+}

src/components/Breadcrumb.jsx

@@ -3,10 +3,8 @@ import { Breadcrumb as BreadcrumbPlugin } from 'gatsby-plugin-breadcrumb'
 
 import { History } from '../store'
 
-// TODO: https://github.com/sbardian/gatsby-plugin-breadcrumb/issues/42
 const Breadcrumb = () => {
   const { location, crumbLabel, crumbs } = useContext(History.State)
-  console.log({ location, crumbLabel, crumbs })
 
   return (
     <BreadcrumbPlugin

src/components/Time.jsx

@@ -4,8 +4,6 @@ import dayjs from 'dayjs'
 import DataType from './DataType'
 
 const Time = ({ date, format = 'L' }) => {
-  console.log(date)
-
   if (!date) {
     return <DataType tooltip="Not set" type="null"></DataType>
   }

src/layouts/Article.jsx

@@ -79,6 +79,8 @@ class Article extends React.Component {
       </div>
     )
 
+    console.log(this.props.toc)
+
     return (
       <>
         <article
@@ -87,7 +89,7 @@ class Article extends React.Component {
             __html: this.props.html || fallbackContent,
           }}
         />
-        {this.props.toc ?? (
+        {this.props.toc && (
           <div
             role="navigation"
             className="toc"

src/scripts/lightbox.js

@@ -20,8 +20,8 @@ const Lightbox = {
     )
 
     if (this.elements && this.elements.length > 0) {
-      this.elements.forEach(el => {
-        el.addEventListener('click', e => this.zoom(e, el))
+      this.elements.forEach((el) => {
+        el.addEventListener('click', (e) => this.zoom(e, el))
       })
     }
   },
@@ -31,7 +31,7 @@ const Lightbox = {
     document.removeEventListener('click', this.clickOutside)
 
     if (this.elements && this.elements.length > 0) {
-      this.elements.forEach(el => {
+      this.elements.forEach((el) => {
         el.removeEventListener('click', this.zoom)
       })
     }
@@ -50,6 +50,7 @@ const Lightbox = {
   zoomIn() {
     this.isZoomed = true
 
+    // TODO: reduced motion, no zoom
     const parent = this.target.parentElement
     const clientRect = this.target.getBoundingClientRect()
     const clientHeight = Math.round(clientRect.height)
@@ -140,7 +141,7 @@ const Lightbox = {
 
       this.clickOutside = VanillaClickOutside(
         element,
-        state => {
+        (state) => {
           if (state) {
             this.zoomOut()
           }

src/styles/layouts/_header.scss

@@ -16,7 +16,11 @@
     padding: var(--spacing-md) var(--container-padding-x);
     background: var(--color-dark-80);
     backdrop-filter: blur(4px);
-    // TODO: reduced transparency
+
+    @media (prefers-reduced-transparency: reduce) {
+      background: var(--color-dark);
+      backdrop-filter: none;
+    }
   }
 
   #logo {