feat(www): add rss and atom feeds

apps/www/app/_utils/config/generate-feeds.ts

@@ -0,0 +1,134 @@
+import { writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { cwd } from 'node:process';
+import { getBlogPosts } from './get-blog-posts';
+import { buildRFC822Date } from './rfc-822';
+import { rfc3339 } from './rfc-3339';
+
+const baseUrl = 'https://designsystemet.no';
+const ttl = 60 * 24 * 7; // 1 week
+
+// Source - https://stackoverflow.com/a/27979933
+// Posted by hgoebl, modified by community. See post 'Timeline' for change history
+// Retrieved 2026-02-11, License - CC BY-SA 4.0
+function escapeXml(unsafe: string): string {
+  return unsafe.replace(/[<>&'"]/g, (c) => {
+    switch (c) {
+      case '<':
+        return '&lt;';
+      case '>':
+        return '&gt;';
+      case '&':
+        return '&amp;';
+      case "'":
+        return '&apos;';
+      case '"':
+        return '&quot;';
+    }
+    return c;
+  });
+}
+
+export async function generateFeeds(lang: string): Promise<void> {
+  const dirname = cwd();
+  const now = new Date();
+
+  try {
+    const rssSource = `${baseUrl}/${lang}/blog/feed.rss`;
+    const atomSource = `${baseUrl}/${lang}/blog/feed.atom`;
+
+    const blogPosts = await getBlogPosts(lang);
+    const title = blogPosts.metadata[0].title; // <title />
+    const description = blogPosts.metadata[1].content; // <description />
+    const url = blogPosts.metadata[5].content; // <meta name="og:url" />
+    const image = blogPosts.metadata[2].content; // <meta name="og:image" />
+
+    const rssOutput = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+<channel>
+  <title>${escapeXml(title)}</title>
+  <description>${escapeXml(description)}</description>
+  <link>${escapeXml(url)}</link>
+  <language>${lang}</language>
+  <image>
+    <title>${escapeXml(title)}</title>
+    <link>${escapeXml(url)}</link>
+    <url>${escapeXml(`${baseUrl}/${image}`)}</url>
+  </image>
+  <ttl>${ttl}</ttl>
+  <pubDate>${buildRFC822Date(now)}</pubDate>
+  <lastBuildDate>${buildRFC822Date(now)}</lastBuildDate>
+  <atom:link href="${escapeXml(rssSource)}" rel="self" type="application/rss+xml" />
+${blogPosts.posts
+  .map(
+    ({ url, description, title, date, searchTerms }) => `  <item>
+      <title>${escapeXml(title)}</title>
+      <link>${escapeXml(`${baseUrl}/${lang}/blog/${url}`)}</link>
+      <guid isPermaLink="true">${escapeXml(`${baseUrl}/${lang}/blog/${url}`)}</guid>
+      <pubDate>${buildRFC822Date(date)}</pubDate>
+      <description>${escapeXml(description)}</description>
+      <source url="${escapeXml(rssSource)}">${escapeXml(title)}</source>
+${searchTerms.map((term) => `      <category>${escapeXml(term.trim())}</category>`).join('\n')}
+  </item>`,
+  )
+  .join('\n')}
+  </channel>
+</rss>`;
+
+    const atomOutput = `<?xml version="1.0" encoding="UTF-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+  <title>${escapeXml(title)}</title>
+  <subtitle>${escapeXml(description)}</subtitle>
+  <link href="${escapeXml(url)}" />
+  <link rel="self" href="${escapeXml(atomSource)}" />
+  <icon>${escapeXml(image)}</icon>
+  <id>${escapeXml(atomSource)}</id>
+  <updated>${escapeXml(rfc3339(now))}</updated>
+
+${blogPosts.posts
+  .map(
+    ({ url, description, title, date, author, searchTerms }) => `  <entry>
+      <title>${escapeXml(title)}</title>
+      <link rel="alternate" href="${escapeXml(`${baseUrl}/${lang}/blog/${url}`)}" />
+      <link rel="self" href="${escapeXml(atomSource)}" />
+      <id>${escapeXml(`${baseUrl}/${lang}/blog/${url}`)}</id>
+      <updated>${escapeXml(rfc3339(new Date(date)))}</updated>
+      <summary>${escapeXml(description)}</summary>
+      <author>
+        <name>${escapeXml(author)}</name>
+      </author>
+${searchTerms.map((term) => `      <category term="${escapeXml(term.trim())}" />`).join('\n')}
+  </entry>`,
+  )
+  .join('\n')}
+</feed>`;
+
+    const rssClientPath = join(
+      dirname,
+      'dist',
+      'client',
+      lang,
+      'blog',
+      'feed.rss',
+    );
+    console.log(
+      `Writing feed.rss to ${rssClientPath} with ${blogPosts.posts.length} URLs`,
+    );
+    writeFileSync(rssClientPath, rssOutput);
+
+    const atomClientPath = join(
+      dirname,
+      'dist',
+      'client',
+      lang,
+      'blog',
+      'feed.atom',
+    );
+    console.log(
+      `Writing feed.atom to ${atomClientPath} with ${blogPosts.posts.length} URLs`,
+    );
+    writeFileSync(atomClientPath, atomOutput);
+  } catch (error) {
+    console.error(`Error generating feeds: ${error}`);
+  }
+}

apps/www/app/_utils/config/get-blog-posts.ts

@@ -0,0 +1,81 @@
+import { join } from 'node:path';
+import { bundleMDX } from 'mdx-bundler';
+import i18n from '../../i18next.server';
+import { getFileFromContentDir, getFilesFromContentDir } from '../files.server';
+import { generateMetadata } from '../metadata';
+
+export interface BlogPosts {
+  lang: string;
+  posts: {
+    title: string;
+    author: string;
+    description: string;
+    url: string;
+    date: string;
+    image: {
+      src: string;
+      alt: string;
+    };
+    searchTerms: string[];
+  }[];
+  metadata: ReturnType<typeof generateMetadata>;
+}
+
+export async function getBlogPosts(lang: string): Promise<BlogPosts> {
+  /* Get all files in /content/blog for the lang we have selected */
+  const files = getFilesFromContentDir(join('blog', lang));
+
+  /* Filter out files that are not .mdx */
+  const mdxFiles = files.filter((file) => file.relativePath.endsWith('.mdx'));
+
+  /* Get titles and URLs for all files */
+  const posts: BlogPosts['posts'] = [];
+
+  /* Map over files with mdx parser to get title */
+  for (const file of mdxFiles) {
+    const fileContent = getFileFromContentDir(
+      join('blog', lang, file.relativePath),
+    );
+    const result = await bundleMDX({
+      source: fileContent,
+    });
+
+    const title =
+      result.frontmatter.title || file.relativePath.replace('.mdx', '');
+    const url = file.relativePath.replace('.mdx', '');
+    const searchTerms: string[] = [];
+    if (typeof result.frontmatter.search_terms === 'string')
+      result.frontmatter.search_terms
+        .split(',')
+        .map((term) => searchTerms.push(term));
+
+    posts.push({
+      title,
+      author: result.frontmatter.author || 'Unknown Author',
+      description: result.frontmatter.description || 'No description available',
+      url,
+      date: result.frontmatter.date || '2000-01-01',
+      image: {
+        src: result.frontmatter.imageSrc || '',
+        alt: result.frontmatter.imageAlt || '',
+      },
+      searchTerms,
+    });
+  }
+
+  /* Sort posts by date */
+  posts.sort((a, b) => {
+    return new Date(b.date).getTime() - new Date(a.date).getTime();
+  });
+
+  const t = await i18n.getFixedT(lang);
+
+  return {
+    lang,
+    posts,
+    metadata: generateMetadata({
+      title: t('blog.title'),
+      description: t('blog.description'),
+    }),
+  };
+}

apps/www/app/_utils/config/rfc-3339.ts

@@ -0,0 +1,32 @@
+// Authored by @pjdietz on GitHub
+// https://gist.github.com/pjdietz/e0545332e2fc67a9a460
+
+export function rfc3339(d: Date): string {
+  function pad(n: number): string | number {
+    return n < 10 ? '0' + n : n;
+  }
+
+  function timezoneOffset(offset: number): string {
+    if (offset === 0) {
+      return 'Z';
+    }
+    const sign = offset > 0 ? '-' : '+';
+    offset = Math.abs(offset);
+    return sign + pad(Math.floor(offset / 60)) + ':' + pad(offset % 60);
+  }
+
+  return (
+    d.getFullYear() +
+    '-' +
+    pad(d.getMonth() + 1) +
+    '-' +
+    pad(d.getDate()) +
+    'T' +
+    pad(d.getHours()) +
+    ':' +
+    pad(d.getMinutes()) +
+    ':' +
+    pad(d.getSeconds()) +
+    timezoneOffset(d.getTimezoneOffset())
+  );
+}

apps/www/app/_utils/config/rfc-822.ts

@@ -0,0 +1,31 @@
+/**
+ * MIT License Copyright (c) 2022 Salma Alam-Naylor
+ * https://github.com/whitep4nth3r/rfc-822/blob/781aee2019a6a05d2fe91631bce00b41fc17a80e/index.js
+ */
+
+const weekdayFormat = new Intl.DateTimeFormat('en-US', { weekday: 'short' })
+  .format;
+const monthFormat = new Intl.DateTimeFormat('en-US', { month: 'short' }).format;
+
+// add a leading 0 to a number if it is only one digit
+function addLeadingZero(num: string | number): string {
+  num = num.toString();
+  while (num.length < 2) num = '0' + num;
+  return num;
+}
+
+export function buildRFC822Date(dateString: string | Date) {
+  const date =
+    dateString instanceof Date ? dateString : new Date(Date.parse(dateString));
+  // Convert to GMT
+  date.setTime(date.getTime() + date.getTimezoneOffset() * 60_000);
+
+  const day = weekdayFormat(date);
+  const dayNumber = addLeadingZero(date.getDate());
+  const month = monthFormat(date);
+  const year = date.getFullYear();
+  const time = `${addLeadingZero(date.getHours())}:${addLeadingZero(date.getMinutes())}:00`;
+
+  //Wed, 02 Oct 2002 13:00:00 GMT
+  return `${day}, ${dayNumber} ${month} ${year} ${time} GMT`;
+}

apps/www/app/_utils/metadata.ts

@@ -47,5 +47,5 @@ export const generateMetadata = ({
       property: 'twitter:image',
       content: image,
     },
-  ];
+  ] as const;
 };

apps/www/app/i18next.server.ts

@@ -1,7 +1,7 @@
 import { RemixI18Next } from 'remix-i18next/server';
-import i18n from '~/i18n';
-import en from '~/locales/en';
-import no from '~/locales/no';
+import i18n from './i18n';
+import en from './locales/en';
+import no from './locales/no';
 
 const i18next = new RemixI18Next({
   detection: {