Pages Medium
Wiki — Wiki Article (sidebar · TOC · body)
A full encyclopedia-style article page in a clean, dense knowledge-base aesthetic. A persistent left sidebar carries the logo, a live nav filter, section links, and a language list; the centered serif body opens with a lead paragraph and a right-floated, collapsible infobox, then runs through layered sections with inline links, a CSS-drawn Raft-quorum figure, syntax-tinted code blocks, note and caution callouts, a comparison table, references, and category chips. A sticky right-rail table of contents tracks the reader with scrollspy.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root{
--bg:#ffffff;
--bg-2:#f7f8fa;
--panel:#ffffff;
--ink:#1a1a1f;
--ink-2:#3a3a42;
--muted:#6b7280;
--line:rgba(20,20,30,0.10);
--line-2:rgba(20,20,30,0.18);
--link:#2563eb;
--link-hover:#1d4ed8;
--accent:#2563eb;
--note:#2563eb;
--tip:#16a34a;
--warn:#d97706;
--danger:#dc2626;
--code-bg:#f4f4f6;
--kbd-bg:#eceef2;
--r-sm:6px;
--r-md:10px;
--r-lg:14px;
--serif:"Source Serif 4",Georgia,"Times New Roman",serif;
--sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
--mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
--sidebar-w:248px;
--toc-w:232px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
font-family:var(--sans);
background:var(--bg);
color:var(--ink);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.55;
}
a{color:var(--link);text-decoration:none;}
a:hover{color:var(--link-hover);text-decoration:underline;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;}
.visually-hidden,.skip-link{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link:focus{
position:fixed;top:10px;left:10px;width:auto;height:auto;margin:0;clip:auto;
z-index:60;background:var(--accent);color:#fff;padding:8px 14px;border-radius:var(--r-sm);
}
/* ===== layout ===== */
.layout{
display:grid;
grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--toc-w);
max-width:1380px;
margin:0 auto;
align-items:start;
}
/* ===== sidebar ===== */
.sidebar{
position:sticky;top:0;
height:100vh;
border-right:1px solid var(--line);
background:var(--bg-2);
overflow-y:auto;
}
.sidebar__inner{padding:18px 16px 40px;}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);}
.brand:hover{text-decoration:none;}
.brand__mark{
width:36px;height:36px;flex:none;border-radius:9px;
background:linear-gradient(140deg,#2563eb,#1d4ed8);
color:#fff;font-weight:800;font-size:18px;
display:grid;place-items:center;
box-shadow:0 2px 6px rgba(37,99,235,.28);
}
.brand__text{display:flex;flex-direction:column;line-height:1.15;}
.brand__name{font-weight:800;font-size:17px;letter-spacing:-.02em;}
.brand__sub{font-size:11px;color:var(--muted);}
.search{
position:relative;display:flex;align-items:center;margin:16px 0 10px;
}
.search__icon{
position:absolute;left:9px;width:17px;height:17px;color:var(--muted);pointer-events:none;
}
.search__input{
width:100%;font:inherit;font-size:13px;
padding:8px 30px 8px 31px;
border:1px solid var(--line-2);border-radius:var(--r-md);
background:var(--panel);color:var(--ink);
}
.search__input::placeholder{color:var(--muted);}
.search__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.14);}
.search__kbd{
position:absolute;right:8px;font-family:var(--mono);font-size:11px;
background:var(--kbd-bg);border:1px solid var(--line-2);border-bottom-width:2px;
border-radius:5px;padding:1px 6px;color:var(--ink-2);
}
.nav-group{margin-top:18px;}
.nav-group__title{
margin:0 0 6px;padding:0 4px;
font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.nav-list,.lang-list{list-style:none;margin:0;padding:0;}
.nav-link{
display:block;padding:5px 9px;border-radius:var(--r-sm);
font-size:13.5px;color:var(--ink-2);
}
.nav-link:hover{background:rgba(37,99,235,.08);color:var(--link);text-decoration:none;}
.nav-link.is-active{background:rgba(37,99,235,.12);color:var(--link-hover);font-weight:600;}
.lang-list{display:flex;flex-wrap:wrap;gap:5px;padding:0 4px;}
.lang-link{
font-size:12.5px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;
color:var(--ink-2);background:var(--panel);
}
.lang-link:hover{border-color:var(--accent);color:var(--link);text-decoration:none;}
.nav-empty{font-size:13px;color:var(--muted);padding:8px 9px;margin:6px 0 0;}
/* ===== content ===== */
.content{min-width:0;padding:0 clamp(20px,4vw,56px) 80px;}
.article{padding-top:30px;}
.article__head{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:6px;}
.breadcrumb{font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px;}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--link);}
.breadcrumb span[aria-current]{color:var(--ink-2);font-weight:500;}
.article__title{
font-family:var(--serif);
font-weight:600;font-size:clamp(30px,5vw,42px);
line-height:1.1;letter-spacing:-.01em;margin:0;
}
.article__subtitle{
font-family:var(--serif);font-style:italic;font-size:14px;color:var(--muted);margin:4px 0 0;
}
.article__meta{
display:flex;flex-wrap:wrap;gap:6px;align-items:center;
font-size:12.5px;color:var(--muted);margin-top:10px;
}
.article__meta .dot{opacity:.6;}
/* body column holds prose + floated infobox */
.article__body{
max-width:880px;
font-family:var(--serif);
font-size:18px;
line-height:1.65;
color:var(--ink);
margin-top:18px;
}
.article__body p{margin:0 0 16px;}
.lead{font-size:19px;}
.lead strong:first-child{font-size:1.02em;}
.rule{border:none;border-top:1px solid var(--line);margin:8px 0 4px;}
/* headings (sans, to contrast serif body) */
.h2{
font-family:var(--sans);font-weight:700;font-size:25px;letter-spacing:-.01em;
margin:34px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line);
scroll-margin-top:18px;display:flex;align-items:baseline;gap:10px;
}
.h3{
font-family:var(--sans);font-weight:600;font-size:19px;
margin:24px 0 8px;scroll-margin-top:18px;display:flex;align-items:baseline;gap:10px;
}
.edit-link{
font-family:var(--sans);font-size:12px;font-weight:500;color:var(--muted);
opacity:0;transition:opacity .15s;
}
.h2:hover .edit-link,.h3:hover .edit-link,.edit-link:focus{opacity:1;}
.edit-link:hover{color:var(--link);}
.list{padding-left:22px;margin:0 0 16px;}
.list li{margin-bottom:7px;}
code{
font-family:var(--mono);font-size:.86em;
background:var(--code-bg);border:1px solid var(--line);border-radius:5px;
padding:1px 5px;color:var(--ink-2);
}
.code{
font-family:var(--mono);font-size:13.5px;line-height:1.6;
background:var(--code-bg);border:1px solid var(--line);border-radius:var(--r-md);
padding:14px 16px;overflow-x:auto;margin:0 0 18px;color:var(--ink);
}
.code code{background:none;border:none;padding:0;font-size:inherit;color:inherit;}
.c-kw{color:#7c3aed;font-weight:600;}
.c-ty{color:#0e7490;}
.c-st{color:#16a34a;}
.c-cm{color:var(--muted);font-style:italic;}
kbd{
font-family:var(--mono);font-size:12px;
background:var(--kbd-bg);border:1px solid var(--line-2);border-bottom-width:2px;
border-radius:5px;padding:1px 6px;color:var(--ink-2);
}
.cite{font-size:.75em;vertical-align:super;}
sup .cite{text-decoration:none;}
.quote{
margin:0 0 18px;padding:4px 0 4px 18px;border-left:3px solid var(--accent);
font-style:italic;color:var(--ink-2);
}
.quote cite{display:block;font-style:normal;font-size:14px;color:var(--muted);margin-top:6px;}
/* callouts */
.callout{
display:flex;gap:12px;align-items:flex-start;
font-family:var(--sans);font-size:15px;line-height:1.55;
border:1px solid var(--line);border-left-width:4px;border-radius:var(--r-md);
padding:12px 14px;margin:0 0 18px;background:var(--bg-2);
}
.callout p{margin:0;}
.callout__label{
font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;flex:none;
padding-top:1px;
}
.callout--note{border-left-color:var(--note);background:rgba(37,99,235,.05);}
.callout--note .callout__label{color:var(--note);}
.callout--warn{border-left-color:var(--warn);background:rgba(217,119,6,.06);}
.callout--warn .callout__label{color:var(--warn);}
/* table */
.table{
width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14.5px;
margin:0 0 18px;
}
.table caption{
text-align:left;font-size:13px;color:var(--muted);margin-bottom:6px;font-style:italic;
}
.table th,.table td{border:1px solid var(--line);padding:8px 12px;text-align:left;}
.table thead th{background:var(--bg-2);font-weight:600;}
.table tbody tr:nth-child(even){background:var(--bg-2);}
.table .yes{color:var(--tip);font-weight:600;}
/* figure */
.figure{margin:6px 0 20px;}
.figure__diagram{
position:relative;
display:flex;gap:18px;justify-content:center;align-items:center;
padding:28px 18px;
background:
linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
repeating-linear-gradient(0deg,transparent 0 23px,var(--line) 23px 24px) padding-box;
border:1px solid var(--line);border-radius:var(--r-lg);
}
.node{
position:relative;z-index:2;
width:96px;height:74px;border-radius:var(--r-md);
background:var(--panel);border:1px solid var(--line-2);
display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;
box-shadow:0 1px 3px rgba(20,20,30,.06);
}
.node--leader{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.14);}
.node__tag{font-family:var(--sans);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.node--leader .node__tag{color:var(--accent);font-weight:600;}
.node__id{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--ink);}
.raft-line{
position:absolute;left:12%;right:12%;top:50%;height:2px;
background:linear-gradient(90deg,var(--accent),rgba(37,99,235,.25));
z-index:1;border-radius:2px;
}
.figcaption,.figure figcaption{
font-family:var(--sans);font-size:13px;color:var(--muted);line-height:1.5;margin-top:8px;
}
/* infobox */
.infobox{
float:right;width:300px;margin:4px 0 18px 26px;
border:1px solid var(--line-2);border-radius:var(--r-md);
background:var(--bg-2);overflow:hidden;
font-family:var(--sans);font-size:13px;
}
.infobox__title{
text-align:center;font-weight:700;font-size:15px;
padding:10px 12px;background:rgba(37,99,235,.08);border-bottom:1px solid var(--line);
}
.infobox__figure{padding:16px;display:grid;place-items:center;}
.logo-shard{
width:88px;height:88px;border-radius:18px;
background:radial-gradient(120% 120% at 30% 20%,#3b82f6,#1d4ed8 70%);
display:grid;place-items:center;color:#fff;font-size:46px;
box-shadow:0 6px 18px rgba(37,99,235,.3);
transform:rotate(-4deg);
}
.infobox__caption{
text-align:center;font-size:11.5px;color:var(--muted);font-style:italic;
padding:0 14px 12px;line-height:1.4;
}
.infobox__section{border-top:1px solid var(--line);}
.infobox__header{
width:100%;display:flex;justify-content:space-between;align-items:center;
font:inherit;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
color:var(--ink-2);background:none;border:none;cursor:pointer;
padding:9px 12px;
}
.infobox__header:hover{background:rgba(37,99,235,.05);}
.chev{transition:transform .2s;color:var(--muted);}
.infobox__header[aria-expanded="false"] .chev{transform:rotate(-90deg);}
.infobox__rows{display:grid;}
.infobox__header[aria-expanded="false"]+.infobox__rows{display:none;}
.ib-row{
display:grid;grid-template-columns:40% 1fr;gap:8px;
padding:6px 12px;border-top:1px solid var(--line);
}
.ib-k{color:var(--muted);font-weight:500;}
.ib-v{color:var(--ink);}
/* references */
.section--refs{margin-top:36px;}
.refs{font-family:var(--sans);font-size:14px;color:var(--ink-2);padding-left:24px;line-height:1.6;}
.refs li{margin-bottom:8px;scroll-margin-top:80px;}
.refs li:target{background:rgba(37,99,235,.1);border-radius:5px;outline:2px solid rgba(37,99,235,.3);}
/* categories */
.categories{
display:flex;flex-wrap:wrap;gap:8px;align-items:center;
font-family:var(--sans);font-size:13px;
margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
}
.categories__label{color:var(--muted);font-weight:600;}
.cat-chip{
padding:3px 11px;border:1px solid var(--line-2);border-radius:999px;
background:var(--panel);color:var(--link);font-size:12.5px;
}
.cat-chip:hover{background:rgba(37,99,235,.08);text-decoration:none;}
/* ===== TOC right rail ===== */
.toc{position:sticky;top:0;height:100vh;overflow-y:auto;padding:30px 16px;}
.toc__inner{border-left:1px solid var(--line);padding-left:16px;font-family:var(--sans);}
.toc__title{
font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
margin:0 0 10px;
}
.toc__list,.toc__list ul{list-style:none;margin:0;padding:0;}
.toc__list ul{margin-left:12px;border-left:1px solid var(--line);padding-left:8px;margin-top:4px;}
.toc__list a{
display:block;padding:3px 8px;border-radius:var(--r-sm);
font-size:13px;color:var(--muted);border-left:2px solid transparent;margin-left:-1px;
}
.toc__list a:hover{color:var(--link);text-decoration:none;}
.toc__list a.is-active{color:var(--link-hover);font-weight:600;background:rgba(37,99,235,.08);border-left-color:var(--accent);}
.toc__top{
margin-top:14px;font:inherit;font-size:12.5px;color:var(--muted);
background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:var(--r-sm);
}
.toc__top:hover{color:var(--link);background:rgba(37,99,235,.06);}
/* nav toggle (mobile) */
.nav-toggle{
display:none;position:fixed;top:12px;left:12px;z-index:50;
width:42px;height:42px;border:1px solid var(--line-2);border-radius:var(--r-md);
background:var(--panel);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;
box-shadow:0 2px 8px rgba(20,20,30,.1);
}
.nav-toggle__bar{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.2s;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.scrim{position:fixed;inset:0;background:rgba(15,18,28,.4);z-index:39;}
/* toast */
.toast{
position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);
background:#15151b;color:#fff;font-family:var(--sans);font-size:13.5px;font-weight:500;
padding:10px 16px;border-radius:var(--r-md);box-shadow:0 8px 24px rgba(0,0,0,.25);
opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;z-index:80;max-width:88vw;
}
.toast.is-on{opacity:1;transform:translate(-50%,0);}
/* ===== responsive ===== */
@media (max-width:1080px){
:root{--toc-w:0px;}
.layout{grid-template-columns:var(--sidebar-w) minmax(0,1fr);}
.toc{display:none;}
}
@media (max-width:820px){
.layout{grid-template-columns:1fr;}
.nav-toggle{display:flex;}
.sidebar{
position:fixed;top:0;left:0;z-index:40;width:280px;height:100vh;
transform:translateX(-100%);transition:transform .26s ease;
box-shadow:0 0 40px rgba(0,0,0,.18);
}
.sidebar.is-open{transform:translateX(0);}
.content{padding:64px 22px 70px;}
.infobox{float:none;width:auto;margin:0 0 22px;}
.article{padding-top:8px;}
}
@media (max-width:520px){
.article__body{font-size:16.5px;line-height:1.62;}
.lead{font-size:17px;}
.article__title{font-size:28px;}
.h2{font-size:21px;}
.figure__diagram{flex-wrap:wrap;gap:12px;}
.node{width:84px;height:66px;}
.raft-line{display:none;}
.ib-row{grid-template-columns:46% 1fr;}
.content{padding:62px 16px 64px;}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*{transition-duration:.001ms!important;}
}(function () {
"use strict";
/* ---------- toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-on");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-on");
}, 2200);
}
/* ---------- mobile sidebar drawer ---------- */
var sidebar = document.getElementById("sidebar");
var navToggle = document.getElementById("navToggle");
var scrim = document.getElementById("scrim");
function setDrawer(open) {
sidebar.classList.toggle("is-open", open);
navToggle.setAttribute("aria-expanded", String(open));
navToggle.setAttribute("aria-label", open ? "Close navigation" : "Open navigation");
if (scrim) scrim.hidden = !open;
}
if (navToggle) {
navToggle.addEventListener("click", function () {
setDrawer(!sidebar.classList.contains("is-open"));
});
}
if (scrim) scrim.addEventListener("click", function () { setDrawer(false); });
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && sidebar.classList.contains("is-open")) setDrawer(false);
});
// close drawer when a nav link is followed on mobile
sidebar.addEventListener("click", function (e) {
var a = e.target.closest("a[href^='#']");
if (a && window.matchMedia("(max-width:820px)").matches) setDrawer(false);
});
/* ---------- sidebar search filter ---------- */
var navSearch = document.getElementById("navSearch");
var navItems = Array.prototype.slice.call(document.querySelectorAll("[data-nav-item]"));
var navGroups = Array.prototype.slice.call(document.querySelectorAll("[data-nav-group]"));
var navEmpty = document.querySelector("[data-nav-empty]");
function filterNav() {
var q = navSearch.value.trim().toLowerCase();
var anyVisible = false;
navItems.forEach(function (item) {
var match = !q || item.textContent.toLowerCase().indexOf(q) !== -1;
item.parentElement.style.display = match ? "" : "none";
if (match) anyVisible = true;
});
// hide groups whose items are all hidden
navGroups.forEach(function (g) {
var visible = g.querySelectorAll("[data-nav-item]");
var shown = 0;
visible.forEach
? visible.forEach(check)
: Array.prototype.forEach.call(visible, check);
function check(it) { if (it.parentElement.style.display !== "none") shown++; }
g.style.display = (q && shown === 0) ? "none" : "";
});
if (navEmpty) navEmpty.hidden = !(q && !anyVisible);
}
if (navSearch) navSearch.addEventListener("input", filterNav);
// "/" focuses search
document.addEventListener("keydown", function (e) {
if (e.key === "/" && document.activeElement !== navSearch &&
!/^(input|textarea)$/i.test((document.activeElement || {}).tagName || "")) {
e.preventDefault();
navSearch.focus();
}
});
/* ---------- infobox collapse ---------- */
document.querySelectorAll(".infobox__header").forEach(function (btn) {
btn.addEventListener("click", function () {
var open = btn.getAttribute("aria-expanded") === "true";
btn.setAttribute("aria-expanded", String(!open));
});
});
/* ---------- decorative [edit] links ---------- */
document.querySelectorAll("[data-edit]").forEach(function (el) {
el.addEventListener("click", function (e) {
e.preventDefault();
var heading = el.closest(".h2, .h3");
var name = heading ? heading.textContent.replace("[edit]", "").trim() : "section";
toast('Editing “' + name + '” — read-only demo');
});
});
/* ---------- smooth scroll for in-page anchors ---------- */
document.querySelectorAll('a[href^="#"]').forEach(function (a) {
a.addEventListener("click", function (e) {
var id = a.getAttribute("href");
if (id === "#" || id.length < 2) return;
var target = document.querySelector(id);
if (!target) return;
e.preventDefault();
target.scrollIntoView({ behavior: "smooth", block: "start" });
history.replaceState(null, "", id);
if (typeof target.focus === "function") {
target.setAttribute("tabindex", "-1");
target.focus({ preventScroll: true });
}
});
});
/* ---------- back to top ---------- */
var backTop = document.getElementById("backTop");
if (backTop) {
backTop.addEventListener("click", function () {
window.scrollTo({ top: 0, behavior: "smooth" });
var title = document.getElementById("article-title");
if (title) { title.setAttribute("tabindex", "-1"); title.focus({ preventScroll: true }); }
});
}
/* ---------- TOC scrollspy ---------- */
var tocLinks = Array.prototype.slice.call(document.querySelectorAll("[data-toc]"));
var navLinks = Array.prototype.slice.call(document.querySelectorAll(".nav-link[href^='#']"));
var sections = tocLinks
.map(function (l) { return document.querySelector(l.getAttribute("href")); })
.filter(Boolean);
function setActive(id) {
tocLinks.forEach(function (l) {
l.classList.toggle("is-active", l.getAttribute("href") === "#" + id);
});
navLinks.forEach(function (l) {
l.classList.toggle("is-active", l.getAttribute("href") === "#" + id);
});
}
if ("IntersectionObserver" in window && sections.length) {
var visible = new Map();
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (en) {
if (en.isIntersecting) visible.set(en.target.id, en.intersectionRatio);
else visible.delete(en.target.id);
});
var best = null, bestRatio = -1;
visible.forEach(function (ratio, id) {
if (ratio > bestRatio) { bestRatio = ratio; best = id; }
});
if (!best) {
// fall back to the last section above the fold
var scrollY = window.scrollY + 120;
for (var i = sections.length - 1; i >= 0; i--) {
if (sections[i].offsetTop <= scrollY) { best = sections[i].id; break; }
}
}
if (best) setActive(best);
}, { rootMargin: "-15% 0px -70% 0px", threshold: [0, 0.25, 0.5, 1] });
sections.forEach(function (s) { io.observe(s); });
} else {
// fallback: scroll listener
window.addEventListener("scroll", function () {
var scrollY = window.scrollY + 130;
var current = sections[0] ? sections[0].id : null;
sections.forEach(function (s) { if (s.offsetTop <= scrollY) current = s.id; });
if (current) setActive(current);
}, { passive: true });
}
// initialize active state
if (sections[0]) setActive(sections[0].id);
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Aurora DB — Verdant Encyclopedia</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=Source+Serif+4:opsz,[email protected],400;8..60,500;8..60,600;8..60,700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#article-title">Skip to article</a>
<button id="navToggle" class="nav-toggle" aria-label="Open navigation" aria-expanded="false" aria-controls="sidebar">
<span class="nav-toggle__bar"></span>
<span class="nav-toggle__bar"></span>
<span class="nav-toggle__bar"></span>
</button>
<div class="layout">
<!-- LEFT SIDEBAR -->
<nav id="sidebar" class="sidebar" aria-label="Encyclopedia navigation">
<div class="sidebar__inner">
<a class="brand" href="#article-title">
<span class="brand__mark" aria-hidden="true">V</span>
<span class="brand__text">
<span class="brand__name">Verdant</span>
<span class="brand__sub">The Free Encyclopedia</span>
</span>
</a>
<form class="search" role="search" onsubmit="return false">
<label class="visually-hidden" for="navSearch">Filter navigation</label>
<svg class="search__icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M8.5 3a5.5 5.5 0 1 0 3.4 9.8l3.6 3.6 1.1-1.1-3.6-3.6A5.5 5.5 0 0 0 8.5 3Zm0 1.6a3.9 3.9 0 1 1 0 7.8 3.9 3.9 0 0 1 0-7.8Z" fill="currentColor"/></svg>
<input id="navSearch" class="search__input" type="search" placeholder="Search Verdant" autocomplete="off" />
<kbd class="search__kbd">/</kbd>
</form>
<div class="nav-group" data-nav-group>
<p class="nav-group__title">Navigation</p>
<ul class="nav-list">
<li><a class="nav-link" href="#article-title" data-nav-item>Main page</a></li>
<li><a class="nav-link" href="#overview" data-nav-item>Contents</a></li>
<li><a class="nav-link" href="#" data-nav-item>Featured articles</a></li>
<li><a class="nav-link" href="#" data-nav-item>Random article</a></li>
<li><a class="nav-link" href="#" data-nav-item>Recent changes</a></li>
</ul>
</div>
<div class="nav-group" data-nav-group>
<p class="nav-group__title">Aurora DB</p>
<ul class="nav-list">
<li><a class="nav-link" href="#overview" data-nav-item>Overview</a></li>
<li><a class="nav-link" href="#architecture" data-nav-item>Architecture</a></li>
<li><a class="nav-link" href="#consistency" data-nav-item>Consistency model</a></li>
<li><a class="nav-link" href="#deployment" data-nav-item>Deployment</a></li>
<li><a class="nav-link" href="#reception" data-nav-item>Reception</a></li>
</ul>
</div>
<div class="nav-group" data-nav-group>
<p class="nav-group__title">Languages</p>
<ul class="lang-list">
<li><a class="lang-link" href="#">English</a></li>
<li><a class="lang-link" href="#">Español</a></li>
<li><a class="lang-link" href="#">Deutsch</a></li>
<li><a class="lang-link" href="#">日本語</a></li>
<li><a class="lang-link" href="#">Français</a></li>
<li><a class="lang-link" href="#">Português</a></li>
</ul>
</div>
<p class="nav-empty" data-nav-empty hidden>No matching links.</p>
</div>
</nav>
<div class="scrim" id="scrim" hidden></div>
<!-- MAIN ARTICLE -->
<main class="content">
<article class="article" aria-labelledby="article-title">
<header class="article__head">
<nav class="breadcrumb" aria-label="Breadcrumb">
<a href="#">Verdant</a><span aria-hidden="true">›</span>
<a href="#">Databases</a><span aria-hidden="true">›</span>
<span aria-current="page">Aurora DB</span>
</nav>
<h1 id="article-title" class="article__title">Aurora DB</h1>
<p class="article__subtitle">From the Verdant Encyclopedia, the free knowledge base</p>
<div class="article__meta">
<span>Article</span><span class="dot" aria-hidden="true">·</span>
<span>Talk</span><span class="dot" aria-hidden="true">·</span>
<span>12,402 words</span><span class="dot" aria-hidden="true">·</span>
<span>Last edited 3 days ago</span>
</div>
</header>
<div class="article__body">
<!-- INFOBOX -->
<aside class="infobox" aria-label="Aurora DB facts">
<div class="infobox__title">Aurora DB</div>
<div class="infobox__figure" aria-hidden="true">
<div class="logo-shard"><span>⌬</span></div>
</div>
<div class="infobox__caption">The Aurora DB cluster glyph, adopted 2031.</div>
<div class="infobox__section" data-collapse>
<button class="infobox__header" aria-expanded="true">
<span>General</span><span class="chev" aria-hidden="true">▾</span>
</button>
<div class="infobox__rows">
<div class="ib-row"><span class="ib-k">Developer</span><span class="ib-v">Nimbus Labs</span></div>
<div class="ib-row"><span class="ib-k">Initial release</span><span class="ib-v">14 Mar 2029</span></div>
<div class="ib-row"><span class="ib-k">Stable</span><span class="ib-v">4.7.2 “Solstice”</span></div>
<div class="ib-row"><span class="ib-k">Written in</span><span class="ib-v">Rust, C++</span></div>
<div class="ib-row"><span class="ib-k">License</span><span class="ib-v">Apache 2.0</span></div>
</div>
</div>
<div class="infobox__section" data-collapse>
<button class="infobox__header" aria-expanded="true">
<span>Technical</span><span class="chev" aria-hidden="true">▾</span>
</button>
<div class="infobox__rows">
<div class="ib-row"><span class="ib-k">Model</span><span class="ib-v">Distributed SQL</span></div>
<div class="ib-row"><span class="ib-k">Consistency</span><span class="ib-v">Serializable</span></div>
<div class="ib-row"><span class="ib-k">Protocol</span><span class="ib-v">PostgreSQL wire</span></div>
<div class="ib-row"><span class="ib-k">Replication</span><span class="ib-v">Raft (quorum)</span></div>
</div>
</div>
<div class="infobox__section" data-collapse>
<button class="infobox__header" aria-expanded="false">
<span>Adoption</span><span class="chev" aria-hidden="true">▾</span>
</button>
<div class="infobox__rows">
<div class="ib-row"><span class="ib-k">Clusters</span><span class="ib-v">~38,000</span></div>
<div class="ib-row"><span class="ib-k">Largest node count</span><span class="ib-v">2,048</span></div>
<div class="ib-row"><span class="ib-k">Website</span><span class="ib-v"><a href="#">auroradb.example</a></span></div>
</div>
</div>
</aside>
<!-- LEAD -->
<p class="lead">
<strong>Aurora DB</strong> is a distributed, strongly consistent
<a href="#">SQL database</a> developed by <a href="#">Nimbus Labs</a> and first
released in 2029. It is designed to provide
<a href="#consistency">serializable transactions</a> across geographically
dispersed clusters while preserving the familiar
<a href="#">PostgreSQL</a> wire protocol, allowing existing tooling to connect
without modification. Aurora DB is widely deployed within the
<a href="#">Verdant Empire</a>'s public-sector infrastructure and has become a
reference implementation for the <a href="#">Project Nimbus</a> data initiative.
</p>
<p>
Unlike eventually consistent stores of the previous decade, Aurora DB treats
<a href="#consistency">global consistency</a> as a first-class guarantee, using a
hybrid-logical clock and a Raft-based replication layer to order writes. Critics and
adopters alike note the trade-off between this rigorous correctness model and the
additional latency it introduces for cross-region writes.<sup><a href="#ref-1" class="cite">[1]</a></sup>
</p>
<hr class="rule" />
<section id="overview" class="section" data-section>
<h2 class="h2">Overview
<a class="edit-link" href="#" data-edit aria-label="Edit section: Overview">[edit]</a>
</h2>
<p>
Aurora DB grew out of the <a href="#">Solstice</a> research project, an attempt to
reconcile the convenience of relational schemas with the elastic scaling of
key-value systems. Its authors argued that application developers should not have to
choose between transactional integrity and horizontal scale — a position summarized
in the project's informal motto, <em>“ACID at any size.”</em>
</p>
<p>
The system organizes data into <em>ranges</em>, contiguous key spans that are
replicated across at least three nodes. A range is the unit of both replication and
rebalancing: as a cluster grows, ranges split and migrate automatically to keep load
even. This design borrows heavily from earlier academic work on
<a href="#">range partitioning</a> and consensus protocols.
</p>
<blockquote class="quote">
<p>“We wanted the boring database — the one you never have to think about during an
outage. Boring, it turns out, is extraordinarily hard.”</p>
<cite>— Dr. Imara Voss, founding architect, 2029 keynote</cite>
</blockquote>
</section>
<section id="architecture" class="section" data-section>
<h2 class="h2">Architecture
<a class="edit-link" href="#" data-edit aria-label="Edit section: Architecture">[edit]</a>
</h2>
<p>
An Aurora DB cluster is a symmetric collection of nodes; there is no dedicated
coordinator. Every node runs the same binary and can accept client connections,
forwarding requests to the appropriate range leaseholder. The architecture is
commonly described in three layers.
</p>
<h3 id="layers" class="h3">Layered model
<a class="edit-link" href="#" data-edit aria-label="Edit section: Layered model">[edit]</a>
</h3>
<ul class="list">
<li><strong>Distribution layer</strong> — maps keys to ranges and routes requests via a gossiped range descriptor cache.</li>
<li><strong>Replication layer</strong> — applies the <a href="#">Raft</a> consensus protocol per range, electing a leaseholder responsible for serving reads.</li>
<li><strong>Storage layer</strong> — a log-structured merge tree persists data to local SSDs with block-level compression.</li>
</ul>
<figure class="figure">
<div class="figure__diagram" role="img" aria-label="Diagram: three Aurora DB nodes forming a Raft quorum, one elected as leaseholder.">
<div class="node node--leader"><span class="node__tag">leaseholder</span><span class="node__id">n1</span></div>
<div class="node"><span class="node__tag">follower</span><span class="node__id">n2</span></div>
<div class="node"><span class="node__tag">follower</span><span class="node__id">n3</span></div>
<div class="raft-line" aria-hidden="true"></div>
</div>
<figcaption><strong>Figure 1.</strong> A three-replica range. Node <code>n1</code> holds the lease and replicates committed entries to <code>n2</code> and <code>n3</code> by majority quorum.</figcaption>
</figure>
<h3 id="sql-engine" class="h3">SQL engine
<a class="edit-link" href="#" data-edit aria-label="Edit section: SQL engine">[edit]</a>
</h3>
<p>
Queries are parsed into a logical plan, optimized by a cost-based planner, then
compiled into a distributed physical plan whose operators execute close to the data.
A simplified session looks like the following:
</p>
<pre class="code"><code><span class="c-kw">CREATE TABLE</span> ledger (
id <span class="c-ty">UUID</span> <span class="c-kw">PRIMARY KEY DEFAULT</span> gen_random_uuid(),
region <span class="c-ty">STRING</span> <span class="c-kw">NOT NULL</span>,
amount <span class="c-ty">DECIMAL</span>(12,2)
) <span class="c-kw">LOCALITY REGIONAL BY ROW</span>;
<span class="c-kw">BEGIN</span>;
<span class="c-kw">INSERT INTO</span> ledger (region, amount) <span class="c-kw">VALUES</span> (<span class="c-st">'verdant-east'</span>, 42.50);
<span class="c-kw">COMMIT</span>; <span class="c-cm">-- serializable, replicated to quorum</span></code></pre>
</section>
<section id="consistency" class="section" data-section>
<h2 class="h2">Consistency model
<a class="edit-link" href="#" data-edit aria-label="Edit section: Consistency model">[edit]</a>
</h2>
<p>
Aurora DB provides <strong>serializable isolation</strong>, the strongest level
defined by the SQL standard, as its default and only isolation level. Transactions
are assigned timestamps from a hybrid-logical clock, and conflicting transactions are
ordered deterministically. The system never exposes anomalies such as write skew or
phantom reads.<sup><a href="#ref-2" class="cite">[2]</a></sup>
</p>
<p>
To bound clock uncertainty without specialized hardware, Aurora DB uses a configurable
<code>max-offset</code> window. Reads that fall inside the uncertainty interval are
retried at a higher timestamp, a technique the documentation refers to as an
<em>uncertainty restart</em>.
</p>
<div class="callout callout--note">
<span class="callout__label">Note</span>
<p>Serializability guarantees a correct <em>logical</em> ordering of transactions; it does
not by itself guarantee the lowest possible latency. Latency-sensitive workloads should
co-locate data with their primary region.</p>
</div>
<div class="callout callout--warn">
<span class="callout__label">Caution</span>
<p>Lowering <code>max-offset</code> below the true clock skew of your fleet can cause
stale reads. Measure skew before tuning this value in production.</p>
</div>
<table class="table">
<caption>Table 1. Isolation levels compared</caption>
<thead>
<tr><th scope="col">Level</th><th scope="col">Dirty read</th><th scope="col">Write skew</th><th scope="col">Aurora DB</th></tr>
</thead>
<tbody>
<tr><td>Read committed</td><td>No</td><td>Possible</td><td>—</td></tr>
<tr><td>Snapshot</td><td>No</td><td>Possible</td><td>—</td></tr>
<tr><td>Serializable</td><td>No</td><td>Prevented</td><td class="yes">Default</td></tr>
</tbody>
</table>
</section>
<section id="deployment" class="section" data-section>
<h2 class="h2">Deployment
<a class="edit-link" href="#" data-edit aria-label="Edit section: Deployment">[edit]</a>
</h2>
<p>
Clusters are typically deployed across three or more <a href="#">availability zones</a>
to survive the loss of an entire zone. Operators bootstrap a cluster by starting nodes
with a shared join list; nodes then discover one another through gossip. The
<code>aurora</code> command-line tool manages day-to-day operations.
</p>
<pre class="code"><code><span class="c-cm"># start a three-node cluster</span>
aurora start --join=n1,n2,n3 --locality=region=verdant-east
aurora init --host=n1
<span class="c-cm"># check range health</span>
aurora node status --ranges</code></pre>
<p>
Recommended hardware varies by workload, but a balanced node is generally sized with
fast local NVMe storage and a 10:1 ratio of disk to RAM. Press <kbd>?</kbd> in the web
console to see the full keyboard reference, or <kbd>Ctrl</kbd> + <kbd>K</kbd> to open
the command palette.
</p>
</section>
<section id="reception" class="section" data-section>
<h2 class="h2">Reception
<a class="edit-link" href="#" data-edit aria-label="Edit section: Reception">[edit]</a>
</h2>
<p>
Aurora DB has been described by the <a href="#">Verdant Computing Review</a> as “the
most credible attempt yet to make distributed SQL unremarkable to operate.”<sup><a href="#ref-3" class="cite">[3]</a></sup>
Independent benchmarks have praised its predictable tail latency while noting that
cross-region write throughput trails specialized eventually consistent stores.
</p>
<p>
The project's permissive license and PostgreSQL compatibility are frequently cited as
drivers of its rapid adoption among public institutions, though some commentators have
questioned whether the operational complexity of consensus is justified for smaller
deployments.
</p>
</section>
<section id="references" class="section section--refs" data-section>
<h2 class="h2">References
<a class="edit-link" href="#" data-edit aria-label="Edit section: References">[edit]</a>
</h2>
<ol class="refs">
<li id="ref-1"><cite>Voss, I.</cite> (2029). <em>Aurora DB: A Distributed SQL Database for the Verdant Era.</em> Nimbus Labs Technical Report 029-A.</li>
<li id="ref-2"><cite>Okonkwo, R. & Haldane, P.</cite> (2030). “Serializability Without Special Clocks.” <em>Journal of Distributed Systems</em>, 14(3), pp. 211–238.</li>
<li id="ref-3"><cite>Verdant Computing Review.</cite> (2031). “State of the Database.” Annual survey, issue 11.</li>
</ol>
</section>
<footer class="categories">
<span class="categories__label">Categories:</span>
<a class="cat-chip" href="#">Distributed databases</a>
<a class="cat-chip" href="#">SQL</a>
<a class="cat-chip" href="#">Verdant Empire software</a>
<a class="cat-chip" href="#">2029 software</a>
<a class="cat-chip" href="#">Consensus algorithms</a>
</footer>
</div>
</article>
</main>
<!-- RIGHT-RAIL TOC -->
<aside class="toc" aria-label="Table of contents">
<div class="toc__inner">
<p class="toc__title">Contents</p>
<ul class="toc__list" id="tocList">
<li><a href="#overview" data-toc>Overview</a></li>
<li><a href="#architecture" data-toc>Architecture</a>
<ul>
<li><a href="#layers" data-toc>Layered model</a></li>
<li><a href="#sql-engine" data-toc>SQL engine</a></li>
</ul>
</li>
<li><a href="#consistency" data-toc>Consistency model</a></li>
<li><a href="#deployment" data-toc>Deployment</a></li>
<li><a href="#reception" data-toc>Reception</a></li>
<li><a href="#references" data-toc>References</a></li>
</ul>
<button class="toc__top" id="backTop">↑ Back to top</button>
</div>
</aside>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Wiki Article (sidebar · TOC · body)
An encyclopedia-style article page for the fictional Aurora DB, built in the clean, high-density knowledge-base tradition. A persistent left sidebar holds the Verdant logo, a search box that live-filters the navigation, grouped section links, and a wrapped list of languages. The centered article column sets long-form prose in a serif face with a generous 1.65 line-height, opening with a title, a From the Verdant Encyclopedia subtitle, an article meta row, and a lead paragraph threaded with link-blue inline references. A right-floated infobox summarizes the subject in collapsible General, Technical, and Adoption sections.
The body runs through layered h2/h3 sections — Overview, Architecture, Consistency model, Deployment, Reception, References — with a CSS-drawn Raft-quorum figure, syntax-tinted code blocks, a pull quote, note and caution callouts, an isolation-levels comparison table, numbered references, and a row of category chips. A sticky right-rail table of contents mirrors the structure.
The script wires a scrollspy that highlights the active section in both the TOC and the sidebar via an IntersectionObserver (with a scroll fallback), smooth-scrolls and focuses in-page anchors, collapses infobox sections, fires a decorative [edit] link per heading, filters the sidebar from the search box (with a no matching links state and a / hotkey to focus it), and toggles a sidebar drawer with a scrim on mobile. A small toast() helper confirms actions, and the layout collapses the TOC, then the sidebar, down to 360px.
Illustrative UI only — fictional articles, products, and data.