mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
Anthony Lio
6d08a747f1
## What kind of change does this PR introduce? follow-up to #50235 to reduce reference page payloads and cold rendering overhead ## What is the current behavior? reference pages ship a large rsc payload inside the html _ most of it is duplication rather than content along with shiki that writes ~30 character css variable name for every syntax token making the page heavy in some cases ## What is the new behavior? - moves repeated styles into shared css and uses compact, namespaced token classes - renders details icons inside the client trigger - follows shiki’s guidance to [reuse one highlighter](https://shiki.style/guide/best-performance#cache-the-highlighter-instance) and [load languages on demand](https://shiki.style/guide/best-performance#use-shorthands) `page size` page | before | after | change -- | -- | -- | -- javascript | 10.61 mb | 8.28 mb | -21.9% dart | 4.59 mb | 4.13 mb | -10.1% python | 4.38 mb | 3.73 mb | -14.9% swift | 2.87 mb | 2.56 mb | -10.9% server | 1.59 mb | 1.35 mb | -15.2% kotlin | 3.42 mb | 3.17 mb | -7.2% `cold initialization` language | before | after | reduction -- | -- | -- | -- bash | 2,180 ms | 23 ms | 98.95% javascript | 2,245 ms | 38 ms | 98.29% ## Additional context measured on a local production build which uses the checked in generated content _ production has larger sdk data, so absolute sizes there will be higher <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added reusable expand/collapse controls for API reference details, with updated icons, labels, and styling. * Improved code block rendering with class-based syntax highlighting, wrapped-code support, responsive layouts, and lazy language loading. * **Style** * Added theme-aware syntax-token colors, line-number styling, and configurable code-block shadows. * Consolidated expandable reference panel and item styling. * **Tests** * Added coverage for syntax highlighting, code block rendering, language support, token stability, and reference details. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
20 lines
709 B
CSS
20 lines
709 B
CSS
@utility reference-details-trigger {
|
|
@apply w-fit rounded-full px-5 py-1 border border-default;
|
|
@apply flex items-center gap-2 text-left text-sm text-foreground-light;
|
|
@apply hover:bg-surface-100;
|
|
@apply data-open:w-full data-open:rounded-b-none data-open:rounded-tl-lg data-open:rounded-tr-lg;
|
|
@apply transition [transition-property:width,background-color];
|
|
}
|
|
|
|
@utility reference-details-trigger-icon {
|
|
@apply text-foreground-muted group-data-closed:rotate-45 transition-transform;
|
|
}
|
|
|
|
@utility reference-details-panel {
|
|
@apply border-b border-x border-default rounded-b-lg;
|
|
}
|
|
|
|
@utility reference-details-item {
|
|
@apply px-5 py-3 border-t border-default first:border-t-0 flex flex-col gap-3;
|
|
}
|