[Astro]: AstroでZennの記事をRSSフィードから取得する

[Astro]: AstroでZennの記事をRSSフィードから取得する

Astroで自分のZennの記事を取得して表示するセクションを実装したのでRSSフィードを購読する実装のメモ

RSSフィードとは

RSSフィード

• サイトの更新情報など配信されている更新情報データのこと？
• URLを登録することで最新情報を取得できる

RSS

• XMLベースのデータ形式形式
• サイトの目次や更新案内、最新情報などを配信する役割
• RSSリーダーで読み込む -> 購読

一言でまとめると

単語	一言
RSS	XMLをベースとしたデータ形式
RSSフィード	RSS形式のデータでサイトの更新情報や最新情報など記されている

閲覧まで

1. サイトがフィードを作成・公開
2. フィードのURLをRSSリーダーに登録
3. RSSリーダーが更新データを取得
4. ユーザーが閲覧

AstroでZennの記事を購読してみる

@ascorbic/feed-loaderを使用する。
READMEの通りにするだけで簡単に購読することができた

インストール

npm install @ascorbic/feed-loader

config.tsの作成

src/content/config.ts

import { feedLoader } from "@ascorbic/feed-loader";
import { defineCollection } from "astro:content";

const zenn = defineCollection({
  loader: feedLoader({
    url: "https://zenn.dev/mitate_gengaku/feed",
  }),
});

export const collections = {
  zenn,
};

pages/*.astroで使用

pages/index.astro

---
import "../styles/global.css";
import { getCollection } from "astro:content";

import type { CollectionEntry, AnyEntryMap } from "astro:content";

const articles: CollectionEntry<keyof AnyEntryMap>[] =  await getCollection("zenn");
---

~~~ 省略 ~~~
  <Blog articles={articles} />
~~~ 省略 ~~~

結果

参考

最後に

間違っていることあればコメントに書いていただけると幸いです。
よろしくお願いいたします。