feat(website): refine casts — trim shell, autoplay+loop landing, cap size

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.
This commit is contained in:
claude@clouddev1
2026-06-10 13:56:39 +00:00
parent 1f82fb2c79
commit a8f84c9d17
6 changed files with 458 additions and 441 deletions
+9 -3
View File
@@ -13,19 +13,25 @@ interface Props {
/** Optional caption shown above the demo. */
title?: string;
autoplay?: boolean;
loop?: boolean;
}
const { src, title, autoplay = false } = Astro.props;
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} />
<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 0;
margin: 1.5rem auto;
max-width: 46rem;
}
.demo-caption {
font-size: var(--sl-text-sm);
+1 -1
View File
@@ -22,7 +22,7 @@ primary and foreign keys, relationships, indexes, queries, and query
plans. It is built for learning — from your first table to writing raw
SQL.
<Demo src="/casts/quickstart.cast" title="From a fresh table to your first query, in simple mode." />
<Demo src="/casts/quickstart.cast" title="From a fresh table to your first query, in simple mode." autoplay loop />
<CardGrid>
<Card title="Two ways to work" icon="seti:db">