Aims

The first task on the list to improve my blog was to add category pages.

I wanted these pages so I could easily sort my posts. On the blog post page, I wanted the list of categories to be links, taking you to a page that showed similar posts.

I intend to blog about 3 main areas - arts, digital and languages. So these categories really make sense for me to split up my blog and make everything easier to navigate.

Starting point - tutorials

I found a really awesome tutorial on CSS tricks about how to create taxonomy pages. It talks through adding the field(s) to the studio and the relationships very nicely. I really wish more tutorials covered the basics and the "this is how it works", because experienced users can always scroll/skim past.

After changes to the schema, make sure to run sanity graphql deploy to make sure everything is in sync. Remember GraphQL playground is for local development and won't update production.

The only problem with this is that I wanted my category pages to look very similar to my main page listing. The outcome of this tutorial is a list of links.

It also doesn't touch sorting by published date, filtering out posts, or using fields like post image and excerpt. So I followed it but made some major changes at the end.

Further refinement

I edited the GraphQL query in the category template, to retrieve the posts based on the category ID of the page.

export const query = graphql`
  query CategoryTemplateQuery($id: String!) {

    category: sanityCategory(
      id: {eq: $id}
      ) {
        title
        description
        slug {
          current
        }
      }

    posts: allSanityPost(
      filter: {categories: {elemMatch: {id: {eq: $id}}}, slug: { current: { ne: null } }, publishedAt: { ne: null }}
      sort: { fields: [publishedAt], order: DESC }
      ) {
      edges {
        node {
          id
          publishedAt
          mainImage {
            ...SanityImage
            alt
          }
          title
          _rawExcerpt
          slug {
            current
          }
          categories {
            slug {
              current
            }
          }
        }
      }
    }

  }

`

Remind me to implement a nice code block ASAP! Edit - I did!

So using the $id, I could filter the posts to the correct category. The rest was fairly straight forward - borrowing the layout from the existing index/archive pages to create this lovely blog post preview grid.

Now that I had category pages themselves, filtering, sorting and looking as desired, I could then go ahead and link them up to mentions of the categories. On each blog page, you can now click on a category and it will show you other blog posts listed under the same.

I also added these three main categories to the header - as they will be critical parts of my blog. I can always rethink this later if it doesn't work for me - and I'm sure another post will come of it!

Summary

I hope this helped anyone who, like me, is new to the game and finds such intense abstraction a little difficult to get their head around. I can safely say that after two evenings of just playing around with it, the whole thing is started to make a lot more sense in my head.

Now I have an endless list of improvements I want to do, and a little more confidence to do them... fun times ahead!