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

fix(site): review cleanup for API reference pages (#685)

Browse Source 
- Remove unused BasicUsage demos for time-slider and volume-slider
- Strip leading `--` from CSS var names in CSSVarRow ids
- Fix dead anchor links in MDX styling sections
- Add comments on usesDataAttrs heuristic and type stripping

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Darius Cepulis
2026-03-03 17:48:27 -06:00
co-authored by Claude Opus 4.6
parent 8ab596ea30
commit 286243746e
18 changed files with 6 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/scripts/api-docs-builder/src/index.ts
+1
View File
@@ -309,6 +309,7 @@ function instantiatesCore(filePath: string): boolean {
}
}
/** String search heuristic — a comment containing `stateAttrMap` would also match. */
function usesDataAttrs(filePath: string): boolean {
try {
return fs.readFileSync(filePath, 'utf-8').includes('stateAttrMap');
site/scripts/api-docs-builder/src/parts-handler.ts
+1
View File
@@ -94,6 +94,7 @@ export function extractSubPartProps(filePath: string, program: ts.Program, local
if (name === 'children' || !member.type) continue;
let typeStr = checker.typeToString(checker.getTypeFromTypeNode(member.type));
// Only strips trailing ` | undefined`; other orderings (e.g., `undefined | string`) pass through.
if (member.questionToken) typeStr = typeStr.replace(/ \| undefined$/, '');
const propDef: PropDef = { type: typeStr };
site/src/components/docs/api-reference/CSSVarRow.astro
+1 -1
View File
@@ -11,7 +11,7 @@ interface Props {
const { name, description, componentName } = Astro.props;
const id = `${componentName}-css-var-${name}`;
const id = `${componentName}-css-var-${name.replace(/^--/, '')}`;
---
<DetailRow id={id} name={name} type="" description={description} colspan={2}>
site/src/components/docs/demos/time-slider/html/css/BasicUsage.astro
-10
View File
@@ -1,10 +0,0 @@
---
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
import html from './BasicUsage.html?raw';
import './BasicUsage.css';
---
<HtmlDemo html={html} />
<script>
import './BasicUsage.ts';
</script>
site/src/components/docs/demos/time-slider/html/css/BasicUsage.css
-30
View File
@@ -1,30 +0,0 @@
.html-time-slider-basic,
.html-time-slider-basic media-container {
display: block;
position: relative;
}
.html-time-slider-basic video {
width: 100%;
}
.html-time-slider-basic__slider {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
cursor: pointer;
background: rgba(255, 255, 255, 0.3);
}
.html-time-slider-basic__slider::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: var(--media-slider-fill);
background: white;
pointer-events: none;
}
site/src/components/docs/demos/time-slider/html/css/BasicUsage.html
-12
View File
@@ -1,12 +0,0 @@
<video-player class="html-time-slider-basic">
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-time-slider class="html-time-slider-basic__slider"></media-time-slider>
</media-container>
</video-player>
site/src/components/docs/demos/time-slider/html/css/BasicUsage.ts
-2
View File
@@ -1,2 +0,0 @@
import '@videojs/html/video/player';
import '@videojs/html/ui/time-slider';
site/src/components/docs/demos/time-slider/react/css/BasicUsage.css
-28
View File
@@ -1,28 +0,0 @@
.react-time-slider-basic {
position: relative;
}
.react-time-slider-basic video {
width: 100%;
}
.react-time-slider-basic__slider {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
cursor: pointer;
background: rgba(255, 255, 255, 0.3);
}
.react-time-slider-basic__slider::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: var(--media-slider-fill);
background: white;
pointer-events: none;
}
site/src/components/docs/demos/time-slider/react/css/BasicUsage.tsx
-23
View File
@@ -1,23 +0,0 @@
import { createPlayer, TimeSlider } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
import './BasicUsage.css';
const Player = createPlayer({ features: videoFeatures });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="react-time-slider-basic">
<Video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoPlay
muted
playsInline
loop
/>
<TimeSlider.Root className="react-time-slider-basic__slider" />
</Player.Container>
</Player.Provider>
);
}
site/src/components/docs/demos/volume-slider/html/css/BasicUsage.astro
-10
View File
@@ -1,10 +0,0 @@
---
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
import html from './BasicUsage.html?raw';
import './BasicUsage.css';
---
<HtmlDemo html={html} />
<script>
import './BasicUsage.ts';
</script>
site/src/components/docs/demos/volume-slider/html/css/BasicUsage.css
-60
View File
@@ -1,60 +0,0 @@
.html-volume-slider-basic,
.html-volume-slider-basic media-container {
display: block;
position: relative;
}
.html-volume-slider-basic video {
width: 100%;
}
.html-volume-slider-basic__mute-button {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
color: black;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 9999px;
padding-block: 8px;
padding-inline: 20px;
cursor: pointer;
}
.html-volume-slider-basic__mute-button .show-when-muted {
display: none;
}
.html-volume-slider-basic__mute-button .show-when-unmuted {
display: none;
}
.html-volume-slider-basic__mute-button[data-muted] .show-when-muted {
display: inline;
}
.html-volume-slider-basic__mute-button:not([data-muted]) .show-when-unmuted {
display: inline;
}
.html-volume-slider-basic__slider {
position: absolute;
bottom: 10px;
right: 10px;
width: 100px;
height: 20px;
cursor: pointer;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
border-radius: 9999px;
}
.html-volume-slider-basic__slider::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: var(--media-slider-fill);
background: white;
border-radius: 9999px;
pointer-events: none;
}
site/src/components/docs/demos/volume-slider/html/css/BasicUsage.html
-16
View File
@@ -1,16 +0,0 @@
<video-player class="html-volume-slider-basic">
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-mute-button class="html-volume-slider-basic__mute-button">
<span class="show-when-muted">Unmute</span>
<span class="show-when-unmuted">Mute</span>
</media-mute-button>
<media-volume-slider class="html-volume-slider-basic__slider"></media-volume-slider>
</media-container>
</video-player>
site/src/components/docs/demos/volume-slider/html/css/BasicUsage.ts
-3
View File
@@ -1,3 +0,0 @@
import '@videojs/html/video/player';
import '@videojs/html/ui/mute-button';
import '@videojs/html/ui/volume-slider';
site/src/components/docs/demos/volume-slider/react/css/BasicUsage.css
-45
View File
@@ -1,45 +0,0 @@
.react-volume-slider-basic {
position: relative;
}
.react-volume-slider-basic video {
width: 100%;
}
.react-volume-slider-basic__mute-button {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
color: black;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 9999px;
padding-block: 8px;
padding-inline: 20px;
cursor: pointer;
}
.react-volume-slider-basic__slider {
position: absolute;
bottom: 10px;
right: 10px;
width: 100px;
height: 20px;
cursor: pointer;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
border-radius: 9999px;
}
.react-volume-slider-basic__slider::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: var(--media-slider-fill);
background: white;
border-radius: 9999px;
pointer-events: none;
}
site/src/components/docs/demos/volume-slider/react/css/BasicUsage.tsx
-27
View File
@@ -1,27 +0,0 @@
import { createPlayer, MuteButton, VolumeSlider } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
import './BasicUsage.css';
const Player = createPlayer({ features: videoFeatures });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="react-volume-slider-basic">
<Video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoPlay
muted
playsInline
loop
/>
<MuteButton
className="react-volume-slider-basic__mute-button"
render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
/>
<VolumeSlider.Root className="react-volume-slider-basic__slider" />
</Player.Container>
</Player.Provider>
);
}
site/src/content/docs/reference/popover.mdx
+1 -1
View File
@@ -66,7 +66,7 @@ The `side` and `align` props control popup placement relative to the trigger. Th
## Styling
Use [CSS custom properties](#css-custom-properties) for positioning offsets:
Use [CSS custom properties](#root-css-custom-properties) for positioning offsets:
```css
media-popover {
site/src/content/docs/reference/time-slider.mdx
+1 -1
View File
@@ -43,7 +43,7 @@ Seeking is throttled via the `commitThrottle` prop (default 100ms) to avoid over
## Styling
Use [CSS custom properties](#css-custom-properties) to style the fill, pointer, and buffer levels:
Use [CSS custom properties](#root-css-custom-properties) to style the fill, pointer, and buffer levels:
```css
media-time-slider::before {
site/src/content/docs/reference/volume-slider.mdx
+1 -1
View File
@@ -41,7 +41,7 @@ Controls the media volume level. The slider maps its 0–100 internal range to t
## Styling
Use [CSS custom properties](#css-custom-properties) to style the fill and pointer levels:
Use [CSS custom properties](#root-css-custom-properties) to style the fill and pointer levels:
```css
media-volume-slider::before {