## 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?
Feature, bug fix.
Part 4 of 6 in a stack that splits the library redesign into reviewable
pieces.
## What is the current behavior?
`BlockItem` renders the Open in v0 button, and `BlockItem` sits inside
the Installation section — so the button appears partway down the page.
On guides that install a client first it appears twice, once for the
client and once for the block, and the MDX opts the extra one out with
`showOpenInV0={false}`.
So the page's markup already knows which registry item v0 should open.
Only the component using it is in the wrong place.
## What is the new behavior?
Velite reads that same signal at build time and records the item on the
document, so the page header renders one icon button beside the
framework selector, above the fold. `BlockItem` is left rendering only
the install command.
Guides with no installable item — the getting-started pages, the
TanStack DB generator, and the starters — get no button. Guides that
install a client first resolve to the block, not the client.
## Additional context
63 of 73 documents resolve to a registry item; the 10 that don't are
exactly the ones that should have no button.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Documentation pages now display an “Open in v0” button when supported.
* The button uses a compact, icon-only design alongside the framework
selector.
* **Improvements**
* The applicable v0 destination is determined automatically from
documentation content.
* The page-level action replaces individual block-level v0 buttons,
providing a more consistent experience.
* The button includes an accessible label and appears only for
documentation with a supported v0 destination.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## Summary
- `contentlayer2@0.4.6` is unmaintained and drags in a heavy, stale
dependency graph (esbuild pinned to 0.17–0.20, mdx-bundler, old
`@opentelemetry/core`) that was the recurring source of vuln bumps.
- Migrates all three apps that used it — `design-system`, `ui-library`,
`learn` — to [Velite](https://velite.js.org), preserving the generated
typed `allDocs`/`Doc` collection and the `body.code` + `useMDXComponent`
runtime via a small shared local hook.
- Same MDX pipeline (remark-gfm, remark-code-import, rehype-slug,
rehype-pretty-code w/ Shiki compat + local theme,
rehype-autolink-headings, custom
`__rawString__`/`__src__`/`__event__`/`__style__` visitors) ported 1:1
into each app's `velite.config.js`.
- `learn`'s extra frontmatter fields (`chapterNumber`, `explore`,
`courseHero`) are now backed by real Velite/Zod schema types, so the
`(doc as any)` casts in `get-next-page.ts` / `get-current-chapter.ts` /
the doc page could be dropped.
- `next.config.mjs` no longer wraps with `withContentlayer`; since
Velite has no Next.js webpack-plugin equivalent, each app's `dev` script
now runs `velite dev` and `next dev` in parallel via `npm-run-all`.
Ref:
[FE-3861](https://linear.app/supabase/issue/FE-3861/migrate-off-contentlayer2-learn-ui-library-design-system-to-shed)
## Test plan
- [x] `pnpm build:content` (Velite build) succeeds for all three apps
- [x] `pnpm typecheck` passes for all three apps
- [ ] Manual smoke test of `pnpm dev` for each app in a browser (docs
pages render, TOC, copy-button, code highlighting)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Improved content generation across documentation, learning materials,
and the UI library for more consistent pages.
* Preserved MDX rendering, navigation, table of contents, course
metadata, source previews, and component examples.
* Improved consistency when displaying documentation and interactive
examples.
* Improved application loading by optimizing how interface components
are delivered.
* **Chores**
* Streamlined content compilation and development workflows across the
design system, learning area, and UI library.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
