Create An Article Series Overview Page With Gridsome

This is part fifteen of a series on building a file-based blog from scratch with Gridsome. Find the full series here.

You're writing an article series.
And you want a place for your readers to see all posts at once.

Using the tags system would work, but is not the right fit for this.

Here's a simple way to create and automatically update an article series overview page.

Extend The Front Matter of Your Blog Posts

First, we need to add a series property to the front matter:

---
slug: "third-post"
date: "2020-07-03"
title: "Code Coloring"
tags: ["frontend", "design", "code style"]
series: color
summary: "Banh mi authentic fashion axe affogato shoreditch umami bicycle rights keytar put a bird on it drinking vinegar pitchfork taxidermy."
---

For our example, I added a series property with value color.

Add The Overview Page

Now we can add a new file called src/pages/ColorSeries.vue:

<template>
  <Layout>
    <div class="py-16 mx-auto container-inner">
      <h1 class="text-3xl font-bold">
        A Series About Color
      </h1>
      <p class="mt-6">
        In this tutorial we look at various colors, and the images they produce in the human brain.
        We further improve some standard color schemes found online.
      </p>
      <div class="px-4 py-4 mt-8 rounded-lg bg-background-secondary">
        <h2 class="mt-2 text-2xl font-bold">
          Table of Contents
        </h2>
        <ul class="mt-6">
          <li
            v-for="post in $page.posts.edges"
            :key="post.id"
            class="mb-5 text-lg list-decimal list-inside"
          >
            <span class=""><g-link
              :to="post.node.path"
              class="text-copy-primary"
            >{{ post.node.title }}</g-link></span>
          </li>
        </ul>
      </div>
      <p class="mt-8 blockquote-green">
        This series is work in progress and will contain about 8 lessons when completed.
        New lessons every Tuesday.
      </p>
    </div>
  </Layout>
</template>

<page-query>
query Posts {
  posts: allBlogPost (sortBy: "date", order: ASC, filter: { series: {eq: "color"} })  {
    totalCount
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        title
        date (format: "MMMM D, Y")
        summary
        timeToRead
        path
      }
    }
  }
}
</page-query>

<script>
export default {
  metaInfo: {
    title: 'A Series About Color'
  }
}
</script>

The important part here is the page query.
When we examine the GraphQL interface under http://localhost:8080/___explore we notice an allBlogPost query with a filter option for all available properties.
Exactly what we need!

Finally, you can link to your series overview page from your blog posts like this:

> _This is part two of our color series. [Find the full series here](/color-series/)._

Note: I'll update this article to automate the links to the series page.

Next part: Add text to your tag pages in Gridsome

That’s it for this post on how to add Markdown components to your Gridsome blog posts. In the next part of this series, we improve our automatically generated tag pages and add a description to them.