Minor fixes, removed unsued stuff and housekeeping

gatsby-config.js

@@ -23,7 +23,7 @@ module.exports = {
   siteMetadata,
   plugins: [
     `gatsby-plugin-preact`,
-    // `gatsby-plugin-layout`,
+    `gatsby-plugin-layout`,
     `gatsby-plugin-react-helmet-async`,
     {
       resolve: `gatsby-plugin-canonical-urls`,
@@ -127,16 +127,19 @@ module.exports = {
           'gatsby-remark-autolink-headers',
           'gatsby-remark-check-links',
           {
+            // BUG: https://github.com/gatsbyjs/gatsby/issues/16239
             resolve: 'gatsby-remark-images',
             options: {
               maxWidth: 1200,
               backgroundColor: 'transparent',
               linkImagesToOriginal: true,
               quality: 75,
               withWebp: true,
+              disableBgImage: true,
               showCaptions: true,
             },
           },
+          `gatsby-remark-copy-linked-files`,
           {
             resolve: 'gatsby-remark-emoji',
             options: {

gatsby-node.js

@@ -7,6 +7,5 @@
 module.exports.onCreateWebpackConfig = require('./gatsby/node/onCreateWebpackConfig')
 module.exports.onCreateNode = require('./gatsby/node/onCreateNode')
 module.exports.createPages = require('./gatsby/node/createPages')
-module.exports.sourceNodes = require('./gatsby/node/sourceNodes')
 // module.exports.createResolvers = require('./gatsby/node/createResolvers')
 // module.exports.createSchemaCustomization = require('./gatsby/node/createSchemaCustomization')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marvin-digital",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "private": true,
   "description": "Portfolio of and by Marvin Heilemann (@muuvmuuv)",
   "repository": "git@github.com:muuvmuuv/portfolio.git",
@@ -64,6 +64,7 @@
     "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
     "gatsby-remark-autolink-headers": "^2.1.24",
     "gatsby-remark-check-links": "^2.1.0",
+    "gatsby-remark-copy-linked-files": "^2.1.37",
     "gatsby-remark-emoji": "0.0.3",
     "gatsby-remark-images": "^3.1.44",
     "gatsby-source-filesystem": "^2.1.48",

src/components/Head.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { StaticQuery, graphql } from 'gatsby'
 import PropTypes from 'prop-types'
-import { Helmet } from 'react-helmet'
+import { Helmet } from 'react-helmet-async'
 import { Location } from '@reach/router'
 import { stringSlugify } from '../utils/helper'
 

src/components/Language.jsx

@@ -6,13 +6,13 @@ const Language = ({ code }) => {
   switch (code) {
     case 'de':
       return (
-        <span className="lang" aria-label="German" role="img" inLanguage="de-DE">
+        <span className="lang" aria-label="German" role="img">
           🇩🇪
         </span>
       )
     case 'en':
       return (
-        <span className="lang" aria-label="English" role="img" inLanguage="en-GB">
+        <span className="lang" aria-label="English" role="img">
           🇬🇧
         </span>
       )

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/hooks/use-package-json.js

@@ -4,19 +4,21 @@ export const usePackageJson = () => {
   const results = useStaticQuery(
     graphql`
       query PackageJSON {
-        packageJson {
-          allDependencies {
-            name
-            version
-          }
-          allDevDependencies {
-            name
-            version
+        sitePlugin(name: { eq: "default-site-plugin" }) {
+          packageJson {
+            dependencies {
+              name
+              version
+            }
+            devDependencies {
+              name
+              version
+            }
           }
         }
       }
     `
   )
 
-  return results.packageJson
+  return results.sitePlugin.packageJson
 }

src/layouts/Article.jsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { scrollToElement } from '../utils/helper'
 import { updateLocationHash, getDocumentHeight } from '../utils/helper'
 import { prefersReducedMotion } from '../utils/accessibility'
+import { isDev } from '../../utils/environment'
 import Lightbox from '../scripts/lightbox'
 import { MDXRenderer } from 'gatsby-plugin-mdx'
 
@@ -82,19 +83,21 @@ class Article extends React.Component {
       itemRef: 'hero',
     }
 
-    const Toc = this.props.toc && (
-      <div
-        role="navigation"
-        className="toc"
-        dangerouslySetInnerHTML={{ __html: this.props.toc }}
-      />
-    )
+    if (isDev && this.props.toc) {
+      console.log(this.props.toc)
+    }
+    const toc = ''
+    // const toc = this.props.toc && (
+    //   <div
+    //     role="navigation"
+    //     className="toc"
+    //     dangerouslySetInnerHTML={{ __html: this.props.toc }}
+    //   />
+    // )
 
     return (
       <article {...props}>
-        <header>
-          <Toc />
-        </header>
+        <header>{toc}</header>
 
         {this.props.mdx ? (
           <MDXRenderer slug={this.props.slug}>{this.props.mdx}</MDXRenderer>

src/pages/credits.mdx

@@ -13,8 +13,8 @@ export const packageJson = () => {
       return obj
     }, {})
   return {
-    dependencies: arrayToObject(pkg.allDependencies),
-    devDependencies: arrayToObject(pkg.allDevDependencies),
+    dependencies: arrayToObject(pkg.dependencies),
+    devDependencies: arrayToObject(pkg.devDependencies),
   }
 }
 

src/pages/index.jsx

@@ -71,16 +71,8 @@ export default React.forwardRef((props, ref) => (
 export const query = graphql`
   fragment FluidResponsiveFrag on File {
     childImageSharp {
-      fluid(
-        maxWidth: 1200
-        traceSVG: {
-          color: "#272c36"
-          turnPolicy: TURNPOLICY_MAJORITY
-          blackOnWhite: true
-        }
-        srcSetBreakpoints: [576, 768, 992]
-      ) {
-        ...GatsbyImageSharpFluid_withWebp_tracedSVG
+      fluid(maxWidth: 1200, srcSetBreakpoints: [576, 768, 992]) {
+        ...GatsbyImageSharpFluid_withWebp
       }
     }
   }

src/pages/projects.jsx

@@ -80,16 +80,8 @@ export const query = graphql`
             subtitle
             image {
               childImageSharp {
-                fluid(
-                  maxWidth: 992
-                  traceSVG: {
-                    color: "#272c36"
-                    turnPolicy: TURNPOLICY_MAJORITY
-                    blackOnWhite: true
-                  }
-                  srcSetBreakpoints: [576, 768]
-                ) {
-                  ...GatsbyImageSharpFluid_withWebp_tracedSVG
+                fluid(maxWidth: 992, srcSetBreakpoints: [576, 768]) {
+                  ...GatsbyImageSharpFluid_withWebp
                 }
               }
             }

src/styles/components/_button.scss

@@ -10,6 +10,7 @@ button {
 }
 
 .btn {
+  display: inline-block;
   position: relative;
   padding: 10px 18px;
   transition: color 200ms ease-in-out;
@@ -33,8 +34,4 @@ button {
 
     @include border-left-right(10px);
   }
-
-  &--inline {
-    display: inline-block;
-  }
 }

src/styles/elements/_code.scss

@@ -67,6 +67,7 @@ p code {
 
     .highlight-line::before {
       width: calc(100% + 1px);
+      margin-left: -8px;
       border-left: 1px solid var(--color-primary);
     }
   }

src/templates/ProjectsSingle.jsx

@@ -90,16 +90,8 @@ export const query = graphql`
         subtitle
         image {
           childImageSharp {
-            fluid(
-              maxWidth: 2100
-              traceSVG: {
-                color: "#272c36"
-                turnPolicy: TURNPOLICY_MAJORITY
-                blackOnWhite: true
-              }
-              srcSetBreakpoints: [576, 768, 992, 1200]
-            ) {
-              ...GatsbyImageSharpFluid_withWebp_tracedSVG
+            fluid(maxWidth: 2100, srcSetBreakpoints: [576, 768, 992, 1200]) {
+              ...GatsbyImageSharpFluid_withWebp
             }
           }
         }

src/templates/WritingsSingle.jsx

@@ -33,8 +33,6 @@ class Page extends React.Component {
       },
     } = this.props.data
 
-    console.log(tableOfContents)
-
     const attr = {}
 
     if (frontmatter.tags && frontmatter.tags.length > 0) {
@@ -94,16 +92,8 @@ export const query = graphql`
         description
         image {
           childImageSharp {
-            fluid(
-              maxWidth: 2100
-              traceSVG: {
-                color: "#272c36"
-                turnPolicy: TURNPOLICY_MAJORITY
-                blackOnWhite: true
-              }
-              srcSetBreakpoints: [576, 768, 992, 1200]
-            ) {
-              ...GatsbyImageSharpFluid_withWebp_tracedSVG
+            fluid(maxWidth: 2100, srcSetBreakpoints: [576, 768, 992, 1200]) {
+              ...GatsbyImageSharpFluid_withWebp
             }
           }
         }