[Changelog] Add other RSS feeds button (#21007)

* [Changelog] Add other RSS feeds button

* reformat

* Update link

* remove spaces

* styling update

* test

* eslint

* Fix link :)

---------

Co-authored-by: Kian Newman-Hazel <[email protected]>

Author: kodster28

src/components/RSSButton.astro

@@ -1,17 +1,25 @@
 ---
 import { z } from "astro:schema";
 import { Icon } from "@astrojs/starlight/components";
+import type { StarlightIcon } from "@astrojs/starlight/types";
 
 const props = z
 	.object({
-		changelog: z
-			.string()
-			.transform((val) => val.toLowerCase().replaceAll(" ", "-")),
+		text: z.string().default("Subscribe to RSS"),
+		icon: z.custom<StarlightIcon>().default("rss"),
 	})
-	.or(
-		z.object({
-			href: z.string(),
-		}),
+	.and(
+		z
+			.object({
+				changelog: z
+					.string()
+					.transform((val) => val.toLowerCase().replaceAll(" ", "-")),
+			})
+			.or(
+				z.object({
+					href: z.string(),
+				}),
+			),
 	);
 
 const input = props.parse(Astro.props);
@@ -22,6 +30,6 @@ const input = props.parse(Astro.props);
 	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" />
+	{input.text}
+	<Icon name={input.icon} size="1.25rem" />
 </a>

src/components/changelog/Header.astro

@@ -3,7 +3,8 @@ import { Image } from "astro:assets";
 import { z } from "astro:schema";
 import { getEntry, type CollectionEntry } from "astro:content";
 
-import { StarlightIcon } from "..";
+import RSSButton from "~/components/RSSButton.astro";
+
 import HeroImage from "~/assets/images/changelog/hero.svg";
 
 type Props = z.input<typeof props>;
@@ -34,15 +35,15 @@ const products = await uniqueProducts(notes);
 >
 	<div class="text-center sm:text-left">
 		<h1>Changelog</h1>
+		<p>New updates and improvements at Cloudflare.</p>
 		<p>
-			New updates and improvements at Cloudflare.
-			<a
-				href="/changelog/rss/index.xml"
-				class="dark:!hover:text-[#79B1FF] -mx-2 whitespace-nowrap px-2 text-[#056DFF] no-underline hover:rounded-[4px] hover:bg-[#DCEBFF] hover:!text-[#056DFF] dark:text-[#79B1FF] dark:hover:bg-[#002B66] max-sm:block"
-			>
-				Subscribe to RSS
-				<StarlightIcon name="rss" size="18px" class="!inline align-text-top" />
-			</a>
+			<RSSButton changelog="index" />
+			<br />
+			<RSSButton
+				href="/fundamentals/new-features/available-rss-feeds/"
+				text="View all RSS feeds"
+				icon="right-caret"
+			/>
 		</p>
 		{
 			products.length > 0 && (
@@ -75,4 +76,16 @@ const products = await uniqueProducts(notes);
 		padding-top: 0 !important;
 		overflow-x: hidden;
 	}
+
+	.changelog-rss-links {
+		display: flex;
+		justify-content: space-between;
+		margin-top: 0.25em !important;
+	}
+
+	@media (max-width: 640px) {
+		.changelog-rss-links {
+			flex-direction: column;
+		}
+	}
 </style>