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:
@@ -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);
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user