[Docs Site] Release notes PoC

Author: KianNH

.prettierrc.mjs

@@ -1,7 +1,7 @@
 // @ts-check
 /** @type {import("prettier").Config} */
 export default {
-	plugins: ["prettier-plugin-astro"],
+	plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
 	useTabs: true,
 	overrides: [
 		{

package-lock.json

@@ -72,6 +72,7 @@
 		"playwright": "^1.49.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-astro": "^0.14.1",
+		"prettier-plugin-tailwindcss": "^0.6.9",
 		"puppeteer": "^23.10.1",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",

package.json

@@ -0,0 +1,83 @@
+---
+import { Image } from "astro:assets";
+import { z } from "astro:schema";
+import { getEntry, reference, type CollectionEntry } from "astro:content";
+
+import { StarlightIcon } from "..";
+import HeroImage from "~/assets/images/release-notes/hero.svg";
+import { releaseNotesSchema } from "~/schemas";
+
+type Props = z.infer<typeof props>;
+
+const props = z.object({
+	entries: z.array(z.any()).optional(),
+});
+
+const { entries } = props.parse(Astro.props);
+
+async function uniqueProducts(
+	entries?: Array<CollectionEntry<"release-notes">>,
+) {
+	const products = entries?.flatMap((entry) => entry.data.products ?? []);
+
+	const unique = [...new Set(products)];
+
+	return Promise.all(
+		unique.map(async (product) => {
+			return getEntry(product);
+		}),
+	);
+}
+
+const products = await uniqueProducts(entries);
+---
+
+<div
+	class="mb-16 flex w-full justify-center border-b-2 border-b-[#EAEAEA] bg-gradient-to-r from-[#FFE9CB99] to-[#FFFFFF99] dark:border-b-[#2C2C2C] dark:from-[#FBAD411F] dark:to-[#2C2C2C00] sm:h-[300px]"
+>
+	<div class="flex justify-between self-center py-4 sm:py-0 md:w-[64rem]">
+		<div class="w-full self-center max-sm:text-center sm:items-start">
+			<div class="!mt-0 justify-items-center sm:hidden">
+				<Image src={HeroImage} alt="hero image" height="240" />
+			</div>
+			<h1 class="sm:!mt-0">Changelog</h1>
+			<p>
+				New updates and improvements at Cloudflare.
+				<span>
+					<a
+						href="/release-notes/rss.xml"
+						class="px-2 text-[#056DFF] no-underline hover:rounded-[4px] hover:bg-[#DCEBFF] hover:!text-[#056DFF] dark:text-[#79B1FF] dark:hover:bg-[#002B66] dark:hover:!text-[#79B1FF]"
+					>
+						Subscribe to RSS
+						<StarlightIcon
+							name="rss"
+							size="18px"
+							class="!inline align-text-top"
+						/>
+					</a>
+				</span>
+			</p>
+			{
+				entries && (
+					<div>
+						<select id="release-notes-filter" class="mt-2 h-8 w-52">
+							<option value="all">All products</option>
+							{products
+								.sort((a, b) => a.id.localeCompare(b.id))
+								.map(async (product) => {
+									return (
+										<option value={product.id}>
+											{product.data.product.title}
+										</option>
+									);
+								})}
+						</select>
+					</div>
+				)
+			}
+		</div>
+		<div class="!mt-0 hidden sm:block">
+			<Image src={HeroImage} alt="hero image" height="240" />
+		</div>
+	</div>
+</div>

src/assets/images/release-notes/hero.svg

@@ -0,0 +1,27 @@
+---
+import { getEntries } from "astro:content";
+import { reference } from "astro:content";
+import { z } from "astro:schema";
+
+type Props = z.infer<typeof props>;
+
+const props = z.object({
+	products: z.array(reference("products")),
+});
+
+const { products } = Astro.props;
+
+const data = await getEntries(products);
+---
+
+<div class="flex flex-row gap-2">
+	{
+		data.map((product) => (
+			<a href={product.data.product.url} class="no-underline">
+				<span class="ml-1 rounded-full bg-orange-200 px-2 py-0.5 text-xs text-orange-900">
+					{product.data.product.title}
+				</span>
+			</a>
+		))
+	}
+</div>

src/components/changelogs/Header.astro

@@ -92,7 +92,7 @@ if (
 							<ul class="list-none pl-0">
 								{links.map((link) => (
 									<li>
-										<a href={link.href} class="no-underline text-white">
+										<a href={link.href} class="text-white no-underline">
 											{link.text}
 										</a>
 									</li>
@@ -103,15 +103,15 @@ if (
 				</div>
 			</div>
 			<div>
-				<ul class="flex gap-x-4 text-xs list-outside pl-0 justify-center text-gray-600 dark:!text-gray-400">
+				<ul class="flex list-outside justify-center gap-x-4 pl-0 text-xs text-gray-600 dark:!text-gray-400">
 					<li class="list-none text-gray-600 dark:text-gray-400">
 						2024 Cloudflare, Inc.
 					</li>
 					{homepageLegalLinks.map(([text, href]) => (
 						<li>
 							<a
 								href={href}
-								class="no-underline text-gray-600 dark:!text-gray-400"
+								class="text-gray-600 no-underline dark:!text-gray-400"
 							>
 								{text}
 							</a>
@@ -126,17 +126,17 @@ if (
 	) : (
 		<>
 			<Default {...Astro.props} />
-			<div class="items-center flex flex-wrap">
+			<div id="footer-links" class="flex flex-wrap items-center">
 				{Object.entries(links).map(([text, href]) => (
 					<a
 						href={href}
-						class="mx-2 my-2 text-xs text-black dark:text-white decoration-accent-600 dark:decoration-accent-200"
+						class="mx-2 my-2 text-xs text-black decoration-accent-600 dark:text-white dark:decoration-accent-200"
 					>
 						<span>{text}</span>
 					</a>
 				))}
 				{isProduction && (
-					<div class="mx-2 my-2 text-xs text-black dark:text-white underline decoration-accent-600 dark:decoration-accent-200">
+					<div class="mx-2 my-2 text-xs text-black underline decoration-accent-600 dark:text-white dark:decoration-accent-200">
 						<OneTrust />
 					</div>
 				)}

src/components/changelogs/ProductPills.astro

@@ -21,8 +21,6 @@ const summary = Astro.props.entry.data.summary;
 
 const slug = Astro.props.entry.slug;
 
-const showBreadcrumbs = !["products"].includes(slug);
-
 const breadcrumbProps: Record<string, any> = {
 	crumbs: [
 		{
@@ -73,10 +71,11 @@ for (let i = 0; i < segments.length; i++) {
 // Currently the officially sanctioned way to alter behaviour on specific routes
 // https://starlight.astro.build/guides/overriding-components/#only-override-on-specific-pages
 const hideTitle = Astro.props.hideTitle;
+const hideBreadcrumbs = Astro.props.hideBreadcrumbs;
 ---
 
 {
-	showBreadcrumbs && (
+	!hideBreadcrumbs && (
 		<Breadcrumbs {...breadcrumbProps}>
 			<svg
 				slot="separator"
@@ -119,3 +118,13 @@ const hideTitle = Astro.props.hideTitle;
 		--color-link-breadcrumbs: var(--sl-color-text-accent);
 	}
 </style>
+
+{ hideTitle && hideBreadcrumbs && 
+	<style>
+		main {
+			.content-panel:first-of-type {
+				display: none;
+			}
+		}
+	</style>
+}

src/components/overrides/Footer.astro

@@ -157,19 +157,21 @@ async function handleLink(link: Link): Promise<Link> {
 	return link;
 }
 
-filtered.entries = await Promise.all(
-	filtered.entries.map((entry) => {
-		if (entry.type === "group") {
-			return handleGroup(entry);
-		} else {
-			return handleLink(entry);
-		}
-	}),
-);
+if (currentSection !== "release-notes") {
+	filtered.entries = await Promise.all(
+		filtered.entries.map((entry) => {
+			if (entry.type === "group") {
+				return handleGroup(entry);
+			} else {
+				return handleLink(entry);
+			}
+		}),
+	);
 
-filtered.entries = filtered.entries.sort(sortGroup);
+	filtered.entries = filtered.entries.sort(sortGroup);
 
-filtered.entries[0].label = "Overview";
+	filtered.entries[0].label = "Overview";
+}
 
 const lookupProductTitle = async (slug: string) => {
 	const segments = slug.split("/");
@@ -183,6 +185,10 @@ const lookupProductTitle = async (slug: string) => {
 		return `${entryData?.data?.title} (Learning Paths)`;
 	}
 
+	if (product === "release-notes") {
+		return "Release notes";
+	}
+
 	const entryData = await getEntry("products", product);
 
 	return entryData?.data?.product?.title ?? "Unknown";

src/components/overrides/PageTitle.astro

@@ -27,6 +27,8 @@ const links = Object.entries({
 
 <style>
 	:root {
-		--sl-icon-color: var(--sl-color-text);
+		.social-icons {
+			--sl-icon-color: var(--sl-color-text);
+		}
 	}
 </style>