[Docs Site] changelog-next (#18894)

* [Docs Site] changelog-next * fix type errors, only add padding to direct steps list items * changelog: workflows beta * Update workflows-beta.mdx * Anni/add build changelog next (#18920) * adding a changelog * added changelog and assets * Update src/content/changelogs-next/12-22-2024-builds.mdx Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> * add link for monorepos * mb and line-spacing fix * Update src/content/changelogs-next/12-22-2024-builds.mdx Co-authored-by: Brendan Irvine-Broque <[email protected]> * Update src/content/changelogs-next/12-22-2024-builds.mdx Co-authored-by: Brendan Irvine-Broque <[email protected]> * Update src/content/changelogs-next/12-22-2024-builds.mdx Co-authored-by: Brendan Irvine-Broque <[email protected]> * Update src/content/changelogs-next/12-22-2024-builds.mdx Co-authored-by: Brendan Irvine-Broque <[email protected]> * small fixes --------- Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> Co-authored-by: Brendan Irvine-Broque <[email protected]> * added overflow-auto (#18976) * Fixed issue that produced duplicate products in the changelog-next header (#18972) * Ranamed workflows post to fit date-title format --------- Co-authored-by: Matt Silverlock <[email protected]> Co-authored-by: Anni Wang <[email protected]> Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> Co-authored-by: Brendan Irvine-Broque <[email protected]> Co-authored-by: Phillip Jones <[email protected]>
cloudflare · Jan 2, 2025 · 9e8ebdc · 9e8ebdc
1 parent a845405
commit 9e8ebdc
Show file tree

Hide file tree

Showing 22 changed files with 676 additions and 13 deletions.
diff --git a/.prettierrc.mjs b/.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: [
 		{

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/assets/images/changelog-next/hero.svg b/src/assets/images/changelog-next/hero.svg
diff --git a/src/assets/images/workers/platform/ci-cd/workers-build-caching.png b/src/assets/images/workers/platform/ci-cd/workers-build-caching.png
diff --git a/src/assets/images/workers/platform/ci-cd/workers-build-watch-paths.png b/src/assets/images/workers/platform/ci-cd/workers-build-watch-paths.png
diff --git a/src/components/changelog-next/Header.astro b/src/components/changelog-next/Header.astro
@@ -0,0 +1,84 @@
+---
+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 Map(products?.map((product) => [product.id, product])).values(),
+	];
+
+	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>
diff --git a/src/components/changelog-next/ProductPills.astro b/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>
diff --git a/src/components/overrides/Footer.astro b/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>
 				)}

diff --git a/src/components/overrides/PageTitle.astro b/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>
+}
diff --git a/src/components/overrides/Sidebar.astro b/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>

diff --git a/src/components/overrides/SocialIcons.astro b/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>
diff --git a/src/content/changelogs-next/2024-10-24-workflows-beta.mdx b/src/content/changelogs-next/2024-10-24-workflows-beta.mdx
@@ -0,0 +1,28 @@
+---
+title: Workflows is now in open beta
+description: Build long-running, reliable and durable applications on Cloudflare Workers
+products: 
+  - workers
+  - workflows
+date: 2024-10-24T14:00:00Z
+---
+
+import { Render, PackageManagers } from "~/components"
+
+Workflows is now in open beta, and available to any developer a free or paid Workers plan.
+
+Workflows allow you to build multi-step applications that can automatically retry, persist state and run for minutes, hours, days, or weeks. Workflows introduces a programming model that makes it easier to build reliable, long-running tasks, observe as they progress, and programatically trigger instances based on events across your services. 
+
+### Get started
+
+You can get started with Workflows by [following our get started guide](/workflows/get-started/guide/) and/or using `npm create cloudflare` to pull down the starter project:
+
+```sh
+npm create cloudflare@latest workflows-starter -- --template "cloudflare/workflows-starter"
+```
+
+You can open the `src/index.ts` file, extend it, and use `wrangler deploy` to deploy your first Workflow. From there, you can:
+
+* Learn the [Workflows API](/workflows/build/workers-api/)
+* [Trigger Workflows](/workflows/build/trigger-workflows/) via your Workers apps.
+* Understand the [Rules of Workflows](/workflows/build/rules-of-workflows/) and how to adopt best practices
diff --git a/src/content/changelogs-next/2024-12-29-faster-builds.mdx b/src/content/changelogs-next/2024-12-29-faster-builds.mdx
@@ -0,0 +1,18 @@
+---
+title: Faster Workers Builds with Build Caching and Watch Paths
+description: Speed up your builds with build caching and build watch paths in Workers Builds (beta).
+products:
+  - workers
+date: 2024-12-29T11:00:00Z
+---
+
+![Build caching settings](~/assets/images/workers/platform/ci-cd/workers-build-caching.png)
+![Build watch path settings](~/assets/images/workers/platform/ci-cd/workers-build-watch-paths.png)
+
+[**Workers Builds**](/workers/ci-cd/builds/), the integrated CI/CD system for Workers (currently in beta), now lets you cache artifacts across builds, speeding up build jobs by eliminating repeated work, such as downloading dependencies at the start of each build.
+
+- **[Build Caching](/workers/ci-cd/builds/build-caching/)**: Cache dependencies and build outputs between builds with a shared project-wide cache, ensuring faster builds for the entire team.
+
+- **[Build Watch Paths](/workers/ci-cd/builds/build-watch-paths/)**: Define paths to include or exclude from the build process, ideal for [monorepos](/workers/ci-cd/builds/advanced-setups/#monorepos) to target only the files that need to be rebuilt per Workers project.
+
+To get started, select your Worker on the [Cloudflare dashboard](https://dash.cloudflare.com) then go to **Settings** > **Builds**, and connect a GitHub or GitLab repository. Once connected, you'll see options to configure Build Caching and Build Watch Paths.
diff --git a/src/content/config.ts b/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,
+	}),
 };
diff --git a/src/icons/release-notes.svg b/src/icons/release-notes.svg