diff --git a/src/components/ListExamples.astro b/src/components/ListExamples.astro deleted file mode 100644 index 238f263931a95f9..000000000000000 --- a/src/components/ListExamples.astro +++ /dev/null @@ -1,182 +0,0 @@ ---- -import { z } from "astro:schema"; -import { getCollection, type CollectionEntry } from "astro:content"; -import { marked } from "marked"; - -import { CardGrid } from "@astrojs/starlight/components"; -import LinkTitleCard from "~/components/LinkTitleCard.astro"; - -type Props = z.infer; -type Data = keyof CollectionEntry<"docs">["data"]; - -const props = z.object({ - directory: z.string().optional(), - filters: z.custom().array().optional(), - additionalProducts: z.string().array().optional(), -}); - -const { directory, filters, additionalProducts } = props.parse(Astro.props); - -let target = Astro.params.slug?.split("/")[0]; - -if (directory) { - target = directory; -} else { - target = target?.concat("/"); -} - -const examples = await getCollection("docs", (entry) => { - return ( - entry.data.pcx_content_type === "example" && - ((target && entry.id.startsWith(target)) || - (additionalProducts !== undefined && - entry.data.products?.some((v: string) => - additionalProducts?.includes(v), - ))) - ); -}); - -const filterValues: Record = {}; - -if (filters) { - for (const filter of filters) { - const values = examples.flatMap((entry) => { - if (filter === "head") return []; - - if (filter in entry.data) { - return entry.data[filter]; - } - - return []; - }); - - const unique = [...new Set(values.flatMap((v) => v?.toString() ?? []))]; - - filterValues[filter] = unique; - } -} ---- - -{ - filters && ( - <> -
- {filters.map((filter) => ( -
- - -
- ))} -
-
{examples.length} examples
- - ) -} - -
- - { - examples - .sort((a, b) => a.data.title.localeCompare(b.data.title)) - .map((example) => { - const filterAttributes: { [index: string]: any } = {}; - - if (filters) { - for (const filter of filters) { - const hasFilterableProperty = filter in example.data; - - if (hasFilterableProperty) { - filterAttributes[`data-${filter}`] = example.data[filter]; - } - } - } - - return ( - ${example.data.products.join(", ")}` : ""}`, - )} - /> - ); - }) - } - -
- - diff --git a/src/components/ResourcesBySelector.astro b/src/components/ResourcesBySelector.astro index 1d4fdefb9ed783e..76de754217d8f3e 100644 --- a/src/components/ResourcesBySelector.astro +++ b/src/components/ResourcesBySelector.astro @@ -18,6 +18,7 @@ const props = z.object({ filterables: z.custom().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 /> diff --git a/src/components/ResourcesBySelector.tsx b/src/components/ResourcesBySelector.tsx index 6e6239433cf73b8..6d8f052def97db9 100644 --- a/src/components/ResourcesBySelector.tsx +++ b/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(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} )} + {showLastUpdated && ( + + Updated {timeAgo(page.data.updated)} + + )} ); })} diff --git a/src/components/index.ts b/src/components/index.ts index 4ab680904983aac..5ba0fb539f0548c 100644 --- a/src/components/index.ts +++ b/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"; diff --git a/src/content/docs/cloudflare-one/api-terraform/access-api-examples/index.mdx b/src/content/docs/cloudflare-one/api-terraform/access-api-examples/index.mdx index c75d2b31dc19fac..a6659a8668f2ca9 100644 --- a/src/content/docs/cloudflare-one/api-terraform/access-api-examples/index.mdx +++ b/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 - + diff --git a/src/content/docs/containers/examples/index.mdx b/src/content/docs/containers/examples/index.mdx index 6fa79f5c2c722e1..a3ffd7c1dbc9078 100644 --- a/src/content/docs/containers/examples/index.mdx +++ b/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: - + diff --git a/src/content/docs/d1/examples/index.mdx b/src/content/docs/d1/examples/index.mdx index 991ad6cbf6b5339..6aa87762b42139b 100644 --- a/src/content/docs/d1/examples/index.mdx +++ b/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 examples for D1. - + diff --git a/src/content/docs/durable-objects/examples/index.mdx b/src/content/docs/durable-objects/examples/index.mdx index 5633c8a5350ed13..6de6e134b308fbc 100644 --- a/src/content/docs/durable-objects/examples/index.mdx +++ b/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 examples for Durable Objects. - + diff --git a/src/content/docs/images/examples/index.mdx b/src/content/docs/images/examples/index.mdx index 59fd8bc95ffd0e9..a5d5f9e6699f3e6 100644 --- a/src/content/docs/images/examples/index.mdx +++ b/src/content/docs/images/examples/index.mdx @@ -7,6 +7,6 @@ sidebar: order: 11 --- -import { ListExamples } from "~/components"; +import { ResourcesBySelector } from "~/components"; - \ No newline at end of file + \ No newline at end of file diff --git a/src/content/docs/kv/examples/index.mdx b/src/content/docs/kv/examples/index.mdx index e310442b84c8006..d4777d34842fceb 100644 --- a/src/content/docs/kv/examples/index.mdx +++ b/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 examples for KV. - + diff --git a/src/content/docs/pub-sub/examples/index.mdx b/src/content/docs/pub-sub/examples/index.mdx index d4097ec2bee19c8..91bb59a90725fa3 100644 --- a/src/content/docs/pub-sub/examples/index.mdx +++ b/src/content/docs/pub-sub/examples/index.mdx @@ -7,6 +7,6 @@ sidebar: order: 2 --- -import { ListExamples } from "~/components"; +import { ResourcesBySelector } from "~/components"; - + diff --git a/src/content/docs/queues/examples/index.mdx b/src/content/docs/queues/examples/index.mdx index 8aa238d9311478d..7142c9a013619e9 100644 --- a/src/content/docs/queues/examples/index.mdx +++ b/src/content/docs/queues/examples/index.mdx @@ -9,6 +9,6 @@ head: content: Cloudflare Queues - Examples --- -import { ListExamples } from "~/components"; +import { ResourcesBySelector } from "~/components"; - + diff --git a/src/content/docs/r2/tutorials/index.mdx b/src/content/docs/r2/tutorials/index.mdx index 38cf6b0a18d37f3..88f3829e302c924 100644 --- a/src/content/docs/r2/tutorials/index.mdx +++ b/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 tutorials to help you get started with R2. diff --git a/src/content/docs/rules/cloud-connector/examples/index.mdx b/src/content/docs/rules/cloud-connector/examples/index.mdx index b7491731a416d90..259820abbaef6c5 100644 --- a/src/content/docs/rules/cloud-connector/examples/index.mdx +++ b/src/content/docs/rules/cloud-connector/examples/index.mdx @@ -6,6 +6,6 @@ sidebar: order: 10 --- -import { ListExamples } from "~/components"; +import { ResourcesBySelector } from "~/components"; - + diff --git a/src/content/docs/rules/compression-rules/examples/index.mdx b/src/content/docs/rules/compression-rules/examples/index.mdx index 38886902e126acf..19fc1906301e82d 100644 --- a/src/content/docs/rules/compression-rules/examples/index.mdx +++ b/src/content/docs/rules/compression-rules/examples/index.mdx @@ -6,6 +6,6 @@ sidebar: order: 10 --- -import { ListExamples } from "~/components"; +import { ResourcesBySelector } from "~/components"; - + diff --git a/src/content/docs/rules/configuration-rules/examples/index.mdx b/src/content/docs/rules/configuration-rules/examples/index.mdx index 68f4d3bc1ad0eb6..1a100c345415517 100644 --- a/src/content/docs/rules/configuration-rules/examples/index.mdx +++ b/src/content/docs/rules/configuration-rules/examples/index.mdx @@ -6,6 +6,6 @@ sidebar: order: 10 --- -import { ListExamples } from "~/components"; +import { ResourcesBySelector } from "~/components"; - + diff --git a/src/content/docs/rules/examples.mdx b/src/content/docs/rules/examples.mdx index 068b9017aadb5fa..8dde5961b885dd6 100644 --- a/src/content/docs/rules/examples.mdx +++ b/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 examples for Rules. - diff --git a/src/content/docs/rules/origin-rules/examples/index.mdx b/src/content/docs/rules/origin-rules/examples/index.mdx index 8e0d6abfb026aa5..ea6c3ce2c515b62 100644 --- a/src/content/docs/rules/origin-rules/examples/index.mdx +++ b/src/content/docs/rules/origin-rules/examples/index.mdx @@ -6,6 +6,6 @@ sidebar: order: 5 --- -import { ListExamples } from "~/components"; +import { ResourcesBySelector } from "~/components"; - + diff --git a/src/content/docs/rules/snippets/examples/index.mdx b/src/content/docs/rules/snippets/examples/index.mdx index 568018e12cd88b1..376bd26c1da85c4 100644 --- a/src/content/docs/rules/snippets/examples/index.mdx +++ b/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. - diff --git a/src/content/docs/rules/transform/examples/index.mdx b/src/content/docs/rules/transform/examples/index.mdx index 384f225e9d8496e..1c118d6b3a11669 100644 --- a/src/content/docs/rules/transform/examples/index.mdx +++ b/src/content/docs/rules/transform/examples/index.mdx @@ -6,6 +6,6 @@ sidebar: order: 10 --- -import { ListExamples } from "~/components"; +import { ResourcesBySelector } from "~/components"; - + diff --git a/src/content/docs/rules/url-forwarding/examples/index.mdx b/src/content/docs/rules/url-forwarding/examples/index.mdx index acecb9bdb7a5d0d..5f10952ef736fab 100644 --- a/src/content/docs/rules/url-forwarding/examples/index.mdx +++ b/src/content/docs/rules/url-forwarding/examples/index.mdx @@ -6,6 +6,6 @@ sidebar: order: 10 --- -import { ListExamples } from "~/components"; +import { ResourcesBySelector } from "~/components"; - + diff --git a/src/content/docs/stream/examples/index.mdx b/src/content/docs/stream/examples/index.mdx index 2b66bbff83f42cc..7eaa09261aae4db 100644 --- a/src/content/docs/stream/examples/index.mdx +++ b/src/content/docs/stream/examples/index.mdx @@ -7,6 +7,6 @@ sidebar: order: 10 --- -import { ListExamples } from "~/components"; +import { ResourcesBySelector } from "~/components"; - + diff --git a/src/content/docs/style-guide/components/list-examples.mdx b/src/content/docs/style-guide/components/list-examples.mdx deleted file mode 100644 index 451b59d4fe05ab4..000000000000000 --- a/src/content/docs/style-guide/components/list-examples.mdx +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: List examples -styleGuide: - component: ListExamples ---- - -```mdx live -import { ListExamples } from "~/components"; - - -``` - -There are also two optional, additional properties: - -- `filters` `string[]`: A list of filters to render that helps someone filter the examples based on values in the frontmatter. -- `additionalProducts` `string[]`: A list of additional product examples to look across our docs for. Looks for anything matching the `products` frontmatter in examples across other areas of the docs. diff --git a/src/content/docs/style-guide/components/resources-by-selector.mdx b/src/content/docs/style-guide/components/resources-by-selector.mdx index 6172e370d91f554..03d7546122f01f5 100644 --- a/src/content/docs/style-guide/components/resources-by-selector.mdx +++ b/src/content/docs/style-guide/components/resources-by-selector.mdx @@ -43,3 +43,11 @@ import { ResourcesBySelector } from "~/components"; - `products` An array of `products` values to filter which content gets pulled into the component. For example, `products={["D1"]}`. + +- `showDescriptions` + + If set to `false`, will only show the titles of associated pages, not the showDescriptions + +- `showLastUpdated` + + If set to `true`, will add the last updated date, which is added in the [`updated` frontmatter value](/style-guide/frontmatter/custom-properties/#updated). diff --git a/src/content/docs/turnstile/reference/workers-templates/index.mdx b/src/content/docs/turnstile/reference/workers-templates/index.mdx index 18b14719507fafd..642c3c87504e335 100644 --- a/src/content/docs/turnstile/reference/workers-templates/index.mdx +++ b/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/): - + diff --git a/src/content/docs/workers/examples/index.mdx b/src/content/docs/workers/examples/index.mdx index 1bb9c9933bba0ac..c6ca2321e73382d 100644 --- a/src/content/docs/workers/examples/index.mdx +++ b/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 examples for Workers. - + diff --git a/src/content/docs/workflows/examples/index.mdx b/src/content/docs/workflows/examples/index.mdx index f958454afc93463..b21a5981df0b10c 100644 --- a/src/content/docs/workflows/examples/index.mdx +++ b/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 examples for Workflows. - + diff --git a/src/schemas/stream.ts b/src/schemas/stream.ts index 9e074217712f496..1738eff10a81c59 100644 --- a/src/schemas/stream.ts +++ b/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(),