Outline
I gave you a three-part assignment in the last video.
The first part of the assignment was to add a new type of frontmatter. Let's add a category to our frontmatter. To do this, the first thing we need to do is add it to the post:
---
date: "2019-11-12"
title: "Game Night at the Lodge: Scythe"
category: "Game Night"
---
Join us at the Lodge as we try to learn the complicated board game "Scythe."
Then, we can add a reference to it in event-layout.js:
// src/pages/event-layout.js
import React from "react"
import { graphql } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import Layout from "../components/Layout"
export default ({ data: { mdx } }) => {
return (
<Layout>
<h3>Name: {mdx.frontmatter.title}</h3>
<h3>Date: {mdx.frontmatter.date}</h3>
<h3>Category: {mdx.frontmatter.category}</h3>
<MDXRenderer>{mdx.body}</MDXRenderer>
</Layout>
)
}
Finally, we also need to update the page query so we can use it in the query:
export const pageQuery = graphql`
query EventPageQuery($id: String) {
mdx(id: { eq: $id }) {
body
frontmatter {
date
title
category
}
id
}
}
`
The second part of the assignment was to format the date. It turns out the date property can take a formatString property that uses the same format Moment.js does. We can update the query like this:
export const pageQuery = graphql`
query EventPageQuery($id: String) {
mdx(id: { eq: $id }) {
body
frontmatter {
date(formatString: "MM/DD/YYYY")
title
category
}
id
}
}
`
The third part of the assignment was to create five more Markdown files in /content/events/. I'll leave that to you!
Up next, let's build that events index!