blog posts get urls

blog/2020-03-03-test-entry.md

@@ -4,4 +4,4 @@ date: '1970-01-01T22:45:00-01:00'
 description: 'testing the log posts'
 ---
 
-# This is a test
+Hello

gatsby-node.js

@@ -1,11 +1,13 @@
 const path = require(`path`)
+const { createFilePath } = require(`gatsby-source-filesystem`)
 
 exports.createPages = async ({ actions, graphql, reporter }) => {
   const { createPage } = actions
 
   const siteTemplate = path.resolve(`src/templates/siteTemplate.js`)
+  const blogTemplate = path.resolve(`src/templates/blogTemplate.js`)
 
-  const result = await graphql(`
+  const pages = await graphql(`
     {
       allMdx(limit: 1000, filter: { fields: { source: { eq: "pages" } } }) {
         edges {
@@ -20,31 +22,70 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       }
     }
   `)
-
   // Handle errors
-  if (result.errors) {
+  if (pages.errors) {
-    reporter.panicOnBuild(`Error while running GraphQL query.`)
+    reporter.panicOnBuild(`Error while running pages GraphQL query.`)
     return
   }
 
-  result.data.allMdx.edges.forEach(({ node }) => {
+  const blogEntries = await graphql(`
+    {
+      allMdx(limit: 1000, filter: { fields: { source: { eq: "blog" } } }) {
+        edges {
+          node {
+            fields {
+              slug
+            }
+            frontmatter {
+              title
+              date
+              description
+            }
+          }
+        }
+      }
+    }
+  `)
+  // Handle errors
+  if (pages.errors) {
+    reporter.panicOnBuild(`Error while running blog-entry GraphQL query.`)
+    return
+  }
+
+  pages.data.allMdx.edges.forEach(({ node }) => {
     createPage({
       path: node.frontmatter.path,
       component: siteTemplate,
       context: {}, // additional data can be passed via context
     })
   })
+  blogEntries.data.allMdx.edges.forEach(({ node }) => {
+    console.log(node.fields.slug)
+    createPage({
+      path: node.fields.slug,
+      component: blogTemplate,
+      context: {
+        slug: node.fields.slug,
+      },
+    })
+  })
 }
 
 exports.onCreateNode = ({ node, getNode, actions }) => {
   const { createNodeField } = actions
 
   if (node.internal.type === `Mdx`) {
-    const value = getNode(node.parent).sourceInstanceName
+    const source = getNode(node.parent).sourceInstanceName
     createNodeField({
       node,
       name: `source`,
-      value,
+      value: source,
+    })
+    const path = createFilePath({ node, getNode })
+    createNodeField({
+      node,
+      name: `slug`,
+      value: path,
     })
   }
 }

src/components/layout.js

@@ -1,7 +1,7 @@
-import React from "react"
+import React from 'react'
-import Nav from "../components/nav"
+import Nav from '../components/nav'
-import Footer from "../components/footer"
+import Footer from '../components/footer'
-import layoutStyles from "./layout.module.css"
+import layoutStyles from './layout.module.css'
 
 export default ({ path, editLink, children }) => (
   <>

src/templates/blogTemplate.js

@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react'
+import { graphql } from 'gatsby'
+import Layout from '../components/layout'
+import { MDXRenderer } from 'gatsby-plugin-mdx'
+import { MDXProvider } from '@mdx-js/react'
+
+const MdLeakH1 = props => <h2 {...props}># {props.children}</h2>
+const MdLeakH2 = props => <h3 {...props}>## {props.children}</h3>
+const MdLeakH3 = props => <h4 {...props}>### {props.children}</h4>
+const MdLeakH4 = props => <h5 {...props}>#### {props.children}</h5>
+
+const components = {
+  h1: MdLeakH1,
+  h2: MdLeakH2,
+  h3: MdLeakH3,
+  h4: MdLeakH4,
+}
+
+export default function Template({
+  data, // this prop will be injected by the GraphQL query below.
+}) {
+  const {
+    frontmatter: { title, path },
+    body,
+  } = data.mdx
+
+  useEffect(() => {
+    document.title = `ctdo - ${title.toLowerCase()}`
+  }, [title])
+
+  return (
+    <Layout path={path}>
+      <MdLeakH1>{title}</MdLeakH1>
+      <MDXProvider components={components}>
+        <MDXRenderer>{body}</MDXRenderer>
+      </MDXProvider>
+    </Layout>
+  )
+}
+
+export const pageQuery = graphql`
+  query($slug: String!) {
+    mdx(fields: { slug: { eq: $slug } }) {
+      id
+      excerpt(pruneLength: 160)
+      body
+      frontmatter {
+        title
+        date(formatString: "MMMM DD, YYYY")
+        description
+      }
+    }
+  }
+`