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/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>