カテゴリを複数つけられるようになりました

こんにちは。GORAN です。今日は弊ブログについての話です。

はじめの投稿にあるように弊ブログはオープンになっております。 リポにはUpdate ProgressというProjectを持たせていて、取り組んでいるアップデート事項を確認することができます。

今回は執筆体験の向上にむけてmdファイルのfrontmatterにおいてカテゴリを配列で記述できるようなアップデートに取り組みました。

前提

弊ブログは@catnoseさんのCatKnowsという個人ブログがオープンになっているのをいいことにヤドカリさせていただいたものになってます。

本家を見ていただければわかりますが、そもそも複数カテゴリを設定する仕様（思想）にはなっておりません。タグの装飾やカテゴリごとのキュレーションを考えてもひとつ設定できれば必要十分という考えなのではと推察します（GORANもそう思う）が、弊チーム@motoiから強い要望がありまして「複数タグ設定できるようにして」と命ぜられた次第でございます。笑

（命を頂戴したのは2021年6月12日。あまりにも怠惰。）

仕様

• 配列で書けたい
• タグごとの装飾はできたい
• カテゴリページもちゃんと生成されたい

配列で書けたい

達成せねばならない必須事項です。とはいえfrontmatterはYAMLがサポートされてるのでそもそも配列は使える仕様。

YAMLで文字列書くときは''不要ですが、書く派です。

---
title: 'カテゴリを複数つけられるようになりました'
date: '2021-08-07T12:00:00.000Z'
category: [release]description: 'frontmatterにString[]でカテゴリを設定できるようにアップデート'
author: 'goran'
hero: 'hero.jpg'
ogp: 'ogp.jpg'
---

タグごとの装飾はできたい

タグに装飾をつけたい＝タグ固有のスタイルを持たせたいので、gatsby-config.jsにてカテゴリの管理をしています。categoriesにないものを設定しようとすると、カテゴリラベルを生成するコンポーネントでエラーになります。

module.exports = {
  siteMetadata: {
      ~~
    categories: [
        ~~
      {
        name: "Release",
        slug: "release",
        color: "#e00009",
      }
      ~~
    ]
    ~~
  },
  ~~
};

カテゴリページもちゃんと生成されたい

カテゴリが複数設定されていてもそれぞれのカテゴリ一覧ページにまとめられるようにしています。

1. 全記事取得
2. 全記事でforEachしつつ各記事のcategoryでもforEachしてcategoriesという配列を生成
3. categoriesのメンバに対してcreatePageをforEachで回して各カテゴリページを生成

    const posts = result.data.allMarkdownRemark.edges;
    let categories = [];
    posts.forEach(post => {
      post.node.frontmatter.category.forEach(category => {
        if (category) {
          categories.push(category);
        }
      }
      )
    });
    categories = new Set(categories);
    categories.forEach(category => {
      createPage({
        path: `/category/${category}/`,
        component: path.resolve("src/templates/categories.js"),
        context: {
          category
        }
      });
    });

おわりに

（当事者ですが）書きやすくなりました。まだまだアップデート待ちのissueあるので、こういったリリースがあった場合は備忘録として残していこうと思います。皆様、良き執筆ライフを。