claude@clouddev1
fbf449f9e0
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).
36 lines
896 B
Plaintext
36 lines
896 B
Plaintext
---
|
|
/**
|
|
* 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>
|