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!