Merge branch 'production' into api-next-documentation-links

Author: jacobbednarz

package-lock.json

@@ -27,29 +27,29 @@
 	"devDependencies": {
 		"@astro-community/astro-embed-youtube": "^0.5.6",
 		"@astrojs/check": "^0.9.4",
-		"@astrojs/react": "^3.6.2",
-		"@astrojs/rss": "^4.0.9",
+		"@astrojs/react": "^3.6.3",
+		"@astrojs/rss": "^4.0.10",
 		"@astrojs/sitemap": "^3.2.1",
 		"@astrojs/starlight": "^0.29.2",
 		"@astrojs/starlight-docsearch": "^0.3.0",
 		"@astrojs/starlight-tailwind": "^2.0.3",
-		"@astrojs/tailwind": "^5.1.2",
+		"@astrojs/tailwind": "^5.1.3",
 		"@cloudflare/puppeteer": "^0.0.14",
 		"@cloudflare/vitest-pool-workers": "^0.5.36",
 		"@cloudflare/workers-types": "^4.20241112.0",
 		"@codingheads/sticky-header": "^1.0.2",
 		"@iarna/toml": "^2.2.5",
-		"@iconify-json/material-symbols": "^1.2.8",
+		"@iconify-json/material-symbols": "^1.2.10",
 		"@stoplight/json-schema-tree": "^4.0.0",
 		"@types/dompurify": "^3.2.0",
 		"@types/hast": "^3.0.4",
 		"@types/he": "^1.2.3",
 		"@types/node": "^22.10.1",
 		"@types/react": "^18.3.12",
 		"@types/react-dom": "^18.3.1",
-		"algoliasearch": "^5.15.0",
+		"algoliasearch": "^5.17.0",
 		"astro": "^4.16.17",
-		"astro-breadcrumbs": "^3.2.2",
+		"astro-breadcrumbs": "^3.3.1",
 		"astro-icon": "^1.1.2",
 		"astro-live-code": "^0.0.4",
 		"date-fns": "^4.1.0",
@@ -72,7 +72,7 @@
 		"playwright": "^1.49.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-astro": "^0.14.1",
-		"puppeteer": "^23.10.1",
+		"puppeteer": "^23.10.4",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-textarea-autosize": "^8.5.6",

package.json

@@ -4,6 +4,12 @@ import { indexPlans } from "~/util/plans";
 import { marked } from "marked";
 import GlossaryTooltip from "~/components/GlossaryTooltip.astro";
 
+const markdown = (content: any) => {
+	if (typeof content !== "string") return content;
+
+	return marked.parse(content);
+};
+
 type Props = z.infer<typeof props>;
 
 const props = z
@@ -17,30 +23,29 @@ const { id } = props.parse(Astro.props);
 // TODO: improve product features types
 const plan = (await indexPlans(id)) as any;
 
-// @ts-ignore types not implemented for plans JSON
-const properties = plan.properties;
+const features: any[] = Object.values(plan.properties);
 
-const markdown = (content: any) => {
-	if (typeof content !== "string") return content;
-
-	return marked.parse(content);
-};
+const hasFree = features.some((x) => x.free);
+const hasPro = features.some((x) => x.pro);
+const hasBiz = features.some((x) => x.biz);
+const hasEnt = features.some((x) => x.ent);
+const hasEntPlus = features.some((x) => x.ent_plus);
 ---
 
 <table>
 	<thead>
 		<tr>
 			<th></th>
-			<th>Free</th>
-			<th>Pro</th>
-			<th>Business</th>
-			<th>Enterprise</th>
-			{plan.ent_plus && <th>{plan.ent_plus}</th>}
+			{hasFree && <th>Free</th>}
+			{hasPro && <th>Pro</th>}
+			{hasBiz && <th>Business</th>}
+			{hasEnt && <th>Enterprise</th>}
+			{hasEntPlus && <th>{plan.ent_plus}</th>}
 		</tr>
 	</thead>
 	<tbody>
 		{
-			Object.entries(properties).map(([_, v]: [string, any]) => {
+			features.map((feature) => {
 				const renderTitle = (title: string) => {
 					const placeholder = "[[GLOSSARY_TOOLTIP_SNIPPETS_SUBREQUEST]]";
 
@@ -67,12 +72,12 @@ const markdown = (content: any) => {
 
 				return (
 					<tr>
-						<th set:html={renderTitle(v.title)} />
-						<td set:html={markdown(v.free)} />
-						<td set:html={markdown(v.pro)} />
-						<td set:html={markdown(v.biz)} />
-						<td set:html={markdown(v.ent)} />
-						{plan.ent_plus && <td set:html={markdown(v.ent_plus)} />}
+						<th set:html={renderTitle(feature.title)} />
+						{hasFree && <td set:html={markdown(feature.free)} />}
+						{hasPro && <td set:html={markdown(feature.pro)} />}
+						{hasBiz && <td set:html={markdown(feature.biz)} />}
+						{hasEnt && <td set:html={markdown(feature.ent)} />}
+						{hasEntPlus && <td set:html={markdown(feature.ent_plus)} />}
 					</tr>
 				);
 			})

public/core-services-preview.png

@@ -33,23 +33,20 @@ if (!res.ok) {
 	throw new Error(`[GitHubCode] Received ${res.status} from Worker.`);
 }
 
-let content = await res.text();
+const content = await res.text();
+let contentLines = content.split("\n");
 
 if (lines) {
 	const [start, end] = lines;
 
-	const contentLines = content.split("\n");
-
 	if (contentLines.length < end - 1) {
 		throw new Error(
 			`[GitHubCode] End line requested is beyond content length (${contentLines.length}).`,
 		);
 	}
 
-	content = contentLines.slice(start - 1, end).join("\n");
+	contentLines = contentLines.slice(start - 1, end);
 } else if (tag) {
-	const contentLines = content.split("\n");
-
 	const startTag = contentLines.findIndex((x) =>
 		x.includes(`<docs-tag name="${tag}">`),
 	);
@@ -61,8 +58,12 @@ if (lines) {
 		throw new Error(`[GitHubCode] Unable to find a region using tag "${tag}".`);
 	}
 
-	content = contentLines.slice(startTag + 1, endTag).join("\n");
+	contentLines = contentLines.slice(startTag + 1, endTag);
 }
+
+contentLines = contentLines.filter(
+	(line) => !/<[\/]?docs-tag name=".*">/.test(line),
+);
 ---
 
-<Code code={content} lang={lang} />
+<Code code={contentLines.join("\n")} lang={lang} />

public/dev-products-preview.png

@@ -44,6 +44,7 @@ if (currentSection) {
 				content: "",
 			});
 		}
+
 		if (product.data.product.title) {
 			const productName = product.data.product.title;
 			Astro.props.entry.data.head.push({
@@ -63,7 +64,58 @@ if (currentSection) {
 				content: "",
 			});
 		}
+
 		if (product.data.product.group) {
+			const group = product.data.product.group.toLowerCase();
+
+			let ogImage = "https://developers.cloudflare.com/cf-twitter-card.png";
+			const images: Record<string, string> = {
+				"cloudflare essentials":
+					"https://developers.cloudflare.com/core-services-preview.png",
+				"cloudflare one": "https://developers.cloudflare.com/zt-preview.png",
+				"developer platform":
+					"https://developers.cloudflare.com/dev-products-preview.png",
+				"network security":
+					"https://developers.cloudflare.com/core-services-preview.png",
+				"application performance":
+					"https://developers.cloudflare.com/core-services-preview.png",
+				"application security":
+					"https://developers.cloudflare.com/core-services-preview.png",
+			};
+
+			if (images[group]) {
+				ogImage = images[group];
+			}
+
+			const tags = [
+				{
+					tag: "meta",
+					attrs: {
+						name: "image",
+						content: ogImage,
+					},
+					content: "",
+				},
+				{
+					tag: "meta",
+					attrs: {
+						name: "og:image",
+						content: ogImage,
+					},
+					content: "",
+				},
+				{
+					tag: "meta",
+					attrs: {
+						name: "twitter:image",
+						content: ogImage,
+					},
+					content: "",
+				},
+			] as const;
+
+			Astro.props.entry.data.head.push(...tags);
+
 			Astro.props.entry.data.head.push({
 				tag: "meta",
 				attrs: {