Automatic sidebar Beta badge addition based on wid in frontmatter (#28024)

* automatic sidebar badge based on content collection

*  more wid entries to product/feature pages

* Add wid and remove message describing this PR from cloudflare-trace page

* make parentheses the default for rendering of availability for the ProductAvailabilityText component

Author: cdrubin

src/components/ProductAvailabilityText.astro

@@ -7,7 +7,7 @@ interface Props {
 	parentheses?: string;
 }
 
-const { product, parentheses = "false" } = Astro.props;
+const { product, parentheses = "true" } = Astro.props;
 
 let entry = await getEntry("product-availability", product);
 let output = "";
@@ -25,8 +25,11 @@ else if (entry.data.availability.toUpperCase() === "GA") {
 }
 // show an availability value
 else {
-	if (parentheses === "true") output = `(${entry.data.availability})`;
-	else output = entry.data.availability;
+	if (parentheses === "false") {
+		output = entry.data.availability;
+	} else {
+		output = `(${entry.data.availability})`;
+	}
 }
 ---
 

src/content/docs/dmarc-management/index.mdx

@@ -2,10 +2,6 @@
 title: Cloudflare DMARC Management
 pcx_content_type: overview
 wid: dmarc-management
-sidebar:
-  order: 1
-  badge:
-    text: Beta
 head:
   - tag: title
     content: Overview

src/content/docs/pipelines/index.mdx

@@ -1,12 +1,7 @@
 ---
 title: Cloudflare Pipelines
-
 pcx_content_type: overview
 wid: cloudflare-pipelines
-sidebar:
-  order: 1
-  badge:
-    text: Beta
 head:
   - tag: title
     content: Pipelines

src/content/docs/privacy-gateway/index.mdx

@@ -1,20 +1,18 @@
 ---
 title: Cloudflare Privacy Gateway
 pcx_content_type: overview
-sidebar:
-  order: 1
-  badge:
-    text: Beta
+wid: privacy-gateway
 head:
   - tag: title
     content: Overview
 ---
 
-import { Description, Feature, Plan } from "~/components"
+import { Description, Feature, Plan } from "~/components";
 
 <Description>
 
 Implements the Oblivious HTTP IETF standard to improve client privacy.
+
 </Description>
 
 <Plan type="enterprise" />
@@ -23,24 +21,36 @@ Implements the Oblivious HTTP IETF standard to improve client privacy.
 
 OHTTP introduces a trusted third party between client and server, called a relay, whose purpose is to forward encrypted requests and responses between client and server. These messages are encrypted between client and server such that the relay learns nothing of the application data, beyond the length of the encrypted message and the server the client is interacting with.
 
-***
+---
 
 ## Availability
 
 Privacy Gateway is currently in closed beta – available to select privacy-oriented companies and partners. If you are interested, [contact us](https://www.cloudflare.com/lp/privacy-edge/).
 
-***
+---
 
 ## Features
 
-<Feature header="Get started" href="/privacy-gateway/get-started/" cta="Get started">
-Learn how to set up Privacy Gateway for your application.
+<Feature
+	header="Get started"
+	href="/privacy-gateway/get-started/"
+	cta="Get started"
+>
+	Learn how to set up Privacy Gateway for your application.
 </Feature>
 
-<Feature header="Legal" href="/privacy-gateway/reference/legal/" cta="Learn more">
-Learn about the different parties and data shared in Privacy Gateway.
+<Feature
+	header="Legal"
+	href="/privacy-gateway/reference/legal/"
+	cta="Learn more"
+>
+	Learn about the different parties and data shared in Privacy Gateway.
 </Feature>
 
-<Feature header="Metrics" href="/privacy-gateway/reference/metrics/" cta="Learn more">
-Learn about how to query Privacy Gateway metrics.
+<Feature
+	header="Metrics"
+	href="/privacy-gateway/reference/metrics/"
+	cta="Learn more"
+>
+	Learn about how to query Privacy Gateway metrics.
 </Feature>

src/content/docs/rules/cloud-connector/index.mdx

@@ -4,17 +4,14 @@ pcx_content_type: concept
 wid: cloud-connector
 sidebar:
   order: 9
-  group:
-    badge:
-      text: Beta
 head:
   - tag: title
-    content: Cloud Connector (beta)
+    content: Cloud Connector
 ---
 
-import { FeatureTable, Render } from "~/components";
+import { FeatureTable, ProductAvailabilityText, Render } from "~/components";
 
-Cloud Connector (beta) allows you to route matching incoming traffic from your website to a public cloud provider that you define: [Cloudflare R2](/r2/) object storage or an external provider such as AWS, Google Cloud, and Azure. With Cloud Connector you can make Cloudflare the control center for your web traffic, including traffic served from public cloud providers, without having to configure additional rules.
+Cloud Connector <ProductAvailabilityText product="cloud-connector" /> allows you to route matching incoming traffic from your website to a public cloud provider that you define: [Cloudflare R2](/r2/) object storage or an external provider such as AWS, Google Cloud, and Azure. With Cloud Connector you can make Cloudflare the control center for your web traffic, including traffic served from public cloud providers, without having to configure additional rules.
 
 <Render
 	file="rules-requirements"

src/content/docs/rules/trace-request/how-to.mdx

@@ -3,11 +3,9 @@ pcx_content_type: reference
 title: Use Cloudflare Trace
 sidebar:
   order: 2
-  badge:
-    text: Beta
 head:
   - tag: title
-    content: How to - Cloudflare Trace (beta)
+    content: How to - Cloudflare Trace
 description: Learn how to use Cloudflare Trace in the dashboard and with the API.
 ---
 

src/content/docs/rules/trace-request/index.mdx

@@ -1,11 +1,9 @@
 ---
 pcx_content_type: concept
 title: Trace a request
+wid: cloudflare-trace
 sidebar:
   order: 14
-  badge:
-    text: Beta
-    # TODO: set the badge text in the frontmatter from product-availability data
 head:
   - tag: title
     content: Trace a request with Cloudflare Trace
@@ -15,7 +13,7 @@ import { DirectoryListing, Plan, ProductAvailabilityText } from "~/components";
 
 <Plan type="all" />
 
-Cloudflare Trace <ProductAvailabilityText product="cloudflare-trace" parentheses="true" /> follows an HTTP/S request through Cloudflare's reverse proxy to your origin. Use this tool to understand how different Cloudflare configurations interact with an HTTP/S request for one of your hostnames. If the hostname you are testing is not [proxied by Cloudflare](/dns/proxy-status/), Cloudflare Trace will still return all the configurations that Cloudflare would have applied to the request.
+Cloudflare Trace <ProductAvailabilityText product="cloudflare-trace" /> follows an HTTP/S request through Cloudflare's reverse proxy to your origin. Use this tool to understand how different Cloudflare configurations interact with an HTTP/S request for one of your hostnames. If the hostname you are testing is not [proxied by Cloudflare](/dns/proxy-status/), Cloudflare Trace will still return all the configurations that Cloudflare would have applied to the request.
 
 You can define specific request properties to simulate different conditions for an HTTP/S request. Inactive rules configured in Cloudflare products will not be evaluated.
 

src/content/docs/speed/optimization/content/fonts/index.mdx

@@ -1,14 +1,12 @@
 ---
 pcx_content_type: overview
-title: Cloudflare Fonts (beta)
+title: Cloudflare Fonts
+wid: fonts
 sidebar:
   order: 4
-  badge:
-    text: Beta
-
 ---
 
-import { GlossaryTooltip, Render, DashButton } from "~/components"
+import { GlossaryTooltip, Render, DashButton } from "~/components";
 
 Cloudflare Fonts is a feature designed for websites that use Google Fonts. It rewrites Google Fonts to be delivered from a website’s own origin, eliminating the need to rely on third-party font providers. Cloudflare Fonts is tailored to improve website performance and user privacy without the need for any code changes or self-hosting of fonts.
 
@@ -49,8 +47,8 @@ To enable Cloudflare Fonts for your entire domain:
 
 While Cloudflare Fonts offers powerful font optimization capabilities, it is important to be aware of its limitations:
 
-* **Font transformation**: Currently, Cloudflare Fonts exclusively supports Google Fonts transformation.
-* **APO compatibility**: Cloudflare Fonts does not operate when [Automatic Platform Optimization](/automatic-platform-optimization/) (APO) is enabled. Cloudflare APO automatically optimizes Google Fonts in a similar way.
-* **CSS import**: Cloudflare Fonts is compatible only with the `<link>` setup for Google Fonts and does not support the CSS `@import` method.
-* **CSP headers**: Cloudflare Fonts does not modify <GlossaryTooltip term="content security policy (CSP)" link="https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy">Content Security Policy (CSP)</GlossaryTooltip> headers. Certain CSP configurations may make Cloudflare Fonts stop working, such as restrictions on inline styles through [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/style-src), or restriction of fonts originating from the site's own origin via [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/font-src).
-* **Fallback mechanism**: In cases where Cloudflare Fonts does not support a specific page, it will gracefully fallback to using Google Fonts.
+- **Font transformation**: Currently, Cloudflare Fonts exclusively supports Google Fonts transformation.
+- **APO compatibility**: Cloudflare Fonts does not operate when [Automatic Platform Optimization](/automatic-platform-optimization/) (APO) is enabled. Cloudflare APO automatically optimizes Google Fonts in a similar way.
+- **CSS import**: Cloudflare Fonts is compatible only with the `<link>` setup for Google Fonts and does not support the CSS `@import` method.
+- **CSP headers**: Cloudflare Fonts does not modify <GlossaryTooltip term="content security policy (CSP)" link="https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy">Content Security Policy (CSP)</GlossaryTooltip> headers. Certain CSP configurations may make Cloudflare Fonts stop working, such as restrictions on inline styles through [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/style-src), or restriction of fonts originating from the site's own origin via [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/font-src).
+- **Fallback mechanism**: In cases where Cloudflare Fonts does not support a specific page, it will gracefully fallback to using Google Fonts.

src/schemas/base.ts

@@ -135,4 +135,10 @@ export const baseSchema = ({ image }: SchemaContext) =>
 			.describe(
 				"Whether to show the FeedbackPrompt on the page, defaults to true",
 			),
+		wid: z
+			.string()
+			.optional()
+			.describe(
+				"What Id? Used as a generic identifier for external data sources",
+			),
 	});

src/util/sidebar.ts

@@ -214,6 +214,11 @@ async function handleGroup(group: Group): Promise<SidebarEntry> {
 
 	if (frontmatter.sidebar.group?.badge) {
 		group.badge = inferBadgeVariant(frontmatter.sidebar.group?.badge);
+	} else if (frontmatter.wid) {
+		const availabilityBadge = await productAvailabilityBadge(frontmatter.wid);
+		if (availabilityBadge) {
+			group.badge = availabilityBadge;
+		}
 	}
 
 	if (frontmatter.hideChildren) {
@@ -290,6 +295,11 @@ async function handleLink(link: Link): Promise<Link> {
 
 	if (link.badge) {
 		link.badge = inferBadgeVariant(link.badge);
+	} else if (frontmatter.wid) {
+		const availabilityBadge = await productAvailabilityBadge(frontmatter.wid);
+		if (availabilityBadge) {
+			link.badge = availabilityBadge;
+		}
 	}
 
 	if (frontmatter.external_link && !frontmatter.sidebar.group?.hideIndex) {
@@ -309,6 +319,23 @@ async function handleLink(link: Link): Promise<Link> {
 	return link;
 }
 
+async function productAvailabilityBadge(
+	wid: string,
+): Promise<Badge | undefined> {
+	try {
+		const availabilityEntry = await getEntry("product-availability", wid);
+		if (
+			availabilityEntry &&
+			availabilityEntry.data.availability?.toLowerCase() === "beta"
+		) {
+			return { text: "Beta", variant: "caution" };
+		}
+	} catch (_error) {
+		// If the entry doesn't exist in the collection, return undefined
+	}
+	return undefined;
+}
+
 function inferBadgeVariant(badge: Badge) {
 	if (!badge) return undefined;