Product Directory Refresh

src/components/ProductCatalog.tsx

@@ -0,0 +1,137 @@
+import { useState, type ChangeEvent } from "react";
+import type { CollectionEntry } from "astro:content";
+import type { IconifyIconBuildResult } from "@iconify/utils";
+
+const ProductCatalog = ({
+	products,
+}: {
+	products: (CollectionEntry<"products"> & {
+		icon: IconifyIconBuildResult;
+		groups: string[];
+	})[];
+}) => {
+	const [filters, setFilters] = useState<{
+		search: string;
+		groups: string[];
+	}>({
+		search: "",
+		groups: [],
+	});
+
+	const groups = [...new Set(products.map((product) => product.groups).flat())];
+
+	const productList = products.filter((product) => {
+		if (filters.groups.length > 0) {
+			if (
+				filters.groups.filter((val) => product.groups.includes(val)).length ===
+				0
+			) {
+				return false;
+			}
+		}
+
+		if (filters.search) {
+			if (
+				!product.data.name.toLowerCase().includes(filters.search.toLowerCase())
+			) {
+				return false;
+			}
+		}
+
+		return true;
+	});
+
+	return (
+		<div className="md:flex">
+			<div className="md:w-1/4 w-full mr-8">
+				<input
+					type="text"
+					className="w-full mb-8 rounded-md bg-white dark:bg-black border-2 border-gray-200 dark:border-gray-700 px-2 py-2"
+					placeholder="Search products"
+					value={filters.search}
+					onChange={(e) => setFilters({ ...filters, search: e.target.value })}
+				/>
+
+				<div className="!mb-8 md:block hidden">
+					<span className="uppercase text-gray-600 dark:text-gray-200 text-sm font-bold">
+						Groups
+					</span>
+
+					{groups.map((group) => (
+						<label key={group} className="block !my-2">
+							<input
+								type="checkbox"
+								className="mr-2"
+								value={group}
+								onChange={(e: ChangeEvent<HTMLInputElement>) => {
+									if (e.target.checked) {
+										setFilters({
+											...filters,
+											groups: [...filters.groups, e.target.value],
+										});
+									} else {
+										setFilters({
+											...filters,
+											groups: filters.groups.filter(
+												(f) => f !== e.target.value,
+											),
+										});
+									}
+								}}
+							/>{" "}
+							{group}
+						</label>
+					))}
+				</div>
+			</div>
+
+			<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-2 lg:gap-4 lg:w-3/4 w-full items-stretch self-start !mt-0">
+				{productList.length === 0 && (
+					<div className="border lg:col-span-3 md:col-span-2 bg-gray-50 dark:bg-gray-800 dark:border-gray-500 rounded-md w-full flex-col flex align-middle justify-center text-center py-6">
+						<span className="text-lg !font-bold">No products found</span>
+						<p>
+							Try a different search term, or broaden your search by removing
+							filters.
+						</p>
+					</div>
+				)}
+				{productList.map((product) => {
+					return (
+						<a
+							href={product.data.product.url}
+							className="self-stretch p-3 border-gray-200 dark:border-gray-700 border-solid border rounded-md block !text-inherit no-underline hover:bg-gray-50 dark:hover:bg-black"
+						>
+							<div className="flex items-center">
+								{product.icon && (
+									<div className="rounded-full p-2 bg-orange-50 mr-2 text-orange-500 dark:bg-orange-950">
+										<svg
+											{...product.icon.attributes}
+											width={28}
+											height={28}
+											dangerouslySetInnerHTML={{ __html: product.icon.body }}
+										/>
+									</div>
+								)}
+								{!product.icon && (
+									<div className="flex items-center justify-center leading-none rounded-full p-2 bg-orange-50 dark:bg-orange-950 mr-2 text-[color:var(--orange-accent-200)] text-xl font-bold w-11 h-11">
+										{product.data.name.substr(0, 1)}
+									</div>
+								)}
+								<span className="font-semibold text-lg text-ellipsis overflow-hidden whitespace-nowrap">
+									{product.data.name}
+								</span>
+							</div>
+							{product.data.meta && (
+								<p className="!mt-2 line-clamp-2 text-sm leading-6">
+									{product.data.meta.description}
+								</p>
+							)}
+						</a>
+					);
+				})}
+			</div>
+		</div>
+	);
+};
+
+export default ProductCatalog;

src/components/index.ts

@@ -48,7 +48,6 @@ export { default as ResourcesBySelector } from "./ResourcesBySelector.astro";
 export { default as RuleID } from "./RuleID.astro";
 export { default as SpotlightAuthorDetails } from "./SpotlightAuthorDetails.astro";
 export { default as Stream } from "./Stream.astro";
-export { default as ThreeCardGrid } from "./ThreeCardGrid.astro";
 export { default as TroubleshootingList } from "./TroubleshootingList.astro";
 export { default as TunnelCalculator } from "./TunnelCalculator.astro";
 export { default as Type } from "./Type.astro";

src/content/products/access.yaml

@@ -4,4 +4,8 @@ product:
   title: Access
   group: Cloudflare One
   url: /cloudflare-one/policies/access/
-  grid_placeholder: true
+
+meta:
+  title: Cloudflare Access
+  description: Determine who can reach your application using policies.
+  author: "@cloudflare"

src/content/products/account-billing.yaml

@@ -4,4 +4,6 @@ product:
   title: Account and Billing
   group: Cloudflare essentials
   url: /fundamentals/subscriptions-and-billing/
-  grid_placeholder: true
+
+meta:
+  description: Manage account billing and subscriptions.

src/content/products/browser-isolation.yaml

@@ -4,4 +4,6 @@ product:
   title: Browser Isolation
   group: Cloudflare One
   url: /cloudflare-one/policies/browser-isolation/
-  grid_placeholder: true
+
+meta:
+  description: Cloudflare Browser Isolation executes active webpage content in a secure isolated browser.

src/content/products/cache-reserve.yaml

@@ -4,4 +4,6 @@ product:
   title: Cache Reserve
   group: Application performance
   url: /cache/advanced-configuration/cache-reserve/
-  grid_placeholder: true
+
+meta:
+  description: Cache Reserve is a large, persistent data store implemented on top of R2.

src/content/products/casb.yaml

@@ -4,4 +4,6 @@ product:
   title: CASB
   group: Cloudflare One
   url: /cloudflare-one/applications/scan-apps/
-  grid_placeholder: true
+
+meta:
+  description: Scan SaaS applications for misconfigurations, unauthorized user activity, shadow IT, and other data security issues that can occur after a user has successfully logged in.

src/content/products/cloudflare-for-saas.yaml

@@ -5,8 +5,11 @@ product:
   group: Application performance
   additional_groups: [Application security]
   url: /cloudflare-for-platforms/cloudflare-for-saas/
-  grid_placeholder: true
+
   preview_tryout: true
 
+meta:
+  description: Cloudflare for SaaS allows you to extend the security and performance benefits of Cloudflare’s network to your customers via their own custom or vanity domains.
+
 resources:
   dashboard_link: https://dash.cloudflare.com/?to=/:account/:zone/ssl-tls/custom-hostnames

src/content/products/cloudflare-tunnel.yaml

@@ -4,4 +4,6 @@ product:
   title: Cloudflare Tunnel
   group: Cloudflare One
   url: /cloudflare-one/connections/connect-networks/
-  grid_placeholder: true
+
+meta:
+  description: Cloudflare Tunnel provides you with a secure way to connect your resources to Cloudflare without a publicly routable IP address

src/content/products/dex.yaml

@@ -5,5 +5,8 @@ product:
   group: Cloudflare One
   additional_groups: [Analytics]
   url: /cloudflare-one/insights/dex/
-  grid_placeholder: true
+
   wrap: true
+
+meta:
+  description: Digital Experience Monitoring provides visibility into device, network, and application performance across your Zero Trust organization.

src/content/products/dlp.yaml

@@ -4,4 +4,6 @@ product:
   title: Data Loss Prevention
   group: Cloudflare One
   url: /cloudflare-one/policies/data-loss-prevention/
-  grid_placeholder: true
+
+meta:
+  description: Cloudflare Data Loss Prevention (DLP) allows you to scan your web traffic and SaaS applications for the presence of sensitive data such as social security numbers, financial information, secret keys, and source code.

src/content/products/dns-firewall.yaml

@@ -5,4 +5,6 @@ product:
   group: Application performance
   additional_groups: [Application security]
   url: /dns/dns-firewall/
-  grid_placeholder: true
+
+meta:
+  description: Speed up and protect entire authoritative nameservers

src/content/products/fraud-detection.yaml

@@ -4,4 +4,6 @@ product:
   title: Fraud Detection
   group: Application security
   url: /bots/concepts/sequence-rules/
-  grid_placeholder: true
+
+meta:
+  description: Sequence rules uses cookies to track the order of requests a user has made and the time between requests and makes them available via Cloudflare Rules.

src/content/products/gateway.yaml

@@ -4,4 +4,6 @@ product:
   title: Gateway
   group: Cloudflare One
   url: /cloudflare-one/policies/gateway/
-  grid_placeholder: true
+
+meta:
+  description: Cloudflare Gateway, our comprehensive Secure Web Gateway, allows you to set up policies to inspect DNS, Network, HTTP, and Egress traffic.

src/content/products/geokey-manager.yaml

@@ -4,4 +4,6 @@ product:
   title: Geo Key Manager
   group: Application security
   url: /ssl/edge-certificates/geokey-manager/
-  grid_placeholder: true
+
+meta:
+  description: Restrict where the private keys used for TLS certificates are stored and managed.

src/content/products/graphql-api.yaml

@@ -6,4 +6,6 @@ product:
   additional_groups: [Analytics]
   url: /analytics/graphql-api/
   wrap: true
-  grid_placeholder: true
+
+meta:
+  description: The GraphQL Analytics API provides data regarding HTTP requests passing through Cloudflare’s network, as well as data from specific products, such as Firewall or Load Balancing.

src/content/products/keyless-ssl.yaml

@@ -5,4 +5,6 @@ product:
   group: Application performance
   additional_groups: [Application security]
   url: /ssl/keyless-ssl/
-  grid_placeholder: true
+
+meta:
+  description: Keyless SSL allows security-conscious clients to upload their own custom certificates and benefit from Cloudflare, but without exposing their TLS private keys.

src/content/products/kv.yaml

@@ -5,7 +5,6 @@ product:
   url: /kv/
   group: Developer platform
   additional_groups: [Storage]
-  grid_placeholder: true
 
 meta:
   title: Cloudflare Workers KV

src/content/products/leaked-credentials.yaml

@@ -5,4 +5,6 @@ product:
   group: Application security
   url: /waf/detections/leaked-credentials/
   wrap: true
-  grid_placeholder: true
+
+meta:
+  description: The leaked credentials traffic detection scans incoming requests for previously leaked credentials (usernames and passwords) previously leaked from data breaches.

src/content/products/rate-limiting.yaml

@@ -4,8 +4,11 @@ product:
   title: Rate limiting
   group: Application security
   url: /waf/rate-limiting-rules/
-  grid_placeholder: true
+
   preview_tryout: true
 
 resources:
   dashboard_link: https://dash.cloudflare.com/?to=/:account/:zone/security/waf/rate-limiting-rules
+
+meta:
+  description: Rate limiting rules allow you to define rate limits for requests matching an expression, and the action to perform when those rate limits are reached.

src/content/products/turn.yaml

@@ -6,4 +6,6 @@ product:
   group: Developer platform
   additional_groups: [Media]
   url: /calls/turn/
-  grid_placeholder: true
+
+meta:
+  description: Separately from Cloudflare Calls' SFU, Calls offers a managed TURN service.

src/content/products/workers-analytics-engine.yaml

@@ -5,4 +5,6 @@ product:
   url: /analytics/analytics-engine/
   group: Developer platform
   additional_groups: [Analytics]
-  grid_placeholder: true
+
+meta:
+  description: Workers Analytics Engine provides unlimited-cardinality analytics at scale, via a built-in API to write data points from Workers, and a SQL API to query that data.

src/content/products/workers-for-platforms.yaml

@@ -4,4 +4,6 @@ product:
   title: Workers for Platforms
   group: Developer platform
   url: /cloudflare-for-platforms/workers-for-platforms/
-  grid_placeholder: true
+
+meta:
+  description: Deploy custom code on behalf of your users or let your users directly deploy their own code to your platform, managing infrastructure.

src/content/products/zero-trust-warp.yaml

@@ -5,4 +5,6 @@ product:
   group: Cloudflare One
   url: /cloudflare-one/connections/connect-devices/warp/
   wrap: true
-  grid_placeholder: true
+
+meta:
+  description: The Cloudflare WARP client allows you to protect corporate devices by securely and privately sending traffic from those devices to Cloudflare’s global network, where Cloudflare Gateway can apply advanced web filtering.