Merge branch 'production' into dpena/youtube-link-swap

Author: dcpena

astro.config.ts

@@ -142,7 +142,7 @@ export default defineConfig({
 									"{props.*}",
 									"/",
 									"/glossary/",
-									"/products/",
+									"/directory/",
 									"/rules/snippets/examples/?operation=*",
 									"/rules/transform/examples/?operation=*",
 									"/ruleset-engine/rules-language/fields/reference/**",

public/__redirects

@@ -1,6 +1,7 @@
 # homepage
 /api /api/ 301
-/docs/ /products/ 301
+/docs/ /directory/ 301
+/products/ /directory/ 301
 /zero-trust/ /products/?product-group=Cloudflare+One 301
 /dashboard-landing/ / 301
 /tutorials/ /search/?content_type%5B0%5D=Tutorial 301

src/components/ProductCatalog.tsx renamed to src/components/DirectoryCatalog.tsx

@@ -13,7 +13,7 @@ type Filters = {
 	groups: string[];
 };
 
-const ProductCatalog = ({ products }: { products: ProductData[] }) => {
+const DirectoryCatalog = ({ products }: { products: ProductData[] }) => {
 	const [filters, setFilters] = useState<Filters>({
 		search: "",
 		groups: [],
@@ -74,7 +74,7 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
 				<input
 					type="text"
 					className="mb-8 w-full rounded-md border-2 border-gray-200 bg-white px-2 py-2 dark:border-gray-700 dark:bg-gray-800"
-					placeholder="Search products"
+					placeholder="Search folders"
 					value={filters.search}
 					onChange={(e) => setFilters({ ...filters, search: e.target.value })}
 				/>
@@ -116,7 +116,7 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
 			<div className="mt-0! grid w-full grid-cols-1 items-stretch gap-2 self-start md:grid-cols-2 lg:w-3/4 lg:grid-cols-3 lg:gap-4">
 				{productList.length === 0 && (
 					<div className="flex w-full flex-col justify-center rounded-md border bg-gray-50 py-6 text-center align-middle md:col-span-2 lg:col-span-3 dark:border-gray-500 dark:bg-gray-800">
-						<span className="text-lg font-bold!">No products found</span>
+						<span className="text-lg font-bold!">No folders found</span>
 						<p>
 							Try a different search term, or broaden your search by removing
 							filters.
@@ -163,4 +163,4 @@ const ProductCatalog = ({ products }: { products: ProductData[] }) => {
 	);
 };
 
-export default ProductCatalog;
+export default DirectoryCatalog;

src/components/HeaderDropdowns.tsx

@@ -11,7 +11,7 @@ import { useState } from "react";
 import { PiCaretDownBold } from "react-icons/pi";
 
 const links = [
-	{ label: "Docs Directory", href: "/products/" },
+	{ label: "Docs Directory", href: "/directory/" },
 	{
 		label: "APIs",
 		href: "https://developers.cloudflare.com/api/",

src/components/HomepageHero.astro

@@ -45,7 +45,7 @@ if (image) {
 	<div class="sl-flex stack">
 		<div class="sl-flex copy">
 			<div class="sl-flex copy links space-x-4">
-				<a href="/products/">Products</a>
+				<a href="/directory/">Directory</a>
 				<a href="/billing/">Subscriptions and billing</a>
 				<a href="/api/">API</a>
 				<a href="/changelog/">Changelog</a>

src/components/Stream.astro

@@ -2,6 +2,7 @@
 import { z } from "astro:schema";
 import { Badge } from "@astrojs/starlight/components";
 import parse from "parse-duration";
+import Details from "./Details.astro";
 
 type Props = z.input<typeof props>;
 
@@ -12,12 +13,12 @@ const props = z
 		thumbnail: z.string().optional(),
 		chapters: z.record(z.string(), z.string()).optional(),
 		showMoreVideos: z.boolean().default(false),
+		expandChapters: z.boolean().default(false),
 	})
 	.strict();
 
-const { id, title, thumbnail, chapters, showMoreVideos } = props.parse(
-	Astro.props,
-);
+const { id, title, thumbnail, chapters, showMoreVideos, expandChapters } =
+	props.parse(Astro.props);
 
 const BASE_URL = `https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/`;
 
@@ -53,42 +54,43 @@ if (thumbnail) {
 
 		{
 			chapters && (
-				<p>
-					<strong>Chapters</strong>
-					<ul class="flex list-none gap-4 overflow-x-scroll pb-4 pl-0">
-						{Object.entries(chapters).map(([chapter, time]) => {
-							const totalSeconds = parse(time, "s");
-
-							const thumbnail = new URL(thumbnailUrl);
-							thumbnail.searchParams.set("fit", "crop");
-							thumbnail.searchParams.set("time", `${totalSeconds}s`);
-
-							return (
-								<li class="mt-0!">
-									<button
-										class="flex h-full w-36 cursor-pointer flex-col rounded-sm border border-gray-200 bg-transparent p-4 dark:border-gray-700"
-										data-chapter={chapter}
-										data-time={totalSeconds}
-									>
-										<img
-											src={thumbnail.toString()}
-											alt={chapter}
-											width="120"
-											height="64"
-											class="border-accent bg-accent/10 rounded-sm border"
-										/>
-										<div class="flex h-full flex-col items-center justify-between">
-											<strong class="line-clamp-2 text-xs" title={chapter}>
-												{chapter}
-											</strong>
-											<Badge text={time} variant="tip" class="w-fit" />
-										</div>
-									</button>
-								</li>
-							);
-						})}
-					</ul>
-				</p>
+				<Details header="Chapters" open={expandChapters}>
+					<p>
+						<ul class="flex list-none gap-4 overflow-x-scroll pb-4 pl-0">
+							{Object.entries(chapters).map(([chapter, time]) => {
+								const totalSeconds = parse(time, "s");
+
+								const thumbnail = new URL(thumbnailUrl);
+								thumbnail.searchParams.set("fit", "crop");
+								thumbnail.searchParams.set("time", `${totalSeconds}s`);
+
+								return (
+									<li class="mt-0!">
+										<button
+											class="flex h-full w-36 cursor-pointer flex-col rounded-sm border border-gray-200 bg-transparent p-4 dark:border-gray-700"
+											data-chapter={chapter}
+											data-time={totalSeconds}
+										>
+											<img
+												src={thumbnail.toString()}
+												alt={chapter}
+												width="120"
+												height="64"
+												class="border-accent bg-accent/10 rounded-sm border"
+											/>
+											<div class="flex h-full flex-col items-center justify-between">
+												<strong class="line-clamp-2 text-xs" title={chapter}>
+													{chapter}
+												</strong>
+												<Badge text={time} variant="tip" class="w-fit" />
+											</div>
+										</button>
+									</li>
+								);
+							})}
+						</ul>
+					</p>
+				</Details>
 			)
 		}
 

src/components/homepage/FeaturedContentSection.astro

@@ -63,7 +63,7 @@ const { title, text, image, cards, imagePosition } = props.parse(Astro.props);
 
 						<LinkCard
 							title={"Explore our Developer Platform"}
-							href={"/products/?product-group=Developer+platform"}
+							href={"/directory/?product-group=Developer+platform"}
 						/>
 					</Card>
 				</div>

src/components/overrides/Footer.astro

@@ -13,7 +13,7 @@ const groups = Object.entries({
 			text: "New to Cloudflare?",
 			href: "/fundamentals/",
 		},
-		{ text: "Products", href: "/products/" },
+		{ text: "Directory", href: "/directory/" },
 		{
 			text: "Sponsorships",
 			href: "/sponsorships/",

src/components/overrides/Head.astro

@@ -35,26 +35,28 @@ if (currentSection) {
 	let product = await getEntry("products", currentSection);
 	// if entry for changelog, grab the first product value (which corresponds to the folder the entry is in) and use as the primary "product"
 	if (currentSection === "changelog") {
-		const products = frontmatter.products
+		const products = frontmatter.products;
 		if (products) {
 			product = await getEntry("products", products[0]);
 		}
 	}
 
 	if (product) {
-		let productMetaName = product.data.meta.title ? product.data.meta.title : "Cloudflare Docs";
+		let productMetaName = product.data.meta.title
+			? product.data.meta.title
+			: "Cloudflare Docs";
 
 		if (currentSection === "changelog") {
-			productMetaName = "Changelog"
+			productMetaName = "Changelog";
 		}
 
 		const titleIdx = head.findIndex((x) => x.tag === "title");
 		let title: string;
 
 		// Prefer the title set via frontmatter.head.title. If not, grab the regular frontmatter title value.
-		const existingTitle = head[titleIdx].content ? head[titleIdx].content?.split(
-					` ${DEFAULT_TITLE_DELIMITER} `,
-				)[0]: frontmatter.title;
+		const existingTitle = head[titleIdx].content
+			? head[titleIdx].content?.split(` ${DEFAULT_TITLE_DELIMITER} `)[0]
+			: frontmatter.title;
 
 		title = `${existingTitle} · ${productMetaName}`;
 
@@ -128,8 +130,13 @@ if (
 
 if (frontmatter.pcx_content_type) {
 	["pcx_content_type", "algolia_content_type"].map((name) => {
-		const contentType = frontmatter.pcx_content_type
-		const updatedName = contentType ? (contentType.charAt(0).toUpperCase() + contentType.slice(1)).replace("-", " ") : ""
+		const contentType = frontmatter.pcx_content_type;
+		const updatedName = contentType
+			? (contentType.charAt(0).toUpperCase() + contentType.slice(1)).replace(
+					"-",
+					" ",
+				)
+			: "";
 		metaTags.push({
 			name,
 			content: updatedName,
@@ -217,7 +224,6 @@ metaTags.map((attrs) => {
 		attrs,
 	});
 });
-
 ---
 
 <script src="src/scripts/footnotes.ts"></script>

src/components/overrides/PageTitle.astro

@@ -25,8 +25,8 @@ const slug = Astro.locals.starlightRoute.entry.slug;
 const breadcrumbProps: Record<string, any> = {
 	crumbs: [
 		{
-			text: "Products",
-			href: "/products/",
+			text: "Directory",
+			href: "/directory/",
 		},
 	],
 	truncated: true,