[Docs Site] changelog-next

.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.json

@@ -71,6 +71,7 @@
 		"playwright": "^1.49.1",
 		"prettier": "^3.4.2",
 		"prettier-plugin-astro": "^0.14.1",
+		"prettier-plugin-tailwindcss": "^0.6.9",
 		"puppeteer": "^23.11.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",

src/components/changelog-next/Header.astro

@@ -0,0 +1,82 @@
+---
+import { Image } from "astro:assets";
+import { z } from "astro:schema";
+import { getEntry, type CollectionEntry } from "astro:content";
+
+import { StarlightIcon } from "..";
+import HeroImage from "~/assets/images/changelog-next/hero.svg";
+
+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<"changelogs-next">>,
+) {
+	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="/changelog-next/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="changelogs-next-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/components/changelog-next/ProductPills.astro

@@ -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/overrides/Footer.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/overrides/PageTitle.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/Sidebar.astro

@@ -191,11 +191,11 @@ const lookupProductTitle = async (slug: string) => {
 
 <a
 	href={"/" + currentSection + "/"}
-	class="items-center flex hover:opacity-80 decoration-[color:var(--orange-accent-200)]"
+	class="flex items-center decoration-[color:var(--orange-accent-200)] hover:opacity-80"
 >
 	<AstroIcon
 		name={currentSection}
-		class="text-[color:var(--orange-accent-200)] text-4xl mr-2"
+		class="mr-2 text-4xl text-[color:var(--orange-accent-200)]"
 	/>
 	<span class="text-black dark:text-white">
 		<strong>

src/components/overrides/SocialIcons.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>

src/content/changelogs-next/stuff-and-things.mdx

@@ -0,0 +1,22 @@
+---
+title: Stuff and things
+description: Donec faucibus nunc vel fermentum porttitor. Etiam ac lorem dui. Duis facilisis facilisis sem, vel malesuada ipsum feugiat in.
+products: 
+  - workers
+  - kv
+date: 2024-11-27T11:00:00Z
+---
+
+![Turnstile Overview](~/assets/images/turnstile/turnstile-overview.png)
+
+##### Foo
+
+Aenean lectus sapien, sollicitudin eget condimentum quis, vehicula sed risus. Maecenas consectetur nisi nec nisi sagittis lacinia.
+
+##### Bar
+
+:::note
+Phasellus non sagittis urna.
+:::
+
+Suspendisse vitae congue massa, sed tempus felis. Cras erat nisl, vulputate scelerisque urna pretium, eleifend euismod arcu.

src/content/config.ts

@@ -12,6 +12,7 @@ import {
 	learningPathsSchema,
 	videosSchema,
 	workersAiSchema,
+	changelogsNextSchema,
 } from "~/schemas";
 
 const partialSchema = z.object({
@@ -74,4 +75,7 @@ export const collections = {
 		schema: appsSchema,
 		type: "data",
 	}),
+	"changelogs-next": defineCollection({
+		schema: changelogsNextSchema,
+	}),
 };