claude@clouddev1
a8f84c9d17
Address cast review feedback: - Trim every cast to the in-app region (generate.mjs): the recording now starts with the app already running and ends on the last in-app frame — drops the `$ rdbms-playground` launch and the return-to-shell frame (the latter was the stray cursor-under-$ artifact). Opt out per cast with `keepShell: true` for demos that document the CLI launch. - Landing quickstart cast: autoPlay + loop, with a 2.5s hold on the final frame so it pauses before restarting. - Cap the demo at max-width 46rem and centre it, so the player (fit:'width') no longer scales its font up to the full splash column. Casts re-recorded via `pnpm casts`. Build clean (25 pages). Tab-keypress visibility deferred to an in-app overlay primitive (filed as issue #22 — also serves the planned guided-lesson system); the cast notes Tab in its caption for now.
42 lines
1.2 KiB
Plaintext
42 lines
1.2 KiB
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;
|
|
loop?: boolean;
|
|
}
|
|
|
|
const { src, title, autoplay = false, loop = false } = Astro.props;
|
|
---
|
|
|
|
<figure class="demo not-content">
|
|
{title && <figcaption class="demo-caption">{title}</figcaption>}
|
|
<Cast src={src} autoPlay={autoplay} loop={loop} />
|
|
</figure>
|
|
|
|
<style>
|
|
/* Cap the demo width and centre it so the player (which scales its font to
|
|
fill its container, `fit: 'width'`) doesn't blow up to the full
|
|
content-column width on the wide splash layout — keeps the terminal font
|
|
close to the surrounding text. */
|
|
.demo {
|
|
margin: 1.5rem auto;
|
|
max-width: 46rem;
|
|
}
|
|
.demo-caption {
|
|
font-size: var(--sl-text-sm);
|
|
color: var(--sl-color-gray-3);
|
|
margin-block-end: 0.5rem;
|
|
}
|
|
</style>
|