Astroで構築したアプリにて、RSSフィードを出力する (TypeScript)
Astroでサイトを構築している場合、RSSフィードの生成が必要となることがあります。Astroには、@astro/rssを利用することで、公式でRSS周りのライブラリが用意されています。getメソッドで、rss()の実行結果をreturnし、Markdownのデータからフィードを生成する例を示しています。RSSOptions型を利用することで、型安全なフィード生成処理を作成することもできます。詳細は、https://docs.astro.build/ja/guides/rss/を参照してください。
広告ここから
広告ここまで
目次
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
});
}