[Docs Site] Add WARPReleases component and collection

Author: KianNH

package-lock.json

@@ -72,6 +72,7 @@
 		"playwright": "^1.49.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-astro": "^0.14.1",
+		"pretty-bytes": "6.1.1",
 		"puppeteer": "^23.10.4",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",

package.json

@@ -0,0 +1,46 @@
+---
+import Details from "./Details.astro";
+import { marked } from "marked";
+import { z } from "astro:schema";
+import { format } from "date-fns";
+import prettyBytes from "pretty-bytes";
+import { warpReleasesSchema } from "~/schemas";
+
+type Props = z.infer<typeof props>;
+
+const props = z.object({
+	header: z.string(),
+	open: z.boolean().default(false),
+	platform: z.enum(["Windows", "Linux", "MacOS"]),
+	release: warpReleasesSchema,
+});
+
+const { header, open, platform, release } = props.parse(Astro.props);
+---
+
+<Details header={header} open={open}>
+	<p>
+		<span>
+			<h4>Download</h4>
+		</span>
+		<div class="flex gap-2">
+			<span>
+				<a href={release.packagePath}>{platform} {release.version}</a>
+			</span>
+			<span>
+				<strong>Date: </strong>
+				{format(release.date, "yyyy-MM-dd")}
+			</span>
+			<span>
+				<strong>Size: </strong>
+				{prettyBytes(release.packageSize)}
+			</span>
+		</div>
+	</p>
+	<p>
+		<span>
+			<h4>Release notes</h4>
+		</span>
+		<Fragment set:html={marked.parse(release.releaseNotes)} />
+	</p>
+</Details>

src/components/WARPRelease.astro

@@ -0,0 +1,39 @@
+---
+import WARPRelease from "./WARPRelease.astro";
+import Details from "./Details.astro";
+import { getEntry } from "astro:content";
+
+const sortByDate = (a: any, b: any) => b.date.getTime() - a.date.getTime();
+
+const { data: windowsReleases } = await getEntry("warp-releases", "windows-ga");
+
+windowsReleases.sort(sortByDate);
+
+const latestWindowsRelease = windowsReleases.at(0);
+
+if (!latestWindowsRelease) {
+	throw new Error();
+}
+---
+
+<WARPRelease
+	header="Download latest release"
+	open={true}
+	platform="Windows"
+	release={latestWindowsRelease}
+/>
+
+<Details header=`Previous version history (${windowsReleases.length - 1})`>
+	{
+		windowsReleases
+			.slice(1)
+			.sort(sortByDate)
+			.map((release) => (
+				<WARPRelease
+					header={`Windows ${release.version}`}
+					platform="Windows"
+					release={release}
+				/>
+			))
+	}
+</Details>

src/components/WARPReleases.astro

@@ -54,6 +54,7 @@ export { default as TunnelCalculator } from "./TunnelCalculator.astro";
 export { default as Type } from "./Type.astro";
 export { default as TypeScriptExample } from "./TypeScriptExample.astro";
 export { default as WranglerConfig } from "./WranglerConfig.astro";
+export { default as WARPReleases } from "./WARPReleases.astro";
 export { default as WorkersArchitectureDiagram } from "./WorkersArchitectureDiagram.astro";
 export { default as WorkersIsolateDiagram } from "./WorkersIsolateDiagram.astro";
 export { default as WorkerStarter } from "./WorkerStarter.astro";

src/components/index.ts

@@ -11,6 +11,7 @@ import {
 	glossarySchema,
 	learningPathsSchema,
 	videosSchema,
+	warpReleasesSchema,
 	workersAiSchema,
 } from "~/schemas";
 
@@ -74,4 +75,8 @@ export const collections = {
 		schema: appsSchema,
 		type: "data",
 	}),
+	"warp-releases": defineCollection({
+		schema: warpReleasesSchema.array(),
+		type: "data",
+	}),
 };

src/content/config.ts

@@ -5,12 +5,14 @@ sidebar:
   order: 2
 ---
 
-import { Render } from "~/components";
+import { Render, WARPReleases } from "~/components";
 
 You can download the WARP client from Zero Trust. To do that, go to **Settings** > **Resources** and scroll down to **Download the WARP client**.
 
 Alternatively, download the client from one of the following links after checking requirements:
 
+<WARPReleases />
+
 ## Windows
 
 <Render file="warp/system-requirements/windows" />

src/content/docs/cloudflare-one/connections/connect-devices/warp/download-warp/index.mdx

@@ -0,0 +1,18 @@
+- version: 1.2.3
+  packagePath: https://example.com/
+  date: 2024-12-12
+  packageSize: 123456789
+  releaseNotes: |
+    - Lorem Ipsum
+- version: 1.2.2
+  packagePath: https://example.com/
+  date: 2024-12-11
+  packageSize: 123456789
+  releaseNotes: |
+    - Lorem Ipsum
+- version: 1.2.1
+  packagePath: https://example.com/
+  date: 2024-12-10
+  packageSize: 123456789
+  releaseNotes: |
+    - Lorem Ipsum

src/content/warp-releases/windows-ga.yaml

@@ -9,4 +9,5 @@ export * from "./pages-build-environment";
 export * from "./pages-framework-presets";
 export * from "./partials";
 export * from "./videos";
+export * from "./warp-releases";
 export * from "./workers-ai-models";

src/schemas/index.ts

@@ -0,0 +1,9 @@
+import { z } from "astro:schema";
+
+export const warpReleasesSchema = z.object({
+	version: z.string(),
+	date: z.coerce.date(),
+	releaseNotes: z.string(),
+	packageSize: z.number(),
+	packagePath: z.string(),
+});