Code reference detail
TutorialPlayerShell.tsx
site/src/components/TutorialPlayerShell.tsx
| Idea | Status | Tags | Summary |
|---|---|---|---|
| site | the / site folder contains a static Next. js App Router landing page for reqlan. | ||
| tutorial_location_crumb | done | Tutorial detail chrome shows a compact location trail: catalog → course → lesson → slide. Hierarchy must be obvious without a wide single-line title dump. Layout: each tier is a stacked chip — role ( and optional completion control ) on the top row; title / index value muted underneath. Titles colour up on hover, focus-within, or when the peer menu is open. * * Folder navigation: * * each tier acts like a path segment / folder. Hover or focus reveals a peer menu for that level of the tree so the user can jump without using the transport row: - catalog → courses ( enter first lesson of the chosen course, or the catalog index ) - course → peer courses - lesson → peer lessons in the active course - slide → peer slides in the active lesson ( updates the embedded player / `?slide=` ) Current peer is marked; menus stay keyboard-reachable via focus-within. * * Sizing: * * the crumb container grows to fit text; wrap before truncating. Ellipsis only as a last resort on very narrow viewports — do not cap chip width so aggressively that titles ellipsize while space remains. Course deep-links also exist at `/tutorials/#course-<series>`; catalog at `/tutorials/`. Slide shows `n/total` and updates live with the embedded player. Completion toggles stay on the role row. The crumb lesson tier always shows the * * current * * lesson only — it must not share hover / preview state with the transport lesson step dots. Step-dot hover may preview a title near the dots, never in the crumb. | |
| tutorials_section | done | The site exposes `/tutorials` and `/tutorials/[slug]/` as statically generated pages. Catalog and deck ids come from authored ["../../presentations/manifest.jsonc"]. Each detail page embeds the Reveal player iframe at `/presentations/player/?deck=<id>` using [assets] / SITE_BASE_PATH-aware `sitePath`. Each detail page hosts a unified transport chrome ( `<<` `<` steps `>` `>>` ) that drives slide nav in the embedded player via postMessage, plus lesson jumps. Location hierarchy chrome: [tutorial_location_crumb]. Blurb and try-this live on the catalog and inside the slides, not as page chrome. The player is an App Router page ( [presentation_player_route] ) so it static-exports under `trailingSlash` without colliding with `public/` HTML. Sync ( [sync_presentations] ) converts authored deck / catalog JSONC under ["../../presentations/"] into runtime JSON under `public/presentations/`, and copies assets plus vendored Reveal. js ( player shell excluded ). |
Reference labels
../src/components/TutorialPlayerShell.tsx