[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/components/index.ts

@@ -29,7 +29,6 @@ export { default as HomepageHero } from "./HomepageHero.astro";
 export { default as InlineBadge } from "./InlineBadge.astro";
 export { default as LastReviewed } from "./LastReviewed.astro";
 export { default as LinkTitleCard } from "./LinkTitleCard.astro";
-export { default as ListExamples } from "./ListExamples.astro";
 export { default as ListTutorials } from "./ListTutorials.astro";
 export { default as Markdown } from "./Markdown.astro";
 export { default as MetaInfo } from "./MetaInfo.astro";

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"]} />