From dbf717f1a7e05d1d846a999e07e1ef3f2f556ba9 Mon Sep 17 00:00:00 2001 From: Steve Heffernan Date: Fri, 13 Mar 2026 16:24:32 -0700 Subject: [PATCH] docs(site): add skins & architecture concept pages (#769) Co-authored-by: Darius Cepulis Co-authored-by: Claude Opus 4.6 --- .claude/skills/docs/SKILL.md | 4 +- .../docs/references/component-libraries.md | 1 - .claude/skills/docs/review/agents.md | 2 +- .claude/skills/docs/review/checklist.md | 2 +- .claude/skills/docs/review/templates.md | 19 +- .claude/skills/docs/templates/concept.md | 1 - site/src/components/Aside.astro | 2 +- site/src/components/docs/DocsLink.astro | 4 +- site/src/components/docs/DocsLinkCard.astro | 47 +++ site/src/components/docs/DocsNavigation.astro | 6 +- .../create-player/react/css/BasicUsage.tsx | 14 +- .../demos/use-media/react/css/BasicUsage.tsx | 14 +- .../demos/use-player/react/css/Selector.tsx | 14 +- .../use-player/react/css/StoreAccess.tsx | 14 +- .../demos/use-store/react/css/Selector.tsx | 14 +- .../demos/use-store/react/css/StoreAccess.tsx | 14 +- .../components/typography/H3Markdown.astro | 2 +- site/src/components/typography/styles.ts | 2 +- ...-10-videojs-v10-beta-hello-world-again.mdx | 24 +- .../content/docs/concepts/_architecture.mdx | 124 ------- site/src/content/docs/concepts/_skins.mdx | 173 --------- .../content/docs/concepts/_ui-components.mdx | 92 ----- site/src/content/docs/concepts/features.mdx | 202 +++++++++++ site/src/content/docs/concepts/overview.mdx | 190 ++++++++++ site/src/content/docs/concepts/presets.mdx | 164 +++++++++ site/src/content/docs/concepts/skins.mdx | 331 ++++++++++++++++++ .../content/docs/concepts/ui-components.mdx | 137 ++++++++ .../src/content/docs/concepts/v10-roadmap.mdx | 11 +- .../content/docs/how-to/customize-skins.mdx | 2 +- site/src/content/docs/how-to/installation.mdx | 2 +- .../content/docs/reference/create-player.mdx | 4 +- .../docs/reference/create-selector.mdx | 4 +- .../{select-buffer.mdx => feature-buffer.mdx} | 21 +- ...lect-controls.mdx => feature-controls.mdx} | 21 +- .../content/docs/reference/feature-error.mdx | 65 ++++ ...-fullscreen.mdx => feature-fullscreen.mdx} | 28 +- .../{select-pip.mdx => feature-pip.mdx} | 28 +- ...ack-rate.mdx => feature-playback-rate.mdx} | 27 +- ...lect-playback.mdx => feature-playback.mdx} | 29 +- .../{select-source.mdx => feature-source.mdx} | 27 +- .../docs/reference/feature-text-tracks.mdx | 68 ++++ .../{select-time.mdx => feature-time.mdx} | 28 +- .../{select-volume.mdx => feature-volume.mdx} | 29 +- .../docs/reference/html-create-player.mdx | 6 +- .../docs/reference/player-container.mdx | 208 +++++++++++ .../content/docs/reference/player-context.mdx | 2 +- .../docs/reference/player-provider.mdx | 204 +++++++++++ .../content/docs/reference/render-element.mdx | 2 +- site/src/content/docs/reference/thumbnail.mdx | 2 +- .../docs/reference/use-media-registration.mdx | 2 +- site/src/content/docs/reference/use-media.mdx | 6 +- .../docs/reference/use-player-context.mdx | 2 +- .../src/content/docs/reference/use-player.mdx | 8 +- .../content/docs/reference/use-selector.mdx | 2 +- site/src/docs.config.ts | 51 +-- site/src/layouts/Base.astro | 21 +- site/src/layouts/ErrorPage.astro | 2 +- .../__tests__/renderInlineMarkdown.test.ts | 2 +- 58 files changed, 1940 insertions(+), 587 deletions(-) create mode 100644 site/src/components/docs/DocsLinkCard.astro delete mode 100644 site/src/content/docs/concepts/_architecture.mdx delete mode 100644 site/src/content/docs/concepts/_skins.mdx delete mode 100644 site/src/content/docs/concepts/_ui-components.mdx create mode 100644 site/src/content/docs/concepts/features.mdx create mode 100644 site/src/content/docs/concepts/overview.mdx create mode 100644 site/src/content/docs/concepts/presets.mdx create mode 100644 site/src/content/docs/concepts/skins.mdx create mode 100644 site/src/content/docs/concepts/ui-components.mdx rename site/src/content/docs/reference/{select-buffer.mdx => feature-buffer.mdx} (76%) rename site/src/content/docs/reference/{select-controls.mdx => feature-controls.mdx} (76%) create mode 100644 site/src/content/docs/reference/feature-error.mdx rename site/src/content/docs/reference/{select-fullscreen.mdx => feature-fullscreen.mdx} (70%) rename site/src/content/docs/reference/{select-pip.mdx => feature-pip.mdx} (70%) rename site/src/content/docs/reference/{select-playback-rate.mdx => feature-playback-rate.mdx} (74%) rename site/src/content/docs/reference/{select-playback.mdx => feature-playback.mdx} (68%) rename site/src/content/docs/reference/{select-source.mdx => feature-source.mdx} (73%) create mode 100644 site/src/content/docs/reference/feature-text-tracks.mdx rename site/src/content/docs/reference/{select-time.mdx => feature-time.mdx} (71%) rename site/src/content/docs/reference/{select-volume.mdx => feature-volume.mdx} (69%) create mode 100644 site/src/content/docs/reference/player-container.mdx create mode 100644 site/src/content/docs/reference/player-provider.mdx diff --git a/.claude/skills/docs/SKILL.md b/.claude/skills/docs/SKILL.md index c69752a7..3b7e98b7 100644 --- a/.claude/skills/docs/SKILL.md +++ b/.claude/skills/docs/SKILL.md @@ -151,7 +151,7 @@ For full guidelines, load `references/writing-style.md`. The essentials: - **Self-contained examples.** Include all imports. Use realistic values, not `foo`/`bar`. - **Show output.** When the result isn't obvious, add a comment showing expected output. - **Progressive.** Start with the simplest version. Add complexity in later examples. -- **Cross-link.** End pages with "See also" linking related concepts and references. Repetition across pages is fine — readers land anywhere. +- **Cross-link.** Generously link related concepts and references. Repetition across pages is fine — readers land anywhere. ### Do/don't contrasts @@ -195,7 +195,7 @@ Key gotchas: 3. Check existing docs for style and patterns 4. Write concise draft — code before prose 5. Add do/don't contrasts where helpful -6. Add cross-links and "See also" section +6. Add cross-links 7. **Site pages only:** Add page to sidebar in `site/src/docs.config.ts` 8. **Site pages only:** Verify it renders for all framework combinations diff --git a/.claude/skills/docs/references/component-libraries.md b/.claude/skills/docs/references/component-libraries.md index 05c6726d..72ebb538 100644 --- a/.claude/skills/docs/references/component-libraries.md +++ b/.claude/skills/docs/references/component-libraries.md @@ -16,7 +16,6 @@ All top-tier component libraries follow this structure: 8. **Data Attributes** (CSS styling hooks) 9. **CSS Variables** (theming) 10. **Accessibility** (keyboard table, ARIA) -11. **See also** (related components) ## Anatomy Documentation diff --git a/.claude/skills/docs/review/agents.md b/.claude/skills/docs/review/agents.md index c39fbc4e..134ec625 100644 --- a/.claude/skills/docs/review/agents.md +++ b/.claude/skills/docs/review/agents.md @@ -74,7 +74,7 @@ Review for: 2. **Matches template** — Does it follow the structure from its template? 3. **Code-first** — Code appears before explanation, not after 4. **Progressive** — Starts simple, adds complexity in later sections -5. **Cross-links** — Has "See also" section linking related pages +5. **Cross-links** — Links related pages 6. **Callouts** — Uses `