Add a crude RSS feed.

astro.config.ts

@@ -10,6 +10,7 @@ import mkcert from "vite-plugin-mkcert";
 
 // https://astro.build/config
 export default defineConfig({
+	site: "https://quic.video",
 	integrations: [
 		mdx(),
 		solidJs(),

package.json

@@ -13,6 +13,7 @@
 	"dependencies": {
 		"@astrojs/mdx": "4.3.0",
 		"@astrojs/node": "9.2.2",
+		"@astrojs/rss": "^4.0.12",
 		"@astrojs/solid-js": "5.1.0",
 		"@astrojs/tailwind": "6.0.2",
 		"@kixelated/hang": "^0.2.5",

src/layouts/global.astro

@@ -25,6 +25,7 @@ if (frontmatter?.description) description = frontmatter.description;
 		<meta name="description" content={description ? `Media over QUIC: ${description}` : "Media over QUIC is a new live media protocol in development by the IETF." } />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/svg+xml" href="/layout/favicon.svg" />
+		<link rel="alternate" type="application/rss+xml" title="quic.video RSS Feed" href={new URL("rss.xml", Astro.site)} />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title ? `${title} - Media over QUIC` : "Media over QUIC"}</title>
 	</head>

src/pages/blog/index.astro

@@ -20,7 +20,22 @@ posts.sort((a, b) => {
 
 <MainLayout title="Blog" description="Blog posts and fun stuff">
 	<section>
-		<h1>Blog Posts</h1>
+		<div class="flex items-center justify-between mb-6">
+			<h1>Blog Posts</h1>
+			<a href="/rss.xml" class="flex items-center gap-2 text-white hover:opacity-80 transition-opacity" title="RSS Feed">
+				<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+					<!-- RSS dot -->
+					<circle cx="6" cy="26" r="2" fill="#F7F8F8"/>
+
+					<!-- First arc (inner) -->
+					<path d="M6 16 A10 10 0 0 1 16 26" fill="none" stroke="#F7F8F8" stroke-width="2" stroke-linecap="round"/>
+
+					<!-- Second arc (outer) -->
+					<path d="M6 8 A18 18 0 0 1 24 26" fill="none" stroke="#00C02D" stroke-width="2" stroke-linecap="round"/>
+				</svg>
+				<span class="text-sm font-medium">RSS</span>
+			</a>
+		</div>
 
 		{
 			posts.map((post) => (

src/pages/rss.xml.js

@@ -0,0 +1,30 @@
+import rss from "@astrojs/rss";
+
+export async function GET(context) {
+	// Get all blog posts
+	const posts = await import.meta.glob("./blog/*.{md,mdx}", { eager: true });
+
+	// Convert to array and sort by date (newest first)
+	const sortedPosts = Object.values(posts)
+		.filter((post) => post.frontmatter) // Ensure frontmatter exists
+		.sort((a, b) => {
+			const dateA = new Date(a.frontmatter.date);
+			const dateB = new Date(b.frontmatter.date);
+			return dateB - dateA; // Newest first
+		})
+		.map((post) => ({
+			title: post.frontmatter.title,
+			description: post.frontmatter.description,
+			author: post.frontmatter.author,
+			pubDate: new Date(post.frontmatter.date),
+			link: post.url,
+		}));
+
+	return rss({
+		title: "quic.video | Blog",
+		description: "Latest posts about Media over QUIC and real-time media streaming",
+		site: context.site,
+		items: sortedPosts,
+		customData: "<language>en-us</language>",
+	});
+}