Remix と Cloudflare Workers で RSS を作成する

先日の続き。

Next.js でも Gatsbyjs でも RSS とか作ろうとするとプラグインを使う必要があった気がする。
そこがなんか気になってはいた、、、

Movable Type とかで静的に出す場合はどんなのも生成できていたからなおさら気になるのかも知れない。
単に僕がわかってないだけでいい方法はありそうだけど。

Remix で header を色々調整して返せるらしいので試してみた。

headers
https://remix.run/docs/en/v1/a...

こちらの記事が参考になった。

RSS in Remix 💿 — CanRau.com
https://www.canrau.com/en/rss-...

ありがたし、、、m(__)m

app/routes/feed[.]xml.jsx を用意する

Remix では Resource Routes というらしい。

Remix | Resource Routes
https://remix.run/docs/en/v1.4...

feed[.]xml.jsx で feed.xml として出力できる。

GraphQLでデータ取得するところは getRSS で用意しておく。
RSS をとってるわけじゃないからこの名前はあまり良くないな。。。

export async function loader() {

  const posts = await getRSS().catch(() => {
  });

  const postItems = posts.data.entries
    .map((post) => {
      return [
        `<item>`,
        `<title>${post.title}</title>`,
        `<pubDate>${post.postDate}</pubDate>`,
        `<description><![CDATA[${post.title}]]></description>`,
        `<content:encoded><![CDATA[${post.title}]]></content:encoded>`,
        `<link>${post.url}</link>`,
        `<guid isPermaLink="false">tag:${post.postDate}:/${post.slug}#</guid>`,
        `</item>`
      ].join("");
    });

  let rss = [
    `<?xml version="1.0" encoding="UTF-8"?>`,
    `<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/">`,
    `<channel>`,
    `<title>mersy note</title>`,
    `<description>mersy note</description>`,
    `<link>https://remix-cloudflare-workers.mersy4189618.workers.dev/</link>`,
    `<atom:link href="https://remix-cloudflare-workers.mersy4189618.workers.dev/feed.xml" rel="self" type="application/rss+xml" />`,
    `<language>ja-JP</language>`,
      ...postItems,
    `</channel>`,
    `</rss>`,
  ];

  return new Response(rss.join(""), {
    headers: {
      "Content-Type": "application/xml; charset=utf-8",
      "x-content-type-options": "nosniff",
    },
  });
}

とりあえずこんなかんじで、取得したデータを元に postItems をいれていって、最後がっちゃんこ。
本文部分は面倒くて後回し。。。

headers で指定することでちゃんとレスポンスも変えられた。
色々できそうな気がするなー。

先人の記事を参考にやっているだけなので色々わかっていない所が多い。

JavaScript / React.js / Remix しかり、 Cloudflare Workers しかり。

Cloudflare Workers だと、 Remix でつくったこれらのデータがどんな感じで KV に保存されてるのかとかよくわかってないな。
よしなにやってくれているところをもう少し理解したいところではある。