[Docs Site] Using ResourceBySelector component where possible

src/components/ResourcesBySelector.astro

@@ -18,6 +18,7 @@ const props = z.object({
 	filterables: z.custom<ResourcesData>().array().optional(),
 	columns: z.union([z.literal(2), z.literal(3)]).default(2),
 	showDescriptions: z.boolean().default(true),
+	showLastUpdated: z.boolean().default(false),
 });
 
 const {
@@ -28,6 +29,7 @@ const {
 	filterables,
 	columns,
 	showDescriptions,
+	showLastUpdated,
 } = props.parse(Astro.props);
 
 const docs = await getCollection("docs");
@@ -78,6 +80,7 @@ const facets = resources.reduce(
 		filters={filterables}
 		columns={columns}
 		showDescriptions={showDescriptions}
+		showLastUpdated={showLastUpdated}
 		client:load
 	/>
 </div>

src/components/ResourcesBySelector.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import ReactSelect from "./ReactSelect";
 import type { CollectionEntry } from "astro:content";
+import { formatDistance } from "date-fns";
 
 type DocsData = keyof CollectionEntry<"docs">["data"];
 type VideosData = keyof CollectionEntry<"stream">["data"];
@@ -13,6 +14,7 @@ interface Props {
 	filters?: ResourcesData[];
 	columns: number;
 	showDescriptions: boolean;
+	showLastUpdated: boolean;
 }
 
 export default function ResourcesBySelector({
@@ -21,9 +23,15 @@ export default function ResourcesBySelector({
 	filters,
 	columns,
 	showDescriptions,
+	showLastUpdated,
 }: Props) {
 	const [selectedFilter, setSelectedFilter] = useState<string | null>(null);
 
+	const timeAgo = (date?: Date) => {
+		if (!date) return undefined;
+		return formatDistance(date, new Date(), { addSuffix: true });
+	};
+
 	const handleFilterChange = (option: any) => {
 		setSelectedFilter(option?.value || null);
 	};
@@ -91,6 +99,7 @@ export default function ResourcesBySelector({
 							? `/videos/${page.data.url}/`
 							: `/${page.id}/`;
 
+					// title can either be set directly in title or added as a meta.title property when we want something different for sidebar and SEO titles
 					let title;
 
 					if (page.collection === "docs") {
@@ -116,6 +125,11 @@ export default function ResourcesBySelector({
 									{page.data.description}
 								</span>
 							)}
+							{showLastUpdated && (
+								<span className="line-clamp-3" title={page.data.description}>
+									Updated {timeAgo(page.data.updated)}
+								</span>
+							)}
 						</a>
 					);
 				})}

src/content/docs/cloudflare-one/api-terraform/access-api-examples/index.mdx

@@ -6,7 +6,7 @@ sidebar:
   order: 1
 ---
 
-import { ListExamples } from "~/components";
+import { ResourcesBySelector } from "~/components";
 
 You can use the Cloudflare Access API to create policies, including individual rule blocks inside of group or policy bodies. For example, this policy allows all Cloudflare email account users to reach the application with the exception of one account:
 
@@ -34,4 +34,4 @@ You can use the Cloudflare Access API to create policies, including individual r
 
 ## Example rule configurations
 
-<ListExamples directory="cloudflare-one/api-terraform/access-api-examples/" />
+<ResourcesBySelector directory="cloudflare-one/api-terraform/access-api-examples/" types={["example"]} />

src/content/docs/containers/examples/index.mdx

@@ -7,8 +7,8 @@ sidebar:
   order: 3
 ---
 
-import { GlossaryTooltip, ListExamples } from "~/components";
+import { GlossaryTooltip, ResourcesBySelector } from "~/components";
 
 Explore the following examples of Container functionality:
 
-<ListExamples directory="containers/examples" />
+<ResourcesBySelector directory="containers/examples/" types={["example"]} />

src/content/docs/d1/examples/index.mdx

@@ -9,8 +9,8 @@ sidebar:
     hideIndex: true
 ---
 
-import { GlossaryTooltip, ListExamples } from "~/components";
+import { GlossaryTooltip, ResourcesBySelector } from "~/components";
 
 Explore the following <GlossaryTooltip term="code example">examples</GlossaryTooltip> for D1.
 
-<ListExamples directory="d1/examples/" />
+<ResourcesBySelector directory="d1/examples/" types={["example"]} />

src/content/docs/durable-objects/examples/index.mdx

@@ -7,8 +7,8 @@ sidebar:
     hideIndex: true
 ---
 
-import { ListExamples, GlossaryTooltip } from "~/components";
+import { ResourcesBySelector, GlossaryTooltip } from "~/components";
 
 Explore the following <GlossaryTooltip term="code example">examples</GlossaryTooltip> for Durable Objects.
 
-<ListExamples />
+<ResourcesBySelector types={["example"]} directory="durable-objects/examples/" />

src/content/docs/images/examples/index.mdx

@@ -7,6 +7,6 @@ sidebar:
   order: 11
 ---
 
-import { ListExamples } from "~/components";
+import { ResourcesBySelector } from "~/components";
 
-<ListExamples directory="images/examples/" />
+<ResourcesBySelector directory="images/examples/" types={["example"]} />

src/content/docs/kv/examples/index.mdx

@@ -9,8 +9,8 @@ sidebar:
     hideIndex: true
 ---
 
-import { GlossaryTooltip, ListExamples } from "~/components";
+import { GlossaryTooltip, ResourcesBySelector } from "~/components";
 
 Explore the following <GlossaryTooltip term="code example">examples</GlossaryTooltip> for KV.
 
-<ListExamples directory="kv/examples/" />
+<ResourcesBySelector directory="kv/examples/" types={["example"]} />

src/content/docs/pub-sub/examples/index.mdx

@@ -7,6 +7,6 @@ sidebar:
   order: 2
 ---
 
-import { ListExamples } from "~/components";
+import { ResourcesBySelector } from "~/components";
 
-<ListExamples directory="pub-sub/examples/" />
+<ResourcesBySelector directory="pub-sub/examples/" types={["example"]} />

src/content/docs/queues/examples/index.mdx

@@ -9,6 +9,6 @@ head:
     content: Cloudflare Queues - Examples
 ---
 
-import { ListExamples } from "~/components";
+import { ResourcesBySelector } from "~/components";
 
-<ListExamples directory="queues/examples/" />
+<ResourcesBySelector directory="queues/examples/" types={["example"]} />

src/content/docs/r2/tutorials/index.mdx

@@ -6,7 +6,11 @@ sidebar:
   order: 9
 ---
 
-import { GlossaryTooltip, ListTutorials, YouTubeVideos } from "~/components";
+import {
+	GlossaryTooltip,
+	ListTutorials,
+	YouTubeVideos,
+} from "~/components";
 
 View <GlossaryTooltip term="tutorial">tutorials</GlossaryTooltip> to help you get started with R2.
 

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

@@ -6,6 +6,6 @@ sidebar:
   order: 10
 ---
 
-import { ListExamples } from "~/components";
+import { ResourcesBySelector } from "~/components";
 
-<ListExamples directory="rules/cloud-connector/examples/" />
+<ResourcesBySelector directory="rules/cloud-connector/examples/" types={["example"]} />

src/content/docs/rules/compression-rules/examples/index.mdx

@@ -6,6 +6,6 @@ sidebar:
   order: 10
 ---
 
-import { ListExamples } from "~/components";
+import { ResourcesBySelector } from "~/components";
 
-<ListExamples directory="rules/compression-rules/examples/" />
+<ResourcesBySelector directory="rules/compression-rules/examples/" types={["example"]} />

src/content/docs/rules/configuration-rules/examples/index.mdx

@@ -6,6 +6,6 @@ sidebar:
   order: 10
 ---
 
-import { ListExamples } from "~/components";
+import { ResourcesBySelector } from "~/components";
 
-<ListExamples directory="rules/configuration-rules/examples/" />
+<ResourcesBySelector directory="rules/configuration-rules/examples/" types={["example"]} />

src/content/docs/rules/examples.mdx

@@ -6,11 +6,13 @@ sidebar:
   order: 2
 ---
 
-import { ListExamples, GlossaryTooltip } from "~/components";
+import { ResourcesBySelector, GlossaryTooltip } from "~/components";
 
 Explore the following <GlossaryTooltip term="code example">examples</GlossaryTooltip> for Rules.
 
-<ListExamples
-	filters={["products", "goal", "operation"]}
+<ResourcesBySelector
+	directory="rules/examples/"
+	types={["example"]}
 	additionalProducts={["Cache Rules"]}
+filterables={["products", "goal", "operation"]}
 />

src/content/docs/rules/origin-rules/examples/index.mdx

@@ -6,6 +6,6 @@ sidebar:
   order: 5
 ---
 
-import { ListExamples } from "~/components";
+import { ResourcesBySelector } from "~/components";
 
-<ListExamples directory="rules/origin-rules/examples/" />
+<ResourcesBySelector directory="rules/origin-rules/examples/" types={["example"]} />

src/content/docs/rules/snippets/examples/index.mdx

@@ -7,13 +7,14 @@ sidebar:
   order: 7
 ---
 
-import { ListExamples } from "~/components";
+import { ResourcesBySelector } from "~/components";
 
 Refer to the following examples to get started creating your snippet code.
 
 Refer to [How it works](/rules/snippets/how-it-works/) and [Create a snippet in the dashboard](/rules/snippets/create-dashboard/) for overall guidance.
 
-<ListExamples
+<ResourcesBySelector
 	directory="rules/snippets/examples/"
-	filters={["goal", "operation"]}
+	tags={["goal", "operation"]}
+	types={["example"]}
 />

src/content/docs/rules/transform/examples/index.mdx

@@ -6,6 +6,6 @@ sidebar:
   order: 10
 ---
 
-import { ListExamples } from "~/components";
+import { ResourcesBySelector } from "~/components";
 
-<ListExamples directory="rules/transform/examples/" filters={["operation"]} />
+<ResourcesBySelector directory="rules/transform/examples/" types={["example"]} filterables={["operation"]} />

src/content/docs/rules/url-forwarding/examples/index.mdx

@@ -6,6 +6,6 @@ sidebar:
   order: 10
 ---
 
-import { ListExamples } from "~/components";
+import { ResourcesBySelector } from "~/components";
 
-<ListExamples directory="rules/url-forwarding/examples/" />
+<ResourcesBySelector directory="rules/url-forwarding/examples/" types={["example"]} />

src/content/docs/stream/examples/index.mdx

@@ -7,6 +7,6 @@ sidebar:
   order: 10
 ---
 
-import { ListExamples } from "~/components";
+import { ResourcesBySelector } from "~/components";
 
-<ListExamples directory="stream/examples/" />
+<ResourcesBySelector directory="stream/examples/" types={["example"]} />

src/content/docs/turnstile/reference/workers-templates/index.mdx

@@ -8,8 +8,8 @@ sidebar:
     hideIndex: true
 ---
 
-import { ListExamples } from "~/components";
+import { ResourcesBySelector } from "~/components";
 
 Refer to the templates below to integrate Turnstile with [Cloudflare Workers](/workers/):
 
-<ListExamples directory="turnstile/reference/workers-templates/" />
+<ResourcesBySelector directory="turnstile/reference/workers-templates/" types={["example"]} />

src/content/docs/workers/examples/index.mdx

@@ -7,8 +7,8 @@ sidebar:
   order: 3
 ---
 
-import { GlossaryTooltip, ListExamples } from "~/components";
+import { GlossaryTooltip, ResourcesBySelector } from "~/components";
 
 Explore the following <GlossaryTooltip term="code example">examples</GlossaryTooltip> for Workers.
 
-<ListExamples directory="workers/examples/" filters={["tags"]} />
+<ResourcesBySelector directory="workers/examples/" types={["example"]} filterables={["tags"]} />

src/content/docs/workflows/examples/index.mdx

@@ -9,8 +9,8 @@ sidebar:
     hideIndex: true
 ---
 
-import { GlossaryTooltip, ListExamples } from "~/components";
+import { GlossaryTooltip, ResourcesBySelector } from "~/components";
 
 Explore the following <GlossaryTooltip term="code example">examples</GlossaryTooltip> for Workflows.
 
-<ListExamples />
+<ResourcesBySelector directory="workflows/examples/" types={["example"]} />

src/schemas/stream.ts

@@ -10,6 +10,7 @@ export const streamSchema = z.object({
 	transcript: z.string().optional(),
 	chapters: z.record(z.string(), z.string()).optional(),
 	tags: z.array(z.string()).optional(),
+	updated: z.date().optional(),
 	thumbnail: z
 		.object({
 			url: z.string(),