[Docs Site] Add area-specific OpenGraph images

Author: KianNH

package-lock.json

@@ -38,8 +38,8 @@
 		"@cloudflare/vitest-pool-workers": "^0.5.32",
 		"@cloudflare/workers-types": "^4.20241112.0",
 		"@codingheads/sticky-header": "^1.0.2",
-		"@iconify-json/material-symbols": "^1.2.8",
 		"@iarna/toml": "^2.2.5",
+		"@iconify-json/material-symbols": "^1.2.8",
 		"@stoplight/json-schema-tree": "^4.0.0",
 		"@types/dompurify": "^3.2.0",
 		"@types/hast": "^3.0.4",
@@ -50,7 +50,7 @@
 		"algoliasearch": "^5.15.0",
 		"astro": "^4.16.12",
 		"astro-breadcrumbs": "^3.2.2",
-		"astro-icon": "^1.1.4",
+		"astro-icon": "^1.1.2",
 		"astro-live-code": "^0.0.4",
 		"date-fns": "^4.1.0",
 		"detype": "1.0.12",

package.json

@@ -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: {