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:
claude@clouddev1
2026-06-10 12:59:50 +00:00
parent c0cc92a741
commit fbf449f9e0
9 changed files with 658 additions and 8 deletions
+35
View File
@@ -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>