RSS Feed

Author: alex-snezhko

package-lock.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
+    "@astrojs/rss": "^4.0.11",
     "@astrojs/svelte": "^7.0.1",
     "@astrojs/tailwind": "^5.1.3",
     "@docsearch/css": "^3.6.2",
@@ -30,6 +31,7 @@
     "hast-util-from-html": "^2.0.1",
     "hastscript": "^9.0.0",
     "lz-string": "^1.5.0",
+    "markdown-it": "^14.1.0",
     "memfs": "^4.11.1",
     "monaco-editor-textmate": "^4.0.0",
     "monaco-textmate": "^3.0.1",
@@ -42,6 +44,7 @@
     "readable-stream": "^4.5.2",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
+    "sanitize-html": "^2.14.0",
     "svelte": "^5.8.1",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",

package.json

@@ -4,20 +4,31 @@ import { Image } from "astro:assets";
 import BlogAuthor from "./BlogAuthor.astro";
 import ChevronRightIcon from "./icons/ChevronRightIcon.astro";
 import DiscordIcon from "./icons/DiscordIcon.astro";
+import RssIcon from "./icons/RssIcon.astro";
 import GrainLogo from "./icons/GrainLogo.astro";
 
 interface Props {
   entry: CollectionEntry<"blog">;
 }
 
 const { entry } = Astro.props;
+
+const rssLink = Astro.site!.toString().replace(/\/$/, "") + "/blog/rss.xml";
 ---
 
 <div class="mx-auto max-w-[70rem] pb-5 lg:pb-28 px-4">
   <div class="my-6 md:my-10 flex justify-between items-center">
     <div>
       <GrainLogo class="w-8 h-8 md:w-12 md:h-12 inline-block align-middle fill-color-accent" />
       <span class="md:pl-1 text-2xl md:text-4xl font-semibold align-middle">The Grain Blog</span>
+      <a
+        href={rssLink}
+        target="_blank"
+        aria-label="RSS feed link"
+        class="hidden md:inline-block ml-2 align-middle"
+      >
+        <RssIcon class="w-10 h-10 fill-color-accent" />
+      </a>
     </div>
     <div class="flex md:hidden gap-4 text-color-accent items-center">
       <a
@@ -34,6 +45,13 @@ const { entry } = Astro.props;
       >
         <DiscordIcon class="w-7 h-7 fill-color-accent" />
       </a>
+      <a
+        href={rssLink}
+        target="_blank"
+        aria-label="RSS feed link"
+      >
+        <RssIcon class="w-7 h-7 fill-color-accent" />
+      </a>
     </div>
     <div class="hidden md:block text-color-accent">
       Also find us on

src/components/BlogHero.astro

@@ -49,6 +49,7 @@ import Card from "./Card.astro";
           backgrounds, which adds significant value to how we approach
           developer experience.
         </p>
+        <a class="z-20 text-color-accent hover:text-color-accent-muted" href="https://github.com/sponsors/grain-lang" target="_blank">Sponsor Us →</a>
       </Card>
       <Card title="Want to be a part of Grain's development?" class="bg-gray-variant-90 dark:bg-[#2F2744] text-purple-20">
         <p class="text-gray-variant-50">