diff --git a/site/README.md b/site/README.md index 1bee4ff1..792cf7d2 100644 --- a/site/README.md +++ b/site/README.md @@ -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 diff --git a/site/src/components/Code/ClientCode.tsx b/site/src/components/Code/ClientCode.tsx index f8a30347..dcbd367b 100644 --- a/site/src/components/Code/ClientCode.tsx +++ b/site/src/components/Code/ClientCode.tsx @@ -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 diff --git a/site/src/components/Footer.astro b/site/src/components/Footer.astro index 0bd43658..66160e0e 100644 --- a/site/src/components/Footer.astro +++ b/site/src/components/Footer.astro @@ -62,7 +62,7 @@ const { class: className } = Astro.props; - +

diff --git a/site/src/components/NavBar/NavBar.astro b/site/src/components/NavBar/NavBar.astro index b4a59d21..39d7cec8 100644 --- a/site/src/components/NavBar/NavBar.astro +++ b/site/src/components/NavBar/NavBar.astro @@ -83,7 +83,7 @@ const { class: className, dark = false } = Astro.props; {/* Mobile nav */} - + diff --git a/site/src/components/docs/FrameworkCase.astro b/site/src/components/docs/FrameworkCase.astro index 5345e595..d0baaf04 100644 --- a/site/src/components/docs/FrameworkCase.astro +++ b/site/src/components/docs/FrameworkCase.astro @@ -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 diff --git a/site/src/components/frames/Minimal.astro b/site/src/components/frames/Minimal.astro index a4b6790d..970747a9 100644 --- a/site/src/components/frames/Minimal.astro +++ b/site/src/components/frames/Minimal.astro @@ -12,7 +12,7 @@ import { twMerge } from 'tailwind-merge'; * import Minimal from '@/components/frames/Minimal.astro'; * * - * + * * * ``` */ diff --git a/site/src/components/home/HeroVideo.tsx b/site/src/components/home/HeroVideo.tsx index 9e701c99..e23380a5 100644 --- a/site/src/components/home/HeroVideo.tsx +++ b/site/src/components/home/HeroVideo.tsx @@ -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; diff --git a/site/src/components/typography/Pre.astro b/site/src/components/typography/Pre.astro index 925f1ee2..b98608c4 100644 --- a/site/src/components/typography/Pre.astro +++ b/site/src/components/typography/Pre.astro @@ -23,13 +23,13 @@ const value = 'code'; ) : ( - - - + + + {label} - + diff --git a/site/src/content/docs/concepts/architecture.mdx b/site/src/content/docs/concepts/architecture.mdx index 7f7e25e4..096778fc 100644 --- a/site/src/content/docs/concepts/architecture.mdx +++ b/site/src/content/docs/concepts/architecture.mdx @@ -93,12 +93,12 @@ function Player() { - - - HTML - JavaScript + + + HTML + JavaScript - + ```html @@ -112,7 +112,7 @@ function Player() { ``` - + ```ts import '@videojs/html/skins/frosted'; diff --git a/site/src/content/docs/concepts/skins.mdx b/site/src/content/docs/concepts/skins.mdx index 9f223308..8f8237b2 100644 --- a/site/src/content/docs/concepts/skins.mdx +++ b/site/src/content/docs/concepts/skins.mdx @@ -53,7 +53,7 @@ import '@videojs/react/skins/frosted.css'; - + ### Minimal @@ -83,7 +83,7 @@ import '@videojs/react/skins/minimal.css'; - + ## Customizing Skins diff --git a/site/src/content/docs/how-to/customize-skins.mdx b/site/src/content/docs/how-to/customize-skins.mdx index 506182e7..72e7d75e 100644 --- a/site/src/content/docs/how-to/customize-skins.mdx +++ b/site/src/content/docs/how-to/customize-skins.mdx @@ -23,15 +23,15 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor - - - Component - CSS + + + FrostedSkin.tsx + frosted.css - + - + @@ -40,19 +40,19 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor - - - HTML - JS - CSS + + + HTML + JS + CSS - + - + - + @@ -63,15 +63,15 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor - - - React - CSS + + + MinimalSkin.tsx + minimal.css - + - + @@ -80,19 +80,19 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor - - - HTML - JS - CSS + + + HTML + JS + CSS - + - + - + diff --git a/site/src/content/docs/how-to/write-guides.mdx b/site/src/content/docs/how-to/write-guides.mdx index 743408ed..7d72f6f5 100644 --- a/site/src/content/docs/how-to/write-guides.mdx +++ b/site/src/content/docs/how-to/write-guides.mdx @@ -297,23 +297,23 @@ Use ``, ``, ``, and `` to show multiple item

````mdx - - - TypeScript - JavaScript + + + TypeScript + JavaScript - + ```ts console.log('Hello, TypeScript!'); ``` - + ```js console.log('Hello, JavaScript!'); ``` @@ -322,17 +322,17 @@ Use ``, ``, ``, and `` to show multiple item ```` - - - TypeScript - JavaScript + + + TypeScript + JavaScript - + ```ts console.log('Hello, TypeScript!'); ``` - + ```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'; - - - Component + + + Component - + @@ -377,11 +377,11 @@ import ServerCode from '@/components/Code/ServerCode.astro'; Which will happily render - - - Component + + + Component - + ` frame component to wrap standalone demos with a styled import { MyDemo } from '@/examples/react/MyDemo'; import MinimalFrame from '@/components/frames/Minimal.astro'; - + ``` @@ -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'; - - - Component - CSS Module + + + Component + CSS Module - + - + - + ``` \ No newline at end of file diff --git a/site/src/content/docs/reference/fullscreen-button.mdx b/site/src/content/docs/reference/fullscreen-button.mdx index 99c25e50..d01f7f10 100644 --- a/site/src/content/docs/reference/fullscreen-button.mdx +++ b/site/src/content/docs/reference/fullscreen-button.mdx @@ -25,38 +25,38 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs'; ## Example - - - Component - CSS Module + + + Component + CSS Module - + - + - + - - - HTML - CSS - JS + + + HTML + CSS + JS - + - + - + - + diff --git a/site/src/content/docs/reference/mute-button.mdx b/site/src/content/docs/reference/mute-button.mdx index ca0fa58d..038c1fe7 100644 --- a/site/src/content/docs/reference/mute-button.mdx +++ b/site/src/content/docs/reference/mute-button.mdx @@ -25,38 +25,38 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs'; ## Example - - - Component - CSS Module + + + Component + CSS Module - + - + - + - - - HTML - CSS - JS + + + HTML + CSS + JS - + - + - + - + diff --git a/site/src/content/docs/reference/play-button.mdx b/site/src/content/docs/reference/play-button.mdx index 893e1cbe..5c275e9c 100644 --- a/site/src/content/docs/reference/play-button.mdx +++ b/site/src/content/docs/reference/play-button.mdx @@ -25,38 +25,38 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs'; ## Example - - - Component - CSS Module + + + Component + CSS Module - + - + - + - - - HTML - CSS - JS + + + HTML + CSS + JS - + - + - + - + diff --git a/site/src/content/docs/reference/time-slider.mdx b/site/src/content/docs/reference/time-slider.mdx index 2cc319cf..92f8c731 100644 --- a/site/src/content/docs/reference/time-slider.mdx +++ b/site/src/content/docs/reference/time-slider.mdx @@ -26,38 +26,38 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs'; ## Example - - - Component - CSS Module + + + Component + CSS Module - + - + - + - - - HTML (Horizontal) - HTML (Vertical) - CSS + + + HTML (Horizontal) + HTML (Vertical) + CSS - + - + - + - + diff --git a/site/src/content/docs/reference/volume-slider.mdx b/site/src/content/docs/reference/volume-slider.mdx index 9f96bd37..08448b90 100644 --- a/site/src/content/docs/reference/volume-slider.mdx +++ b/site/src/content/docs/reference/volume-slider.mdx @@ -26,38 +26,38 @@ import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs'; ## Example - - - Component - CSS Module + + + Component + CSS Module - + - + - + - - - HTML (Horizontal) - HTML (Vertical) - CSS + + + HTML (Horizontal) + HTML (Vertical) + CSS - + - + - + - + diff --git a/site/src/layouts/Base.astro b/site/src/layouts/Base.astro index 9a709fc0..e1c04183 100644 --- a/site/src/layouts/Base.astro +++ b/site/src/layouts/Base.astro @@ -46,6 +46,10 @@ const fullTitle = Array.isArray(title) {/* Important stuff */} + {/* Preconnect to Mux for faster video/image loading */} + + + {/* Font preloads */} @@ -98,7 +102,7 @@ const fullTitle = Array.isArray(title) 'bg-light-80 dark:bg-dark-100', ]} > - + diff --git a/site/src/layouts/Docs.astro b/site/src/layouts/Docs.astro index 679ce56f..c179d419 100644 --- a/site/src/layouts/Docs.astro +++ b/site/src/layouts/Docs.astro @@ -49,7 +49,7 @@ const docsSidebarId = 'docs-sidebar'; > - +
diff --git a/site/src/pages/docs/framework/[framework]/style/[style]/[...slug].astro b/site/src/pages/docs/framework/[framework]/style/[style]/[...slug].astro index 36de3ae7..c95331c8 100644 --- a/site/src/pages/docs/framework/[framework]/style/[style]/[...slug].astro +++ b/site/src/pages/docs/framework/[framework]/style/[style]/[...slug].astro @@ -115,7 +115,7 @@ const jsonLdSchema = createTechArticleSchema({ " >
- +
{getDocTitle(doc, framework)}

{doc.data.description}

- +