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 -->
This commit is contained in:
Danny White authored and GitHub committed 2026-08-03 00:52:44 +00:00
1 parent e7796315d2
commit c0f1ef51fb
11 files changed
+581 -557

No files matched your search

+5 -367
View File
@@ -5,214 +5,13 @@ description: 'Resources for getting started with Supabase.'
hideToc: true
---
<div className="flex flex-col gap-12 my-12">
<ContentListings id="getting-started-overview" />
<div>
<div className="grid grid-cols-12 gap-6 not-prose">
<Link href="/guides/ai-tools" className="col-span-12 md:col-span-6 xl:col-span-4" passHref>
<GlassPanel title="Build with AI tools" hasLightIcon={true} showIconBg={true}>
Develop with Supabase AI-first using plugins, MCP, and skills.
</GlassPanel>
</Link>
<Link
href="/guides/getting-started/api-keys"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="API Keys" hasLightIcon={true} showIconBg={true}>
Learn about the different API keys in Supabase and how to use them.
</GlassPanel>
</Link>
<Link
href="/guides/local-development"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Local Development" hasLightIcon={true} showIconBg={true}>
Use the Supabase CLI to develop locally and collaborate between teams.
</GlassPanel>
</Link>
</div>
</div>
</div>
## Use cases
<div className="grid lg:grid-cols-12 gap-6 not-prose">
<Link href="/guides/ai#examples" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="AI, Vectors, and embeddings"
icon="/docs/img/icons/openai_logo"
hasLightIcon={true}
>
Build AI-enabled applications using our Vector toolkit.
</GlassPanel>
</Link>
<Link
href="https://github.com/vercel/nextjs-subscription-payments#nextjs-subscription-payments-starter"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Subscription Payments (SaaS)" icon="/docs/img/icons/nextjs-icon">
Clone, deploy, and fully customize a SaaS subscription application with Next.js.
</GlassPanel>
</Link>
<Link
href="https://github.com/supabase-community/partner-gallery-example#supabase-partner-gallery-example"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Partner Gallery" icon="/docs/img/icons/nextjs-icon">
Postgres full-text search, image storage, and more.
</GlassPanel>
</Link>
</div>
## Framework quickstarts
<ContentListings id="getting-started-use-cases" />
<$Show if="docs:framework_quickstarts">
<div className="grid lg:grid-cols-12 gap-6 not-prose">
<Link
href="/guides/getting-started/quickstarts/reactjs"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="React" icon="/docs/img/icons/react-icon">
Learn how to create a Supabase project, add some sample data to your database, and query the
data from a React app.
</GlassPanel>
</Link>
<Link
href="/guides/getting-started/quickstarts/nextjs"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Next.js" icon="/docs/img/icons/nextjs-icon" hasLightIcon={true}>
Learn how to create a Supabase project, add some sample data to your database, and query the
data from a Next.js app.
</GlassPanel>
</Link>
<Link
href="/guides/getting-started/quickstarts/nuxtjs"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Nuxt" icon="/docs/img/icons/nuxt-icon">
Learn how to create a Supabase project, add some sample data to your database, and query the
data from a Nuxt app.
</GlassPanel>
</Link>
<Link
href="/guides/getting-started/quickstarts/hono"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Hono" icon="/docs/img/icons/hono-icon">
Learn how to create a Supabase project, add some sample data to your database, secure it with
auth, and query the data from a Hono app.
</GlassPanel>
</Link>
<Link
href="/guides/getting-started/quickstarts/redwoodjs"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="RedwoodJS" icon="/docs/img/icons/redwood-icon">
Learn how to create a Supabase project, add some sample data to your database using Prisma
migration and seeds, and query the data from a RedwoodJS app.
</GlassPanel>
</Link>
<$Show if="sdk:dart">
<Link
href="/guides/getting-started/quickstarts/flutter"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Flutter" icon="/docs/img/icons/flutter-icon">
Learn how to create a Supabase project, add some sample data to your database, and query the
data from a Flutter app.
</GlassPanel>
</Link>
</$Show>
<$Show if="sdk:swift">
<Link
href="/guides/getting-started/quickstarts/ios-swiftui"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="iOS SwiftUI" icon="/docs/img/icons/swift-icon">
Learn how to create a Supabase project, add some sample data to your database, and query the
data from an iOS app.
</GlassPanel>
</Link>
</$Show>
<$Show if="sdk:kotlin">
<Link
href="/guides/getting-started/quickstarts/kotlin"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Android Kotlin" icon="/docs/img/icons/kotlin-icon">
Learn how to create a Supabase project, add some sample data to your database, and query the
data from an Android Kotlin app.
</GlassPanel>
</Link>
</$Show>
<Link
href="/guides/getting-started/quickstarts/sveltekit"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="SvelteKit" icon="/docs/img/icons/svelte-icon">
Learn how to create a Supabase project, add some sample data to your database, and query the
data from a SvelteKit app.
</GlassPanel>
</Link>
<Link
href="/guides/getting-started/quickstarts/solidjs"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="SolidJS" icon="/docs/img/icons/solidjs-icon">
Learn how to create a Supabase project, add some sample data to your database, and query the
data from a SolidJS app.
</GlassPanel>
</Link>
<Link
href="/guides/getting-started/quickstarts/vue"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Vue" icon="/docs/img/icons/vuejs-icon">
Learn how to create a Supabase project, add some sample data to your database, and query the
data from a Vue app.
</GlassPanel>
</Link>
<Link
href="/guides/getting-started/quickstarts/tanstack"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="TanStack Start" icon="/docs/img/icons/tanstack-icon" hasLightIcon={true}>
Learn how to create a Supabase project, add some sample data to your database, and query the
data from a TanStack Start app.
</GlassPanel>
</Link>
<Link
href="/guides/getting-started/quickstarts/refine"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Refine" icon="/docs/img/icons/refine-icon">
Learn how to create a Supabase project, add some sample data to your database, and query the
data from a Refine app.
</GlassPanel>
</Link>
</div>
<ContentListings id="getting-started-framework-quickstarts" />
</$Show>
@@ -224,173 +23,12 @@ hideToc: true
<$Show if="docs:web_apps">
## Web app demos
<ContentListings id="getting-started-web-app-demos" />
<div className="grid lg:grid-cols-12 gap-6 not-prose">
<Link href="/guides/getting-started/tutorials/with-nextjs" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Next.js"
icon="/docs/img/icons/nextjs-icon"
hasLightIcon={true}
>
Learn how to build a user management app with Next.js and Supabase Database, Auth, and Storage functionality.
</GlassPanel>
</Link>
<Link href="/guides/getting-started/tutorials/with-react" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="React"
icon="/docs/img/icons/react-icon"
>
Learn how to build a user management app with React and Supabase Database, Auth, and Storage functionality.
</GlassPanel>
</Link>
<Link href="/guides/getting-started/tutorials/with-vue-3" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Vue 3"
icon="/docs/img/icons/vuejs-icon"
>
Learn how to build a user management app with Vue 3 and Supabase Database, Auth, and Storage functionality.
</GlassPanel>
</Link>
<Link href="/guides/getting-started/tutorials/with-nuxt-3" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Nuxt 3"
icon="/docs/img/icons/nuxt-icon"
>
Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.
</GlassPanel>
</Link>
<Link href="/guides/getting-started/tutorials/with-angular" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Angular"
icon="/docs/img/icons/angular-icon"
>
Learn how to build a user management app with Angular and Supabase Database, Auth, and Storage functionality.
</GlassPanel>
</Link>
<Link href="/guides/getting-started/tutorials/with-redwoodjs" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="RedwoodJS"
icon="/docs/img/icons/redwood-icon"
>
Learn how to build a user management app with RedwoodJS and Supabase Database, Auth, and Storage functionality.
</GlassPanel>
</Link>
<Link href="/guides/getting-started/tutorials/with-svelte" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Svelte"
icon="/docs/img/icons/svelte-icon"
>
Learn how to build a user management app with Svelte and Supabase Database, Auth, and Storage functionality.
</GlassPanel>
</Link>
<Link href="/guides/getting-started/tutorials/with-sveltekit" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="SvelteKit"
icon="/docs/img/icons/svelte-icon"
>
Learn how to build a user management app with SvelteKit and Supabase Database, Auth, and Storage functionality.
</GlassPanel>
</Link>
<Link href="/guides/getting-started/tutorials/with-refine" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Refine"
icon="/docs/img/icons/refine-icon"
>
Learn how to build a user management app with Refine and Supabase Database, Auth, and Storage functionality.
</GlassPanel>
</Link>
</div>
</$Show>
<$Show if="docs:mobile_tutorials">
## Mobile tutorials
<ContentListings id="getting-started-mobile-tutorials" />
<div className="grid lg:grid-cols-12 gap-6 not-prose">
<$Show if="sdk:dart">
<Link href="/guides/getting-started/tutorials/with-flutter" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Flutter"
icon="/docs/img/icons/flutter-icon"
>
Learn how to build a user management app with Flutter and Supabase Database, Auth, and Storage functionality.
</GlassPanel>
</Link>
</$Show>
<Link
href="/guides/getting-started/tutorials/with-expo-react-native"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel
title="Expo React Native"
icon="/docs/img/icons/expo-icon"
hasLightIcon={true}
>
Learn how to build a user management app with Expo React Native and Supabase Database, Auth, and Storage functionality.
</GlassPanel>
</Link>
<Link
href="/guides/auth/quickstarts/with-expo-react-native-social-auth"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel
title="Expo React Native Social Auth"
icon="/docs/img/icons/expo-icon"
hasLightIcon={true}
>
Learn how to implement social authentication in an app with Expo React Native and Supabase Database and Auth functionality.
</GlassPanel>
</Link>
<$Show if="sdk:kotlin">
<Link href="/guides/getting-started/tutorials/with-kotlin" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Android Kotlin"
icon="/docs/img/icons/kotlin-icon"
>
Learn how to build a product management app with Android and Supabase Database, Auth, and Storage functionality.
</GlassPanel>
</Link>
</$Show>
<$Show if="sdk:swift">
<Link href="/guides/getting-started/tutorials/with-swift" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="iOS Swift"
icon="/docs/img/icons/swift-icon"
>
Learn how to build a user management app with iOS and Supabase Database, Auth, and Storage functionality.
</GlassPanel>
</Link>
</$Show>
<Link href="/guides/getting-started/tutorials/with-ionic-react" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Ionic React"
icon="/docs/img/icons/ionic-icon"
>
Learn how to build a user management app with Ionic React and Supabase Database, Auth, and Storage functionality.
</GlassPanel>
</Link>
<Link href="/guides/getting-started/tutorials/with-ionic-vue" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Ionic Vue"
icon="/docs/img/icons/ionic-icon"
>
Learn how to build a user management app with Ionic Vue and Supabase Database, Auth, and Storage functionality.
</GlassPanel>
</Link>
<Link
href="/guides/getting-started/tutorials/with-ionic-angular"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel
title="Ionic Angular"
icon="/docs/img/icons/ionic-icon"
>
Learn how to build a user management app with Ionic Angular and Supabase Database, Auth, and Storage functionality.
</GlassPanel>
</Link>
</div>
</$Show>
+3 -183
View File
@@ -6,188 +6,8 @@ hideToc: true
{/* <!-- vale off --> */}
<div className="flex flex-col gap-12 my-12">
<ContentListings id="resources-overview" />
<div>
<ContentListings id="resources-migrate" />
<div className="grid grid-cols-12 gap-6 not-prose">
<Link href="/guides/getting-started" className="col-span-12 md:col-span-6 xl:col-span-4" passHref>
<GlassPanel title="Examples" hasLightIcon={true} showIconBg={true}>
Official GitHub examples, curated content from the community, and more.
</GlassPanel>
</Link>
<Link
href="/guides/resources/glossary"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Glossary" hasLightIcon={true} showIconBg={true}>
Definitions for terminology and acronyms used in the Supabase documentation.
</GlassPanel>
</Link>
</div>
</div>
<div>
<div className="max-w-xl mb-6">
## Migrate to Supabase
</div>
<div className="grid grid-cols-12 gap-6 not-prose">
<Link
href="/guides/platform/migrating-to-supabase/auth0"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Auth0" icon="/docs/img/icons/auth0-icon" hasLightIcon={true}>
Move your auth users from Auth0 to a Supabase project.
</GlassPanel>
</Link>
<Link
href="/guides/platform/migrating-to-supabase/firebase-auth"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Firebase Auth" icon="/docs/img/icons/firebase-icon">
Move your auth users from a Firebase project to a Supabase project.
</GlassPanel>
</Link>
<Link
href="/guides/platform/migrating-to-supabase/firestore-data"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Firestore Data" icon="/docs/img/icons/firebase-icon">
Migrate the contents of a Firestore collection to a single Postgres table.
</GlassPanel>
</Link>
<Link
href="/guides/platform/migrating-to-supabase/firebase-storage"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Firebase Storage" icon="/docs/img/icons/firebase-icon">
Convert your Firebase Storage files to Supabase Storage.
</GlassPanel>
</Link>
<Link
href="/guides/platform/migrating-to-supabase/heroku"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Heroku" icon="/docs/img/icons/heroku-icon">
Migrate your Heroku Postgres database to Supabase.
</GlassPanel>
</Link>
<Link
href="/guides/platform/migrating-to-supabase/render"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Render" icon="/docs/img/icons/render-icon">
Migrate your Render Postgres database to Supabase.
</GlassPanel>
</Link>
<Link
href="/guides/platform/migrating-to-supabase/amazon-rds"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Amazon RDS" icon="/docs/img/icons/aws-rds-icon">
Migrate your Amazon RDS database to Supabase.
</GlassPanel>
</Link>
<Link
href="/guides/platform/migrating-to-supabase/postgres"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Postgres" icon="/docs/img/icons/postgres-icon">
Migrate your Postgres database to Supabase.
</GlassPanel>
</Link>
<Link
href="/guides/platform/migrating-to-supabase/mysql"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="MySQL" icon="/docs/img/icons/mysql-icon">
Migrate your MySQL database to Supabase.
</GlassPanel>
</Link>
<Link
href="/guides/platform/migrating-to-supabase/mssql"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Microsoft SQL Server" icon="/docs/img/icons/mssql-icon">
Migrate your Microsoft SQL Server database to Supabase.
</GlassPanel>
</Link>
</div>
</div>
<div>
<div className="max-w-xl mb-6">
## Postgres resources
</div>
<div className="grid grid-cols-12 gap-6 not-prose">
<Link
href="/guides/database/postgres/indexes"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Managing Indexes" hasLightIcon={true} showIconBg={true}>
Improve query performance using various index types in Postgres.
</GlassPanel>
</Link>
<Link
href="/guides/database/postgres/cascade-deletes"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Cascade Deletes" hasLightIcon={true} showIconBg={true}>
Understand the types of foreign key constraint deletes.
</GlassPanel>
</Link>
<Link
href="/guides/database/postgres/dropping-all-tables-in-schema"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Drop all tables in schema" hasLightIcon={true} showIconBg={true}>
Delete all tables in a given schema.
</GlassPanel>
</Link>
<Link
href="/guides/database/postgres/first-row-in-group"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Select first row per group" hasLightIcon={true} showIconBg={true}>
Retrieve the first row in each distinct group.
</GlassPanel>
</Link>
<Link
href="/guides/database/postgres/which-version-of-postgres"
className="col-span-12 md:col-span-6 xl:col-span-4"
passHref
>
<GlassPanel title="Print Postgres version" hasLightIcon={true} showIconBg={true}>
Find out which version of Postgres you are running.
</GlassPanel>
</Link>
</div>
</div>
{/* end of container */}
</div>
<ContentListings id="resources-postgres" />