Pull Request 1: ADD mdx blog posts

content/blog/helloworld/index.md

@@ -0,0 +1,6 @@
+---
+path: "/{placeholder}/helloworld"
+---
+
+<h1>Test<h1>
+Just a test!

gatsby-config.js

@@ -25,5 +25,13 @@ module.exports = {
       },
       __key: "images",
     },
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        path: `./content/blog`,
+        name: `blog`,
+      }
+    },
+    "gatsby-transformer-remark"
   ],
-};
+};

gatsby-node.js

@@ -0,0 +1,42 @@
+const path = require("path")
+
+// Implement the Gatsby API “createPages”. This is called once the
+// data layer is bootstrapped to let plugins create pages from data.
+exports.createPages = async ({ graphql, actions, reporter }) => {
+  const { createPage } = actions
+  // Query for markdown nodes to use in creating pages.
+  const result = await graphql(
+    `
+      {
+        allMarkdownRemark(limit: 1000) {
+          edges {
+            node {
+              frontmatter {
+                path
+              }
+            }
+          }
+        }
+      }
+    `
+  )
+  // Handle errors
+  if (result.errors) {
+    reporter.panicOnBuild(`Error while running GraphQL query.`)
+    return
+  }
+  // Create pages for each markdown file.
+  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
+  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+    const path = node.frontmatter.path
+    createPage({
+      path,
+      component: blogPostTemplate,
+      // In your blog post template's graphql query, you can use pagePath
+      // as a GraphQL variable to query for data from the markdown file.
+      context: {
+        pagePath: path,
+      },
+    })
+  })
+}

package.json

@@ -27,6 +27,7 @@
     "gatsby-plugin-sharp": "^3.14.1",
     "gatsby-source-filesystem": "^3.14.0",
     "gatsby-transformer-sharp": "^3.14.0",
+    "gatsby-transformer-remark": "^5.7.0",
     "react": "^17.0.1",
     "react-compare-slider": "^2.1.0",
     "react-dom": "^17.0.1",
@@ -38,4 +39,4 @@
     "postcss": "^8.3.9",
     "tailwindcss": "^2.2.16"
   }
-}
+}

src/pages/blog.js

@@ -1,14 +1,10 @@
 import React from 'react';
 import Layout from '../components/Layout';
+import { graphql } from "gatsby"
 
-const Blog = () => {
-  const BlogPost = () => {
-    return (
-      <div>
 
-      </div>
-    )
-  }
+const Blog = ({ data, location }) => {
+  console.log(pageQuery)
   return (
     <Layout>
       <div className='w-max'>
@@ -21,7 +17,20 @@ const Blog = () => {
         </div>
       </div>
     </Layout>
-  )
-}
+    )
+  }
+
+export default Blog;
 
-export default Blog;
+export const pageQuery = graphql`
+  query MyQuery {
+    allMarkdownRemark {
+      nodes {
+        frontmatter {
+          path
+          title
+        }
+      }
+    }
+  }
+`