Skip to content

docs(site): refresh write-guides page and align docs skill Diátaxis guidance#1809

Merged
decepulis merged 3 commits into
mainfrom
claude/issue-1808-fiquev
Jul 7, 2026
Merged

docs(site): refresh write-guides page and align docs skill Diátaxis guidance#1809
decepulis merged 3 commits into
mainfrom
claude/issue-1808-fiquev

Conversation

@decepulis

@decepulis decepulis commented Jul 7, 2026

Copy link
Copy Markdown
Collaborator

Closes #1808

The docs skill declares write-guides.mdx a source of truth, but the two had drifted and the page had gone stale. This refreshes the page against the current MDX pipeline and makes it the canonical home for the Diátaxis guidance, with the skill deferring to it.

Staleness fixes (site/src/content/docs/how-to/write-guides.mdx)

  • Skill name: the tip aside referenced a docs-guide skill — it's named docs.
  • Sidebar config example: removed the unsupported styles: ['css'] restriction (style is a client-side preference; every guide renders for all styles — use <StyleCase> in content). Also fixed the stale title: field found along the way — the actual Guide field is sidebarLabel (site/src/types/docs.ts), which defaults to the guide's title frontmatter.
  • Code frames: documented the Sätteri satteriCodeFrame auto-wrap — every standalone fence renders inside a <CodeFrame>, with title="..." fence meta for filenames, and blocks inside an authored <TabsPanel> left alone — including a rendered title="App.ts" example.
  • <ServerCode> caution re-verified: still accurate (it renders a bare <pre> via Shared.tsx); reworded to contrast with the new fence auto-wrapping and fixed the TabPanelTabsPanel typo.
  • <Demo>: added the missing section — files prop shape, automatic CSS scoping, framework-specific wrapping — with live play-button demos rendered for both React and HTML routes.

Diátaxis alignment

  • The page now carries the canonical guidance: the bold concept-page-preferred default and the concept vs how-to decision table (previously only in the skill).
  • The skill's Diátaxis section keeps its compact mode table and default rule but defers to write-guides.mdx for the full guidance instead of duplicating the decision table.
  • Encoded two Diátaxis tools the repo hadn't captured: the two-question compass (action/cognition × study/work) mapped onto our three modes, with a note that we deliberately have no tutorials section (learning-oriented content lives in Getting started how-tos), and the don't-mix-modes rule with concrete symptoms.

Verification

  • pnpm build:site passes (14/14 tasks).
  • The page is devOnly, so it was also verified against the dev server: both /docs/framework/react/how-to/write-guides and /docs/framework/html/how-to/write-guides render, with the new sections, code-frame example, and live demos present.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Jk33yY4w5PkThQjkysDWgc


Generated by Claude Code


Note

Low Risk
Documentation and Claude skill text only; no runtime or API behavior changes.

Overview
Makes write-guides.mdx the single canonical place for Diátaxis guidance and brings the page in line with the current docs toolchain.

The docs skill now keeps only a compact mode table and points authors to write-guides.mdx instead of duplicating the concept vs how-to decision table.

write-guides.mdx gains the full Diátaxis material (compass, tutorials omission, decision table, don’t-mix-modes), fixes stale author guidance (docs skill name, sidebar uses sidebarLabel not title, no styles on sidebar items), and documents auto <CodeFrame> wrapping, title="..." on fences, updated <ServerCode> vs frames, plus a new <Demo> section with live React/HTML play-button examples.

Reviewed by Cursor Bugbot for commit e163bf0. Bugbot is set up for automated code reviews on this repo. Configure here.

claude added 2 commits July 7, 2026 18:58
…uidance

The write-guides page had drifted from the docs skill and the current MDX
pipeline:

- Fix the tip aside's skill name (docs-guide → docs)
- Replace the unsupported styles sidebar restriction with a StyleCase note,
  and fix the stale title field (actual field is sidebarLabel)
- Document the satteriCodeFrame auto-wrap and title="..." fence meta
- Reword the ServerCode caution against current behavior (still a bare pre)
- Add the missing Demo component section with live examples
- Move the canonical Diátaxis guidance (concept-first default + decision
  table) onto the page; the docs skill now defers to it

Closes #1808

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jk33yY4w5PkThQjkysDWgc
…-guides

Add the two-question compass with our three-mode mapping, note the
deliberately absent tutorials mode, fold mode-quality hints into the
mode list, and state the don't-mix-modes rule after the decision table.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jk33yY4w5PkThQjkysDWgc
@netlify

netlify Bot commented Jul 7, 2026

Copy link
Copy Markdown

Deploy Preview for vjs10-site ready!

Name Link
🔨 Latest commit e163bf0
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/6a4d53f25ebbce00082ceefc
😎 Deploy Preview https://deploy-preview-1809--vjs10-site.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@vercel

vercel Bot commented Jul 7, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
v10-sandbox Ready Ready Preview, Comment Jul 7, 2026 7:31pm

Request Review

@github-actions

github-actions Bot commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

📦 Bundle Size Report

🎨 @videojs/html — no changes
Presets (7)
Entry Initial
/video (default) 46.24 kB
/video (default + hls) 185.87 kB
/video (minimal) 46.25 kB
/video (minimal + hls) 185.90 kB
/audio (default) 39.78 kB
/audio (minimal) 38.93 kB
/background 4.20 kB
Media (10)
Entry Initial
/media/background-video 1.14 kB
/media/container 1.72 kB
/media/dash-video 214.72 kB
/media/hlsjs-video 141.49 kB
/media/mux-audio 163.90 kB
/media/mux-video 163.87 kB
/media/native-hls-video 9.05 kB
/media/simple-hls-audio-only 17.15 kB
/media/simple-hls-video 18.72 kB
/media/vimeo-video 12.31 kB
Players (5)
Entry Initial
/video/player 8.22 kB
/audio/player 5.38 kB
/background/player 3.92 kB
/live-video/player 7.64 kB
/live-audio/player 5.39 kB
Skins (30)
Entry Type Initial
/video/minimal-skin.css css 5.65 kB
/video/skin.css css 5.61 kB
/video/minimal-skin js 46.21 kB
/video/minimal-skin.tailwind js 46.93 kB
/video/skin js 46.24 kB
/video/skin.tailwind js 47.02 kB
/audio/minimal-skin.css css 3.93 kB
/audio/skin.css css 3.82 kB
/audio/minimal-skin js 38.94 kB
/audio/minimal-skin.tailwind js 39.43 kB
/audio/skin js 39.79 kB
/audio/skin.tailwind js 40.30 kB
/background/skin.css css 133 B
/background/skin js 1.14 kB
/live-video/minimal-skin.css css 5.65 kB
/live-video/skin.css css 5.61 kB
/live-video/minimal-skin js 45.25 kB
/live-video/minimal-skin.tailwind js 45.87 kB
/live-video/skin js 44.86 kB
/live-video/skin.tailwind js 45.52 kB
/live-audio/minimal-skin.css css 3.93 kB
/live-audio/skin.css css 3.82 kB
/live-audio/minimal-skin js 31.54 kB
/live-audio/minimal-skin.tailwind js 30.98 kB
/live-audio/skin js 32.54 kB
/live-audio/skin.tailwind js 32.01 kB
/global.css css 176 B
/shared.css css 104 B
/tailwind.css css 161 B
/skin-element js 1.45 kB
UI Components (39)
Entry Initial
/ui/airplay-button 2.41 kB
/ui/alert-dialog 2.55 kB
/ui/alert-dialog-close 2.17 kB
/ui/alert-dialog-description 2.11 kB
/ui/alert-dialog-title 2.16 kB
/ui/audio-track-radio-group 2.84 kB
/ui/buffering-indicator 2.28 kB
/ui/captions-button 2.40 kB
/ui/captions-radio-group 2.84 kB
/ui/cast-button 2.42 kB
/ui/compounds 2.85 kB
/ui/controls 2.59 kB
/ui/error-dialog 2.60 kB
/ui/fullscreen-button 2.36 kB
/ui/hotkey 2.32 kB
/ui/menu 2.66 kB
/ui/mute-button 2.45 kB
/ui/pip-button 2.39 kB
/ui/play-button 2.39 kB
/ui/playback-rate-button 2.45 kB
/ui/playback-rate-radio-group 2.77 kB
/ui/popover 2.74 kB
/ui/poster 2.24 kB
/ui/quality-radio-group 2.82 kB
/ui/seek-button 2.41 kB
/ui/seek-indicator 2.43 kB
/ui/seek-indicator-value 418 B
/ui/slider 2.63 kB
/ui/status-announcer 2.32 kB
/ui/status-indicator 2.38 kB
/ui/status-indicator-value 422 B
/ui/thumbnail 2.21 kB
/ui/time 2.60 kB
/ui/time-slider 2.64 kB
/ui/tooltip 2.67 kB
/ui/volume-indicator 2.34 kB
/ui/volume-indicator-fill 444 B
/ui/volume-indicator-value 366 B
/ui/volume-slider 2.63 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes
Presets (7)
Entry Initial
/video (default) 38.33 kB
/video (default + hls) 176.58 kB
/video (minimal) 38.69 kB
/video (minimal + hls) 177.08 kB
/audio (default) 31.54 kB
/audio (minimal) 31.61 kB
/background 754 B
Media (9)
Entry Initial
/media/background-video 575 B
/media/dash-video 213.16 kB
/media/hlsjs-video 140.07 kB
/media/mux-audio 162.56 kB
/media/mux-video 162.63 kB
/media/native-hls-video 7.41 kB
/media/simple-hls-audio-only 15.56 kB
/media/simple-hls-video 17.14 kB
/media/vimeo-video 10.58 kB
Skins (27)
Entry Type Initial
/tailwind.css css 161 B
/video/minimal-skin.css css 5.55 kB
/video/skin.css css 5.52 kB
/video/minimal-skin js 38.65 kB
/video/minimal-skin.tailwind js 44.67 kB
/video/skin js 38.25 kB
/video/skin.tailwind js 44.31 kB
/audio/minimal-skin.css css 3.79 kB
/audio/skin.css css 3.68 kB
/audio/minimal-skin js 31.56 kB
/audio/minimal-skin.tailwind js 33.75 kB
/audio/skin js 31.48 kB
/audio/skin.tailwind js 35.73 kB
/background/skin.css css 90 B
/background/skin js 272 B
/live-video/minimal-skin.css css 5.55 kB
/live-video/skin.css css 5.52 kB
/live-video/minimal-skin js 33.42 kB
/live-video/minimal-skin.tailwind js 39.37 kB
/live-video/skin js 33.43 kB
/live-video/skin.tailwind js 39.43 kB
/live-audio/minimal-skin.css css 3.79 kB
/live-audio/skin.css css 3.68 kB
/live-audio/minimal-skin js 22.45 kB
/live-audio/minimal-skin.tailwind js 25.59 kB
/live-audio/skin js 22.52 kB
/live-audio/skin.tailwind js 25.65 kB
UI Components (33)
Entry Initial
/ui/airplay-button 2.22 kB
/ui/alert-dialog 2.16 kB
/ui/audio-track 2.14 kB
/ui/buffering-indicator 2.13 kB
/ui/captions-button 2.23 kB
/ui/captions-radio-group 2.11 kB
/ui/cast-button 2.20 kB
/ui/controls 2.06 kB
/ui/error-dialog 2.27 kB
/ui/fullscreen-button 2.21 kB
/ui/gesture 2.29 kB
/ui/hotkey 2.21 kB
/ui/live-button 2.15 kB
/ui/menu 2.29 kB
/ui/mute-button 2.24 kB
/ui/pip-button 2.23 kB
/ui/play-button 2.22 kB
/ui/playback-rate 2.13 kB
/ui/playback-rate-button 2.22 kB
/ui/popover 2.67 kB
/ui/poster 2.03 kB
/ui/quality 2.08 kB
/ui/seek-button 2.22 kB
/ui/seek-indicator 2.10 kB
/ui/slider 2.27 kB
/ui/status-announcer 2.16 kB
/ui/status-indicator 2.09 kB
/ui/thumbnail 2.03 kB
/ui/time 2.08 kB
/ui/time-slider 2.22 kB
/ui/tooltip 2.63 kB
/ui/volume-indicator 2.09 kB
/ui/volume-slider 2.21 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes
Entries (14)
Entry Initial
. 9.40 kB
/dom 17.58 kB
/dom/media/custom-media-element 2.09 kB
/dom/media/dash 208.96 kB
/dom/media/google-cast 4.04 kB
/dom/media/hls-js 136.00 kB
/dom/media/media-host 1.25 kB
/dom/media/media-played-ranges 576 B
/dom/media/mux 151.37 kB
/dom/media/native-hls 3.07 kB
/dom/media/simple-hls 16.49 kB
/dom/media/simple-hls-audio-only 14.92 kB
/dom/media/vimeo 9.86 kB
/media/predicate 563 B
🏷️ @videojs/element — no changes
Entries (2)
Entry Initial
. 996 B
/context 943 B
📦 @videojs/store — no changes
Entries (3)
Entry Initial
. 1.39 kB
/html 696 B
/react 360 B
🔧 @videojs/utils — no changes
Entries (10)
Entry Initial
/array 104 B
/dom 2.26 kB
/events 319 B
/function 327 B
/object 275 B
/predicate 265 B
/string 231 B
/style 190 B
/time 478 B
/number 158 B
📦 @videojs/spf — no changes
Entries (4)
Entry Initial
. 4.45 kB
/dom 6.33 kB
/hls 15.37 kB
/background-video 12.85 kB

ℹ️ How to interpret

JS sizes are initial static graph totals (minified + brotli). Lazy dynamic chunks are shown separately when present.

Icon Meaning
No change
🔺 Increased ≤ 10%
🔴 Increased > 10%
🔽 Decreased
🆕 New (no baseline)

Run pnpm size locally to check current initial sizes.

@decepulis decepulis marked this pull request as ready for review July 7, 2026 19:30

@mihar-22 mihar-22 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙏

@decepulis decepulis merged commit 258101a into main Jul 7, 2026
26 checks passed
@decepulis decepulis deleted the claude/issue-1808-fiquev branch July 7, 2026 19:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Docs: Align Docs Skill Diátaxis Guidance and Refresh Stale Write-Guides Page

3 participants