Pull Request 1: ADD mdx blog posts

.gitignore

@@ -2,3 +2,4 @@
 .cache
 .idea
 public
+yarn.lock

content/blog/helloworld/index.md

@@ -0,0 +1,8 @@
+---
+slug: "/helloworld"
+title: "Hello World"
+date: "02/25/2022"
+description: "Hello Description"
+---
+
+Hello-World!

content/blog/secondpost/index.md

@@ -0,0 +1,8 @@
+---
+slug: "/secondpost"
+title: "The Second Post"
+date: "02/28/2022"
+description: "Second Post Description"
+---
+
+Another post?

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,45 @@
+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 {
+                slug
+                title
+                date
+                description
+              }
+            }
+          }
+        }
+      }
+    `
+  )
+  // 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 = `/blog/${node.frontmatter.slug}`
+    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,27 +1,61 @@
 import React from 'react';
 import Layout from '../components/Layout';
+import { Link, graphql } from "gatsby"
 
-const Blog = () => {
-  const BlogPost = () => {
-    return (
-      <div>
+const Blog = ({ data }) => {
+  const posts = data.allMarkdownRemark.nodes
 
-      </div>
+  if (posts.length === 0) {
+    return (
+      <Layout>
+        <p>
+         Sorry, no blogs to be found!
+        </p>
+      </Layout>
     )
   }
+
   return (
     <Layout>
       <div className='w-max'>
         <div className='space-y-3 mt-52'>
           <h1 className='text-4xl font-semibold'>Anubis<span className='text-primary'> Blog</span> </h1>
           <p className='text-xl text-gray'>A collection of posts by our developers and maintainers.</p>
         </div>
-        <div className='flex flex-col items-center'>
-          <div/>
-        </div>
+          <div className='flex flex-col items-center'>
+            {posts.map(post => {
+              const {title, date, description} = post.frontmatter
+                return (
+                  <div className='w-max mt-16'>
+                  <h2 className='text-4xl font-bold text-primary'>
+                    <Link to={`blog/${post.frontmatter.slug}`} itemProp="url">
+                      <span itemProp="headline">{title}</span>
+                    </Link>
+                  </h2>
+                      <span itemProp="date" className='text-gray'>{date}</span>
+                      <p itemProp="description" className='text-xl text-gray'>{description}</p> 
+                  </div>
+                )
+            })}     
+          </div>
       </div>
     </Layout>
-  )
-}
+    )
+  }
 
-export default Blog;
+export default Blog;
+export const pageQuery = graphql`
+query MyQuery {
+  allMarkdownRemark {
+    nodes {
+      rawMarkdownBody
+      frontmatter {
+        slug
+        title
+        date
+        description
+      }
+    }
+  }
+}
+`