Gatsby Material StarterのRSSフィードを修正する

Created: 2019-01-05

Gatsby Material Starterをしばらく使ってみたところ、生成されるRSSフィード内のURLがエンコードされていないことに気が付きました。そこで今回はフィード生成処理に手を加えて、これを修正してみます。

要件

  • Node.js 11.0.0
  • NPM 6.5.0
  • Gatsby CLI 2.4.7
  • Gatsby 2.0.40
  • Vagr9K/gatsby-material-starter 2019.01.06現在
$ node -v
v11.0.0

$ npm -v
6.5.0

$ gatsby -v
2.4.7

RSSフィードの修正

RSSフィードの生成処理をしているのは、プロジェクトルートにあるgatsby-config.jsです。以下のようにurl, guidフィールドを修正することで、URLエンコードを施します。

feeds: [
  {
    serialize(ctx) {
      const { rssMetadata } = ctx.query.site.siteMetadata;
      return ctx.query.allMarkdownRemark.edges.map(edge => ({
        categories: edge.node.frontmatter.tags,
        date: edge.node.frontmatter.date,
        title: edge.node.frontmatter.title,
        description: edge.node.excerpt,
        author: rssMetadata.author,
        url: rssMetadata.site_url + (edge.node.fields.slug).split(/\//).map(s => encodeURIComponent(s)).join("/"),        guid: rssMetadata.site_url + (edge.node.fields.slug).split(/\//).map(s => encodeURIComponent(s)).join("/"),        custom_elements: [{ "content:encoded": edge.node.html }]
      }));
    },
    query: `
    {
      allMarkdownRemark(
        limit: 1000,
        sort: { order: DESC, fields: [frontmatter___created] },
      ) {
        edges {
          node {
            excerpt
            html
            timeToRead
            fields { slug }
            frontmatter {
              title
              cover
              date
              category
              tags
            }
          }
        }
      }
    }
    `,
    output: config.siteRss
  }
]

修正すると、出力されたRSSフィードは以下のように変化します。

フィード生成修正前。

<link>https://www.yo1000.com/gatsby-material-starterの-rssフィードを修正する</link>
<guid isPermaLink="false">https://www.yo1000.com/gatsby-material-starterの-rssフィードを修正する</guid>

フィード生成修正後。

<link>https://www.yo1000.com/gatsby-material-starter%E3%81%AE-rss%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%82%92%E4%BF%AE%E6%AD%A3%E3%81%99%E3%82%8B</link>
<guid isPermaLink="false">https://www.yo1000.com/gatsby-material-starter%E3%81%AE-rss%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%82%92%E4%BF%AE%E6%AD%A3%E3%81%99%E3%82%8B</guid>
avatar

Written by yo1000 | YO!CHI KIKUCHI
Loves 🌱 Spring, 🦢 Pelikan fountain pen and 🦁 FINAL FANTASY VIII