migrate to File System API

.editorconfig

@@ -1,13 +0,0 @@
-# EditorConfig is awesome: http://EditorConfig.org
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-charset = utf-8
-trim_trailing_whitespace = true
-
-[*.scss]
-indent_size = 4

.eslintrc

@@ -22,16 +22,13 @@
     "jest": true
   },
   "rules": {
-    "quotes": ["error", "single"],
-    "semi": ["error", "never"],
-    "object-curly-spacing": ["error", "always"],
     "prettier/prettier": "error",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn"
   },
   "settings": {
     "react": {
-      "version": "16"
+      "version": "detect"
     }
   }
 }

.prettierignore

@@ -1,4 +0,0 @@
-node_modules/
-.cache/
-static/
-public/

.prettierrc

@@ -1,5 +1,6 @@
 {
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "tabWidth": 2
 }

README.md

@@ -60,11 +60,10 @@ If you want to know how, have a look at the respective components:
 
 All displayed project content is powered by one YAML file where all the portfolio's projects are defined. The project description itself is transformed from Markdown written inside the YAML file into HTML on build time.
 
-Gatsby automatically creates pages from each item in that file utilizing the [`Project.jsx`](src/templates/Project.jsx) template.
+Gatsby automatically creates pages from each item in that file utilizing the [`{ProjectsYaml.slug}.jsx`](src/pages/{ProjectsYaml.slug}.jsx) template.
 
 - [`content/projects.yml`](content/projects.yml)
-- [`gatsby-node.js`](gatsby-node.js)
+- [`src/pages/{ProjectsYaml.slug}.jsx`](src/pages/{ProjectsYaml.slug}.jsx)
-- [`src/templates/Project.jsx`](src/templates/Project.jsx)
 
 ### 🐱 GitHub repositories
 

gatsby-node.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 
-const path = require('path')
+// const path = require('path')
 const remark = require('remark')
 const parse = require('remark-parse')
 const html = require('remark-html')
@@ -136,35 +136,3 @@ exports.onCreateNode = ({ node, actions }) => {
     })
   }
 }
-
-//
-// Create project pages from projects.yml
-//
-exports.createPages = async ({ actions, graphql }) => {
-  const { createPage } = actions
-  const template = path.resolve('src/components/templates/Project.jsx')
-
-  const result = await graphql(`
-    {
-      allProjectsYaml {
-        edges {
-          node {
-            slug
-          }
-        }
-      }
-    }
-  `)
-
-  if (result.errors) throw result.errors
-
-  result.data.allProjectsYaml.edges.forEach(({ node }) => {
-    const { slug } = node
-
-    createPage({
-      path: slug,
-      component: template,
-      context: { slug }
-    })
-  })
-}

src/components/Layout.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import posed, { PoseGroup } from 'react-pose'
-import shortid from 'shortid'
 import { fadeIn } from './atoms/Transitions'
 import Typekit from './atoms/Typekit'
 import HostnameCheck from './atoms/HostnameCheck'
@@ -24,10 +23,12 @@ Layout.propTypes = {
   }).isRequired
 }
 
-export default function Layout({ children, location }) {
-  const { allowedHosts } = useMeta()
 const timeout = 200
 const RoutesContainer = posed.div(fadeIn)
+
+export default function Layout({ children, location }) {
+  const { allowedHosts } = useMeta()
+
   const isHomepage =
     location.pathname === '/' ||
     location.pathname === '/offline-plugin-app-shell-fallback/'
@@ -41,7 +42,7 @@ export default function Layout({ children, location }) {
 
       <PoseGroup animateOnMount={process.env.NODE_ENV !== 'test' && true}>
         <RoutesContainer
-          key={shortid.generate()}
+          key={location.pathname}
           delay={timeout}
           delayChildren={timeout}
         >

src/components/molecules/ProjectLinks.module.css

@@ -24,5 +24,5 @@
 }
 
 .title {
-  composes: metatitle from '../templates/Project.module.css';
+  composes: metatitle from '../../pages/{ProjectsYaml.slug}.module.css';
 }

src/components/molecules/ProjectTechstack.module.css

@@ -19,5 +19,5 @@
 }
 
 .title {
-  composes: metatitle from '../templates/Project.module.css';
+  composes: metatitle from '../../pages/{ProjectsYaml.slug}.module.css';
 }

src/pages/__tests__/Project.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import { createHistory, createMemorySource } from '@reach/router'
-import Project from './Project'
+import Project from '../{ProjectsYaml.slug}'
 import project from '../../../jest/__fixtures__/project.json'
 
 describe('Project', () => {

src/pages/{ProjectsYaml.slug}.jsx

@@ -1,13 +1,13 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
-import FullWidth from '../atoms/FullWidth'
+import FullWidth from '../components/atoms/FullWidth'
-import ProjectImage from '../atoms/ProjectImage'
+import ProjectImage from '../components/atoms/ProjectImage'
-import ProjectTechstack from '../molecules/ProjectTechstack'
+import ProjectTechstack from '../components/molecules/ProjectTechstack'
-import ProjectLinks from '../molecules/ProjectLinks'
+import ProjectLinks from '../components/molecules/ProjectLinks'
-import ProjectNav from '../molecules/ProjectNav'
+import ProjectNav from '../components/molecules/ProjectNav'
-import SEO from '../atoms/SEO'
+import SEO from '../components/atoms/SEO'
-import styles from './Project.module.css'
+import styles from './{ProjectsYaml.slug}.module.css'
 
 class ProjectMeta extends PureComponent {
   static propTypes = {