Merge branch 'production' of https://github.com/cloudflare/cloudflare-docs into production

Author: daisyfaithauma

astro.config.ts

@@ -8,14 +8,15 @@ import starlightLinksValidator from "starlight-links-validator";
 import icon from "astro-icon";
 import sitemap from "@astrojs/sitemap";
 import react from "@astrojs/react";
+
 import { readdir } from "fs/promises";
+import { fileURLToPath } from "url";
 
 import rehypeTitleFigure from "rehype-title-figure";
 import rehypeMermaid from "./src/plugins/rehype/mermaid.ts";
 import rehypeAutolinkHeadings from "./src/plugins/rehype/autolink-headings.ts";
 import rehypeExternalLinks from "./src/plugins/rehype/external-links.ts";
 import rehypeHeadingSlugs from "./src/plugins/rehype/heading-slugs.ts";
-import { fileURLToPath } from "url";
 
 async function autogenSections() {
 	const sections = (

src/components/ModelCatalog.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import ModelInfo from "./models/ModelInfo";
 import ModelBadges from "./models/ModelBadges";
 import { authorData } from "./models/data";
@@ -19,6 +19,22 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 		capabilities: [],
 	});
 
+	useEffect(() => {
+		const params = new URLSearchParams(window.location.search);
+
+		const search = params.get("search") ?? "";
+		const authors = params.getAll("authors");
+		const tasks = params.getAll("tasks");
+		const capabilities = params.getAll("capabilities");
+
+		setFilters({
+			search,
+			authors,
+			tasks,
+			capabilities,
+		});
+	}, []);
+
 	const mapped = models.map((model) => ({
 		model: {
 			...model,
@@ -43,21 +59,21 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 	const authors = [...new Set(models.map((model) => model.name.split("/")[1]))];
 	const capabilities = [
 		...new Set(
-			models
-				.map((model) =>
-					model.properties
-						.flatMap(({ property_id, value }) => {
-							if (property_id === "lora" && value === "true") {
-								return "LoRA";
-							}
+			models.flatMap((model) =>
+				model.properties
+					.flatMap(({ property_id, value }) => {
+						if (property_id === "lora" && value === "true") {
+							return "LoRA";
+						}
+
+						if (property_id === "function_calling" && value === "true") {
+							return "Function calling";
+						}
 
-							if (property_id === "function_calling" && value === "true") {
-								return "Function calling";
-							}
-						})
-						.filter((p) => Boolean(p)),
-				)
-				.flat(),
+						return [];
+					})
+					.filter((p) => Boolean(p)),
+			),
 		),
 	];
 
@@ -102,7 +118,7 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 
 				<div className="!mb-8 hidden md:block">
 					<span className="text-sm font-bold uppercase text-gray-600 dark:text-gray-200">
-						▼ Model Types
+						▼ Tasks
 					</span>
 
 					{tasks.map((task) => (
@@ -111,7 +127,8 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 								type="checkbox"
 								className="mr-2"
 								value={task}
-								onClick={(e) => {
+								checked={filters.tasks.includes(task)}
+								onChange={(e) => {
 									const target = e.target as HTMLInputElement;
 
 									if (target.checked) {
@@ -142,8 +159,9 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 							<input
 								type="checkbox"
 								value={capability}
+								checked={filters.capabilities.includes(capability)}
 								className="mr-2"
-								onClick={(e) => {
+								onChange={(e) => {
 									const target = e.target as HTMLInputElement;
 
 									if (target.checked) {
@@ -177,7 +195,8 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 								type="checkbox"
 								className="mr-2"
 								value={author}
-								onClick={(e) => {
+								checked={filters.authors.includes(author)}
+								onChange={(e) => {
 									const target = e.target as HTMLInputElement;
 
 									if (target.checked) {

src/components/Render.astro

@@ -13,29 +13,49 @@ const props = z.object({
 let { file, product, params } = props.parse(Astro.props);
 
 if (!product) {
-	product = Astro.params.slug?.split("/")[0];
-}
+	const fromSlug = Astro.params.slug?.split("/")[0];
 
-if (!product) {
-	throw new Error(
-		`[Render] Unable to infer which folder ${file} is in, please provide a "product" input with your "file" input.`,
-	);
+	if (!fromSlug) {
+		throw new Error(
+			`[Render] Unable to infer which folder ${file} is in, please provide a "product" input with your "file" input.`,
+		);
+	}
+
+	product = fromSlug;
 }
 
-const partial = await getEntry("partials", `${product}/${file}`);
+const id = `${product}/${file}`;
+const partial = await getEntry("partials", id);
 
 if (!partial) {
 	throw new Error(
-		`[Render] Couldn't find partial: ${file}. Included on ${Astro.params.slug}`,
+		`[Render] Couldn't find "${id}" included on "${Astro.url.pathname}"`,
 	);
 }
 
+// We currently only enforce parameters if `params` is set in the frontmatter,
+// until we can migrate existing `inputParameters` frontmatter to `params`.
 if (partial.data.params) {
-	const expected = partial.data.params;
-	if (!params)
+	const expected = partial.data.params.sort();
+	const optional = expected.filter((p) => p.endsWith("?"));
+	const received = Object.keys(params ?? {}).sort();
+
+	const maximum = expected.length;
+	const minimum = maximum - optional.length;
+
+	if (
+		received.length < minimum ||
+		received.length > maximum ||
+		expected.some((p: string) => {
+			if (p.endsWith("?")) return false;
+
+			return !received.includes(p);
+		})
+	) {
 		throw new Error(
-			`${file} included on ${Astro.params.slug} expected parameters: ${expected}, got none`,
+			`[Render] Expected parameters ${JSON.stringify(expected)} but received parameters ${JSON.stringify(received)} for "${file}" included on "${Astro.url.pathname}"`,
 		);
+	}
 }
 
 const { Content } = await render(partial);

src/components/models/ModelBadges.tsx

@@ -33,7 +33,7 @@ const ModelBadges = ({ model }: { model: WorkersAIModelsSchema }) => {
 		<ul className="m-0 flex list-none items-center gap-2 p-0 text-xs">
 			{badges.map((badge) => (
 				<li key={badge.text}>
-					<span className="sl-badge gray">{badge.text}</span>
+					<span className="sl-badge default">{badge.text}</span>
 				</li>
 			))}
 		</ul>

src/content.config.ts

@@ -1,4 +1,4 @@
-import { z, defineCollection } from "astro:content";
+import { defineCollection } from "astro:content";
 
 import { docsLoader, i18nLoader } from "@astrojs/starlight/loaders";
 import { docsSchema, i18nSchema } from "@astrojs/starlight/schema";
@@ -20,6 +20,7 @@ import {
 	warpReleasesSchema,
 	releaseNotesSchema,
 	fieldsSchema,
+	partialsSchema,
 } from "~/schemas";
 
 function contentLoader(name: string) {
@@ -36,10 +37,6 @@ function dataLoader(name: string) {
 	});
 }
 
-const partialSchema = z.object({
-	params: z.string().array().optional(),
-});
-
 export const collections = {
 	docs: defineCollection({
 		loader: docsLoader(),
@@ -61,7 +58,7 @@ export const collections = {
 	}),
 	partials: defineCollection({
 		loader: contentLoader("partials"),
-		schema: partialSchema,
+		schema: partialsSchema,
 	}),
 	glossary: defineCollection({
 		loader: dataLoader("glossary"),

src/content/docs/cloudflare-one/applications/casb/casb-integrations/atlassian-confluence.mdx

@@ -9,8 +9,8 @@ import { Render } from "~/components";
 <Render
   file="casb/integration-description"
   params={{
-    one: "Atlassian Confluence",
-    two: "Atlassian Confluence Cloud account",
+    integrationName: "Atlassian Confluence",
+    integrationAccountType: "Atlassian Confluence Cloud account",
   }}
 />
 
@@ -43,7 +43,7 @@ These permissions follow the principle of least privilege to ensure that only th
 
 <Render
   file="casb/security-findings"
-  params={{ one: "Atlassian Confluence", two: "atlassian-confluence" }}
+  params={{ integrationName: "Atlassian Confluence", slugRelativePath: "atlassian-confluence" }}
 />
 
 ### Access security

src/content/docs/cloudflare-one/applications/casb/casb-integrations/atlassian-jira.mdx

@@ -8,7 +8,7 @@ import { Render } from "~/components";
 
 <Render
   file="casb/integration-description"
-  params={{ one: "Atlassian Jira", two: "Atlassian Jira Cloud account" }}
+  params={{ integrationName: "Atlassian Jira", integrationAccountType: "Atlassian Jira Cloud account" }}
 />
 
 :::note
@@ -35,7 +35,7 @@ These permissions follow the principle of least privilege to ensure that only th
 
 <Render
   file="casb/security-findings"
-  params={{ one: "Jira Cloud", two: "atlassian-jira" }}
+  params={{ integrationName: "Jira Cloud", slugRelativePath: "atlassian-jira" }}
 />
 
 ### Access security

src/content/docs/cloudflare-one/applications/casb/casb-integrations/aws-s3.mdx

@@ -8,7 +8,7 @@ import { Render } from "~/components";
 
 <Render
 	file="casb/integration-description"
-	params={{ one: "Amazon Web Services (AWS) S3", two: "AWS account" }}
+	params={{ integrationName: "Amazon Web Services (AWS) S3", integrationAccountType: "AWS account" }}
 />
 
 ## Integration prerequisites
@@ -65,7 +65,7 @@ For more information, refer to [Content findings](/cloudflare-one/applications/c
 
 <Render
 	file="casb/security-findings"
-	params={{ one: "AWS S3", two: "aws-s3" }}
+	params={{ integrationName: "AWS S3", slugRelativePath: "aws-s3" }}
 />
 
 ### S3 Bucket security

src/content/docs/cloudflare-one/applications/casb/casb-integrations/bitbucket-cloud.mdx

@@ -8,7 +8,7 @@ import { Render } from "~/components";
 
 <Render
   file="casb/integration-description"
-  params={{ one: "Bitbucket Cloud", two: "Bitbucket Cloud Cloud account" }}
+  params={{ integrationName: "Bitbucket Cloud", integrationAccountType: "Bitbucket Cloud Cloud account" }}
 />
 
 :::note
@@ -46,7 +46,7 @@ These permissions follow the principle of least privilege to ensure that only th
 
 <Render
   file="casb/security-findings"
-  params={{ one: "Bitbucket Cloud", two: "bitbucket-cloud" }}
+  params={{ integrationName: "Bitbucket Cloud", slugRelativePath: "bitbucket-cloud" }}
 />
 
 ### Repository security

src/content/docs/cloudflare-one/applications/casb/casb-integrations/box.mdx

@@ -8,7 +8,7 @@ import { Render } from "~/components";
 
 <Render
   file="casb/integration-description"
-  params={{ one: "Box", two: "Box account" }}
+  params={{ integrationName: "Box", integrationAccountType: "Box account" }}
 />
 
 ## Integration prerequisites
@@ -27,7 +27,7 @@ These permissions follow the principle of least privilege to ensure that only th
 
 ## Security findings
 
-<Render file="casb/security-findings" params={{ one: "Box", two: "box" }} />
+<Render file="casb/security-findings" params={{ integrationName: "Box", slugRelativePath: "box" }} />
 
 ### File sharing