Files
supabase/apps/docs
Nik RichersandNik Richers 963182f58e fix: add hasLightIcon field to ContentListings; revert getting-started-overview to GlassPanel (#47467)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix + partial revert.

## What is the current behavior?

1. `ContentListings.client.tsx` unconditionally derives `hasLightIcon`
from `Boolean(item.icon)`. `GlassPanel` appends `-light.svg` to the icon
path in light mode whenever `hasLightIcon` is true. Framework icons
(react, nuxt, hono, redwood, flutter, swift, kotlin, svelte, solidjs,
vue, refine, angular, ionic) have no `-light.svg` variants, causing
broken image requests in light mode for any ContentListings card that
uses them.

2. `getting-started.mdx` uses `<ContentListings
id="getting-started-overview" />` (added in #47097) for the top
three-card grid (Build with AI tools, API Keys, Local Development).

## What is the new behavior?

1. `hasLightIcon` is now an optional field in the item schema (defaults
to `Boolean(item.icon)` for backward compatibility). The component reads
`item.hasLightIcon ?? Boolean(item.icon)`, so data files can opt
specific icons out of the light-mode variant.

2. `<ContentListings id="getting-started-overview" />` is removed and
the original hand-authored GlassPanel grid is restored. The
`gettingStartedGetStarted` data entry and its registry import are also
removed.

ContentListings has no mandate to cover every section of every page: the
goal was for hub and overview pages to have a reasonable, standardized
link section that tooling can lint for. This page doesn't fit that
pattern.

## Additional context

| Check | Result |
|-------|--------|
| `pnpm vitest run lib/content-listings.test.ts` | ✅ 12/12 passed |
| `pnpm lint:mdx` (getting-started.mdx) | ✅ No warnings |

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

* **New Features**
* Updated the Getting Started guide with dedicated tiles for Build with
AI Tools, API Keys, and Local Development.
  * Expanded the available Getting Started content listings.

* **Bug Fixes**
* Improved icon styling in content listings so light icon treatment
reflects each item’s configuration.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Nik Richers <nik@validmind.ai>
2026-07-15 11:06:19 -07:00
..
2026-07-01 12:59:00 +02:00
2026-07-08 12:30:42 +10:00

Reference Docs

Supabase Reference Docs

Maintainers

If you are a maintainer of any tools in the Supabase ecosystem, you can use this site to provide documentation for the tools & libraries that you maintain.

DocSpec

We use documentation specifications which can be used to generate human-readable docs.

  • OpenAPI: for documenting API endpoints.
  • SDKSpec (custom to Supabase): for SDKs and client libraries.
  • ConfigSpec (custom to Supabase): for configuration options.
  • CLISpec (custom to Supabase): for CLI commands and usage.

The benefit of using custom specifications is that we can generate many other types from a strict schema (eg, HTML and manpages). It also means that we can switch to any documentation system we want. On this site we use Next.js, but on Supabase's official website, we use a custom React site and expose only a subset of the available API for each tool.

Contributing

To contribute to docs, see the developers' guide and contributing guide.