feat(website): relationship-diagram cast on the relationships page

Third earmarked cast: declare a 1:n relationship, then `show relationship`
draws the two-table connector diagram — showcases the V1 relationship
visualization with motion a still block can't. Convert the relationships
reference page to .mdx and embed it above the syntax (the static diagrams
below remain the exact reference).

Recorded via `pnpm casts`; build clean (25 pages).
This commit is contained in:
claude@clouddev1
2026-06-10 14:13:14 +00:00
parent a8f84c9d17
commit bb7887ea82
3 changed files with 401 additions and 0 deletions
+22
View File
@@ -17,6 +17,28 @@
/** The shared library narrative, trimmed per cast. */
export const casts = [
{
name: 'relationship-diagram',
title: 'Declare a relationship and see it drawn',
width: 90,
height: 26,
typeSpeed: '45ms',
steps: [
{ wait: 900 },
{ type: 'create table authors with pk author_id(serial)', after: 800 },
{ type: 'add column to authors: name (text)', after: 900 },
{ type: 'create table books with pk book_id(serial)', after: 800 },
{ type: 'add column to books: title (text)', after: 700 },
{ type: 'add column to books: author_id (int)', after: 1000 },
{
type: 'add 1:n relationship as books_author from authors.author_id to books.author_id on delete cascade',
after: 1400,
},
// the money shot: the two-table connector diagram
{ type: 'show relationship books_author', after: 2600 },
{ type: 'quit', after: 400 },
],
},
{
name: 'assistive-editor',
title: 'The input field helps as you type — completion and a live validity indicator',