Сторінки Середня
Wiki — Developer Docs Landing
A polished developer-documentation home for the fictional Aurora SDK, in the Stripe / Vercel / Tailwind docs mold: a grid-lit hero with product name, tagline, a big search-docs trigger and a copyable install block with package-manager tabs, a grid of popular guides and reference topic cards with drawn icons, a language-tabbed code sample showcase, a strip of CSS-drawn SDK logos, and a footer. A header light/dark toggle persists the real page theme, copy buttons work, and a Cmd+K command palette searches a fictional doc index.
Відкрити в Lab
MCP
html css vanilla-js
Цілі: JS HTML
Код
:root {
/* light theme (developer docs, violet accent) */
--bg: #ffffff;
--bg-2: #f7f8fa;
--panel: #ffffff;
--ink: #14141a;
--ink-2: #3a3a42;
--muted: #6b7280;
--line: rgba(20, 20, 30, 0.10);
--line-2: rgba(20, 20, 30, 0.16);
--link: #7c3aed;
--link-hover: #6d28d9;
--accent: #7c3aed;
--accent-soft: rgba(124, 58, 237, 0.10);
--accent-ring: rgba(124, 58, 237, 0.35);
--code-bg: #f4f4f6;
--code-ink: #1f2330;
--kbd-bg: #eceef2;
--header-bg: rgba(255, 255, 255, 0.82);
--shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.05);
--shadow-md: 0 6px 24px rgba(20, 20, 30, 0.08);
--shadow-lg: 0 18px 50px rgba(20, 20, 30, 0.14);
--tok-prompt: #16a34a;
--tok-kw: #7c3aed;
--tok-str: #16a34a;
--tok-fn: #2563eb;
--tok-num: #d97706;
--tok-com: #94a0b0;
--tok-punc: #6b7280;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--maxw: 1120px;
--font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
[data-theme="dark"] {
--bg: #0b0c10;
--bg-2: #111319;
--panel: #14161d;
--ink: #eef0f5;
--ink-2: #c2c7d2;
--muted: #8b93a3;
--line: rgba(255, 255, 255, 0.09);
--line-2: rgba(255, 255, 255, 0.16);
--link: #a78bfa;
--link-hover: #c4b5fd;
--accent: #8b5cf6;
--accent-soft: rgba(139, 92, 246, 0.16);
--accent-ring: rgba(139, 92, 246, 0.45);
--code-bg: #0f1117;
--code-ink: #d7dbe6;
--kbd-bg: #1b1e27;
--header-bg: rgba(11, 12, 16, 0.78);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-md: 0 6px 24px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.6);
--tok-prompt: #4ade80;
--tok-kw: #c4b5fd;
--tok-str: #86efac;
--tok-fn: #7dd3fc;
--tok-num: #fbbf24;
--tok-com: #5d6678;
--tok-punc: #9aa3b2;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-ui);
background: var(--bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.6;
transition: background .25s ease, color .25s ease;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
.skip-link {
position: absolute;
left: -999px;
top: 8px;
background: var(--accent);
color: #fff;
padding: 8px 14px;
border-radius: var(--r-sm);
z-index: 200;
font-weight: 600;
}
.skip-link:focus { left: 12px; }
kbd {
font-family: var(--font-mono);
font-size: 11px;
background: var(--kbd-bg);
border: 1px solid var(--line-2);
border-bottom-width: 2px;
border-radius: 5px;
padding: 1px 5px;
color: var(--ink-2);
line-height: 1.4;
}
code {
font-family: var(--font-mono);
font-size: 0.86em;
background: var(--code-bg);
color: var(--code-ink);
padding: 0.12em 0.4em;
border-radius: 5px;
border: 1px solid var(--line);
}
/* ---------- HEADER ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--header-bg);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--line);
}
.header-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 24px;
height: 60px;
display: flex;
align-items: center;
gap: 22px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--ink);
font-weight: 800;
font-size: 16px;
letter-spacing: -0.01em;
flex-shrink: 0;
}
.brand:hover { color: var(--ink); }
.brand-mark { color: var(--accent); display: inline-flex; }
.brand-sub { color: var(--muted); font-weight: 500; }
.primary-nav {
display: flex;
gap: 4px;
margin-left: 6px;
}
.primary-nav a {
color: var(--ink-2);
font-size: 14px;
font-weight: 500;
padding: 6px 10px;
border-radius: var(--r-sm);
transition: background .15s ease, color .15s ease;
}
.primary-nav a:hover { background: var(--bg-2); color: var(--ink); }
.primary-nav a.ext::after { content: "↗"; font-size: 11px; margin-left: 3px; opacity: .55; }
.header-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
}
.kbar-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--muted);
font-family: var(--font-ui);
font-size: 13px;
padding: 7px 9px 7px 11px;
border-radius: var(--r-md);
cursor: pointer;
min-width: 210px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.kbar-trigger:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.kbar-trigger span { flex: 1; text-align: left; }
.kbd-combo {
display: inline-flex;
align-items: center;
gap: 1px;
background: var(--kbd-bg);
border: 1px solid var(--line);
border-radius: 5px;
padding: 2px 5px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-2);
}
.kbd-combo span { font-size: 12px; }
.kbd-combo.lg { font-size: 13px; padding: 4px 8px; }
.gh-link, .theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--r-md);
border: 1px solid var(--line);
background: var(--panel);
color: var(--ink-2);
cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gh-link:hover, .theme-toggle:hover { background: var(--bg-2); color: var(--ink); border-color: var(--line-2); }
.theme-toggle .ic-moon { display: none; }
[data-theme="dark"] .theme-toggle .ic-sun { display: none; }
[data-theme="dark"] .theme-toggle .ic-moon { display: inline; }
/* ---------- HERO ---------- */
.hero {
position: relative;
border-bottom: 1px solid var(--line);
background:
radial-gradient(60% 80% at 50% -10%, var(--accent-soft), transparent 70%);
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 46px 46px;
mask-image: radial-gradient(70% 60% at 50% 0%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 30%, transparent 75%);
opacity: .6;
pointer-events: none;
}
.hero-inner {
position: relative;
max-width: 760px;
margin: 0 auto;
padding: 72px 24px 64px;
text-align: center;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid var(--accent-ring);
padding: 5px 12px;
border-radius: 999px;
margin: 0 0 22px;
}
.eyebrow-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.hero h1 {
font-size: clamp(34px, 6vw, 56px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 800;
margin: 0 0 18px;
}
.grad {
background: linear-gradient(100deg, var(--accent), #ec4899 55%, var(--accent));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lede {
font-size: clamp(16px, 2.4vw, 19px);
color: var(--ink-2);
max-width: 620px;
margin: 0 auto 30px;
line-height: 1.65;
}
.kbar-hero {
display: inline-flex;
align-items: center;
gap: 11px;
width: 100%;
max-width: 520px;
background: var(--panel);
border: 1px solid var(--line-2);
color: var(--muted);
font-family: var(--font-ui);
font-size: 15px;
padding: 14px 14px 14px 16px;
border-radius: var(--r-lg);
cursor: pointer;
box-shadow: var(--shadow-md);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.kbar-hero:hover {
border-color: var(--accent-ring);
box-shadow: var(--shadow-lg);
transform: translateY(-1px);
}
.kbar-hero svg { color: var(--accent); }
.kbar-hero-label { flex: 1; text-align: left; }
.install-block {
margin: 30px auto 0;
max-width: 520px;
background: var(--code-bg);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
text-align: left;
box-shadow: var(--shadow-sm);
}
.install-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 8px 6px 6px;
border-bottom: 1px solid var(--line);
background: var(--panel);
}
.install-tabs, .lang-tabs { display: flex; gap: 2px; }
.install-tab, .lang-tab {
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--muted);
background: transparent;
border: 0;
padding: 6px 11px;
border-radius: var(--r-sm);
cursor: pointer;
transition: background .14s ease, color .14s ease;
}
.install-tab:hover, .lang-tab:hover { background: var(--bg-2); color: var(--ink); }
.install-tab.active, .lang-tab.active {
background: var(--accent-soft);
color: var(--accent);
font-weight: 600;
}
.install-cmd {
margin: 0;
padding: 14px 16px;
font-family: var(--font-mono);
font-size: 13.5px;
color: var(--code-ink);
overflow-x: auto;
}
.install-cmd .tok-prompt { color: var(--tok-prompt); margin-right: 8px; user-select: none; }
.copy-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1px solid transparent;
color: var(--muted);
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 500;
padding: 5px 9px;
border-radius: var(--r-sm);
cursor: pointer;
transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.copy-btn:hover { background: var(--bg-2); color: var(--ink); border-color: var(--line); }
.copy-btn.copied { color: var(--tip, #16a34a); }
.copy-btn.copied .copy-label { color: inherit; }
.hero-meta {
margin-top: 26px;
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
justify-content: center;
align-items: center;
font-size: 13.5px;
color: var(--muted);
}
.hero-meta strong { color: var(--ink); font-weight: 700; }
.hero-meta .dot { opacity: .5; }
/* ---------- SECTIONS ---------- */
.section {
max-width: var(--maxw);
margin: 0 auto;
padding: 64px 24px;
}
.section-alt { background: var(--bg-2); max-width: none; }
.section-alt > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 26px;
}
.section-head h2 {
font-size: clamp(22px, 3vw, 28px);
letter-spacing: -0.02em;
font-weight: 700;
margin: 0;
}
.see-all {
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
/* ---------- CARDS ---------- */
.card-grid { display: grid; gap: 16px; }
.guides-grid, .topics-grid {
grid-template-columns: repeat(3, 1fr);
}
.card {
position: relative;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 20px;
color: var(--ink);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
overflow: hidden;
}
.card::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(120% 80% at 0% 0%, var(--accent-soft), transparent 55%);
opacity: 0;
transition: opacity .2s ease;
pointer-events: none;
}
.card:hover {
border-color: var(--accent-ring);
box-shadow: var(--shadow-md);
transform: translateY(-3px);
color: var(--ink);
}
.card:hover::after { opacity: 1; }
.guide-card h3, .topic-card h3 {
font-size: 16px;
font-weight: 700;
margin: 14px 0 6px;
letter-spacing: -0.01em;
}
.topic-card h3 { margin-top: 0; }
.guide-card p, .topic-card p {
font-size: 13.5px;
color: var(--muted);
margin: 0 0 14px;
line-height: 1.55;
}
.card-foot {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--accent);
font-weight: 500;
}
.card-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: var(--r-md);
background: var(--accent-soft);
color: var(--accent);
border: 1px solid var(--accent-ring);
}
.topic-card { display: flex; gap: 14px; align-items: flex-start; }
.topic-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: var(--r-md);
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--accent);
font-family: var(--font-mono);
font-size: 18px;
font-weight: 600;
}
.topic-count {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--muted);
}
/* ---------- SAMPLE SHOWCASE ---------- */
.sample-showcase {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 36px;
align-items: center;
}
.sample-copy h3 {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 12px;
}
.sample-copy p { color: var(--ink-2); margin: 0 0 18px; }
.sample-points {
list-style: none;
padding: 0;
margin: 0 0 22px;
display: grid;
gap: 9px;
}
.sample-points li {
position: relative;
padding-left: 26px;
font-size: 14px;
color: var(--ink-2);
}
.sample-points li::before {
content: "";
position: absolute;
left: 0; top: 3px;
width: 17px; height: 17px;
border-radius: 50%;
background: var(--accent-soft);
border: 1px solid var(--accent-ring);
}
.sample-points li::after {
content: "";
position: absolute;
left: 6px; top: 8px;
width: 5px; height: 8px;
border: solid var(--accent);
border-width: 0 2px 2px 0;
transform: rotate(40deg);
}
.btn-ghost {
font-weight: 600;
font-size: 14px;
}
.sample-code {
background: var(--code-bg);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.code-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 8px;
border-bottom: 1px solid var(--line);
background: var(--panel);
}
.lang-tabs { overflow-x: auto; }
.code-body {
margin: 0;
padding: 18px 20px;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.7;
color: var(--code-ink);
overflow-x: auto;
min-height: 250px;
}
.code-body .tok-kw { color: var(--tok-kw); font-weight: 500; }
.code-body .tok-str { color: var(--tok-str); }
.code-body .tok-fn { color: var(--tok-fn); }
.code-body .tok-num { color: var(--tok-num); }
.code-body .tok-com { color: var(--tok-com); font-style: italic; }
.code-body .tok-punc { color: var(--tok-punc); }
/* ---------- SDK STRIP ---------- */
.sdk-strip {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.sdk-chip {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 999px;
padding: 8px 16px 8px 8px;
font-size: 14px;
font-weight: 600;
color: var(--ink-2);
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
cursor: default;
}
.sdk-chip:hover { border-color: var(--accent-ring); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sdk-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
border-radius: 8px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
color: #fff;
}
.mk-ts { background: #3178c6; }
.mk-py { background: #3b75a8; }
.mk-go { background: #00add8; }
.mk-rs { background: #b7411e; }
.mk-rb { background: #cc342d; }
.mk-php { background: #6a7cb5; }
.mk-rn { background: #087ea4; }
.mk-cli { background: #2b3038; }
/* ---------- CTA BAND ---------- */
.cta-band {
border-top: 1px solid var(--line);
background:
radial-gradient(80% 120% at 50% 0%, var(--accent-soft), transparent 70%),
var(--bg);
}
.cta-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 56px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
flex-wrap: wrap;
}
.cta-inner h2 { font-size: 26px; letter-spacing: -0.02em; margin: 0 0 6px; }
.cta-inner p { color: var(--ink-2); margin: 0; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-primary, .btn-secondary {
display: inline-flex;
align-items: center;
font-weight: 600;
font-size: 15px;
padding: 11px 20px;
border-radius: var(--r-md);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary {
background: var(--accent);
color: #fff;
box-shadow: 0 6px 18px var(--accent-soft);
}
.btn-primary:hover { background: var(--link-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary {
background: var(--panel);
color: var(--ink);
border: 1px solid var(--line-2);
}
.btn-secondary:hover { background: var(--bg-2); color: var(--ink); transform: translateY(-1px); }
/* ---------- FOOTER ---------- */
.site-footer {
border-top: 1px solid var(--line);
background: var(--bg-2);
}
.footer-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 52px 24px 36px;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 32px;
}
.footer-brand { max-width: 280px; }
.footer-brand .brand-mark { color: var(--accent); }
.footer-tag { color: var(--muted); font-size: 14px; margin: 12px 0 0; line-height: 1.55; }
.footer-col h4 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
margin: 0 0 14px;
font-weight: 700;
}
.footer-col a {
display: block;
color: var(--ink-2);
font-size: 14px;
padding: 5px 0;
}
.footer-col a:hover { color: var(--link); }
.footer-bottom {
max-width: var(--maxw);
margin: 0 auto;
padding: 18px 24px;
border-top: 1px solid var(--line);
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
font-size: 13px;
color: var(--muted);
}
.footer-version { font-family: var(--font-mono); font-size: 12px; }
/* ---------- ⌘K OVERLAY ---------- */
.kbar-overlay {
position: fixed;
inset: 0;
z-index: 300;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 12vh 16px 16px;
}
.kbar-overlay[hidden] { display: none; }
.kbar-backdrop {
position: absolute;
inset: 0;
background: rgba(10, 11, 16, 0.55);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
animation: fade .15s ease;
}
.kbar-panel {
position: relative;
width: 100%;
max-width: 600px;
background: var(--panel);
border: 1px solid var(--line-2);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
animation: pop .16s cubic-bezier(.2,.8,.3,1);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.kbar-input-wrap {
display: flex;
align-items: center;
gap: 11px;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
}
.kbar-input-wrap svg { color: var(--muted); flex-shrink: 0; }
#kbarInput {
flex: 1;
border: 0;
background: transparent;
color: var(--ink);
font-family: var(--font-ui);
font-size: 16px;
outline: none;
}
#kbarInput::placeholder { color: var(--muted); }
.kbd-esc { flex-shrink: 0; }
.kbar-results {
list-style: none;
margin: 0;
padding: 6px;
max-height: 46vh;
overflow-y: auto;
}
.kbar-result {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: var(--r-md);
cursor: pointer;
}
.kbar-result[aria-selected="true"],
.kbar-result:hover {
background: var(--accent-soft);
}
.kbar-result-ic {
flex-shrink: 0;
width: 30px; height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--accent);
font-family: var(--font-mono);
font-size: 13px;
}
.kbar-result-main { flex: 1; min-width: 0; }
.kbar-result-title {
font-size: 14px;
font-weight: 600;
color: var(--ink);
}
.kbar-result-title mark {
background: transparent;
color: var(--accent);
font-weight: 700;
}
.kbar-result-meta {
font-size: 12px;
color: var(--muted);
}
.kbar-result-kind {
font-family: var(--font-mono);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
border: 1px solid var(--line);
border-radius: 5px;
padding: 2px 6px;
flex-shrink: 0;
}
.kbar-empty {
padding: 28px 16px;
text-align: center;
color: var(--muted);
font-size: 14px;
}
.kbar-foot {
display: flex;
gap: 16px;
padding: 10px 16px;
border-top: 1px solid var(--line);
font-size: 12px;
color: var(--muted);
}
.kbar-foot span { display: inline-flex; align-items: center; gap: 5px; }
.kbar-foot kbd { font-size: 10px; padding: 1px 4px; }
/* ---------- TOAST ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 26px;
transform: translate(-50%, 20px);
background: var(--ink);
color: var(--bg);
font-size: 13.5px;
font-weight: 500;
padding: 11px 18px;
border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
z-index: 400;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
.guides-grid, .topics-grid { grid-template-columns: repeat(2, 1fr); }
.footer-inner { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; max-width: none; }
.sample-showcase { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 820px) {
.primary-nav { display: none; }
.kbar-trigger span { display: none; }
.kbar-trigger { min-width: 0; }
.section { padding: 48px 20px; }
.section-alt { padding: 48px 0; }
.hero-inner { padding: 56px 20px 50px; }
}
@media (max-width: 520px) {
.header-inner { padding: 0 16px; gap: 12px; }
.brand-name { font-size: 15px; }
.guides-grid, .topics-grid { grid-template-columns: 1fr; }
.footer-inner { grid-template-columns: 1fr; gap: 26px; }
.cta-inner { flex-direction: column; align-items: flex-start; }
.cta-actions { width: 100%; }
.btn-primary, .btn-secondary { flex: 1; justify-content: center; }
.install-tab, .lang-tab { padding: 6px 8px; font-size: 12px; }
.kbar-overlay { padding: 8vh 10px 10px; }
.hero-meta { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto; }
}(function () {
"use strict";
/* ---------------- Toast helper ---------------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 1900);
}
/* ---------------- Theme toggle (persisted) ---------------- */
var root = document.documentElement;
var themeToggle = document.getElementById("themeToggle");
var STORE = "aurora-docs-theme";
function applyTheme(theme) {
root.setAttribute("data-theme", theme);
if (themeToggle) {
themeToggle.setAttribute("aria-pressed", theme === "dark" ? "true" : "false");
themeToggle.setAttribute(
"aria-label",
theme === "dark" ? "Switch to light theme" : "Switch to dark theme"
);
}
}
var stored;
try { stored = localStorage.getItem(STORE); } catch (e) {}
if (!stored) {
stored = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark" : "light";
}
applyTheme(stored);
if (themeToggle) {
themeToggle.addEventListener("click", function () {
var next = root.getAttribute("data-theme") === "dark" ? "light" : "dark";
applyTheme(next);
try { localStorage.setItem(STORE, next); } catch (e) {}
toast(next === "dark" ? "Dark theme enabled" : "Light theme enabled");
});
}
/* ---------------- Copy-to-clipboard ---------------- */
function copyText(text) {
if (navigator.clipboard && navigator.clipboard.writeText) {
return navigator.clipboard.writeText(text);
}
return new Promise(function (resolve, reject) {
try {
var ta = document.createElement("textarea");
ta.value = text;
ta.style.position = "fixed";
ta.style.opacity = "0";
document.body.appendChild(ta);
ta.select();
document.execCommand("copy");
document.body.removeChild(ta);
resolve();
} catch (err) { reject(err); }
});
}
document.querySelectorAll(".copy-btn").forEach(function (btn) {
btn.addEventListener("click", function () {
var target = document.getElementById(btn.getAttribute("data-copy-target"));
if (!target) return;
copyText(target.textContent.replace(/^\$\s*/, "")).then(
function () {
btn.classList.add("copied");
var label = btn.querySelector(".copy-label");
var prev = label ? label.textContent : null;
if (label) label.textContent = "Copied";
toast("Copied to clipboard");
setTimeout(function () {
btn.classList.remove("copied");
if (label && prev !== null) label.textContent = prev;
}, 1500);
},
function () { toast("Copy failed — select manually"); }
);
});
});
/* ---------------- Install package-manager tabs ---------------- */
var installCmd = document.getElementById("installCmd");
var installCmds = {
npm: "npm install @aurora/client",
pnpm: "pnpm add @aurora/client",
bun: "bun add @aurora/client",
yarn: "yarn add @aurora/client"
};
document.querySelectorAll(".install-tab").forEach(function (tab) {
tab.addEventListener("click", function () {
document.querySelectorAll(".install-tab").forEach(function (t) {
t.classList.remove("active");
t.setAttribute("aria-selected", "false");
});
tab.classList.add("active");
tab.setAttribute("aria-selected", "true");
var pm = tab.getAttribute("data-pm");
if (installCmd && installCmds[pm]) {
installCmd.innerHTML =
'<span class="tok-prompt">$</span> ' + installCmds[pm];
}
});
});
/* ---------------- Code-sample language tabs ---------------- */
var sampleCode = document.getElementById("sampleCode");
var samples = {
ts: [
['<span class="tok-kw">import</span> { createClient } <span class="tok-kw">from</span> <span class="tok-str">"@aurora/client"</span>;'],
[''],
['<span class="tok-kw">const</span> db <span class="tok-punc">=</span> <span class="tok-fn">createClient</span>({ region<span class="tok-punc">:</span> <span class="tok-str">"auto"</span> });'],
[''],
['<span class="tok-com">// fully typed result</span>'],
['<span class="tok-kw">const</span> users <span class="tok-punc">=</span> <span class="tok-kw">await</span> db'],
[' .<span class="tok-fn">from</span>(<span class="tok-str">"users"</span>)'],
[' .<span class="tok-fn">where</span>({ active<span class="tok-punc">:</span> <span class="tok-kw">true</span> })'],
[' .<span class="tok-fn">limit</span>(<span class="tok-num">25</span>);']
],
py: [
['<span class="tok-kw">from</span> aurora <span class="tok-kw">import</span> create_client'],
[''],
['db <span class="tok-punc">=</span> <span class="tok-fn">create_client</span>(region<span class="tok-punc">=</span><span class="tok-str">"auto"</span>)'],
[''],
['<span class="tok-com"># streamed cursor, async iterable</span>'],
['users <span class="tok-punc">=</span> <span class="tok-kw">await</span> db.<span class="tok-fn">table</span>(<span class="tok-str">"users"</span>) \\'],
[' .<span class="tok-fn">where</span>(active<span class="tok-punc">=</span><span class="tok-kw">True</span>) \\'],
[' .<span class="tok-fn">limit</span>(<span class="tok-num">25</span>) \\'],
[' .<span class="tok-fn">fetch</span>()']
],
go: [
['<span class="tok-kw">package</span> main'],
[''],
['<span class="tok-kw">import</span> <span class="tok-str">"github.com/aurora/client"</span>'],
[''],
['db, _ <span class="tok-punc">:=</span> client.<span class="tok-fn">New</span>(client.Region(<span class="tok-str">"auto"</span>))'],
[''],
['<span class="tok-com">// typed struct scan</span>'],
['users, err <span class="tok-punc">:=</span> db.<span class="tok-fn">From</span>(<span class="tok-str">"users"</span>).'],
[' <span class="tok-fn">Where</span>(<span class="tok-str">"active"</span>, <span class="tok-kw">true</span>).<span class="tok-fn">Limit</span>(<span class="tok-num">25</span>).<span class="tok-fn">Scan</span>()']
],
rs: [
['<span class="tok-kw">use</span> aurora<span class="tok-punc">::</span>Client;'],
[''],
['<span class="tok-kw">let</span> db <span class="tok-punc">=</span> Client<span class="tok-punc">::</span><span class="tok-fn">connect</span>(<span class="tok-str">"auto"</span>).<span class="tok-fn">await</span>?;'],
[''],
['<span class="tok-com">// zero-copy typed rows</span>'],
['<span class="tok-kw">let</span> users <span class="tok-punc">=</span> db'],
[' .<span class="tok-fn">from</span>(<span class="tok-str">"users"</span>)'],
[' .<span class="tok-fn">filter</span>(<span class="tok-str">"active"</span>, <span class="tok-kw">true</span>)'],
[' .<span class="tok-fn">limit</span>(<span class="tok-num">25</span>).<span class="tok-fn">all</span>().<span class="tok-fn">await</span>?;']
]
};
var samplesPlain = {
ts: 'import { createClient } from "@aurora/client";\n\nconst db = createClient({ region: "auto" });\n\n// fully typed result\nconst users = await db\n .from("users")\n .where({ active: true })\n .limit(25);',
py: 'from aurora import create_client\n\ndb = create_client(region="auto")\n\n# streamed cursor, async iterable\nusers = await db.table("users") \\\n .where(active=True) \\\n .limit(25) \\\n .fetch()',
go: 'package main\n\nimport "github.com/aurora/client"\n\ndb, _ := client.New(client.Region("auto"))\n\n// typed struct scan\nusers, err := db.From("users").\n Where("active", true).Limit(25).Scan()',
rs: 'use aurora::Client;\n\nlet db = Client::connect("auto").await?;\n\n// zero-copy typed rows\nlet users = db\n .from("users")\n .filter("active", true)\n .limit(25).all().await?;'
};
function renderSample(lang) {
if (!sampleCode || !samples[lang]) return;
sampleCode.innerHTML = samples[lang].map(function (l) { return l[0]; }).join("\n");
sampleCode.setAttribute("data-plain", samplesPlain[lang]);
}
document.querySelectorAll(".lang-tab").forEach(function (tab) {
tab.addEventListener("click", function () {
document.querySelectorAll(".lang-tab").forEach(function (t) {
t.classList.remove("active");
t.setAttribute("aria-selected", "false");
});
tab.classList.add("active");
tab.setAttribute("aria-selected", "true");
renderSample(tab.getAttribute("data-lang"));
});
});
renderSample("ts");
/* ---------------- ⌘K command palette ---------------- */
var overlay = document.getElementById("kbarOverlay");
var input = document.getElementById("kbarInput");
var results = document.getElementById("kbarResults");
var activeIndex = -1;
var lastFocused = null;
var INDEX = [
{ title: "Quickstart", kind: "guide", ic: "⚡", meta: "Get running in 5 minutes", href: "#guide-quickstart" },
{ title: "Authentication & tokens", kind: "guide", ic: "⚿", meta: "Scoped tokens, key rotation", href: "#guide-auth" },
{ title: "Realtime sync", kind: "guide", ic: "≈", meta: "Delta streams & live queries", href: "#guide-realtime" },
{ title: "Deploy to the edge", kind: "guide", ic: "☁", meta: "Workers, Deno, serverless", href: "#guide-edge" },
{ title: "Schema migrations", kind: "guide", ic: "⛁", meta: "Zero-downtime migrations", href: "#guide-migrations" },
{ title: "Observability & tracing", kind: "guide", ic: "∿", meta: "Latency budgets, logs", href: "#guide-observability" },
{ title: "Client API reference", kind: "api", ic: "{}", meta: "Queries, mutations, batching", href: "#topic-client" },
{ title: "Data modeling", kind: "api", ic: "⛁", meta: "Tables, relations, indexes", href: "#topic-data" },
{ title: "Row-level security", kind: "api", ic: "⚿", meta: "Access policies & rules", href: "#topic-auth" },
{ title: "aurora CLI reference", kind: "api", ic: "⌘", meta: "Local dev, codegen, CI", href: "#topic-cli" },
{ title: "Webhooks & events", kind: "api", ic: "⇄", meta: "Triggers, retries, replay", href: "#topic-webhooks" },
{ title: "TypeScript SDK", kind: "sdk", ic: "TS", meta: "Typed client for Node & edge", href: "#sdks" },
{ title: "Python SDK", kind: "sdk", ic: "Py", meta: "Async client & query builder", href: "#sdks" },
{ title: "Go SDK", kind: "sdk", ic: "Go", meta: "Struct-scan typed results", href: "#sdks" },
{ title: "Rust SDK", kind: "sdk", ic: "Rs", meta: "Zero-copy typed rows", href: "#sdks" },
{ title: "Query examples", kind: "example", ic: "</>", meta: "One client, every runtime", href: "#samples" },
{ title: "Changelog v4.2", kind: "page", ic: "✦", meta: "What's new in this release", href: "#changelog" }
];
function escapeHtml(s) {
return s.replace(/[&<>"]/g, function (c) {
return { "&": "&", "<": "<", ">": ">", '"': """ }[c];
});
}
function highlight(text, q) {
if (!q) return escapeHtml(text);
var idx = text.toLowerCase().indexOf(q.toLowerCase());
if (idx === -1) return escapeHtml(text);
return escapeHtml(text.slice(0, idx)) +
"<mark>" + escapeHtml(text.slice(idx, idx + q.length)) + "</mark>" +
escapeHtml(text.slice(idx + q.length));
}
function search(q) {
q = q.trim();
if (!q) return INDEX.slice(0, 7);
var lc = q.toLowerCase();
return INDEX.filter(function (it) {
return it.title.toLowerCase().indexOf(lc) !== -1 ||
it.meta.toLowerCase().indexOf(lc) !== -1 ||
it.kind.indexOf(lc) !== -1;
});
}
function renderResults(q) {
var items = search(q);
activeIndex = items.length ? 0 : -1;
if (!items.length) {
results.innerHTML =
'<li class="kbar-empty">No results for “' + escapeHtml(q) + '”. Try “auth”, “deploy”, or “cli”.</li>';
return;
}
results.innerHTML = items.map(function (it, i) {
return '<li class="kbar-result" role="option" data-href="' + it.href +
'" aria-selected="' + (i === 0 ? "true" : "false") + '">' +
'<span class="kbar-result-ic">' + escapeHtml(it.ic) + '</span>' +
'<span class="kbar-result-main">' +
'<span class="kbar-result-title">' + highlight(it.title, q) + '</span>' +
'<span class="kbar-result-meta">' + escapeHtml(it.meta) + '</span>' +
'</span>' +
'<span class="kbar-result-kind">' + escapeHtml(it.kind) + '</span>' +
'</li>';
}).join("");
}
function getResultEls() {
return Array.prototype.slice.call(results.querySelectorAll(".kbar-result"));
}
function setActive(i) {
var els = getResultEls();
if (!els.length) return;
activeIndex = (i + els.length) % els.length;
els.forEach(function (el, idx) {
el.setAttribute("aria-selected", idx === activeIndex ? "true" : "false");
if (idx === activeIndex) el.scrollIntoView({ block: "nearest" });
});
}
function openKbar() {
if (!overlay.hidden) return;
lastFocused = document.activeElement;
overlay.hidden = false;
document.body.style.overflow = "hidden";
input.value = "";
renderResults("");
setTimeout(function () { input.focus(); }, 0);
}
function closeKbar() {
if (overlay.hidden) return;
overlay.hidden = true;
document.body.style.overflow = "";
if (lastFocused && lastFocused.focus) lastFocused.focus();
}
function activate(el) {
var href = el.getAttribute("data-href");
closeKbar();
if (href) {
var target = document.querySelector(href);
if (target) target.scrollIntoView({ behavior: "smooth", block: "start" });
else if (document.getElementById(href.slice(1))) {
location.hash = href;
}
}
toast("Opening " + el.querySelector(".kbar-result-title").textContent);
}
["kbarTrigger", "kbarHero"].forEach(function (id) {
var el = document.getElementById(id);
if (el) el.addEventListener("click", openKbar);
});
document.querySelectorAll("[data-kbar-close]").forEach(function (el) {
el.addEventListener("click", closeKbar);
});
if (input) {
input.addEventListener("input", function () { renderResults(input.value); });
}
if (results) {
results.addEventListener("click", function (e) {
var li = e.target.closest(".kbar-result");
if (li) activate(li);
});
results.addEventListener("mousemove", function (e) {
var li = e.target.closest(".kbar-result");
if (!li) return;
var els = getResultEls();
var i = els.indexOf(li);
if (i !== -1 && i !== activeIndex) setActive(i);
});
}
document.addEventListener("keydown", function (e) {
// Global ⌘K / Ctrl+K and "/" to open
var isK = (e.key === "k" || e.key === "K") && (e.metaKey || e.ctrlKey);
if (isK) {
e.preventDefault();
overlay.hidden ? openKbar() : closeKbar();
return;
}
if (e.key === "/" && overlay.hidden) {
var tag = (document.activeElement && document.activeElement.tagName) || "";
if (tag !== "INPUT" && tag !== "TEXTAREA") {
e.preventDefault();
openKbar();
}
return;
}
if (overlay.hidden) return;
if (e.key === "Escape") { e.preventDefault(); closeKbar(); }
else if (e.key === "ArrowDown") { e.preventDefault(); setActive(activeIndex + 1); }
else if (e.key === "ArrowUp") { e.preventDefault(); setActive(activeIndex - 1); }
else if (e.key === "Enter") {
e.preventDefault();
var els = getResultEls();
if (els[activeIndex]) activate(els[activeIndex]);
}
});
/* ---------------- Card hover micro-feedback (accessible focus) ---------------- */
document.querySelectorAll(".guide-card, .topic-card").forEach(function (card) {
card.addEventListener("click", function (e) {
// allow normal anchor jump but announce
var h3 = card.querySelector("h3");
if (h3) toast("Opening " + h3.textContent);
});
});
/* ---------------- SDK chip feedback ---------------- */
document.querySelectorAll(".sdk-chip").forEach(function (chip) {
chip.addEventListener("click", function () {
toast(chip.textContent.trim() + " SDK — docs coming up");
});
});
})();<!doctype html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Aurora SDK — Developer Documentation</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="site-header">
<div class="header-inner">
<a class="brand" href="#top" aria-label="Aurora home">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none">
<path d="M12 2 3 7v10l9 5 9-5V7l-9-5Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
<path d="M12 6.5 7 9.2v5.6l5 2.7 5-2.7V9.2L12 6.5Z" fill="currentColor" opacity=".22"/>
</svg>
</span>
<span class="brand-name">Aurora<span class="brand-sub">/docs</span></span>
</a>
<nav class="primary-nav" aria-label="Primary">
<a href="#guides">Guides</a>
<a href="#topics">Reference</a>
<a href="#samples">Examples</a>
<a href="#sdks">SDKs</a>
<a class="ext" href="#changelog">Changelog</a>
</nav>
<div class="header-actions">
<button class="kbar-trigger" id="kbarTrigger" aria-label="Search documentation">
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" aria-hidden="true"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="1.8"/><path d="m20 20-3.2-3.2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
<span>Search docs</span>
<kbd class="kbd-combo"><span>⌘</span>K</kbd>
</button>
<a class="gh-link" href="#github" aria-label="GitHub repository">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.53 2.36 1.09 2.94.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.6 9.6 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.69-4.57 4.94.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2Z"/></svg>
</a>
<button class="theme-toggle" id="themeToggle" aria-label="Toggle color theme" aria-pressed="false">
<svg class="ic-sun" viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="4.2" stroke="currentColor" stroke-width="1.8"/><path d="M12 2.5v2.3M12 19.2v2.3M21.5 12h-2.3M4.8 12H2.5M18.7 5.3l-1.6 1.6M6.9 17.1l-1.6 1.6M18.7 18.7l-1.6-1.6M6.9 6.9 5.3 5.3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
<svg class="ic-moon" viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true"><path d="M20 14.2A8 8 0 0 1 9.8 4 8 8 0 1 0 20 14.2Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
</button>
</div>
</div>
</header>
<main id="main">
<span id="top"></span>
<!-- HERO -->
<section class="hero">
<div class="hero-inner">
<p class="eyebrow"><span class="eyebrow-dot"></span> Aurora SDK · v4.2 stable</p>
<h1>Build with <span class="grad">Aurora</span> in minutes.</h1>
<p class="lede">
The typed data platform for edge-native apps. Stream, sync, and query your data
from any runtime with a single client — no servers to manage, no cold starts.
</p>
<button class="kbar-hero" id="kbarHero">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="1.8"/><path d="m20 20-3.2-3.2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
<span class="kbar-hero-label">Search the docs…</span>
<kbd class="kbd-combo lg"><span>⌘</span>K</kbd>
</button>
<div class="install-block">
<div class="install-head">
<div class="install-tabs" role="tablist" aria-label="Package manager">
<button class="install-tab active" role="tab" aria-selected="true" data-pm="npm">npm</button>
<button class="install-tab" role="tab" aria-selected="false" data-pm="pnpm">pnpm</button>
<button class="install-tab" role="tab" aria-selected="false" data-pm="bun">bun</button>
<button class="install-tab" role="tab" aria-selected="false" data-pm="yarn">yarn</button>
</div>
<button class="copy-btn" data-copy-target="installCmd" aria-label="Copy install command">
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="M5 15V5a2 2 0 0 1 2-2h10" stroke="currentColor" stroke-width="1.7"/></svg>
<span class="copy-label">Copy</span>
</button>
</div>
<pre class="install-cmd"><code id="installCmd"><span class="tok-prompt">$</span> npm install @aurora/client</code></pre>
</div>
<div class="hero-meta">
<span><strong>9.2k</strong> projects shipping</span>
<span class="dot">·</span>
<span><strong>1.4 kB</strong> gzipped core</span>
<span class="dot">·</span>
<span><strong>Edge</strong>-ready by default</span>
</div>
</div>
</section>
<!-- POPULAR GUIDES -->
<section class="section" id="guides">
<div class="section-head">
<h2>Popular guides</h2>
<a class="see-all" href="#guides">Browse all guides →</a>
</div>
<div class="card-grid guides-grid">
<a class="card guide-card" href="#guide-quickstart">
<span class="card-ic ic-bolt" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg>
</span>
<h3>Quickstart</h3>
<p>Spin up a typed client and run your first query in under five minutes.</p>
<span class="card-foot">5 min read</span>
</a>
<a class="card guide-card" href="#guide-auth">
<span class="card-ic ic-lock" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none"><rect x="5" y="10.5" width="14" height="9.5" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5" stroke="currentColor" stroke-width="1.7"/></svg>
</span>
<h3>Authentication</h3>
<p>Issue scoped tokens, rotate keys, and gate access with row-level rules.</p>
<span class="card-foot">8 min read</span>
</a>
<a class="card guide-card" href="#guide-realtime">
<span class="card-ic ic-wave" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M3 12c2-4 4-4 6 0s4 4 6 0 4-4 6 0" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
</span>
<h3>Realtime sync</h3>
<p>Subscribe to live changes with delta streams and optimistic writes.</p>
<span class="card-foot">10 min read</span>
</a>
<a class="card guide-card" href="#guide-edge">
<span class="card-ic ic-globe" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.7"/><path d="M3 12h18M12 3c2.8 2.4 2.8 15.6 0 18M12 3c-2.8 2.4-2.8 15.6 0 18" stroke="currentColor" stroke-width="1.5"/></svg>
</span>
<h3>Deploy to the edge</h3>
<p>Ship the client to Workers, Deno, and serverless functions worldwide.</p>
<span class="card-foot">7 min read</span>
</a>
<a class="card guide-card" href="#guide-migrations">
<span class="card-ic ic-stack" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="m12 4 8 4-8 4-8-4 8-4Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="m4 12 8 4 8-4M4 16l8 4 8-4" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg>
</span>
<h3>Schema migrations</h3>
<p>Version your schema, run zero-downtime migrations, and roll back safely.</p>
<span class="card-foot">12 min read</span>
</a>
<a class="card guide-card" href="#guide-observability">
<span class="card-ic ic-pulse" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M3 12h4l2-6 4 12 2-6h6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<h3>Observability</h3>
<p>Trace queries, watch latency budgets, and wire up structured logs.</p>
<span class="card-foot">9 min read</span>
</a>
</div>
</section>
<!-- BY TOPIC -->
<section class="section section-alt" id="topics">
<div class="section-head">
<h2>Browse by topic</h2>
<a class="see-all" href="#topics">Full reference →</a>
</div>
<div class="card-grid topics-grid">
<a class="card topic-card" href="#topic-client">
<span class="topic-ic">{ }</span>
<div>
<h3>Client API</h3>
<p>Connection, queries, mutations, batching, and the typed query builder.</p>
<span class="topic-count">42 pages</span>
</div>
</a>
<a class="card topic-card" href="#topic-data">
<span class="topic-ic">⛁</span>
<div>
<h3>Data modeling</h3>
<p>Tables, relations, indexes, computed columns, and constraints.</p>
<span class="topic-count">28 pages</span>
</div>
</a>
<a class="card topic-card" href="#topic-auth">
<span class="topic-ic">⚿</span>
<div>
<h3>Auth & access</h3>
<p>Tokens, sessions, OAuth providers, and row-level security policies.</p>
<span class="topic-count">19 pages</span>
</div>
</a>
<a class="card topic-card" href="#topic-cli">
<span class="topic-ic">⌘</span>
<div>
<h3>CLI & tooling</h3>
<p>The <code>aurora</code> CLI, local dev server, codegen, and CI recipes.</p>
<span class="topic-count">23 pages</span>
</div>
</a>
<a class="card topic-card" href="#topic-deploy">
<span class="topic-ic">☁</span>
<div>
<h3>Deploy & runtime</h3>
<p>Regions, replicas, edge caching, and per-environment config.</p>
<span class="topic-count">17 pages</span>
</div>
</a>
<a class="card topic-card" href="#topic-webhooks">
<span class="topic-ic">⇄</span>
<div>
<h3>Webhooks & events</h3>
<p>Event triggers, delivery retries, signing secrets, and replay.</p>
<span class="topic-count">14 pages</span>
</div>
</a>
</div>
</section>
<!-- CODE SAMPLE SHOWCASE -->
<section class="section" id="samples">
<div class="section-head">
<h2>One client, every runtime</h2>
<a class="see-all" href="#samples">More examples →</a>
</div>
<div class="sample-showcase">
<div class="sample-copy">
<h3>Query in the language you already use</h3>
<p>
The Aurora client ships first-class type definitions for TypeScript, Python, Go,
and Rust. Autocompletion is generated straight from your schema, so column names
and return types stay in sync as your data model evolves.
</p>
<ul class="sample-points">
<li>Fully typed results — no manual casting</li>
<li>Automatic connection pooling at the edge</li>
<li>Streaming & cursor pagination built in</li>
</ul>
<a class="btn-ghost" href="#topic-client">Read the client reference →</a>
</div>
<div class="sample-code">
<div class="code-head">
<div class="lang-tabs" role="tablist" aria-label="Language">
<button class="lang-tab active" role="tab" aria-selected="true" data-lang="ts">TypeScript</button>
<button class="lang-tab" role="tab" aria-selected="false" data-lang="py">Python</button>
<button class="lang-tab" role="tab" aria-selected="false" data-lang="go">Go</button>
<button class="lang-tab" role="tab" aria-selected="false" data-lang="rs">Rust</button>
</div>
<button class="copy-btn" data-copy-target="sampleCode" aria-label="Copy code sample">
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="M5 15V5a2 2 0 0 1 2-2h10" stroke="currentColor" stroke-width="1.7"/></svg>
<span class="copy-label">Copy</span>
</button>
</div>
<pre class="code-body"><code id="sampleCode"></code></pre>
</div>
</div>
</section>
<!-- SDK STRIP -->
<section class="section section-alt" id="sdks">
<div class="section-head">
<h2>Official SDKs & integrations</h2>
<a class="see-all" href="#sdks">All SDKs →</a>
</div>
<ul class="sdk-strip" aria-label="Available SDKs">
<li class="sdk-chip"><span class="sdk-mark mk-ts" aria-hidden="true">TS</span> TypeScript</li>
<li class="sdk-chip"><span class="sdk-mark mk-py" aria-hidden="true">Py</span> Python</li>
<li class="sdk-chip"><span class="sdk-mark mk-go" aria-hidden="true">Go</span> Go</li>
<li class="sdk-chip"><span class="sdk-mark mk-rs" aria-hidden="true">Rs</span> Rust</li>
<li class="sdk-chip"><span class="sdk-mark mk-rb" aria-hidden="true">Rb</span> Ruby</li>
<li class="sdk-chip"><span class="sdk-mark mk-php" aria-hidden="true">Ph</span> PHP</li>
<li class="sdk-chip"><span class="sdk-mark mk-rn" aria-hidden="true">RN</span> React Native</li>
<li class="sdk-chip"><span class="sdk-mark mk-cli" aria-hidden="true">$_</span> CLI</li>
</ul>
</section>
<!-- CTA BAND -->
<section class="cta-band">
<div class="cta-inner">
<div>
<h2>Ready to ship?</h2>
<p>Read the quickstart, then deploy your first edge function in minutes.</p>
</div>
<div class="cta-actions">
<a class="btn-primary" href="#guide-quickstart">Start the quickstart</a>
<a class="btn-secondary" href="#github">View on GitHub</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="footer-inner">
<div class="footer-brand">
<span class="brand-mark sm" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M12 2 3 7v10l9 5 9-5V7l-9-5Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>
</span>
<p class="footer-tag">Aurora SDK — the typed data platform for edge-native apps.</p>
</div>
<nav class="footer-col" aria-label="Documentation">
<h4>Docs</h4>
<a href="#guide-quickstart">Quickstart</a>
<a href="#topic-client">Client API</a>
<a href="#topic-cli">CLI reference</a>
<a href="#changelog">Changelog</a>
</nav>
<nav class="footer-col" aria-label="Resources">
<h4>Resources</h4>
<a href="#samples">Examples</a>
<a href="#sdks">SDKs</a>
<a href="#status">Status</a>
<a href="#roadmap">Roadmap</a>
</nav>
<nav class="footer-col" aria-label="Community">
<h4>Community</h4>
<a href="#github">GitHub</a>
<a href="#discord">Discord</a>
<a href="#forum">Forum</a>
<a href="#blog">Blog</a>
</nav>
</div>
<div class="footer-bottom">
<span>© 2026 Aurora Labs · Fictional demo</span>
<span class="footer-version">v4.2.0 · built for the edge</span>
</div>
</footer>
<!-- ⌘K OVERLAY -->
<div class="kbar-overlay" id="kbarOverlay" hidden>
<div class="kbar-backdrop" data-kbar-close></div>
<div class="kbar-panel" role="dialog" aria-modal="true" aria-label="Search documentation">
<div class="kbar-input-wrap">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="1.8"/><path d="m20 20-3.2-3.2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
<input type="text" id="kbarInput" placeholder="Search guides, API, examples…" autocomplete="off" spellcheck="false" aria-label="Search query" aria-controls="kbarResults" />
<kbd class="kbd-esc">Esc</kbd>
</div>
<ul class="kbar-results" id="kbarResults" role="listbox" aria-label="Search results"></ul>
<div class="kbar-foot">
<span><kbd>↑</kbd><kbd>↓</kbd> navigate</span>
<span><kbd>↵</kbd> open</span>
<span><kbd>esc</kbd> close</span>
</div>
</div>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Developer Docs Landing
A sharp, technical documentation home page for the fictional Aurora SDK — a typed data platform for edge-native apps — built in the mold of the Stripe, Vercel, and Tailwind docs. A sticky blurred header carries the brand mark, primary nav, a Search docs ⌘K trigger, a GitHub link, and a working theme toggle. The hero sits on a masked grid background with a gradient headline, a large search-docs button, and an install block whose tabs switch between npm, pnpm, bun, and yarn commands — each copyable with one click.
Below the hero, a three-column grid of popular guides (each with a CSS/SVG icon and read time) sits above a Browse by topic reference grid with page counts. A language-tabbed code showcase swaps between TypeScript, Python, Go, and Rust samples with lightweight syntax highlighting and a copy button, followed by a strip of CSS-drawn SDK logos, a call-to-action band, and a multi-column footer.
The interactions are all vanilla JS: the theme toggle flips a real light/dark palette and persists the choice in localStorage (falling back to the OS preference), copy buttons confirm with a toast, and a full ⌘K command palette overlay — also opened with / — live-filters a fictional doc index with the query highlighted, supports ↑/↓ navigation, Enter to jump, and Esc to close. The whole page is responsive down to ~360px, where the nav collapses, grids stack, and the palette reflows.
Illustrative UI only — fictional articles, products, and data.