claude@clouddev1
93a40970c3
Hide the splash hero's redundant <h1> (kept in the DOM for SEO/a11y, landing-scoped via a title-only hero) and render the Wordmark + tagline + buttons in the body, so the brand lockup sits where the heading was and the content rises above the fold (it was nearly hidden on an iPad). Styles in global.css; doc-page headings are unaffected.
77 lines
3.6 KiB
Plaintext
77 lines
3.6 KiB
Plaintext
---
|
|
title: RDBMS Playground
|
|
description: A terminal playground for learning relational databases — tables, keys, relationships, indexes, queries, and query plans, hands-on.
|
|
template: splash
|
|
# Title-only hero: this keeps Starlight's splash from emitting a second,
|
|
# page-title <h1> in a content panel (which can't be styled per-page). The hero
|
|
# <h1> lives inside `.hero`, so it can be visually hidden (kept for SEO/a11y)
|
|
# while the Wordmark + tagline + buttons below it carry the visible hero — see
|
|
# `.hero h1` in global.css. tagline/actions are rendered in the body so they sit
|
|
# *below* the wordmark, where the old title used to be.
|
|
hero:
|
|
title: RDBMS Playground
|
|
---
|
|
|
|
import { Card, CardGrid, LinkCard, LinkButton } from '@astrojs/starlight/components';
|
|
import Demo from '../../components/Demo.astro';
|
|
import Wordmark from '../../components/Wordmark.astro';
|
|
|
|
<Wordmark />
|
|
|
|
<p class="hero-tagline">Learn relational databases by doing — in your terminal.</p>
|
|
|
|
<div class="hero-actions">
|
|
<LinkButton href="/getting-started/installation/" icon="right-arrow">Get started</LinkButton>
|
|
<LinkButton href="/reference/types/" variant="minimal" icon="right-arrow">Browse the reference</LinkButton>
|
|
</div>
|
|
|
|
RDBMS Playground is a cross-platform terminal app that gives you a safe
|
|
sandbox for exploring relational database concepts: tables, columns,
|
|
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." autoplay loop />
|
|
|
|
<CardGrid>
|
|
<Card title="Two ways to work" icon="seti:db">
|
|
Start in **simple mode** — a friendly, keyword-based command language —
|
|
and switch to **advanced mode** for standard SQL whenever you are ready.
|
|
|
|
<a class="card-more" href="/getting-started/modes/">Modes →</a>
|
|
</Card>
|
|
<Card title="Learn the SQL underneath" icon="open-book">
|
|
Run a simple-mode command in advanced mode and the playground shows you
|
|
the equivalent SQL, so the bridge from concepts to SQL is always visible.
|
|
|
|
<a class="card-more" href="/getting-started/modes/#seeing-the-sql-behind-a-command">Seeing the SQL →</a>
|
|
</Card>
|
|
<Card title="Safe to experiment" icon="approve-check">
|
|
Every change can be undone, your work is saved as you go, and you can
|
|
rebuild the whole database from plain, readable files.
|
|
|
|
<a class="card-more" href="/using-the-playground/undo-and-history/">Undo and history →</a>
|
|
</Card>
|
|
<Card title="See how queries run" icon="rocket">
|
|
Ask the playground to explain any query and it renders the database's
|
|
plan as an annotated tree — so indexes and scans stop being a mystery.
|
|
|
|
<a class="card-more" href="/reference/querying-and-inspecting/#query-plans">Query plans →</a>
|
|
</Card>
|
|
<Card title="Helpful as you type" icon="pencil">
|
|
The input field completes commands with <kbd>Tab</kbd>, highlights
|
|
syntax, flags mistakes before you run them, and hints what comes next.
|
|
|
|
<a class="card-more" href="/using-the-playground/the-assistive-editor/">The assistive editor →</a>
|
|
</Card>
|
|
</CardGrid>
|
|
|
|
## Start here
|
|
|
|
<CardGrid>
|
|
<LinkCard title="Install" href="/getting-started/installation/" description="Get the playground running on your machine." />
|
|
<LinkCard title="Your first project" href="/getting-started/first-project/" description="Create a table, add a row, and see it." />
|
|
<LinkCard title="The example library" href="/getting-started/example-library/" description="The small database used throughout these docs." />
|
|
<LinkCard title="Reference" href="/reference/types/" description="Every command, type, and constraint in detail." />
|
|
</CardGrid>
|