feat: provide rss, atom and json feeds for the blog

app/pages/blog/index.vue

@@ -15,6 +15,23 @@ useSeoMeta({
   ogDescription: () => $t('blog.meta_description'),
   twitterDescription: () => $t('blog.meta_description'),
 })
+
+useHead({
+  link: [
+    {
+      rel: 'alternate',
+      title: 'Blog - npmx',
+      type: 'application/rss+xml',
+      href: 'https://npmx.dev/blog/rss.xml',
+    },
+    {
+      rel: 'alternate',
+      title: 'Blog - npmx',
+      type: 'application/atom+xml',
+      href: 'https://npmx.dev/blog/atom.xml',
+    },
+  ],
+})
 </script>
 
 <template>

nuxt.config.ts

@@ -233,6 +233,12 @@ export default defineNuxtConfig({
     '/recharging': { prerender: true },
     '/pds': { isr: 86400 }, // revalidate daily
     '/blog/**': { prerender: true },
+    '/blog/rss.xml': {
+      headers: { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/rss+xml' },
+    },
+    '/blog/atom.xml': {
+      headers: { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/atom+xml' },
+    },
     '/noodles/**': { prerender: true },
     '/sponsors': { prerender: true },
     '/tools': { prerender: true },
@@ -276,6 +282,10 @@ export default defineNuxtConfig({
     esbuild: {
       options: {
         target: 'es2024',
+        // HACK: Excluding node_modules is the default. Here, we exempt
+        // .cache/nuxt/.nuxt/blog/posts.ts from that so that #blog/posts can be
+        // imported, parsed and executed as TS in server/utils/feeds.ts by esbuild
+        exclude: /node_modules\/(?!\.cache\/nuxt\/\.nuxt\/blog\/posts\.ts)/,
       },
     },
     rollupConfig: {

package.json

@@ -136,6 +136,7 @@
     "devalue": "6.0.0",
     "eslint-plugin-regexp": "3.3.1",
     "fast-check": "4.9.0",
+    "feed": "6.0.0",
     "h3": "1.15.11",
     "h3-next": "npm:h3@2.0.1-rc.26",
     "knip": "6.37.0",

server/routes/blog/atom.xml.get.ts

@@ -0,0 +1,5 @@
+import { getFeed } from '../../utils/feeds'
+
+export default defineEventHandler(() => {
+  return getFeed().atom1()
+})

server/routes/blog/rss.xml.get.ts

@@ -0,0 +1,5 @@
+import { getFeed } from '../../utils/feeds'
+
+export default defineEventHandler(() => {
+  return getFeed().rss2()
+})

server/utils/feeds.ts

@@ -0,0 +1,40 @@
+import { Feed } from 'feed'
+import { posts } from '#blog/posts'
+
+const makeUrlAbsolute = (url: string) => new URL(url, 'https://npmx.dev').toString()
+
+export function getFeed() {
+  // Generate content for RSS and Atom
+  const feed = new Feed({
+    title: 'Blog - npmx',
+    description: 'A fast, modern browser for the npm registry',
+    id: 'https://npmx.dev/blog',
+    link: 'https://npmx.dev/blog',
+    language: 'en',
+    image: 'https://npmx.dev/logo.svg',
+    favicon: 'https://npmx.dev/favicon.ico',
+    feedLinks: {
+      rss: 'https://npmx.dev/blog/rss.xml',
+      atom: 'https://npmx.dev/blog/atom.xml',
+    },
+  })
+
+  for (const post of posts.filter(p => !p.draft)) {
+    feed.addItem({
+      title: post.title,
+      id: makeUrlAbsolute(post.path),
+      link: makeUrlAbsolute(post.path),
+      description: post.description,
+      author: post.authors.map(author => ({
+        name: author.name,
+        link: author.profileUrl ?? undefined,
+        // author.avatar is a relative URL - make it absolute to work in feed readers
+        avatar: author.avatar ? makeUrlAbsolute(author.avatar) : undefined,
+      })),
+      date: new Date(post.date),
+      image: post.image ? makeUrlAbsolute(post.image) : undefined,
+    })
+  }
+
+  return feed
+}

test/e2e/feeds.spec.ts

@@ -0,0 +1,52 @@
+import { expect, test } from './test-utils'
+
+test.describe('Blog feeds', () => {
+  test.describe('have alternate links and matching content types', () => {
+    const feeds = [
+      {
+        name: 'RSS',
+        contentType: 'application/rss+xml',
+      },
+      {
+        name: 'Atom',
+        contentType: 'application/atom+xml',
+      },
+    ]
+
+    for (const feed of feeds) {
+      test(feed.name, async ({ page, goto }) => {
+        await goto('/blog', { waitUntil: 'domcontentloaded' })
+
+        const locator = page.locator(`link[rel='alternate'][type='${feed.contentType}']`).first()
+        await expect(locator).toHaveAttribute('href')
+
+        const href = await locator.getAttribute('href')
+        expect(href).not.toBeNull()
+
+        if (typeof href !== 'string') {
+          return
+        }
+
+        // href is an absolute link
+        expect(href.slice(0, 16)).toBe('https://npmx.dev')
+
+        const { contentType, corsHeader, body } = await page.evaluate(async feedHref => {
+          // Fetch the same path as in the alternate link
+          const url = feedHref.slice(16)
+          const response = await fetch(url)
+          return {
+            contentType: response.headers.get('Content-Type'),
+            corsHeader: response.headers.get('Access-Control-Allow-Origin'),
+            body: await response.text(),
+          }
+        }, href)
+
+        expect(contentType).toBe(feed.contentType)
+        expect(body.length).toBeGreaterThan(0)
+        // Make sure feeds are available to browser-based readers, see
+        // https://www.blogsareback.com/guides/enable-cors
+        expect(corsHeader).toBe('*')
+      })
+    }
+  })
+})