Add RSS feed

Add a link tag to the page metadata to make the RSS feed discoverable.
Add @astrojs/rss package.

astro.config.mjs

@@ -2,11 +2,8 @@ import { defineConfig } from "astro/config";
 import icon from "astro-icon";
 
 export default defineConfig({
-	site: "https://www.sfcivictech.us",
-//	site: "https://www.sfcivictech.org",
+	site: "https://www.sfcivictech.org",
 	base: "",
-	//  site: "https://sfbrigade.github.io",
-	//  base: "/astro-static-site/",
 	trailingSlash: "ignore",
 	compressHTML: false,
 	integrations: [

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.8.3",
+    "@astrojs/rss": "^4.0.8",
     "@iconify-json/fa": "^1.2.0",
     "@picocss/pico": "^2.0.6",
     "@stylistic/eslint-plugin": "^2.8.0",

src/content/config.ts

@@ -16,6 +16,8 @@ const blog = defineCollection({
 		description: z.string(),
 		date: z.string()
 			.transform((value, ctx) => {
+				// we treat the date as a string instead of using the built-in date parsing
+				// so we can force it to be in PST, rather than the default UTC
 				const date = parseYMD(value);
 
 				if (!date.isValid()) {
@@ -24,6 +26,11 @@ const blog = defineCollection({
 						message: "Invalid date",
 					});
 
+					// annoyingly, nothing about the file being validated here is available
+					// to this function.  if we could get the filename, we could pull a
+					// missing date out of the name.  given that we can't, we have to return
+					// undefined here and make any code that iterates over the collection
+					// call dateFromSlug(slug) for undefined dates, like rss.xml.js.
 					return z.NEVER;
 				}
 

src/layouts/Page.astro

@@ -34,6 +34,12 @@ const baseURL = import.meta.env.BASE_URL.replace(/([^/])$/, "$1/");
 		<link rel="mask-icon" href={base("safari-pinned-tab.svg")} color="#5bbad5" />
 		<meta name="msapplication-TileColor" content="#da532c" />
 		<meta name="theme-color" content="#ffffff" />
+		<link
+			rel="alternate"
+			type="application/rss+xml"
+			title="SF Civic Tech"
+			href={new URL("rss.xml", Astro.site)}
+		/>
 
 		<Metadata meta={meta} />
 

src/pages/rss.xml.js

@@ -0,0 +1,35 @@
+import rss from "@astrojs/rss";
+import { getCollection } from "astro:content";
+import { dateFromSlug, formatRSSDate } from "@/utils";
+
+export async function GET(context)
+{
+	const blog = await getCollection("blog");
+	const items = blog.map((post) => {
+		const {
+			slug,
+			data: {
+				title,
+				descriptionHTML,
+				// pubDate is required, but some posts don't have a date specified, so
+				// create one from the filename
+				date = dateFromSlug(slug),
+			},
+		} = post;
+
+		return {
+			title,
+			description: descriptionHTML,
+			pubDate: formatRSSDate(date),
+			link: `/blog/${slug}`,
+		};
+	});
+
+	return rss({
+		title: "SF Civic Tech Blog",
+		description: "News from SF Civic Tech",
+		site: context.site,
+		trailingSlash: false,
+		items,
+	});
+}

src/utils/dayjs.ts

@@ -16,3 +16,4 @@ export default dayjs;
 export const parseYMD = (date: string) => dayjs(date, "YYYY-MM-DD", true);
 export const parseYMDToDate = (date: string) => parseYMD(date).toDate();
 export const formatShortMDY = (date: Date) => date ? dayjs(date).format("MMM D, YYYY") : "";
+export const formatRSSDate = (date: Date) => date ? dayjs(date).format("ddd, D MMM YYYY HH:mm:ss ZZ") : "";