Files
supabase/apps/docs/internals/markdown-schema/ContentListings.ts
T
Danny White c0f1ef51fb feat(docs): migrate resources and getting-started to ContentListings (#48517)
## What kind of change does this PR introduce?

Docs update / follow-up to #48379.

## What is the current behavior?

`/guides/resources` and `/guides/getting-started` hand-roll `GlassPanel`
grids in MDX. They look like ContentListings cards after the chrome PR,
but they do not use the shared data files, so they miss PostHog
`docs_content_listing_clicked` telemetry and the CONTRIBUTING
contribution path.

## What is the new behavior?

Those pages use `<ContentListings id="…" />` backed by
`resources.data.ts` and `getting-started.data.ts`, same pattern as
storage.

- Section-level `$Show` wrappers stay for framework / web / mobile
blocks
- Nimbus stays a `$Partial` behind `$Show`
- New optional per-item `feature` field gates SDK links (e.g. Flutter /
Swift / Kotlin) without splitting whole sections
- CONTRIBUTING notes when to use `feature` vs a partial-level `$Show`

## To test

Compare the following against `master`:

-
[Resources](https://docs-git-dnywh-docs-content-listings-resources-239158-supabase.vercel.app/docs/guides/resources):
overview, migrate, and postgres grids; icons in light/dark
- [Getting
started](https://docs-git-dnywh-docs-content-listings-resources-239158-supabase.vercel.app/docs/guides/getting-started):
overview, use cases, framework quickstarts, web demos, mobile tutorials;
nimbus partial when enabled
- Click a card and confirm `docs_content_listing_clicked` fires with the
expected `listingId`

Everything should look and feel the same. It’s just that we’re using
`ContentListings` instead of `GlassPanel` grids.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added centralized Getting Started and Resources content listings,
including quickstarts, demos, tutorials, migration guides, and Postgres
resources.
- Added feature-based visibility controls for individual content listing
items.

- **Improvements**
- Disabled content is now automatically hidden from documentation pages
and generated Markdown.
  - Pages and sections with no available content are omitted entirely.
  - External documentation links are more secure.
- Updated contribution guidance with instructions and examples for
feature flags.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-03 00:52:44 +00:00

59 lines
1.6 KiB
TypeScript

import { withDocsBasePath } from '~/internals/internal-links'
import type { ContentListingGroup } from '~/lib/content-listings.schema'
import {
filterContentListingItems,
getContentListingById,
isExternalContentListingHref,
} from '~/lib/content-listings.utils'
import { getInternalLinkBaseUrl } from '../internal-links'
const HEADING_MARKDOWN: Record<'h2' | 'h3' | 'h4', string> = {
h2: '##',
h3: '###',
h4: '####',
}
export function serializeContentListingGroupToMarkdown(
group: ContentListingGroup,
linkBaseUrl: string
): string {
const items = filterContentListingItems(group.items)
if (!items.length) return ''
const lines: string[] = []
if (group.heading) {
const level = group.headingLevel ?? 'h2'
lines.push(`${HEADING_MARKDOWN[level]} ${group.heading}`)
lines.push('')
}
if (group.description) {
lines.push(group.description)
lines.push('')
}
for (const item of items) {
const href = isExternalContentListingHref(item.href)
? item.href
: `${linkBaseUrl}${withDocsBasePath(item.href)}`
lines.push(`- **[${item.title}](${href}):** ${item.description}`)
}
return lines.join('\n')
}
/**
* Markdown export handler for `<ContentListings id="..." />`. Looks up the
* group by id in the same data registry the React component uses.
*/
export const ContentListings = ({ props }: { props: Record<string, unknown> }): string => {
const id = typeof props.id === 'string' ? props.id : ''
if (!id) return ''
const group = getContentListingById(id)
if (!group) return ''
return serializeContentListingGroupToMarkdown(group, getInternalLinkBaseUrl())
}