[Docs Site] Add AvailableChangelogFeeds component

Author: KianNH

src/components/AvailableChangelogFeeds.astro

@@ -0,0 +1,41 @@
+---
+import AnchorHeading from "./AnchorHeading.astro";
+import RSSButton from "./RSSButton.astro";
+
+import { products, productsByGroup } from "~/util/products";
+import Details from "./Details.astro";
+---
+
+<AnchorHeading depth={2} title="Feeds" />
+
+<AnchorHeading depth={3} title="Global feed" />
+<p>
+	This feed contains entries for all Cloudflare products: <RSSButton />
+
+	<AnchorHeading depth={3} title="Area-specific feeds" />
+	{
+		productsByGroup.map(([group, products]) => (
+			<>
+				<AnchorHeading depth={4} title={group} />
+				<p>
+					This feed contains entries for all {group} products:{" "}
+					<RSSButton changelog={group} />
+				</p>
+				<Details header="Included products">
+					<ul>
+						{products.map((product) => (
+							<li>
+								<p>
+									<a href={product.data.product.url}>
+										{product.data.product.title}
+									</a>
+								</p>
+								<RSSButton changelog={product.id} />
+							</li>
+						))}
+					</ul>
+				</Details>
+			</>
+		))
+	}
+</p>

src/components/RSSButton.astro

@@ -0,0 +1,22 @@
+---
+import { z } from "astro:schema";
+import { Icon } from "@astrojs/starlight/components";
+
+const props = z.object({
+	changelog: z
+		.string()
+		.transform((val) => val.toLowerCase().replaceAll(" ", "-"))
+		.default("index"),
+});
+
+const { changelog } = props.parse(Astro.props);
+---
+
+<a
+	href={`/changelog/rss/${changelog}.xml`}
+	class="inline-flex items-center justify-center gap-1 rounded font-semibold no-underline"
+	target="_blank"
+>
+	Subscribe to RSS
+	<Icon name="rss" size="1.25rem" />
+</a>

src/content/docs/fundamentals/changelog/available-rss-feeds.mdx

@@ -0,0 +1,43 @@
+---
+title: Available RSS Feeds
+description: Read about the various RSS feeds available for Cloudflare's changelogs.
+---
+
+import AvailableChangelogFeeds from '~/components/AvailableChangelogFeeds.astro';
+
+## Consuming RSS Feeds
+
+Our changelogs are published to various RSS feeds with HTML in the `<description>` tag.
+
+In feeds with multiple products, such as the global or product-area feeds, the products associated with a given entry are in the `<category>` tag.
+
+A single product will also appear in the custom `<product>` tag for legacy reasons, but we recommend you use the `<category>`
+
+### Example XML
+
+```xml
+<rss version="2.0">
+	<channel>
+		<title>Cloudflare changelogs</title>
+		<description>Updates to various Cloudflare products</description>
+		<link>https://developers.cloudflare.com/changelog/</link>
+		<item>
+			<title>Agents, Workers, Workflows - Build AI Agents with Example Prompts</title>
+			<link>https://developers.cloudflare.com/changelog/2025-02-14-example-ai-prompts/</link>
+			<guid isPermaLink="true">https://developers.cloudflare.com/changelog/2025-02-14-example-ai-prompts/</guid>
+			<description>
+				<p>
+					We've added an <a href="https://developers.cloudflare.com/workers/get-started/prompting/">example prompt</a> to help you get started with building AI agents and applications on Cloudflare ...
+				</p>
+			</description>
+			<pubDate>Fri, 14 Feb 2025 19:00:00 GMT</pubDate>
+			<product>Agents</product>
+			<category>Agents</category>
+			<category>Workers</category>
+			<category>Workflows</category>
+		</item>
+	</channel>
+</rss>
+```
+
+<AvailableChangelogFeeds />

src/content/docs/fundamentals/changelog.mdx renamed to src/content/docs/fundamentals/changelog/index.mdx

@@ -4,6 +4,7 @@ title: Changelog
 release_notes_file_name:
   - fundamentals
 sidebar:
+  label: Fundamentals
   order: 9
 ---
 

src/util/products.ts

@@ -0,0 +1,10 @@
+import { getCollection } from "astro:content";
+
+export const products = await getCollection("products");
+
+export const productsByGroup = Object.entries(
+	Object.groupBy(
+		products.filter((product) => Boolean(product.data.product.group)),
+		(product) => product.data.product.group,
+	),
+).sort();