Astro で Zenn の RSS フィードを追加する

流れとしては簡単で、rss-parser で Zenn の RSS フィードをパースした状態で取得してくるだけです。

ZennSection.astro というファイルを作成して、そのファイル内で rss-parser を利用しました。

---
import dayjs from 'dayjs'
import Parser from 'rss-parser'

// NOTE: ?all=1 をつけることでで全件取得できるとのこと
const RSS_URL = 'https://zenn.dev/_hyme_/feed?all=1'

const fetchZennFeeds = async (url: string = RSS_URL) => {
  const feed = await new Parser().parseURL(RSS_URL)
  return feed.items.map((item) => ({
    title: item.title ?? '',
    pubDate: item.pubDate ?? '',
    slug: item.link ?? 'https://zenn.dev/_hyme_',
  }))
}

const list = await fetchZennFeeds()
---

<section>
  <h2>Zenn</h2>
  <ul>
    {
      list.map(({ slug, title, pubDate }) => (
        <li>
          <time>{dayjs(pubDate).format('YYYY-MM-DD')}</time>
          <a href={slug} target="_blank">{title}</a>
        </li>
      ))
    }
  </ul>
</section>