Complete Gatsby Tutorial Part 5

blog/last_week.mdx

@@ -0,0 +1,6 @@
+---
+title: "Say what?"
+date: "2022-05-10"
+---
+
+Just trying not to fail my classes lol

blog/post1.mdx

@@ -0,0 +1,12 @@
+---
+title: "First Blog Post"
+date: "2022-05-08"
+---
+
+This is blog post number one for the gatsby tutorial. *Neat*
+
+Here is a list:
+
+* Item
+* Another Item
+* Something

blog/post2.mdx

@@ -0,0 +1,8 @@
+---
+title: "Lol I dunno"
+date: "2022-05-09"
+---
+
+This is another blog post. 
+
+Pretend I wrote something useful herey

gatsby-config.js

@@ -6,6 +6,7 @@ module.exports = {
     plugins: [
         "gatsby-plugin-image",
         "gatsby-plugin-sharp",
+	"gatsby-plugin-mdx",
         {
           resolve: "gatsby-source-filesystem",
           options: {

package.json

@@ -15,8 +15,11 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
+    "@mdx-js/mdx": "^1.6.22",
+    "@mdx-js/react": "^1.6.22",
     "gatsby": "^4.8.0",
     "gatsby-plugin-image": "^2.9.1",
+    "gatsby-plugin-mdx": "^3.14.0",
     "gatsby-plugin-sharp": "^4.9.1",
     "gatsby-source-filesystem": "^4.13.0",
     "react": "^17.0.1",

src/pages/blog.js

@@ -1,31 +1,39 @@
 import * as React from 'react'
 import { graphql } from 'gatsby'
+import { MDXRenderer } from 'gatsby-plugin-mdx'
 import Layout from '../components/layout'
 
 const BlogPage = ({data}) => {
     return (
         <Layout pageTitle="My Blog Posts">
-            <ul>
-                {
-                    data.allFile.nodes.map(node => (
-                        <li key={node.name}>
-                            {node.name}
-                        </li>
-                    ))
-                }
-            </ul>
+            {
+                data.allMdx.nodes.map((node) => (
+                    <article key={node.id}>
+                        <h2>{node.frontmatter.title}</h2>
+                        <p>Posted: {node.frontmatter.date}</p>
+                        <MDXRenderer>
+                            {node.body}
+                        </MDXRenderer>
+                    </article>
+                ))
+            }
         </Layout>
     )
 }
 
 export const query = graphql`
-    query {
-        allFile {
-            nodes {
-                name
-            }
+query blogMDXQuery {
+    allMdx(sort: {fields: frontmatter___date, order: DESC}) {
+      nodes {
+        frontmatter {
+          date(formatString: "MMMM D, YYYY")
+          title
         }
+        id
+        body
+      }
     }
+  }
 `
 
 export default BlogPage