feat(website): asciinema cast pipeline + landing quickstart demo
Settle the cast toolchain (STYLE.md #9) and build the demo pipeline end to end. Driver: autocast, chosen by spike — its !Interactive feeds keys to the running TUI and captures the redraw, the right model for a full-screen crossterm app. asciinema-automation was rejected (assumes shell echo/\n Enter; produced a garbled cast against the TUI). - add asciinema-player; Cast.astro (player island) + Demo.astro (the WASM-swap seam, ADR-website-001 §3) - casts-src/: human-readable command-lists (casts.mjs) + generate.mjs, exposed as `pnpm casts`; expands steps to autocast YAML and records to public/casts/. Command-lists are the durable source; .cast files are regenerable (final re-record sweep due once the app is locked). - quickstart.cast (create -> add columns -> insert -> show data) embedded on the landing page above the feature cards. Verified: pnpm build clean (25 pages); player + cast bundled and served; landing HTML references the cast. Visual playback check pending (no headless browser here — verify via dev server over the tunnel).
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
---
|
||||
/**
|
||||
* Demo.astro — the stable demo seam (ADR-website-001 §3). Call sites use this,
|
||||
* not Cast directly, so a future in-page WASM playground island can replace
|
||||
* the asciinema player behind the same `{ src, title, autoplay }` contract
|
||||
* with no change to the pages that embed it.
|
||||
*/
|
||||
import Cast from './Cast.astro';
|
||||
|
||||
interface Props {
|
||||
/** Path to the cast, e.g. `/casts/quickstart.cast`. */
|
||||
src: string;
|
||||
/** Optional caption shown above the demo. */
|
||||
title?: string;
|
||||
autoplay?: boolean;
|
||||
}
|
||||
|
||||
const { src, title, autoplay = false } = Astro.props;
|
||||
---
|
||||
|
||||
<figure class="demo not-content">
|
||||
{title && <figcaption class="demo-caption">{title}</figcaption>}
|
||||
<Cast src={src} autoPlay={autoplay} />
|
||||
</figure>
|
||||
|
||||
<style>
|
||||
.demo {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
.demo-caption {
|
||||
font-size: var(--sl-text-sm);
|
||||
color: var(--sl-color-gray-3);
|
||||
margin-block-end: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user