Update and reorganize blog

code/blog/src/pages/{Mdx.parent__(File)__relativeDirectory}.js → blog/a/{Mdx.parent__(File)__relativeDirectory}.js

@@ -2,7 +2,7 @@ import * as React from 'react'
 import Layout from '../components/Layout'
 import tw from 'twin.macro'
 import { graphql } from 'gatsby'
-import Img from 'gatsby-image'
+import { GatsbyImage, getImage } from 'gatsby-plugin-image'
 import FullBlogPost from '../components/FullBlogPost'
 
 const Title = tw.h1`
@@ -13,42 +13,47 @@ const Content = tw.div`
   mx-auto max-w-2xl text-lg
 `
 
-const BlogPost = ({ data }) => {
-  const hero = data.post.frontmatter.heroImage.childImageSharp.fluid
+const BlogPost = ({ data: { post } }) => {
+  const hero = getImage(post.frontmatter.heroImage.childImageSharp.fluid)
 
   return (
     <Layout>
       <div tw="px-10">
-        <Title>{data.post.frontmatter.title}</Title>
-        <Img tw="mb-16" fluid={hero} />
+        <Title>{post.frontmatter.title}</Title>
+        <GatsbyImage tw="mb-16" image={hero} />
 
         <Content>
-          <FullBlogPost post={data.post} />
+          <FullBlogPost post={post} />
         </Content>
       </div>
     </Layout>
   )
 }
 
-export const query = graphql`
+export const pageQuery = graphql`
   query($id: String!) {
     post: mdx(id: { eq: $id }) {
+      body
       parent {
         ... on File {
           relativeDirectory
         }
       }
+      internal {
+        contentFilePath
+      }
       frontmatter {
         title
         heroImage {
           childImageSharp {
-            fluid(maxWidth: 1920) {
-              ...GatsbyImageSharpFluid
-            }
+            gatsbyImageData(
+              width: 1920,
+              placeholder: BLURRED,
+              formats: [AUTO, WEBP]
+            )
           }
         }
       }
-      body
     }
   }
 `

blog/content/parts/instruments/adi/index.md

@@ -0,0 +1,8 @@
+---
+title: ADI - Attitude Direction Indicator
+heroImage: ../../images/unsplash.jpg
+---
+
+After obtaining my [HSI](/instruments/hsi) for relatively cheap, I thought about other instruments that are difficult to develop by myself. The one that immediately came to mind was the ADI.
+
+The collector I got my AF/A24J-1 from also happened to have an **ARU-11/A** for sale, so I managed to buy it for a mere 170€ in June of 2020.

blog/gatsby-browser.js

@@ -0,0 +1,2 @@
+import './src/styles/global.css'
+import './src/styles/base.css'

code/blog/gatsby-config.js → blog/gatsby-config.js

@@ -45,31 +45,35 @@ module.exports = {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'parts',
-        path: '../../parts/',
+        path: './content/parts/',
+        fastHash: true,
       },
       __key: 'parts',
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'images',
-        path: '../../blog/images/',
+        path: './content/images/',
+        fastHash: true,
       },
       __key: 'images',
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'posts',
-        path: '../../blog/posts/',
+        path: './content/posts/',
+        fastHash: true,
       },
       __key: 'posts',
     },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'authors',
-        path: '../../blog/authors/',
+        path: './content/authors/',
+        fastHash: true,
       },
       __key: 'authors',
     },

blog/gatsby-node.js

@@ -0,0 +1,48 @@
+const path = require('path')
+const { createFilePath } = require('gatsby-source-filesystem')
+const readingTime = require('reading-time')
+const slugify = require('@sindresorhus/slugify')
+
+const postTemplate = path.resolve('./src/templates/Post.js')
+
+exports.createPages = async ({ graphql, actions }) => {
+  const { createPage } = actions
+
+  // Create pages from MDX files
+  const { data } = await graphql(`
+    {
+      allMdx(filter: {internal: {contentFilePath: {regex: "/index.mdx?$/"}}}) {
+        nodes {
+          id
+          internal { contentFilePath }
+          parent {
+            ... on File {
+              relativeDirectory
+            }
+          }
+        }
+      }
+    }
+  `)
+
+  data.allMdx.nodes.forEach(node => {
+    createPage({
+      path: node.parent.relativeDirectory,
+      component: `${postTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
+      context: { id: node.id },
+    })
+  })
+}
+
+exports.onCreateNode = ({ node, getNode, actions }) => {
+  const { createNodeField } = actions
+
+  // Add reading time to MDX nodes
+  if (node.internal.type === 'Mdx') {
+    createNodeField({
+      node,
+      name: 'timeToRead',
+      value: readingTime(node.body)
+    })
+  }
+}