[Docs Site] Using ResourceBySelector component where possible (#24389)

* Replacing ListExamples with ResourceBySelector.

* Add optional showLastUpdated property

* tweaks to schema

* Ensuring example directory is always specified

* Removing style guide page for ListExamples

* Keeping ListTutorials for now

* remove component and import

* component def tweaks

---------

Co-authored-by: kodster28 <[email protected]>

Author: Oxyjun

src/components/ListExamples.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.astro

@@ -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/ResourcesBySelector.tsx

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

@@ -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/cloudflare-one/api-terraform/access-api-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/containers/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/d1/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/durable-objects/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/images/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"]} />