refractor: RSS feed

app/(main)/blog/rss.xml/route.ts

@@ -1,36 +1,51 @@
-import { email, firstName, lastName } from '@/constants/content';
+import { Feed } from 'feed';
+
+import { email, firstName, lastName, middleName } from '@/constants/content';
 import { blog, blogRssFeed } from '@/constants/nav';
 import { baseUrl } from '@/constants/site-config';
 import { getBlogs } from '@/lib/queries';
 
 export const GET = async () => {
   const blogs = await getBlogs();
-  return new Response(
-    `<?xml version="1.0" encoding="UTF-8" ?>
-    <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
-    <channel>
-      <title>${firstName} ${lastName} - ${blog.label}</title>
-      <link>${baseUrl}${blog.pathname}</link>
-      <description>Personal perspectives on a broad range of topics.</description>
-      <language>en</language>
-      <atom:link href="${baseUrl}${blogRssFeed.pathname}" rel="self" type="application/rss+xml" />
-      ${blogs
-        .map(
-          ({ title, slug, description, categories = [], createdAt, id }) => `
-            <item>
-              <title><![CDATA[${title}]]></title>
-              <link>${baseUrl}${blog.pathname}/${slug}</link>
-              <description><![CDATA[${description}]]></description>
-              <guid isPermaLink="false">${id}</guid>
-              <author>${email} (${firstName} ${lastName})</author>
-              ${categories.map((category) => `<category>${category}</category>`).join('')}
-              <pubDate>${new Date(createdAt).toUTCString()}</pubDate>
-            </item>
-          `,
-        )
-        .join('')}
-    </channel> 
-    </rss>`,
-    { headers: { 'Content-Type': 'text/xml' } },
-  );
+  const blogFeed = new Feed({
+    title: `${firstName} ${lastName} ${blog.label}`,
+    description: 'Personal perspectives on a broad range of topics.',
+    id: baseUrl + blogRssFeed.pathname,
+    link: baseUrl + blogRssFeed.pathname,
+    language: 'en',
+    copyright: `© ${new Date().getFullYear()} ${lastName.toUpperCase()}, ${firstName} ${middleName}`,
+    feedLinks: {
+      rss: baseUrl + blogRssFeed.pathname,
+      atom: 'self',
+    },
+  });
+
+  for (const {
+    title,
+    slug,
+    description,
+    categories = [],
+    createdAt,
+    updatedAt,
+  } of blogs) {
+    blogFeed.addItem({
+      guid: `${blog.pathname}/${slug}`,
+      title,
+      link: `${baseUrl}${blog.pathname}/${slug}`,
+      description,
+      author: [
+        {
+          name: `${firstName} ${lastName}`,
+          email,
+        },
+      ],
+      published: new Date(createdAt),
+      date: new Date(updatedAt),
+      category: categories.map((category) => ({ name: category })),
+    });
+  }
+
+  return new Response(blogFeed.rss2(), {
+    headers: { 'Content-Type': 'text/xml' },
+  });
 };

components/footer.tsx

@@ -23,7 +23,6 @@ import { Icon } from './contentful';
 export type FooterProps = Omit<BoxProps<'footer'>, 'children'>;
 export const Footer: FC<FooterProps> = async (props) => {
   const platformProfiles = await getPlatformProfiles();
-  const currYear = new Date().getFullYear();
 
   return (
     <Box component="footer" {...props}>
@@ -58,7 +57,8 @@ export const Footer: FC<FooterProps> = async (props) => {
         </Stack>
 
         <Typography level="body-sm" sx={{ mt: 2 }}>
-          © {currYear} {lastName.toUpperCase()}, {firstName} {middleName}
+          © {new Date().getFullYear()} {lastName.toUpperCase()}, {firstName}{' '}
+          {middleName}
         </Typography>
         <Typography level="body-sm">
           Branding logo designed by{' '}

lib/queries.ts

@@ -67,6 +67,7 @@ export const getBlogs = cache(
       title: item.fields.title,
       slug: item.fields.slug,
       description: item.fields.description,
+      content: item.fields.content,
     }));
   },
 );

package.json

@@ -32,6 +32,7 @@
     "clsx": "^2.1.0",
     "contentful": "^10.8.6",
     "dayjs": "^1.11.10",
+    "feed": "^4.2.2",
     "geist": "^1.3.0",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.363.0",