Skip to content

Pull Request 1: ADD mdx blog posts #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ampahwa wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Pull Request 1: ADD mdx blog posts #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
095ab5f
Set up gastby-node and test md
ampahwa Feb 23, 2022
10bdd6a
cleaned up + added date and description to frontmatter and queries
austinbarron Feb 24, 2022
e98e7dc
changed 'path' to 'slug', removed extra markdown, deconstructed title…
austinbarron Feb 25, 2022
6d82564
new blogpost markdown, removed unnecessary code from blog
austinbarron Feb 28, 2022
62cc16a
ADD minor syling
ampahwa Feb 28, 2022
1c1b80b
RM yarn.lock
ampahwa Mar 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@
.cache
.idea
public
yarn.lock
8 changes: 8 additions & 0 deletions content/blog/helloworld/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
slug: "/helloworld"
title: "Hello World"
date: "02/25/2022"
description: "Hello Description"
---

Hello-World!
8 changes: 8 additions & 0 deletions content/blog/secondpost/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
slug: "/secondpost"
title: "The Second Post"
date: "02/28/2022"
description: "Second Post Description"
---

Another post?
10 changes: 9 additions & 1 deletion gatsby-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,13 @@ module.exports = {
},
__key: "images",
},
{
resolve: "gatsby-source-filesystem",
options: {
path: `./content/blog`,
name: `blog`,
}
},
"gatsby-transformer-remark"
],
};
};
45 changes: 45 additions & 0 deletions gatsby-node.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
},
})
})
}
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -38,4 +39,4 @@
"postcss": "^8.3.9",
"tailwindcss": "^2.2.16"
}
}
}
56 changes: 45 additions & 11 deletions src/pages/blog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
}
}
}
`
Empty file added src/templates/blog-post.js
View file
Open in desktop
Empty file.
Loading