blog: add basic pages

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

@@ -1,5 +1,7 @@
 ---
 title: ADI - Attitude Direction Indicator
+released: 2021-07-02
+updated: 2023-09-07
 heroImage: ./side_picture.jpg
 heroSubtitle: My ARU-11/A ADI taken apart, showing its spectacular mechnical core.
 ---

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

@@ -1,5 +1,7 @@
 ---
 title: HSI - Horizontal Situation Indicator
+released: 2021-07-02
+updated: 2023-09-07
 heroImage: ./side_picture.jpg
 heroSubtitle: My AF/A24J-1 HSI taken apart to inspect its insides.
 ---

blog/content/parts/misc/mpcnc/index.md

@@ -0,0 +1,7 @@
+---
+title: MPCNC
+released: 2023-09-07
+updated: 2023-09-07
+---
+
+TBD.

blog/content/parts/misc/photon-mono/index.md

@@ -0,0 +1,7 @@
+---
+title: ANYCUBIC Photon Mono
+released: 2023-09-07
+updated: 2023-09-07
+---
+
+TBD.

blog/content/parts/misc/prusa-mk3s/index.md

@@ -0,0 +1,7 @@
+---
+title: Prusa MK3S
+released: 2023-09-07
+updated: 2023-09-07
+---
+
+TBD.

blog/content/parts/panels/elec-pwr/index.md

@@ -2,6 +2,8 @@
 title: Electrical Power Panel
 heroImage: ./first_iteration.jpg
 heroSubtitle: The first proper iteration of my Electrical Power Panel. This was constructed and milled on my CNC machine. It doesn't yet include its green backlight in this picture.
+released: 2021-07-02
+updated: 2023-09-07
 ---
 
 The first thing I ever tried to construct for my simulator was an HSI. I knew early on that I didn't just want to have all my instruments be LCD screens, I wanted real mechanical ones.

blog/content/posts/2023-09-07-start-of-a-journey/index.md

@@ -0,0 +1,8 @@
+---
+title: The start of a journey
+heroImage: ./first_iteration.jpg
+released: 2023-09-07
+updated: 2023-09-07
+---
+
+TBD.

blog/gatsby-config.js

@@ -2,6 +2,7 @@ module.exports = {
   siteMetadata: {
     title: 'Hogpit',
   },
+  trailingSlash: 'never',
   plugins: [
     'gatsby-plugin-image',
     'gatsby-plugin-react-helmet',

blog/gatsby-node.js

@@ -1,9 +1,8 @@
 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/BlogPost.js')
+const collectionTemplate = path.resolve('./src/templates/CollectionList.js')
 
 exports.createPages = async ({ graphql, actions }) => {
   const { createPage } = actions
@@ -32,6 +31,35 @@ exports.createPages = async ({ graphql, actions }) => {
       context: { id: node.id },
     })
   })
+
+  await Promise.all(['parts', 'posts'].map(async (collection) => {
+    const { data } = await graphql(`
+      query($collection: String!) {
+        posts: allFile(
+          filter: {sourceInstanceName: {eq: $collection}, name: {eq: "index"}, extension: {in: ["md", "mdx"]}}
+        ) {
+          totalCount
+        }
+      }
+    `, { collection })
+
+    const POSTS_PER_PAGE = 9
+    const numPages = Math.ceil(data.posts.totalCount / POSTS_PER_PAGE)
+
+    Array.from({ length: numPages }).forEach((_, i) => {
+      createPage({
+        path: `/${collection}/${i + 1}`,
+        component: collectionTemplate,
+        context: {
+          collection,
+          currentPage: i + 1,
+          numPages,
+          limit: POSTS_PER_PAGE,
+          skip: i * POSTS_PER_PAGE,
+        },
+      }) 
+    })
+  }))
 }
 
 exports.onCreateNode = ({ node, getNode, actions }) => {

blog/package.json

@@ -20,6 +20,7 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
+    "@babylonjs/core": "^6.20.0",
     "@mdx-js/react": "^2.3.0",
     "@sindresorhus/slugify": "^1.1.2",
     "autoprefixer": "^10.2.6",

blog/src/components/Header.js

@@ -12,10 +12,18 @@ const LinkedLogo = tw(Link)`
   font-page-title text-4xl p-2 -m-2
 `
 
+const Menu = tw.div`
+  px-3 ml-auto mr-10
+`
+
 const IconContainer = tw.div`
   text-2xl text-gray-500 dark:text-gray-300
 `
 
+const MenuLink = tw(Link)`
+  px-3 hover:text-gray-700 dark:hover:text-gray-300
+`
+
 export default function Header () {
   const [darkMode, setDarkMode] = useState(false)
 
@@ -30,6 +38,13 @@ export default function Header () {
         <span tw="text-gray-600 dark:text-gray-400">pit</span>
       </LinkedLogo>
 
+      <Menu>
+        <MenuLink to="/about">About</MenuLink>
+        <MenuLink to="/simulator">Simulator</MenuLink>
+        <MenuLink to="/parts/1">Parts</MenuLink>
+        <MenuLink to="/posts/1">Blog</MenuLink>
+      </Menu>
+
       <IconContainer>
         <Icon
           active={darkMode}

blog/src/components/blog/PartsPostList.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import PostList from './PostList'
+import { useStaticQuery, graphql } from 'gatsby'
+
+export default function PartsPostList ({ tabularLayout }) {
+  const { posts } = useStaticQuery(graphql`
+    query PostQuery {
+      posts: allFile(
+        filter: {
+          sourceInstanceName: {eq: "parts"},
+          relativeDirectory: {regex: "/^(instruments|panels|frames)/"}
+          name: {eq: "index"},
+          extension: {in: ["md", "mdx"]}
+        }
+        sort: {childMdx: {frontmatter: {updated: DESC}}}
+        limit: 9
+      ) {
+        ...PostListQuery
+      }
+    }
+  `)
+
+  return <PostList posts={posts.nodes} tabularLayout={tabularLayout} />
+}

blog/src/components/blog/PostList.js

@@ -1,30 +1,30 @@
 import React from 'react'
 import tw from 'twin.macro'
-import { Link } from 'gatsby'
+import { Link, useStaticQuery, graphql } from 'gatsby'
 import { GatsbyImage, getImage } from 'gatsby-plugin-image'
 
 const Container = tw.div`
   grid grid-cols-1 gap-12 pb-12
 `
 
 const styles = {
-  title: tw`font-serif text-xl font-bold mb-3`,
+  title: tw`font-serif text-2xl font-bold mb-3`,
   excerpt: tw`mb-3`,
-  subtext: tw`text-gray-300 font-bold`,
+  subtext: tw`text-gray-400 font-bold text-sm`,
   container: ({ tabularLayout }) => [
-    tabularLayout && tw`grid grid-cols-3 gap-20`,
+    tabularLayout && tw`grid grid-cols-3 gap-x-10 gap-y-20`,
   ],
   post: ({ tabularLayout }) => [
     tabularLayout && tw`grid grid-cols-1`,
     !tabularLayout && tw`grid grid-cols-2 gap-20`,
   ],
   description: ({ index, tabularLayout }) => [
-    tabularLayout && (index % 2 ? tw`pb-7 -order-1` : tw`pt-7`),
+    tabularLayout && (index % 2 ? tw`pb-7 pt-4 border-gray-100 border-t -order-1` : tw`pt-7 pb-2 border-gray-100 border-b`),
     !tabularLayout && tw`py-10`,
   ],
 }
 
-export default function PostList ({ posts, tabularLayout }) {
+export default function PostList ({ posts, tabularLayout }) {  
   const blogPosts = posts.map((node, i) => (
     <BlogPost index={i} tabularLayout={tabularLayout} node={node} key={node.id} />
   ))
@@ -37,11 +37,13 @@ export default function PostList ({ posts, tabularLayout }) {
 }
 
 function BlogPost ({ node, index, tabularLayout }) {
+  const date = node.content.frontmatter.updated
+
   return (
     <Link to={`/${node.relativeDirectory}`} className="group" css={styles.post({ tabularLayout })}>
       <div tw="aspect-w-8 aspect-h-4 shadow-2xl">
         <GatsbyImage
-          tw="w-full h-full object-center object-cover"
+          tw="w-full h-full object-center object-cover rounded-sm"
           image={getImage(node.content.frontmatter.heroImage)}
         />
       </div>
@@ -50,7 +52,7 @@ function BlogPost ({ node, index, tabularLayout }) {
         <h3 css={styles.title}>{node.content.frontmatter.title}</h3>
         <div css={styles.excerpt}>{node.content.excerpt}</div>
         <div css={styles.subtext}>
-          {node.changeTime} &middot; {node.content.fields.timeToRead.minutes} min read
+          {node.content.frontmatter.updated} &middot; {node.content.fields.timeToRead.minutes} min read
         </div>
       </div>
     </Link>

blog/src/components/blog/lists/index.js

@@ -0,0 +1,32 @@
+import { graphql } from 'gatsby'
+
+export const query = graphql`
+  fragment PostListQuery on FileConnection {
+    totalCount
+    nodes {
+      id
+      relativeDirectory
+      changeTime(formatString: "MMMM Do, YYYY")
+      content: childMdx {
+        excerpt
+        fields {
+          timeToRead { minutes }
+        }
+        frontmatter {
+          title
+          updated(formatString: "MMMM Do, YYYY")
+          released(formatString: "MMMM Do, YYYY")
+          heroImage {
+            childImageSharp {
+              gatsbyImageData(
+                width: 500,
+                placeholder: BLURRED,
+                formats: [AUTO, WEBP, JPG]
+              )
+            }
+          }
+        }
+      }
+    }
+  }
+`

blog/src/components/simulator/SceneComponent.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef } from 'react'
+import { Engine, Scene } from '@babylonjs/core'
+
+export default function SceneComponent ({
+  antialias, engineOptions, adaptToDeviceRatio, sceneOptions,
+  onRender, onSceneReady, ...rest
+}) {
+  const reactCanvas = useRef(null)
+
+  useEffect(() => {
+    const { current: canvas } = reactCanvas
+
+    if (!canvas) return
+
+    canvas.innerWidth = window.innerWidth
+
+    const engine = new Engine(canvas, antialias, engineOptions, adaptToDeviceRatio)
+    const scene = new Scene(engine, sceneOptions)
+    if (scene.isReady()) {
+      onSceneReady(scene)
+    } else {
+      scene.onReadyObservable.addOnce((scene) => onSceneReady(scene))
+    }
+
+    engine.runRenderLoop(() => {
+      if (typeof onRender === 'function') onRender(scene)
+      scene.render()
+    })
+
+    const resize = () => scene.getEngine().resize()
+    if (window) window.addEventListener('resize', resize)
+
+    return () => {
+      scene.getEngine().dispose()
+
+      if (window) window.removeEventListener('resize', resize)
+    }
+  }, [antialias, engineOptions, adaptToDeviceRatio, sceneOptions, onRender, onSceneReady])
+
+  return <canvas ref={reactCanvas} {...rest} />
+}

blog/src/pages/about.js

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import Layout from '../components/Layout'
+
+const AboutPage = ({ data }) => {
+  return (
+    <Layout>
+      Coming soon.
+    </Layout>
+  )
+}
+
+export default AboutPage