zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(site): a few loading optimizations (#193)

Browse Source
This commit is contained in:
Darius Cepulis
2025-11-18 11:25:47 -06:00
committed by GitHub
parent ec700e5ebd
commit 5a449832fd
20 changed files with 163 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/README.md
+1 -1
View File
@@ -60,7 +60,7 @@ If you're in `site/`...
Here are most of the technologies you should get to know when you're building this site:
- [**Astro**](https://astro.build) - Mostly-static site generation with [island architecture](https://docs.astro.build/en/concepts/islands/)
- [**React**](https://react.dev) - Most of our client-side interactivity is built with React components (each with `client:load` is an isolated React root)
- [**React**](https://react.dev) - Most of our client-side interactivity is built with React components (each with `client:*` is an isolated React root)
- [**Tailwind v4**](https://tailwindcss.com) - CSS utility class generator
- [**Nanostores**](https://github.com/nanostores/nanostores) - Shared client-side state (React Context doesn't work across islands)
- [**Base UI**](https://base-ui.com) - Headless accessible components
site/src/components/Code/ClientCode.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ const clientHighlighter = await createHighlighter({
/**
* Renders HTML, TSX, CSS, and JavaScript. A strict subset, for lighter-weight client shipping
*
* Renders with top-level await, so, it's safe for ssr (client:idle or client:load)
* Renders with top-level await, so, it's safe for ssr (client:idle or client:load or client:visible)
* However, if you try importing more than one island with ClientCode in it,
* Safari MAY throw a hydration error because of this top-level await.
* https://github.com/withastro/astro/issues/10055
site/src/components/Footer.astro
+1 -1
View File
@@ -62,7 +62,7 @@ const { class: className } = Astro.props;
</a>
</div>
</nav>
<ThemeToggle client:idle />
<ThemeToggle client:visible />
</div>
<p class="text-sm text-center sm:text-left text-dark-40 dark:text-light-40 px-3">
site/src/components/NavBar/NavBar.astro
+1 -1
View File
@@ -83,7 +83,7 @@ const { class: className, dark = false } = Astro.props;
</div>
{/* Mobile nav */}
<MobileNav client:load navLinks={navLinks} currentPath={currentPath} dark={dark}>
<MobileNav client:idle navLinks={navLinks} currentPath={currentPath} dark={dark}>
<slot name="mobile-nav" />
</MobileNav>
</nav>
site/src/components/docs/FrameworkCase.astro
+1 -1
View File
@@ -20,7 +20,7 @@ const shouldRender = !frameworks || frameworks.includes(framework as SupportedFr
```
But I'm running into some crazy problems with hydration.
Putting client:load in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
Putting client:* in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
TODO: fix this
So, while I debug those... let's do this
site/src/components/frames/Minimal.astro
+1 -1
View File
@@ -12,7 +12,7 @@ import { twMerge } from 'tailwind-merge';
* import Minimal from '@/components/frames/Minimal.astro';
*
* <MinimalFrame>
* <MyDemo client:load />
* <MyDemo client:visible />
* </MinimalFrame>
* ```
*/
site/src/components/home/HeroVideo.tsx
-1
View File
@@ -6,7 +6,6 @@ import '@videojs/react/skins/frosted.css';
import '@videojs/react/skins/minimal.css';
export default function HeroVideo({ className, poster }: { className?: string; poster: string }) {
// Subscribe to skin store for future skin switching functionality
const $skin = useStore(skin);
const SkinComponent = $skin === 'frosted' ? FrostedSkin : MinimalSkin;
site/src/components/typography/Pre.astro
+4 -4
View File
@@ -23,13 +23,13 @@ const value = 'code';
<slot />
</Tag>
) : (
<TabsRoot client:load>
<TabsList client:load label={`${label} code`}>
<Tab client:load value={value} initial>
<TabsRoot client:visible>
<TabsList client:visible label={`${label} code`}>
<Tab client:visible value={value} initial>
{label}
</Tab>
</TabsList>
<TabsPanel client:load value={value} initial>
<TabsPanel client:visible value={value} initial>
<Tag class={className} {...props}>
<slot />
</Tag>
site/src/content/docs/concepts/architecture.mdx
+6 -6
View File
@@ -93,12 +93,12 @@ function Player() {
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
<TabsRoot client:load>
<TabsList client:load label="HTML implementation">
<Tab client:load value="html" initial>HTML</Tab>
<Tab client:load value="javascript">JavaScript</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="HTML implementation">
<Tab client:visible value="html" initial>HTML</Tab>
<Tab client:visible value="javascript">JavaScript</Tab>
</TabsList>
<TabsPanel client:load value="html" initial>
<TabsPanel client:visible value="html" initial>
```html
<!-- Tier 1: State Management -->
@@ -112,7 +112,7 @@ function Player() {
```
</TabsPanel>
<TabsPanel client:load value="javascript">
<TabsPanel client:visible value="javascript">
```ts
import '@videojs/html/skins/frosted';
site/src/content/docs/concepts/skins.mdx
+2 -2
View File
@@ -53,7 +53,7 @@ import '@videojs/react/skins/frosted.css';
</FrameworkCase>
<MinimalFrame class="rounded-3xl">
<FrostedSkinDemo client:load />
<FrostedSkinDemo client:visible />
</MinimalFrame>
### Minimal
@@ -83,7 +83,7 @@ import '@videojs/react/skins/minimal.css';
</FrameworkCase>
<MinimalFrame>
<MinimalSkinDemo client:load />
<MinimalSkinDemo client:visible />
</MinimalFrame>
## Customizing Skins
site/src/content/docs/how-to/customize-skins.mdx
+28 -28
View File
@@ -23,15 +23,15 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
<FrameworkCase frameworks={["react"]}>
<TabsRoot client:load>
<TabsList client:load label="Frosted React implementation">
<Tab client:load value="component" initial>Component</Tab>
<Tab client:load value="css">CSS</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="Frosted React implementation">
<Tab client:visible value="component" initial>FrostedSkin.tsx</Tab>
<Tab client:visible value="css">frosted.css</Tab>
</TabsList>
<TabsPanel client:load value="component" initial>
<TabsPanel client:visible value="component" initial>
<ServerCode code={generateReactComponent('frosted')} lang="tsx" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={generateReactCSS('frosted')} lang="css" />
</TabsPanel>
</TabsRoot>
@@ -40,19 +40,19 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
<FrameworkCase frameworks={["html"]}>
<TabsRoot client:load>
<TabsList client:load label="Frosted HTML implementation">
<Tab client:load value="markup" initial>HTML</Tab>
<Tab client:load value="js">JS</Tab>
<Tab client:load value="css">CSS</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="Frosted HTML implementation">
<Tab client:visible value="markup" initial>HTML</Tab>
<Tab client:visible value="js">JS</Tab>
<Tab client:visible value="css">CSS</Tab>
</TabsList>
<TabsPanel client:load value="markup" initial>
<TabsPanel client:visible value="markup" initial>
<ServerCode code={generateHTMLMarkup('frosted')} lang="html" />
</TabsPanel>
<TabsPanel client:load value="js">
<TabsPanel client:visible value="js">
<ServerCode code={generateHTMLJS('frosted')} lang="typescript" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={generateHTMLCSS('frosted')} lang="css" />
</TabsPanel>
</TabsRoot>
@@ -63,15 +63,15 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
<FrameworkCase frameworks={["react"]}>
<TabsRoot client:load>
<TabsList client:load label="Minimal React implementation">
<Tab client:load value="react" initial>React</Tab>
<Tab client:load value="css">CSS</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="Minimal React implementation">
<Tab client:visible value="react" initial>MinimalSkin.tsx</Tab>
<Tab client:visible value="css">minimal.css</Tab>
</TabsList>
<TabsPanel client:load value="react" initial>
<TabsPanel client:visible value="react" initial>
<ServerCode code={generateReactComponent('minimal')} lang="tsx" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={generateReactCSS('minimal')} lang="css" />
</TabsPanel>
</TabsRoot>
@@ -80,19 +80,19 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
<FrameworkCase frameworks={["html"]}>
<TabsRoot client:load>
<TabsList client:load label="Minimal HTML implementation">
<Tab client:load value="html" initial>HTML</Tab>
<Tab client:load value="js">JS</Tab>
<Tab client:load value="css">CSS</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="Minimal HTML implementation">
<Tab client:visible value="html" initial>HTML</Tab>
<Tab client:visible value="js">JS</Tab>
<Tab client:visible value="css">CSS</Tab>
</TabsList>
<TabsPanel client:load value="html" initial>
<TabsPanel client:visible value="html" initial>
<ServerCode code={generateHTMLMarkup('minimal')} lang="html" />
</TabsPanel>
<TabsPanel client:load value="js">
<TabsPanel client:visible value="js">
<ServerCode code={generateHTMLJS('minimal')} lang="typescript" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={generateHTMLCSS('minimal')} lang="css" />
</TabsPanel>
</TabsRoot>
site/src/content/docs/how-to/write-guides.mdx
+29 -29
View File
@@ -297,23 +297,23 @@ Use `<TabsRoot>`, `<TabsList>`, `<Tab>`, and `<TabsPanel>` to show multiple item
<Aside type="note">
- Set `initial` on your first `<Tab>` and first `<TabsPanel>` to make them active by default
- All `<Tab* >` components require `client:load` directive so Astro knows to hydrate them
- All `<Tab* >` components require a `client:*` directive (I'd suggest `client:visible`) so Astro knows to hydrate them
- Use descriptive `label` prop on `<TabsList>` for accessibility
</Aside>
````mdx
<TabsRoot client:load>
<TabsList client:load label="Code examples">
<Tab client:load value="typescript" initial>TypeScript</Tab>
<Tab client:load value="javascript">JavaScript</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="Code examples">
<Tab client:visible value="typescript" initial>TypeScript</Tab>
<Tab client:visible value="javascript">JavaScript</Tab>
</TabsList>
<TabsPanel client:load value="typescript" initial>
<TabsPanel client:visible value="typescript" initial>
```ts
console.log('Hello, TypeScript!');
```
</TabsPanel>
<TabsPanel client:load value="javascript">
<TabsPanel client:visible value="javascript">
```js
console.log('Hello, JavaScript!');
```
@@ -322,17 +322,17 @@ Use `<TabsRoot>`, `<TabsList>`, `<Tab>`, and `<TabsPanel>` to show multiple item
````
<TabsRoot client:load>
<TabsList client:load label="Code examples">
<Tab client:load value="typescript" initial>TypeScript</Tab>
<Tab client:load value="javascript">JavaScript</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="Code examples">
<Tab client:visible value="typescript" initial>TypeScript</Tab>
<Tab client:visible value="javascript">JavaScript</Tab>
</TabsList>
<TabsPanel client:load value="typescript" initial>
<TabsPanel client:visible value="typescript" initial>
```ts
console.log('Hello, TypeScript!');
```
</TabsPanel>
<TabsPanel client:load value="javascript">
<TabsPanel client:visible value="javascript">
```js
console.log('Hello, JavaScript!');
```
@@ -365,11 +365,11 @@ import componentCode from '@/examples/react/Component.tsx?raw';
import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
import ServerCode from '@/components/Code/ServerCode.astro';
<TabsRoot client:load>
<TabsList client:load label="Component implementation">
<Tab client:load value="component" initial>Component</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="Component implementation">
<Tab client:visible value="component" initial>Component</Tab>
</TabsList>
<TabsPanel client:load value="component" initial>
<TabsPanel client:visible value="component" initial>
<ServerCode code={componentCode} lang="tsx" />
</TabsPanel>
</TabsRoot>
@@ -377,11 +377,11 @@ import ServerCode from '@/components/Code/ServerCode.astro';
Which will happily render
<TabsRoot client:load>
<TabsList client:load label="Component implementation">
<Tab client:load value="component" initial>Component</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="Component implementation">
<Tab client:visible value="component" initial>Component</Tab>
</TabsList>
<TabsPanel client:load value="component" initial>
<TabsPanel client:visible value="component" initial>
<ServerCode code={`import React from 'react';
function Component() {
@@ -403,7 +403,7 @@ Use the `<MinimalFrame>` frame component to wrap standalone demos with a styled
import { MyDemo } from '@/examples/react/MyDemo';
import MinimalFrame from '@/components/frames/Minimal.astro';
<MinimalFrame>
<MyDemo client:load />
<MyDemo client:visible />
</MinimalFrame>
```
@@ -432,17 +432,17 @@ import cssCode from '@/examples/react/MyDemo.module.css?raw';
import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
import ServerCode from '@/components/Code/ServerCode.astro';
<TabsRoot client:load>
<TabsList client:load label="MyDemo implementation">
<Tab client:load value="component" initial>Component</Tab>
<Tab client:load value="css">CSS Module</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="MyDemo implementation">
<Tab client:visible value="component" initial>Component</Tab>
<Tab client:visible value="css">CSS Module</Tab>
</TabsList>
<TabsPanel client:load value="component" initial>
<TabsPanel client:visible value="component" initial>
<ServerCode code={componentCode} lang="tsx" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={cssCode} lang="css" />
</TabsPanel>
<MyDemo client:load />
<MyDemo client:visible />
</TabsRoot>
```
site/src/content/docs/reference/fullscreen-button.mdx
+16 -16
View File
@@ -25,38 +25,38 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
## Example
<FrameworkCase frameworks={["react"]}>
<TabsRoot client:load>
<TabsList client:load label="React implementation">
<Tab client:load value="component" initial>Component</Tab>
<Tab client:load value="css">CSS Module</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="React implementation">
<Tab client:visible value="component" initial>Component</Tab>
<Tab client:visible value="css">CSS Module</Tab>
</TabsList>
<TabsPanel client:load value="component" initial>
<TabsPanel client:visible value="component" initial>
<ServerCode code={componentModuleStr} lang="tsx" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={cssModuleStr} lang="css" />
</TabsPanel>
<FullscreenButtonDemo client:load />
<FullscreenButtonDemo client:visible />
</TabsRoot>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
<TabsRoot client:load>
<TabsList client:load label="HTML implementation">
<Tab client:load value="html" initial>HTML</Tab>
<Tab client:load value="css">CSS</Tab>
<Tab client:load value="javascript">JS</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="HTML implementation">
<Tab client:visible value="html" initial>HTML</Tab>
<Tab client:visible value="css">CSS</Tab>
<Tab client:visible value="javascript">JS</Tab>
</TabsList>
<TabsPanel client:load value="html" initial>
<TabsPanel client:visible value="html" initial>
<ServerCode code={htmlStr} lang="html" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={htmlCssStr} lang="css" />
</TabsPanel>
<TabsPanel client:load value="javascript">
<TabsPanel client:visible value="javascript">
<ServerCode code={htmlJsStr} lang="js" />
</TabsPanel>
<FullscreenButtonDemo client:load />
<FullscreenButtonDemo client:visible />
</TabsRoot>
</FrameworkCase>
site/src/content/docs/reference/mute-button.mdx
+16 -16
View File
@@ -25,38 +25,38 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
## Example
<FrameworkCase frameworks={["react"]}>
<TabsRoot client:load>
<TabsList client:load label="React implementation">
<Tab client:load value="component" initial>Component</Tab>
<Tab client:load value="css">CSS Module</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="React implementation">
<Tab client:visible value="component" initial>Component</Tab>
<Tab client:visible value="css">CSS Module</Tab>
</TabsList>
<TabsPanel client:load value="component" initial>
<TabsPanel client:visible value="component" initial>
<ServerCode code={componentModuleStr} lang="tsx" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={cssModuleStr} lang="css" />
</TabsPanel>
<MuteButtonDemo client:load />
<MuteButtonDemo client:visible />
</TabsRoot>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
<TabsRoot client:load>
<TabsList client:load label="HTML implementation">
<Tab client:load value="html" initial>HTML</Tab>
<Tab client:load value="css">CSS</Tab>
<Tab client:load value="javascript">JS</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="HTML implementation">
<Tab client:visible value="html" initial>HTML</Tab>
<Tab client:visible value="css">CSS</Tab>
<Tab client:visible value="javascript">JS</Tab>
</TabsList>
<TabsPanel client:load value="html" initial>
<TabsPanel client:visible value="html" initial>
<ServerCode code={htmlStr} lang="html" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={htmlCssStr} lang="css" />
</TabsPanel>
<TabsPanel client:load value="javascript">
<TabsPanel client:visible value="javascript">
<ServerCode code={htmlJsStr} lang="js" />
</TabsPanel>
<MuteButtonDemo client:load />
<MuteButtonDemo client:visible />
</TabsRoot>
</FrameworkCase>
site/src/content/docs/reference/play-button.mdx
+16 -16
View File
@@ -25,38 +25,38 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
## Example
<FrameworkCase frameworks={["react"]}>
<TabsRoot client:load>
<TabsList client:load label="React implementation">
<Tab client:load value="component" initial>Component</Tab>
<Tab client:load value="css">CSS Module</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="React implementation">
<Tab client:visible value="component" initial>Component</Tab>
<Tab client:visible value="css">CSS Module</Tab>
</TabsList>
<TabsPanel client:load value="component" initial>
<TabsPanel client:visible value="component" initial>
<ServerCode code={componentModuleStr} lang="tsx" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={cssModuleStr} lang="css" />
</TabsPanel>
<PlayButtonDemo client:load />
<PlayButtonDemo client:visible />
</TabsRoot>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
<TabsRoot client:load>
<TabsList client:load label="HTML implementation">
<Tab client:load value="html" initial>HTML</Tab>
<Tab client:load value="css">CSS</Tab>
<Tab client:load value="javascript">JS</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="HTML implementation">
<Tab client:visible value="html" initial>HTML</Tab>
<Tab client:visible value="css">CSS</Tab>
<Tab client:visible value="javascript">JS</Tab>
</TabsList>
<TabsPanel client:load value="html" initial>
<TabsPanel client:visible value="html" initial>
<ServerCode code={htmlStr} lang="html" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={htmlCssStr} lang="css" />
</TabsPanel>
<TabsPanel client:load value="javascript">
<TabsPanel client:visible value="javascript">
<ServerCode code={htmlJsStr} lang="js" />
</TabsPanel>
<PlayButtonDemo client:load />
<PlayButtonDemo client:visible />
</TabsRoot>
</FrameworkCase>
site/src/content/docs/reference/time-slider.mdx
+16 -16
View File
@@ -26,38 +26,38 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
## Example
<FrameworkCase frameworks={["react"]}>
<TabsRoot client:load>
<TabsList client:load label="React implementation">
<Tab client:load value="component" initial>Component</Tab>
<Tab client:load value="css">CSS Module</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="React implementation">
<Tab client:visible value="component" initial>Component</Tab>
<Tab client:visible value="css">CSS Module</Tab>
</TabsList>
<TabsPanel client:load value="component" initial>
<TabsPanel client:visible value="component" initial>
<ServerCode code={componentModuleStr} lang="tsx" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={cssModuleStr} lang="css" />
</TabsPanel>
<TimeSliderDemo client:load />
<TimeSliderDemo client:visible />
</TabsRoot>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
<TabsRoot client:load>
<TabsList client:load label="HTML implementation">
<Tab client:load value="html-horizontal" initial>HTML (Horizontal)</Tab>
<Tab client:load value="html-vertical">HTML (Vertical)</Tab>
<Tab client:load value="css">CSS</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="HTML implementation">
<Tab client:visible value="html-horizontal" initial>HTML (Horizontal)</Tab>
<Tab client:visible value="html-vertical">HTML (Vertical)</Tab>
<Tab client:visible value="css">CSS</Tab>
</TabsList>
<TabsPanel client:load value="html-horizontal" initial>
<TabsPanel client:visible value="html-horizontal" initial>
<ServerCode code={htmlHorizontalStr} lang="html" />
</TabsPanel>
<TabsPanel client:load value="html-vertical">
<TabsPanel client:visible value="html-vertical">
<ServerCode code={htmlVerticalStr} lang="html" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={htmlCssStr} lang="css" />
</TabsPanel>
<TimeSliderDemo client:load />
<TimeSliderDemo client:visible />
</TabsRoot>
</FrameworkCase>
site/src/content/docs/reference/volume-slider.mdx
+16 -16
View File
@@ -26,38 +26,38 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
## Example
<FrameworkCase frameworks={["react"]}>
<TabsRoot client:load>
<TabsList client:load label="React implementation">
<Tab client:load value="component" initial>Component</Tab>
<Tab client:load value="css">CSS Module</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="React implementation">
<Tab client:visible value="component" initial>Component</Tab>
<Tab client:visible value="css">CSS Module</Tab>
</TabsList>
<TabsPanel client:load value="component" initial>
<TabsPanel client:visible value="component" initial>
<ServerCode code={componentModuleStr} lang="tsx" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={cssModuleStr} lang="css" />
</TabsPanel>
<VolumeSliderDemo client:load />
<VolumeSliderDemo client:visible />
</TabsRoot>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
<TabsRoot client:load>
<TabsList client:load label="HTML implementation">
<Tab client:load value="html-horizontal" initial>HTML (Horizontal)</Tab>
<Tab client:load value="html-vertical">HTML (Vertical)</Tab>
<Tab client:load value="css">CSS</Tab>
<TabsRoot client:visible>
<TabsList client:visible label="HTML implementation">
<Tab client:visible value="html-horizontal" initial>HTML (Horizontal)</Tab>
<Tab client:visible value="html-vertical">HTML (Vertical)</Tab>
<Tab client:visible value="css">CSS</Tab>
</TabsList>
<TabsPanel client:load value="html-horizontal" initial>
<TabsPanel client:visible value="html-horizontal" initial>
<ServerCode code={htmlHorizontalStr} lang="html" />
</TabsPanel>
<TabsPanel client:load value="html-vertical">
<TabsPanel client:visible value="html-vertical">
<ServerCode code={htmlVerticalStr} lang="html" />
</TabsPanel>
<TabsPanel client:load value="css">
<TabsPanel client:visible value="css">
<ServerCode code={htmlCssStr} lang="css" />
</TabsPanel>
<VolumeSliderDemo client:load />
<VolumeSliderDemo client:visible />
</TabsRoot>
</FrameworkCase>
site/src/layouts/Base.astro
+5 -1
View File
@@ -46,6 +46,10 @@ const fullTitle = Array.isArray(title)
{/* Important stuff */}
<slot name="priority-head" />
{/* Preconnect to Mux for faster video/image loading */}
<link rel="preconnect" href="https://image.mux.com" crossorigin />
<link rel="preconnect" href="https://stream.mux.com" crossorigin />
{/* Font preloads */}
<Font cssVariable="--font-instrument-sans" preload />
<Font cssVariable="--font-ibm-plex-mono" preload />
@@ -98,7 +102,7 @@ const fullTitle = Array.isArray(title)
'bg-light-80 dark:bg-dark-100',
]}
>
<PreferenceSync client:load />
<PreferenceSync client:idle />
<FilmGrain currentPath={Astro.url.pathname} />
<slot />
</div>
site/src/layouts/Docs.astro
+1 -1
View File
@@ -49,7 +49,7 @@ const docsSidebarId = 'docs-sidebar';
>
<FilmGrain currentPath={Astro.url.pathname} />
<DocsSidebar framework={framework} style={style} docTitles={docTitles} class="flex-1">
<Selectors client:load currentFramework={framework} currentStyle={style} currentSlug={slug} />
<Selectors client:idle currentFramework={framework} currentStyle={style} currentSlug={slug} />
</DocsSidebar>
</aside>
<div>
site/src/pages/docs/framework/[framework]/style/[style]/[...slug].astro
+2 -2
View File
@@ -115,7 +115,7 @@ const jsonLdSchema = createTechArticleSchema({
"
>
<div class="lg:hidden" style="grid-area: selectors;">
<Selectors client:load currentFramework={framework} currentStyle={style} currentSlug={slug} />
<Selectors client:idle currentFramework={framework} currentStyle={style} currentSlug={slug} />
</div>
<div
class="sticky overflow-y-auto z-30"
@@ -145,7 +145,7 @@ const jsonLdSchema = createTechArticleSchema({
<H3 as="h1" class="mt-0 mb-2">{getDocTitle(doc, framework)}</H3>
<p class="@lg:font-medium">{doc.data.description}</p>
</div>
<CopyMarkdownButton client:load />
<CopyMarkdownButton client:idle />
</header>
<Content components={{ ...defaultMarkdownComponents }} />
</article>