Fixed some major things

Fixed overflow issue
Added heading anchor link
Updated list/checkbox item
Fixed Link missing props

gatsby-config.js

@@ -124,7 +124,13 @@ module.exports = {
           default: require.resolve('./src/templates/PageSingle.jsx'),
         },
         gatsbyRemarkPlugins: [
-          'gatsby-remark-autolink-headers',
+          {
+            resolve: `gatsby-remark-autolink-headers`,
+            options: {
+              className: `anchor-link`,
+              icon: `<svg height="256" viewBox="0 0 512 256" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m384 0h-64c-6.333376 0-11.499968 2-15.500032 6-4 4-6 9.166656-6 15.500032 0 6.333312 2 11.499968 6 15.499968 4.000064 4 9.166656 6 15.500032 6h64c23.33344 0 43.416576 8.333248 60.249984 25s25.250048 36.66656 25.250048 60c0 23.666816-8.41664 43.83328-25.250048 60.499968-16.833408 16.666784-36.916544 25.000032-60.249984 25.000032h-64c-6.333376 0-11.499968 1.916646-15.500032 5.749997-4 3.833357-6 9.083302-6 15.750003 0 6.333363 2 11.416646 6 15.25 4.000064 3.833352 9.166656 5.75 15.500032 5.75h64c17.666752 0 34.166592-3.3333 49.500032-10 15.666688-6.666701 29.333248-15.833274 40.999936-27.5 11.666752-11.666726 20.833344-25.166592 27.500032-40.5 6.666688-15.666752 10-32.333248 10-50 0-17.33344-3.333312-33.83328-10-49.500032-6.666688-15.666688-15.83328-29.24992-27.500032-40.749952-11.666688-11.500096-25.333248-20.583296-40.999936-27.250048-15.33344-7-31.83328-10.499968-49.500032-10.499968zm-192 213.5h-64c-23.33344 0-43.416576-8.333248-60.249984-25.000032-16.8334336-16.666688-25.250016-36.833152-25.250016-60.499968 0-23.33344 8.4165824-43.333248 25.250016-60 16.833408-16.666752 36.916544-25 60.249984-25h64c6.333376 0 11.499968-2 15.500032-6 4-4 6-9.166656 6-15.499968 0-6.333376-2-11.500032-6-15.500032-4.000064-4-9.166656-6-15.500032-6h-64c-17.666752 0-34.166592 3.499968-49.500032 10.499968-15.6667136 6.666752-29.3332416 15.749952-40.999968 27.250048-11.6667264 11.500032-20.8332992 25.083264-27.5 40.749952-6.66670016 15.666752-10 32.166592-10 49.500032 0 17.666752 3.33329984 34.333248 10 50 6.6667008 15.333408 15.8332736 28.833274 27.5 40.5s25.3332544 20.833299 40.999968 27.5c15.33344 6.6667 31.83328 10 49.500032 10h64c6.333376 0 11.499968-1.916648 15.500032-5.75 4-3.833354 6-8.916637 6-15.25 0-6.666701-2-11.916646-6-15.750003-4.000064-3.833351-9.166656-5.749997-15.500032-5.749997zm-42.499968-85.5c0 6.666688 1.916608 11.916672 5.749952 15.750016s8.916672 5.750016 15.249984 5.750016h171.000064c6.333312 0 11.41664-1.916672 15.249984-5.750016s5.749952-9.083328 5.749952-15.750016c0-6.333376-1.916608-11.41664-5.749952-15.249984s-8.916672-5.750016-15.249984-5.750016h-171.000064c-6.333312 0-11.41664 1.916672-15.249984 5.750016s-5.749952 8.916608-5.749952 15.249984z" fill-rule="evenodd"/></svg>`,
+            },
+          },
           'gatsby-remark-check-links',
           {
             // BUG: https://github.com/gatsbyjs/gatsby/issues/16239
@@ -215,7 +221,7 @@ module.exports = {
         short_name: siteMetadata.siteTitleShort,
         start_url: '/?source=pwa',
         background_color: '#1f242e', // must equal `--background-color` in `./src/styles/themes/_<theme>.scss`
-        theme_color: '#fafcff', // how the UI should be tinted
+        theme_color: '#fafcff', // how the UI should be tinted (on Android the top bar)
         display: 'standalone',
         icon: './static/favicon.svg',
       },

gatsby/node/onCreateNode.js

@@ -1,4 +1,4 @@
-const { bold, dim } = require('kleur')
+const { red, bold, dim } = require('kleur')
 const { createFilePath } = require('gatsby-source-filesystem')
 
 const { isProd, isDev } = require('../../utils/environment')
@@ -8,10 +8,6 @@ module.exports = async ({ node, getNode, actions }) => {
   const { createNodeField } = actions
 
   if ([`MarkdownRemark`, `Mdx`].includes(node.internal.type)) {
-    if (node.frontmatter.published === false && isProd) {
-      return // skip this unpublished stuff only in production
-    }
-
     const fileNode = getNode(node.parent)
     const source = fileNode.sourceInstanceName
 
@@ -23,6 +19,11 @@ module.exports = async ({ node, getNode, actions }) => {
       console.log(fileNode)
     }
 
+    if (node.frontmatter.published === false && isProd) {
+      console.log(red('SKIPPING'))
+      return // skip this unpublished stuff only in production
+    }
+
     let slug = node.frontmatter.slug || undefined
     if (!slug) {
       slug = createFilePath({ node, getNode })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marvin-digital",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "private": true,
   "description": "Portfolio of and by Marvin Heilemann (@muuvmuuv)",
   "repository": "git@github.com:muuvmuuv/portfolio.git",

src/components/MDXElements.jsx

@@ -20,7 +20,7 @@ import Quote from './Quote'
 
 export default {
   // Override build in elements
-  // p: Paragraph,
+  p: Paragraph,
   h1: Headline1,
   h2: Headline2,
   h3: Headline3,
@@ -42,7 +42,7 @@ export default {
   delete: Delete,
   hr: Hairline,
   a: Link,
-  // img: Image,
+  img: Image,
 
   // Custom Shortcodes
   Quote,

src/elements/Link.jsx

@@ -3,24 +3,26 @@ import React from 'react'
 import normalizeUrl from 'normalize-url'
 import Icon from '../components/Icon'
 
-const Link = ({ href, children }) => {
+const Link = (props) => {
+  const { href, children, ...restProps } = props
+
   const isAnchor = href[0] === '#'
   const isInternal = href[0] === '/'
 
   if (isAnchor) {
     return (
-      <a href={href} title={`Anchor to ${href}`}>
+      <a href={href} title={`Anchor to ${href}`} {...restProps}>
         {children}
       </a>
     )
   } else if (isInternal) {
     return (
-      <a href={href} title={`Open link to ${href}`}>
+      <a href={href} title={`Open link to ${href}`} {...restProps}>
         {children}
       </a>
     )
   } else {
-    href = normalizeUrl(href, {
+    const normalizedHref = normalizeUrl(href, {
       normalizeProtocol: true,
       stripAuthentication: true,
       forceHttps: true,
@@ -33,10 +35,11 @@ const Link = ({ href, children }) => {
 
     return (
       <a
-        href={href}
+        href={normalizedHref}
         title={`Open link to ${href}`}
         target="_blank"
         rel="noopener noreferrer nofollow"
+        {...restProps}
       >
         {children}
         <Icon name="arrow-top-right" />

src/elements/List.jsx

@@ -1,9 +1,33 @@
 import React from 'react'
 
+import uniqueString from 'unique-string'
+
 const UnorderedList = (props) => <ul {...props} />
 
 const OrderedList = (props) => <ol {...props} />
 
-const ListElement = (props) => <li {...props} />
+const ListElement = (props) => {
+  if (props.className === 'task-list-item') {
+    const [input, ...restChildren] = props.children
+    const id = uniqueString()
+
+    return (
+      <li className="task-list-item" {...props}>
+        <label htmlFor={id}>
+          <input
+            id={id}
+            type="checkbox"
+            defaultChecked={input.props.checked}
+            disabled={input.props.disabled}
+          />
+          <span className="custom-checkbox"></span>
+          {restChildren}
+        </label>
+      </li>
+    )
+  }
+
+  return <li {...props} />
+}
 
 export { UnorderedList, OrderedList, ListElement }

src/layouts/index.jsx

@@ -16,7 +16,9 @@ export default ({ children }) => {
       <Helmet htmlAttributes={{ theme }} />
       <Header></Header>
       <MDXProvider components={mdxElements}>
-        <main role="main">{children}</main>
+        <main role="main" id="main">
+          {children}
+        </main>
       </MDXProvider>
       <Footer></Footer>
       <ScrollToTop />

src/styles/app.scss

@@ -39,6 +39,7 @@
 // ------------------------------
 // Components
 
+@import 'components/anchor';
 @import 'components/backdrop';
 @import 'components/button';
 @import 'components/dot';

src/styles/components/_anchor.scss

@@ -0,0 +1,39 @@
+$size: 15px;
+
+.anchor-link {
+  position: absolute;
+  top: 50%;
+  left: -40px;
+  padding: var(--spacing-md);
+  transform: translateY(-50%);
+
+  svg {
+    width: $size;
+    height: $size;
+    fill: var(--text-color-light);
+  }
+}
+
+// NOTE: copied from here, because it is not added to head: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-autolink-headers/src/gatsby-ssr.js
+h1 .anchor-link svg,
+h2 .anchor-link svg,
+h3 .anchor-link svg,
+h4 .anchor-link svg,
+h5 .anchor-link svg,
+h6 .anchor-link svg {
+  visibility: hidden;
+}
+h1:hover .anchor-link svg,
+h2:hover .anchor-link svg,
+h3:hover .anchor-link svg,
+h4:hover .anchor-link svg,
+h5:hover .anchor-link svg,
+h6:hover .anchor-link svg,
+h1 .anchor-link:focus svg,
+h2 .anchor-link:focus svg,
+h3 .anchor-link:focus svg,
+h4 .anchor-link:focus svg,
+h5 .anchor-link:focus svg,
+h6 .anchor-link:focus svg {
+  visibility: visible;
+}

src/styles/elements/_input.scss

@@ -1,46 +1,27 @@
-:root {
-  --checkbox-size: var(--spacing-lg);
-}
-
-[type='checkbox'] {
-  position: absolute;
-  z-index: 1;
-  width: var(--checkbox-size);
-  height: var(--checkbox-size);
-  margin: 0;
-  border: 0;
-  cursor: pointer;
-  appearance: none;
+input[type='checkbox'] {
+  display: none;
 
-  & + span {
+  + .custom-checkbox {
     display: block;
-    position: relative;
-
-    &::before,
-    &::after {
-      position: absolute;
-      cursor: pointer;
-      user-select: none;
-    }
-
-    &::before {
-      content: '';
-      display: inline-block;
-      top: 4px;
-      left: 0;
-      width: 16px;
-      height: 16px;
-      margin-right: var(--spacing-sm);
-      transition: var(--transition-fast);
-      border: 1px solid var(--color-08);
-      background: var(--color-background);
-    }
+    position: absolute;
+    top: 4px;
+    left: 0;
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    transition: var(--transition-fast);
+    border: 1px solid var(--color-08);
+    background: var(--color-background);
+    cursor: pointer;
+    user-select: none;
+
+    --checkbox-size: 24px;
 
     &::after {
       content: '';
       display: none;
-      top: 8px;
-      left: 3px;
+      position: absolute;
+      top: 3px;
+      left: 2px;
       width: 10px;
       height: 6px;
       transform: rotate(-45deg);
@@ -49,11 +30,9 @@
     }
   }
 
-  &:checked + span {
-    &::before {
-      border-color: var(--color-primary);
-      background: var(--color-primary);
-    }
+  &:checked + .custom-checkbox {
+    border-color: var(--color-primary);
+    background: var(--color-primary);
 
     &::after {
       display: block;
@@ -63,30 +42,14 @@
   &:disabled {
     cursor: not-allowed;
 
-    + span {
-      &::before,
-      &::after {
-        cursor: not-allowed;
-      }
-
-      &::before {
-        border-color: var(--color-09);
-      }
+    + .custom-checkbox {
+      border-color: var(--color-09);
+      cursor: not-allowed;
     }
 
-    &:checked + span {
-      &::before {
-        border-color: var(--color-09);
-        background: var(--color-09);
-      }
+    &:checked + .custom-checkbox {
+      border-color: var(--color-09);
+      background: var(--color-09);
     }
   }
 }
-
-.task-list-item {
-  padding-left: 0;
-
-  span {
-    padding-left: 25px;
-  }
-}

src/styles/elements/_list.scss

@@ -65,4 +65,18 @@ article {
       }
     }
   }
+
+  .task-list-item {
+    .custom-checkbox {
+      top: 5px;
+      --checkbox-size: 14px;
+
+      &::after {
+        top: 2px;
+        left: 1px;
+        width: 10px;
+        height: 6px;
+      }
+    }
+  }
 }

src/styles/modules/_showcase.scss

@@ -4,11 +4,15 @@
     '.'
     '.'
     '.';
+  grid-template-columns: 100%;
+  grid-template-rows: 1fr 1fr 1fr;
   height: 100vh;
   user-select: none;
 
   @include breakpoint-up(lg) {
     grid-template-areas: '. . .';
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100%;
   }
 
   &:hover {