Astroで構築したアプリにて、RSSフィードを出力する (TypeScript)

Astroでサイトを構築したのですが、RSSフィードの出力も必要だったので、作業内容の覚書です。

RSS系の操作は、@astro/rssを利用する

Astroでは、公式でRSS周りのライブラリが用意されています。

% npm install @astrojs/rss

あとはgetメソッドで、rss()の実行結果をreturnしましょう。

Markdownのデータからフィードを生成する例

getCollectionの結果を、rssのitemsに配列で渡しています。

import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';

export async function get(context) {
    const posts = await getCollection('blog');
    return rss({
        title: SITE_TITLE,
        description: SITE_DESCRIPTION,
        site: context.site.origin,
        items: posts.map((post) => ({
            ...post.data,
            link: `/blog/${post.slug}/`,
        })),
    });
}

Typescriptの型情報も利用可能

RSSOptions型を利用して、型安全なフィード生成処理を作れます。

import rss, { RSSOptions } from '@astrojs/rss';
import type { APIContext } from 'astro';
import { listMyNPMPackages } from '../../libs/dataSources/npmjs';
import { listMyWordPressPlugins } from '../../libs/dataSources/wporg';

export async function get(context: APIContext) {
    const npmPackages = await listMyNPMPackages()
    const wpPlugins = await listMyWordPressPlugins()
    const items:RSSOptions['items'] = [{
        link: `https://wordpress.org/plugins/${plugin.slug}`,
        title: plugin.name,
        pubDate: new Date(plugin.added)
    }]
    return rss({
      title: "Recent OSS activities | Hidetaka Okamoto",
      description: "Recent OSS activities",
      site: context.site?.origin ?? '',
      items: items
    });
}

関連記事

• https://docs.astro.build/ja/guides/rss/