refactor: use a content collection for daily posts

src/pages/archive.xml.js

@@ -1,20 +1,29 @@
+import MarkdownIt from 'markdown-it';
 import rss from '@astrojs/rss';
+import sanitizeHtml from 'sanitize-html';
+import { getCollection } from 'astro:content';
 
-const emailImportResult = import.meta.glob('../daily-emails/*.md', { eager: true });
-const emails = Object.values(emailImportResult)
-  .sort((a, b) =>
-    new Date(b.frontmatter.pubDate).valueOf() -
-    new Date(a.frontmatter.pubDate).valueOf()
-  )
+export async function get() {
+  const emails = await getCollection('daily-email');
 
-export const get = () => rss({
+  const sortedEmails = Object.values(emails)
+    .sort((a, b) =>
+      new Date(b.data.pubDate).valueOf() -
+      new Date(a.data.pubDate).valueOf()
+    );
+
+  const parser = new MarkdownIt();
+
+  return rss({
     title: 'Daily email list',
     description: 'A daily newsletter on software development, DevOps, community, and open-source.',
     site: import.meta.env.SITE,
-    items: emails.slice(0, 1).map((email) => ({
-      description: `<div style="max-width: 550px;">${email.compiledContent()}</div>`,
-      link: `${import.meta.env.SITE}${email.frontmatter.permalink}`,
-      title: email.frontmatter.title,
-      pubDate: email.frontmatter.pubDate,
+
+    items: sortedEmails.slice(0, 1).map((email) => ({
+      description: `<div style="max-width: 550px;">${sanitizeHtml(parser.render(email.body))}</div>`,
+      link: `${import.meta.env.SITE}/${email.data.permalink}`,
+      pubDate: email.data.pubDate,
+      title: email.data.title,
     }))
   });
+};

src/pages/archive/[...page].astro

@@ -1,13 +1,15 @@
 ---
 import DailyEmailForm from "~/components/DailyEmailForm.astro";
 import Layout from "~/layouts/DailyEmailLayout.astro";
+import { getCollection } from 'astro:content';
 
 export async function getStaticPaths({ paginate }) {
-  const emails = await Astro.glob("../../daily-emails/*.{md,mdx}");
+  const emails = await getCollection('daily-email');
+
   const sortedEmails = emails.sort(
     (a, b) =>
-      new Date(b.frontmatter.pubDate).valueOf() -
-      new Date(a.frontmatter.pubDate).valueOf()
+      new Date(b.data.pubDate).valueOf() -
+      new Date(a.data.pubDate).valueOf()
   );
 
   return paginate(sortedEmails, { pageSize: 20 });
@@ -21,13 +23,13 @@ const { page } = Astro.props;
     {
       page.data.map((email) => (
         <li>
-          <a href={`/${email.frontmatter.permalink}`}>
-            {new Date(email.frontmatter.pubDate).toLocaleDateString("en-GB", {
+          <a href={`/${email.data.permalink}`}>
+            {new Date(email.data.pubDate).toLocaleDateString("en-GB", {
               day: "numeric",
               month: "long",
               year: "numeric",
             })}:
-            {email.frontmatter.title}
+            {email.data.title}
           </a>
         </li>
       ))

src/pages/archive/[year]/[month]/[day]/[slug].astro

@@ -1,24 +1,25 @@
 ---
 import DailyEmailForm from "~/components/DailyEmailForm.astro";
 import Layout from "~/layouts/DailyEmailLayout.astro";
+import { getCollection } from 'astro:content';
+import { format, formatDistance, formatRelative, subDays } from 'date-fns'
 
 export async function getStaticPaths() {
-  const emails = await Astro.glob("../../../../../daily-emails/*.{md,mdx}");
+  const emails = await getCollection('daily-email');
 
   return emails.map((email) => {
-    const pubDate = email.frontmatter.pubDate.split("T")[0].split("-");
-
-    const slug = email.frontmatter.permalink
+    const slug = email.data.permalink
       .replace("archive/", "")
       .replace("\n", "");
+
     const slugParts = slug.split("/");
 
     return {
       params: {
-        day: pubDate[2],
-        month: pubDate[1],
+        day: format(email.data.pubDate, 'dd'),
+        month: format(email.data.pubDate, 'MM'),
         slug: slugParts.reverse()[0],
-        year: pubDate[0],
+        year: format(email.data.pubDate, 'Y'),
       },
       props: {
         email,
@@ -27,8 +28,8 @@ export async function getStaticPaths() {
   });
 }
 
-const { Content } = Astro.props.email;
-const { title } = Astro.props.email.frontmatter;
+const { Content } = await Astro.props.email.render();
+const { title } = Astro.props.email.data;
 ---
 
 <Layout title={title}>