feat: create separated rss feeds

src/components/Head.astro

@@ -46,7 +46,23 @@ if (typeof tags !== "undefined") {
     rel="alternate"
     type="application/rss+xml"
     title={SITE.TITLE}
-    href="/rss.xml"
+    href="/feed.xml"
+    }
+  />
+
+  <link
+    rel="alternate"
+    type="application/rss+xml"
+    title=`${SITE.TITLE} Projects`
+    href="/projects.xml"
+    }
+  />
+
+  <link
+    rel="alternate"
+    type="application/rss+xml"
+    title=`${SITE.TITLE} Posts`
+    href="/posts.xml"
     }
   />
 

src/components/ShowcasePost.astro

@@ -17,7 +17,9 @@ const { collection } = Astro.props;
   >
     <article class="flex flex-col">
       <div class="flex flex-col justify-between md:flex-row md:items-center">
-        <h3 class="text-secondary mb-1 text-lg font-semibold text-nowrap">
+        <h3
+          class="text-secondary group-hover:text-tertiary mb-1 text-lg font-semibold text-nowrap transition-colors duration-300"
+        >
           {collection.data.title}
         </h3>
         <div class="text-tertiary flex items-center gap-2">

src/components/ShowcaseProject.astro

@@ -25,7 +25,7 @@ const { collection } = Astro.props;
       <div
         class="relative opacity-0 transition-all delay-100 duration-300 ease-in-out group-hover:opacity-100"
       >
-        <p class="absolute right-5 bottom-5 font-medium">
+        <p class="absolute right-5 bottom-5 font-medium text-white">
           {collection.data.title}
         </p>
       </div>

src/components/Slideshow.astro

@@ -32,7 +32,7 @@ const { interval = 3000, images } = Astro.props;
             loading="eager"
           />
           <div class="relative opacity-0 transition-all delay-100 duration-300 ease-in-out group-hover:opacity-100">
-            <p class="absolute right-5 bottom-5 font-medium">
+            <p class="absolute right-5 bottom-5 font-medium text-white">
               {image.data.title}
             </p>
           </div>

src/consts.ts

@@ -25,8 +25,8 @@ export const SITE: Site = {
   AUTHOR: "Troy Lusty",
   LINKS: [
     {
-      name: "RSS",
-      href: "/rss.xml",
+      name: "RSS Feed",
+      href: "/feed.xml",
       icon: "mdi:rss",
     },
     {

src/pages/posts.xml.ts

@@ -0,0 +1,23 @@
+import rss from "@astrojs/rss";
+import { SITE } from "@consts";
+import { getCollection } from "astro:content";
+
+export async function GET(context: { site: string }) {
+  const posts = (await getCollection("posts"))
+    .filter((post) => !post.data.draft)
+    .sort(
+      (a, b) =>
+        new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(),
+    );
+  return rss({
+    title: `${SITE.TITLE} Posts`,
+    description: SITE.DESCRIPTION,
+    site: context.site,
+    items: posts.map((item) => ({
+      title: item.data.title,
+      description: item.data.description,
+      pubDate: item.data.date,
+      link: `/${item.collection}/${item.slug}/`,
+    })),
+  });
+}

src/pages/posts/index.astro

@@ -3,6 +3,7 @@ import { getCollection } from "astro:content";
 import { SITE, POSTS } from "@consts";
 import ShowcasePost from "@components/ShowcasePost.astro";
 import Layout from "@layouts/Layout.astro";
+import Link from "@components/Link.astro";
 
 const posts = (await getCollection("posts"))
   .filter((post) => !post.data.draft)
@@ -22,4 +23,11 @@ const posts = (await getCollection("posts"))
       posts.map((article: any) => <ShowcasePost collection={article} />)
     }
   </ol>
+  <div class="flex justify-end">
+    <Link
+      href="/posts.xml"
+      class="text-tertiary hover:text-secondary text-xs transition-colors duration-300"
+      >View posts feed</Link
+    >
+  </div>
 </Layout>

src/pages/projects.xml.ts

@@ -0,0 +1,23 @@
+import rss from "@astrojs/rss";
+import { SITE } from "@consts";
+import { getCollection } from "astro:content";
+
+export async function GET(context: { site: string }) {
+  const projects = (await getCollection("projects"))
+    .filter((project) => !project.data.draft)
+    .sort(
+      (a, b) =>
+        new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(),
+    );
+  return rss({
+    title: `${SITE.TITLE} Projects`,
+    description: SITE.DESCRIPTION,
+    site: context.site,
+    items: projects.map((item) => ({
+      title: item.data.title,
+      description: item.data.description,
+      pubDate: item.data.date,
+      link: `/${item.collection}/${item.slug}/`,
+    })),
+  });
+}

src/pages/projects/index.astro

@@ -3,6 +3,7 @@ import { getCollection } from "astro:content";
 import { PROJECTS, SITE } from "@consts";
 import Layout from "@layouts/Layout.astro";
 import ShowcaseProject from "@components/ShowcaseProject.astro";
+import Link from "@components/Link.astro";
 
 const projects = (await getCollection("projects"))
   .filter((project) => !project.data.draft)
@@ -18,4 +19,11 @@ const projects = (await getCollection("projects"))
   >
     {projects.map((article: any) => <ShowcaseProject collection={article} />)}
   </ol>
+  <div class="flex justify-end">
+    <Link
+      href="/projects.xml"
+      class="text-tertiary hover:text-secondary text-xs transition-colors duration-300"
+      >View projects feed</Link
+    >
+  </div>
 </Layout>