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 -->
114 lines
3.3 KiB
CSS
114 lines
3.3 KiB
CSS
@utility code-line-number {
|
|
@apply select-none text-right text-muted/70 pl-3 pr-2 min-h-5 leading-5;
|
|
@apply bg-[var(--row-rest)] sticky left-0 z-10;
|
|
@apply group-hover/row:text-muted group-hover/row:bg-[var(--row-hover)];
|
|
@apply after:pointer-events-none after:absolute after:inset-y-0 after:left-full after:w-4;
|
|
@apply [--gutter-fade:var(--row-rest)] group-hover/row:[--gutter-fade:var(--row-hover)];
|
|
@apply after:bg-[image:linear-gradient(to_right,var(--gutter-fade)_0%,color-mix(in_srgb,var(--gutter-fade)_85%,transparent)_25%,color-mix(in_srgb,var(--gutter-fade)_50%,transparent)_50%,color-mix(in_srgb,var(--gutter-fade)_15%,transparent)_75%,transparent_100%)];
|
|
}
|
|
|
|
@utility code-line-content {
|
|
@apply min-h-5 leading-5 pl-3 pr-18 group-hover/row:bg-[var(--row-hover)];
|
|
}
|
|
|
|
/* Code blocks need margin applied when in content container */
|
|
.prose :where(.shiki:not(.shiki-wrapper *), .shiki-wrapper) {
|
|
margin-block: 2rem;
|
|
}
|
|
|
|
/* Code block theme colors for use with Supabase Theme */
|
|
[data-theme='dark'],
|
|
.dark {
|
|
--code-token-keyword: #bda4ff;
|
|
--code-foreground: #ffffff;
|
|
--code-token-constant: #3ecf8e;
|
|
--code-token-string: #ffcda1;
|
|
--code-token-comment: #949494;
|
|
--code-token-parameter: #ffffff;
|
|
--code-token-function: #3ecf8e;
|
|
--code-token-string-expression: #ffcda1;
|
|
--code-token-punctuation: #ffffff;
|
|
--code-token-link: #ffffff;
|
|
--code-token-number: #ffffff;
|
|
--code-token-property: #3ecf8e;
|
|
--code-token-variable: var(--code-foreground);
|
|
--code-highlight-color: #232323;
|
|
--shadow-codeblock:
|
|
0 0 0 0 var(--border-default), 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.3);
|
|
}
|
|
[data-theme='light'],
|
|
.light {
|
|
--code-token-keyword: #5f2fc4;
|
|
--code-foreground: oklch(from var(--foreground-light) l c h / 1);
|
|
--code-token-constant: #15593b;
|
|
--code-token-string: #9a5200;
|
|
--code-token-comment: #6a6a6a;
|
|
--code-token-parameter: oklch(from var(--foreground-light) l c h / 1);
|
|
--code-token-function: #15593b;
|
|
--code-token-string-expression: #9a5200;
|
|
--code-token-punctuation: oklch(from var(--foreground-light) l c h / 1);
|
|
--code-token-link: oklch(from var(--foreground-light) l c h / 1);
|
|
--code-token-number: oklch(from var(--foreground-light) l c h / 1);
|
|
--code-token-property: #15593b;
|
|
--code-token-variable: var(--code-foreground);
|
|
--code-highlight-color: #1c1c1c;
|
|
}
|
|
|
|
/* Token classes emitted by CodeBlock.utils.ts */
|
|
.shiki .s-f {
|
|
color: var(--code-foreground);
|
|
}
|
|
.shiki .s-c {
|
|
color: var(--code-token-comment);
|
|
}
|
|
.shiki .s-n {
|
|
color: var(--code-token-constant);
|
|
}
|
|
.shiki .s-u {
|
|
color: var(--code-token-function);
|
|
}
|
|
.shiki .s-k {
|
|
color: var(--code-token-keyword);
|
|
}
|
|
.shiki .s-a {
|
|
color: var(--code-token-parameter);
|
|
}
|
|
.shiki .s-r {
|
|
color: var(--code-token-property);
|
|
}
|
|
.shiki .s-p {
|
|
color: var(--code-token-punctuation);
|
|
}
|
|
.shiki .s-s {
|
|
color: var(--code-token-string);
|
|
}
|
|
.shiki .s-e {
|
|
color: var(--code-token-string-expression);
|
|
}
|
|
.shiki .s-v {
|
|
color: var(--code-token-variable);
|
|
}
|
|
.shiki .s-i {
|
|
font-style: italic;
|
|
}
|
|
.shiki .s-b {
|
|
font-weight: bold;
|
|
}
|
|
.shiki .s-l {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Word wrap styles for code blocks */
|
|
.shiki[data-wrapped='true'] .code-scroll {
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
.shiki[data-wrapped='true'] .code-content {
|
|
white-space: pre-wrap !important;
|
|
overflow-wrap: anywhere !important;
|
|
}
|
|
|
|
.shadow-codeblock {
|
|
box-shadow: var(--shadow-codeblock, none);
|
|
}
|