UI 元件 簡單
Wiki — Footnotes / Citations Block
A knowledge-base article body with inline citation superscripts that link down to a numbered references section. Hovering or focusing a superscript opens a small popover previewing the author, title, source, and year, with a jump action and a copy-citation button. Clicking smooth-scrolls to the matching reference and highlights it, while caret back-links return you to the exact spot in the prose. References render as formatted entries with external-link icons and per-entry copy buttons, all over a clean white wiki layout with sidebar nav and a sticky table of contents.
在 Lab 開啟
MCP
html css vanilla-js
目標: JS HTML
程式碼
: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;
--highlight: #fff3c4;
--font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-ui);
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
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: 4px;
}
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--accent);
color: #fff;
padding: 8px 14px;
border-radius: var(--r-sm);
z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }
/* ---------- Topbar ---------- */
.topbar {
position: sticky;
top: 0;
z-index: 60;
display: flex;
align-items: center;
gap: 16px;
height: 56px;
padding: 0 18px;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--line);
}
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 4px;
width: 36px;
height: 36px;
padding: 0 8px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--r-sm);
cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink-2); border-radius: 2px; }
.brand {
display: flex;
align-items: center;
gap: 8px;
font-weight: 800;
font-size: 16px;
color: var(--ink);
letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--accent); font-size: 18px; }
.brand-kb {
font-weight: 600;
color: var(--muted);
margin-left: 2px;
}
.search {
position: relative;
flex: 1;
max-width: 420px;
display: flex;
align-items: center;
}
.search-icon {
position: absolute;
left: 12px;
color: var(--muted);
font-size: 16px;
pointer-events: none;
}
.search input {
width: 100%;
font: inherit;
font-size: 14px;
padding: 8px 36px 8px 34px;
border: 1px solid var(--line-2);
border-radius: var(--r-md);
background: var(--bg-2);
color: var(--ink);
}
.search input::placeholder { color: var(--muted); }
.search input:focus { background: var(--panel); border-color: var(--accent); outline: none; }
.search-kbd {
position: absolute;
right: 10px;
pointer-events: none;
}
.topbar-tag {
font-size: 12px;
font-weight: 600;
color: var(--muted);
padding: 4px 9px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg-2);
white-space: nowrap;
}
/* ---------- Layout ---------- */
.layout {
display: grid;
grid-template-columns: 248px minmax(0, 1fr);
max-width: 1320px;
margin: 0 auto;
}
/* ---------- Sidebar ---------- */
.sidebar {
border-right: 1px solid var(--line);
background: var(--bg);
}
.sidebar-inner {
position: sticky;
top: 56px;
max-height: calc(100vh - 56px);
overflow-y: auto;
padding: 22px 16px 40px;
}
.nav-group-label {
margin: 18px 0 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted);
}
.nav-group-label:first-child { margin-top: 0; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a {
display: block;
padding: 6px 10px;
font-size: 13.5px;
color: var(--ink-2);
border-radius: var(--r-sm);
border-left: 2px solid transparent;
}
.nav-list a:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.nav-list a.active {
color: var(--accent);
background: rgba(37, 99, 235, 0.07);
border-left-color: var(--accent);
font-weight: 600;
}
/* ---------- Content ---------- */
.content {
display: grid;
grid-template-columns: minmax(0, 1fr) 200px;
gap: 40px;
padding: 40px 44px 96px;
}
.article {
max-width: 760px;
width: 100%;
justify-self: center;
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
font-size: 13px;
color: var(--muted);
margin-bottom: 14px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--link); }
.breadcrumb [aria-current] { color: var(--ink-2); font-weight: 600; }
.article-title {
font-family: var(--font-serif);
font-size: clamp(30px, 5vw, 40px);
line-height: 1.12;
font-weight: 700;
letter-spacing: -0.015em;
margin: 0 0 6px;
}
.article-sub {
font-family: var(--font-serif);
font-size: 18px;
color: var(--ink-2);
margin: 0 0 16px;
}
.article-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 26px;
padding-bottom: 22px;
border-bottom: 1px solid var(--line);
}
.meta-pill {
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
background: var(--bg-2);
border: 1px solid var(--line);
padding: 4px 10px;
border-radius: 999px;
}
/* article prose */
.article p {
font-family: var(--font-serif);
font-size: 17px;
line-height: 1.65;
color: var(--ink);
margin: 0 0 18px;
}
.article h2 {
font-family: var(--font-ui);
font-size: 23px;
font-weight: 700;
letter-spacing: -0.01em;
margin: 38px 0 14px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
scroll-margin-top: 72px;
}
.article code {
font-family: var(--font-mono);
font-size: 0.86em;
background: var(--code-bg);
border: 1px solid var(--line);
padding: 1px 5px;
border-radius: var(--r-sm);
}
.article pre {
font-family: var(--font-mono);
background: var(--code-bg);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 16px 18px;
overflow-x: auto;
font-size: 13px;
line-height: 1.55;
margin: 0 0 22px;
}
.article pre code { background: none; border: none; padding: 0; font-size: inherit; }
.article blockquote {
margin: 0 0 22px;
padding: 12px 20px;
border-left: 3px solid var(--accent);
background: var(--bg-2);
border-radius: 0 var(--r-md) var(--r-md) 0;
font-family: var(--font-serif);
font-style: italic;
color: var(--ink-2);
}
.article blockquote cite {
display: block;
margin-top: 8px;
font-size: 14px;
font-style: normal;
color: var(--muted);
}
.data-table {
width: 100%;
border-collapse: collapse;
margin: 0 0 24px;
font-size: 14px;
}
.data-table th, .data-table td {
text-align: left;
padding: 9px 12px;
border-bottom: 1px solid var(--line);
}
.data-table thead th {
font-weight: 700;
color: var(--ink-2);
background: var(--bg-2);
border-bottom: 1px solid var(--line-2);
}
.data-table tbody tr:hover { background: var(--bg-2); }
/* ---------- Citation superscripts ---------- */
sup.cite {
font-size: 0.72em;
line-height: 0;
vertical-align: super;
font-family: var(--font-ui);
}
sup.cite a {
color: var(--link);
font-weight: 600;
padding: 0 1px;
border-radius: 3px;
}
sup.cite a:hover { text-decoration: none; background: rgba(37, 99, 235, 0.12); }
sup.cite.cite-active a { background: rgba(37, 99, 235, 0.18); outline: 1px solid var(--accent); }
@keyframes flash {
0% { background: var(--highlight); }
100% { background: transparent; }
}
.flash { animation: flash 1.8s ease-out; }
.cite-target { background: var(--highlight); border-radius: 4px; }
/* ---------- References ---------- */
.ref-list {
counter-reset: refnum;
list-style: none;
margin: 4px 0 0;
padding: 0;
}
.ref-item {
position: relative;
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px 10px 44px;
font-size: 14px;
line-height: 1.55;
border-radius: var(--r-md);
border: 1px solid transparent;
scroll-margin-top: 72px;
transition: background 0.15s ease, border-color 0.15s ease;
}
.ref-item::before {
counter-increment: refnum;
content: counter(refnum) ".";
position: absolute;
left: 12px;
top: 10px;
width: 24px;
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--muted);
}
.ref-item:hover { background: var(--bg-2); }
.ref-item.cite-target { background: var(--highlight); border-color: rgba(217, 119, 6, 0.4); }
.ref-backs {
display: inline-flex;
gap: 4px;
flex-wrap: wrap;
}
.ref-backs a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: 13px;
font-weight: 700;
color: var(--accent);
background: rgba(37, 99, 235, 0.10);
border-radius: var(--r-sm);
}
.ref-backs a:hover { background: rgba(37, 99, 235, 0.20); text-decoration: none; }
.ref-body { flex: 1; color: var(--ink-2); }
.ref-title { color: var(--ink); font-weight: 600; }
.ref-link {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: 4px;
font-size: 13px;
white-space: nowrap;
}
.ext { font-size: 11px; }
.ref-copy {
flex-shrink: 0;
font: inherit;
font-size: 12px;
font-weight: 600;
color: var(--ink-2);
background: var(--panel);
border: 1px solid var(--line-2);
padding: 4px 10px;
border-radius: var(--r-sm);
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease, background 0.15s ease;
}
.ref-item:hover .ref-copy,
.ref-item:focus-within .ref-copy { opacity: 1; }
.ref-copy:hover { background: var(--bg-2); border-color: var(--accent); color: var(--accent); }
.ref-copy.done { color: var(--tip); border-color: var(--tip); opacity: 1; }
/* ---------- TOC ---------- */
.toc { position: relative; }
.toc-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 8px;
}
.toc-list { list-style: none; margin: 0; padding: 0; position: sticky; top: 80px; }
.toc-list a {
display: block;
padding: 4px 0 4px 12px;
font-size: 13px;
color: var(--muted);
border-left: 2px solid var(--line);
}
.toc-list a:hover { color: var(--ink); text-decoration: none; }
.toc-list a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
/* ---------- Citation popover ---------- */
.cite-pop {
position: absolute;
z-index: 120;
width: 300px;
max-width: calc(100vw - 24px);
padding: 14px 16px;
background: var(--panel);
border: 1px solid var(--line-2);
border-radius: var(--r-md);
box-shadow: 0 12px 32px rgba(20, 20, 40, 0.16);
font-family: var(--font-ui);
}
.cite-pop[hidden] { display: none; }
.cite-pop::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: var(--panel);
border-left: 1px solid var(--line-2);
border-top: 1px solid var(--line-2);
transform: rotate(45deg);
bottom: -6px;
left: var(--arrow-x, 20px);
}
.cite-pop.below::before {
top: -6px;
bottom: auto;
transform: rotate(225deg);
}
.cite-pop-author { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cite-pop-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.cite-pop-meta { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-2); }
.cite-pop-actions { display: flex; gap: 8px; }
.cite-pop-jump {
flex: 1;
text-align: center;
font-size: 13px;
font-weight: 600;
padding: 6px 10px;
background: var(--accent);
color: #fff;
border-radius: var(--r-sm);
}
.cite-pop-jump:hover { background: var(--link-hover); color: #fff; text-decoration: none; }
.cite-pop-copy {
font: inherit;
font-size: 13px;
font-weight: 600;
padding: 6px 12px;
background: var(--bg-2);
color: var(--ink-2);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
cursor: pointer;
}
.cite-pop-copy:hover { border-color: var(--accent); color: var(--accent); }
kbd, .search-kbd {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--ink-2);
background: var(--kbd-bg);
border: 1px solid var(--line-2);
border-bottom-width: 2px;
border-radius: 5px;
padding: 1px 6px;
line-height: 1.4;
}
/* ---------- Backdrop (mobile drawer) ---------- */
.backdrop {
position: fixed;
inset: 0;
background: rgba(15, 15, 25, 0.4);
z-index: 50;
}
.backdrop[hidden] { display: none; }
/* ---------- Toast ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 24px;
transform: translate(-50%, 16px);
background: var(--ink);
color: #fff;
font-size: 13.5px;
font-weight: 500;
padding: 10px 18px;
border-radius: 999px;
box-shadow: 0 8px 24px rgba(20, 20, 40, 0.28);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 200;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
.content { grid-template-columns: minmax(0, 1fr); }
.toc { display: none; }
}
@media (max-width: 820px) {
.nav-toggle { display: flex; }
.layout { grid-template-columns: minmax(0, 1fr); }
.sidebar {
position: fixed;
top: 56px;
left: 0;
bottom: 0;
width: 270px;
max-width: 82vw;
background: var(--panel);
border-right: 1px solid var(--line-2);
box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
transform: translateX(-100%);
transition: transform 0.22s ease;
z-index: 55;
}
.sidebar.open { transform: translateX(0); }
.sidebar-inner { top: 0; max-height: calc(100vh - 56px); }
.content { padding: 28px 22px 80px; }
.topbar-tag { display: none; }
}
@media (max-width: 520px) {
body { font-size: 14.5px; }
.topbar { gap: 10px; padding: 0 12px; }
.brand-name { display: none; }
.content { padding: 22px 16px 72px; }
.article p { font-size: 16px; }
.article-title { font-size: 27px; }
.article-sub { font-size: 16px; }
.ref-item { flex-wrap: wrap; padding-left: 38px; }
.ref-copy { opacity: 1; }
.cite-pop { width: calc(100vw - 24px); }
}(function () {
"use strict";
var doc = document;
var pop = doc.getElementById("citePop");
var popAuthor = doc.getElementById("popAuthor");
var popTitle = doc.getElementById("popTitle");
var popSource = doc.getElementById("popSource");
var popYear = doc.getElementById("popYear");
var popJump = doc.getElementById("popJump");
var popCopy = doc.getElementById("popCopy");
var toastEl = doc.getElementById("toast");
var toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 2000);
}
/* ---------- Citation formatting ---------- */
function refData(refEl) {
return {
author: refEl.getAttribute("data-author") || "",
title: refEl.getAttribute("data-titletext") || "",
source: refEl.getAttribute("data-source") || "",
year: refEl.getAttribute("data-year") || ""
};
}
function formatCitation(d) {
return d.author + ". " + d.title + ". " + d.source + ", " + d.year + ".";
}
function copyText(text, doneMsg) {
var ok = function () { toast(doneMsg || "Citation copied"); };
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(ok).catch(function () { fallback(text, ok); });
} else {
fallback(text, ok);
}
}
function fallback(text, ok) {
var ta = doc.createElement("textarea");
ta.value = text;
ta.style.position = "fixed";
ta.style.opacity = "0";
doc.body.appendChild(ta);
ta.select();
try { doc.execCommand("copy"); ok(); } catch (e) { toast("Copy failed"); }
doc.body.removeChild(ta);
}
/* ---------- Back-reference links: build dynamically ---------- */
// For each citation superscript, register a back-link on its target reference.
var cites = Array.prototype.slice.call(doc.querySelectorAll("sup.cite"));
var backsMap = {}; // refId -> array of citeIds
cites.forEach(function (sup) {
var refId = sup.getAttribute("data-ref");
var citeId = sup.id;
if (!refId) return;
if (!backsMap[refId]) backsMap[refId] = [];
if (backsMap[refId].indexOf(citeId) === -1) backsMap[refId].push(citeId);
});
Object.keys(backsMap).forEach(function (refId) {
var refEl = doc.getElementById(refId);
if (!refEl) return;
var holder = refEl.querySelector(".ref-backs");
if (!holder) return;
holder.innerHTML = "";
var ids = backsMap[refId];
ids.forEach(function (citeId, i) {
var a = doc.createElement("a");
a.href = "#" + citeId;
a.setAttribute("data-cite", citeId);
a.textContent = "↑";
a.title = "Back to citation";
a.setAttribute("aria-label", "Back to citation in text" + (ids.length > 1 ? " (" + String.fromCharCode(97 + i) + ")" : ""));
holder.appendChild(a);
});
});
/* ---------- Highlight helpers ---------- */
function clearTargets() {
var prev = doc.querySelectorAll(".cite-target");
Array.prototype.forEach.call(prev, function (el) { el.classList.remove("cite-target"); });
}
function flashAndHighlight(el) {
clearTargets();
el.classList.add("cite-target");
setTimeout(function () { el.classList.remove("cite-target"); el.classList.add("flash"); }, 1100);
setTimeout(function () { el.classList.remove("flash"); }, 3000);
}
function jumpTo(id) {
var el = doc.getElementById(id);
if (!el) return;
el.scrollIntoView({ behavior: "smooth", block: "center" });
flashAndHighlight(el);
}
/* ---------- Popover ---------- */
var activeSup = null;
var hideTimer = null;
function positionPop(sup) {
var rect = sup.getBoundingClientRect();
var popW = pop.offsetWidth;
var popH = pop.offsetHeight;
var margin = 8;
var scrollX = window.pageXOffset;
var scrollY = window.pageYOffset;
var left = rect.left + scrollX + rect.width / 2 - popW / 2;
left = Math.max(scrollX + margin, Math.min(left, scrollX + window.innerWidth - popW - margin));
var below = false;
var top = rect.top + scrollY - popH - 10;
if (top < scrollY + margin) {
// not enough room above — place below
top = rect.bottom + scrollY + 10;
below = true;
}
pop.style.left = left + "px";
pop.style.top = top + "px";
pop.classList.toggle("below", below);
// arrow x relative to popover
var arrowX = rect.left + scrollX + rect.width / 2 - left - 5;
arrowX = Math.max(12, Math.min(arrowX, popW - 22));
pop.style.setProperty("--arrow-x", arrowX + "px");
}
function showPop(sup) {
var refId = sup.getAttribute("data-ref");
var refEl = doc.getElementById(refId);
if (!refEl) return;
var d = refData(refEl);
popAuthor.textContent = d.author;
popTitle.textContent = d.title;
popSource.textContent = d.source;
popYear.textContent = d.year;
popJump.href = "#" + refId;
popJump.setAttribute("data-ref", refId);
popCopy.setAttribute("data-cite-text", formatCitation(d));
cites.forEach(function (s) { s.classList.remove("cite-active"); });
sup.classList.add("cite-active");
pop.hidden = false;
positionPop(sup);
activeSup = sup;
}
function hidePop() {
pop.hidden = true;
if (activeSup) activeSup.classList.remove("cite-active");
activeSup = null;
}
function scheduleHide() {
clearTimeout(hideTimer);
hideTimer = setTimeout(hidePop, 220);
}
function cancelHide() { clearTimeout(hideTimer); }
cites.forEach(function (sup) {
sup.addEventListener("mouseenter", function () { cancelHide(); showPop(sup); });
sup.addEventListener("mouseleave", scheduleHide);
var link = sup.querySelector("a");
if (link) {
link.addEventListener("focus", function () { cancelHide(); showPop(sup); });
link.addEventListener("blur", scheduleHide);
link.addEventListener("click", function (e) {
e.preventDefault();
hidePop();
jumpTo(sup.getAttribute("data-ref"));
history.replaceState(null, "", "#" + sup.getAttribute("data-ref"));
});
}
});
pop.addEventListener("mouseenter", cancelHide);
pop.addEventListener("mouseleave", scheduleHide);
popJump.addEventListener("click", function (e) {
e.preventDefault();
var refId = popJump.getAttribute("data-ref");
hidePop();
jumpTo(refId);
history.replaceState(null, "", "#" + refId);
});
popCopy.addEventListener("click", function () {
var text = popCopy.getAttribute("data-cite-text") || "";
copyText(text, "Citation copied to clipboard");
});
// Reposition / close on scroll & resize
window.addEventListener("scroll", function () {
if (activeSup) {
// hide on scroll to avoid drift; reopening is cheap
hidePop();
}
}, { passive: true });
window.addEventListener("resize", function () { if (activeSup) hidePop(); });
doc.addEventListener("keydown", function (e) {
if (e.key === "Escape" && !pop.hidden) hidePop();
});
/* ---------- Back-reference clicks (event delegation) ---------- */
doc.getElementById("ref-list").addEventListener("click", function (e) {
var back = e.target.closest(".ref-backs a");
if (back) {
e.preventDefault();
var citeId = back.getAttribute("data-cite");
jumpTo(citeId);
history.replaceState(null, "", "#" + citeId);
return;
}
var copyBtn = e.target.closest(".ref-copy");
if (copyBtn) {
var item = copyBtn.closest(".ref-item");
var d = refData(item);
copyText(formatCitation(d), "Reference copied");
copyBtn.classList.add("done");
var orig = copyBtn.textContent;
copyBtn.textContent = "Copied ✓";
setTimeout(function () { copyBtn.classList.remove("done"); copyBtn.textContent = orig; }, 1600);
}
});
/* ---------- Mobile sidebar drawer ---------- */
var navToggle = doc.getElementById("navToggle");
var sidebar = doc.getElementById("sidebar");
var backdrop = doc.getElementById("backdrop");
function openNav() {
sidebar.classList.add("open");
backdrop.hidden = false;
navToggle.setAttribute("aria-expanded", "true");
}
function closeNav() {
sidebar.classList.remove("open");
backdrop.hidden = true;
navToggle.setAttribute("aria-expanded", "false");
}
navToggle.addEventListener("click", function () {
if (sidebar.classList.contains("open")) closeNav(); else openNav();
});
backdrop.addEventListener("click", closeNav);
sidebar.addEventListener("click", function (e) {
if (e.target.closest("a")) closeNav();
});
/* ---------- Sidebar + TOC active state on scroll (scrollspy) ---------- */
var headings = Array.prototype.slice.call(doc.querySelectorAll(".article h2[id], #article"));
var tocLinks = Array.prototype.slice.call(doc.querySelectorAll(".toc-list a"));
var navLinks = Array.prototype.slice.call(doc.querySelectorAll(".sidebar .nav-list a"));
function setActive(id) {
tocLinks.forEach(function (a) {
a.classList.toggle("active", a.getAttribute("href") === "#" + id);
});
navLinks.forEach(function (a) {
a.classList.toggle("active", a.getAttribute("href") === "#" + id);
});
}
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) setActive(entry.target.id);
});
}, { rootMargin: "-72px 0px -70% 0px", threshold: 0 });
headings.forEach(function (h) { io.observe(h); });
}
/* ---------- Search focus shortcut ---------- */
var search = doc.getElementById("kbSearch");
doc.addEventListener("keydown", function (e) {
if (e.key === "/" && doc.activeElement !== search && !/^(INPUT|TEXTAREA)$/.test((doc.activeElement || {}).tagName || "")) {
e.preventDefault();
search.focus();
}
});
search.addEventListener("keydown", function (e) {
if (e.key === "Enter" && search.value.trim()) {
toast('No live index in this demo — searched "' + search.value.trim() + '"');
}
});
/* ---------- Open reference from initial hash ---------- */
if (location.hash) {
var target = doc.getElementById(location.hash.slice(1));
if (target && (target.classList.contains("ref-item") || target.classList.contains("cite"))) {
setTimeout(function () { flashAndHighlight(target); }, 300);
}
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Aurora DB — Wiki · References & Footnotes</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">Skip to article</a>
<header class="topbar">
<button class="nav-toggle" id="navToggle" aria-label="Toggle navigation" aria-expanded="false" aria-controls="sidebar">
<span></span><span></span><span></span>
</button>
<a class="brand" href="#article" aria-label="Aurora Knowledge Base home">
<span class="brand-mark" aria-hidden="true">◈</span>
<span class="brand-name">Aurora<span class="brand-kb">KB</span></span>
</a>
<div class="search" role="search">
<span class="search-icon" aria-hidden="true">⌕</span>
<input type="search" id="kbSearch" placeholder="Search the wiki…" aria-label="Search the wiki" />
<kbd class="search-kbd">/</kbd>
</div>
<span class="topbar-tag">v3.4 · Draft</span>
</header>
<div class="layout">
<nav class="sidebar" id="sidebar" aria-label="Documentation sections">
<div class="sidebar-inner">
<p class="nav-group-label">Engine</p>
<ul class="nav-list">
<li><a href="#article" class="active">Aurora DB</a></li>
<li><a href="#architecture">Storage architecture</a></li>
<li><a href="#consistency">Consistency model</a></li>
<li><a href="#references">References</a></li>
</ul>
<p class="nav-group-label">Related</p>
<ul class="nav-list">
<li><a href="#article">Project Nimbus</a></li>
<li><a href="#article">Verdant Replication Protocol</a></li>
<li><a href="#article">Halcyon Query Planner</a></li>
</ul>
<p class="nav-group-label">Meta</p>
<ul class="nav-list">
<li><a href="#references">Citation style guide</a></li>
<li><a href="#article">Contributor handbook</a></li>
</ul>
</div>
</nav>
<main class="content" id="article">
<article class="article">
<nav class="breadcrumb" aria-label="Breadcrumb">
<a href="#article">Wiki</a><span aria-hidden="true">/</span>
<a href="#article">Databases</a><span aria-hidden="true">/</span>
<span aria-current="page">Aurora DB</span>
</nav>
<h1 class="article-title">Aurora DB</h1>
<p class="article-sub">A distributed, log-structured database engine developed by the Verdant Foundation</p>
<div class="article-meta">
<span class="meta-pill">Last edited Jun 6, 2026</span>
<span class="meta-pill">9 citations</span>
<span class="meta-pill">Stable since v2.0</span>
</div>
<p>
<strong>Aurora DB</strong> is an open-source, horizontally scalable database engine first
released in 2021 by the Verdant Foundation.<sup class="cite" id="cite-1" data-ref="ref-1"><a href="#ref-1" aria-label="Citation 1">[1]</a></sup>
It combines a log-structured merge storage layer with a consensus-based replication
protocol, targeting workloads that require both strong consistency and predictable tail
latency.<sup class="cite" id="cite-2" data-ref="ref-2"><a href="#ref-2" aria-label="Citation 2">[2]</a></sup>
The project is governed under the Verdant Empire's open contribution charter and is widely
deployed across Project Nimbus infrastructure.<sup class="cite" id="cite-3" data-ref="ref-3"><a href="#ref-3" aria-label="Citation 3">[3]</a></sup>
</p>
<p>
Unlike earlier engines that coupled storage to a single host, Aurora DB separates compute
from durable storage, allowing read replicas to scale independently of the write
primary.<sup class="cite" id="cite-4" data-ref="ref-4"><a href="#ref-4" aria-label="Citation 4">[4]</a></sup>
Benchmarks published by the Halcyon Lab report sustained throughput of roughly 1.4 million
writes per second on a 12-node cluster, with 99th-percentile latency under
<code>8 ms</code>.<sup class="cite" id="cite-5" data-ref="ref-5"><a href="#ref-5" aria-label="Citation 5">[5]</a></sup>
</p>
<h2 id="architecture">Storage architecture</h2>
<p>
Aurora DB persists data in immutable segment files written sequentially to an
append-only log. A background compaction process merges overlapping segments, reclaiming
space and bounding read amplification.<sup class="cite" id="cite-6" data-ref="ref-6"><a href="#ref-6" aria-label="Citation 6">[6]</a></sup>
The design draws directly on the original LSM-tree literature while adding a tiered cache
that pins hot segments in memory.<sup class="cite" id="cite-2" data-ref="ref-2"><a href="#ref-2" aria-label="Citation 2 (repeat)">[2]</a></sup>
</p>
<blockquote>
“We treat the write-ahead log not as a recovery afterthought but as the canonical source
of truth — every other structure is a materialized projection of it.”
<cite>— Aurora DB Design Notes, 2021</cite>
</blockquote>
<p>The on-disk layout is summarized below:</p>
<pre><code>segment-00042.aur
├─ header (magic, version, bloom filter seed)
├─ index block (sparse key → offset map)
├─ data blocks (Snappy-compressed key/value runs)
└─ footer (CRC32, segment min/max keys)</code></pre>
<h2 id="consistency">Consistency model</h2>
<p>
By default Aurora DB offers linearizable reads and writes within a single shard, backed by
a Raft-derived consensus protocol the maintainers call <em>Verdant Replication</em>.<sup class="cite" id="cite-7" data-ref="ref-7"><a href="#ref-7" aria-label="Citation 7">[7]</a></sup>
Cross-shard transactions use a two-phase commit coordinator, with snapshot isolation
available for read-heavy analytical queries.<sup class="cite" id="cite-8" data-ref="ref-8"><a href="#ref-8" aria-label="Citation 8">[8]</a></sup>
</p>
<p>
Operators can relax guarantees per query to trade consistency for latency — a feature the
documentation cautions against using without careful auditing.<sup class="cite" id="cite-9" data-ref="ref-9"><a href="#ref-9" aria-label="Citation 9">[9]</a></sup>
The table below contrasts the available read levels.
</p>
<table class="data-table">
<thead>
<tr><th scope="col">Read level</th><th scope="col">Guarantee</th><th scope="col">Typical latency</th></tr>
</thead>
<tbody>
<tr><td><code>strong</code></td><td>Linearizable</td><td>6–10 ms</td></tr>
<tr><td><code>bounded</code></td><td>≤ 200 ms staleness</td><td>2–4 ms</td></tr>
<tr><td><code>eventual</code></td><td>Replica-local</td><td>< 1 ms</td></tr>
</tbody>
</table>
<h2 id="references">References</h2>
<ol class="ref-list" id="ref-list">
<li id="ref-1" class="ref-item"
data-author="Verdant Foundation" data-titletext="Aurora DB: A Log-Structured Distributed Engine" data-source="Verdant Foundation Whitepapers" data-year="2021">
<span class="ref-backs" data-for="cite-1"><a href="#cite-1" title="Jump back to citation" aria-label="Back to citation 1">↑</a></span>
<span class="ref-body">
Verdant Foundation. <span class="ref-title">Aurora DB: A Log-Structured Distributed Engine</span>. <em>Verdant Foundation Whitepapers</em>, 2021.
<a class="ref-link" href="#references" target="_self">verdant.example/aurora-wp <span class="ext" aria-hidden="true">↗</span></a>
</span>
<button class="ref-copy" type="button" aria-label="Copy citation 1">Copy</button>
</li>
<li id="ref-2" class="ref-item"
data-author="O'Marin, L." data-titletext="Tiered Caching for LSM Storage" data-source="Journal of Distributed Systems" data-year="2022">
<span class="ref-backs" data-for="cite-2"></span>
<span class="ref-body">
O'Marin, L. <span class="ref-title">Tiered Caching for LSM Storage</span>. <em>Journal of Distributed Systems</em>, 14(3), 2022.
<a class="ref-link" href="#references" target="_self">jds.example/v14-3 <span class="ext" aria-hidden="true">↗</span></a>
</span>
<button class="ref-copy" type="button" aria-label="Copy citation 2">Copy</button>
</li>
<li id="ref-3" class="ref-item"
data-author="Project Nimbus Team" data-titletext="Operating Aurora at Scale" data-source="Nimbus Engineering Blog" data-year="2023">
<span class="ref-backs" data-for="cite-3"></span>
<span class="ref-body">
Project Nimbus Team. <span class="ref-title">Operating Aurora at Scale</span>. <em>Nimbus Engineering Blog</em>, 2023.
<a class="ref-link" href="#references" target="_self">nimbus.example/blog/aurora <span class="ext" aria-hidden="true">↗</span></a>
</span>
<button class="ref-copy" type="button" aria-label="Copy citation 3">Copy</button>
</li>
<li id="ref-4" class="ref-item"
data-author="Vance, R. & Holt, K." data-titletext="Disaggregated Storage in Modern Databases" data-source="Halcyon Lab Technical Report" data-year="2022">
<span class="ref-backs" data-for="cite-4"></span>
<span class="ref-body">
Vance, R. & Holt, K. <span class="ref-title">Disaggregated Storage in Modern Databases</span>. <em>Halcyon Lab Technical Report</em> HL-2022-09, 2022.
<a class="ref-link" href="#references" target="_self">halcyon.example/tr/2022-09 <span class="ext" aria-hidden="true">↗</span></a>
</span>
<button class="ref-copy" type="button" aria-label="Copy citation 4">Copy</button>
</li>
<li id="ref-5" class="ref-item"
data-author="Halcyon Lab" data-titletext="Aurora DB Throughput Benchmarks" data-source="Halcyon Benchmark Suite" data-year="2024">
<span class="ref-backs" data-for="cite-5"></span>
<span class="ref-body">
Halcyon Lab. <span class="ref-title">Aurora DB Throughput Benchmarks</span>. <em>Halcyon Benchmark Suite</em>, 2024.
<a class="ref-link" href="#references" target="_self">halcyon.example/bench/aurora <span class="ext" aria-hidden="true">↗</span></a>
</span>
<button class="ref-copy" type="button" aria-label="Copy citation 5">Copy</button>
</li>
<li id="ref-6" class="ref-item"
data-author="Söderqvist, M." data-titletext="Compaction Strategies Revisited" data-source="Verdant Engineering Notes" data-year="2023">
<span class="ref-backs" data-for="cite-6"></span>
<span class="ref-body">
Söderqvist, M. <span class="ref-title">Compaction Strategies Revisited</span>. <em>Verdant Engineering Notes</em>, 2023.
<a class="ref-link" href="#references" target="_self">verdant.example/notes/compaction <span class="ext" aria-hidden="true">↗</span></a>
</span>
<button class="ref-copy" type="button" aria-label="Copy citation 6">Copy</button>
</li>
<li id="ref-7" class="ref-item"
data-author="Verdant Foundation" data-titletext="The Verdant Replication Protocol" data-source="Verdant Foundation Whitepapers" data-year="2022">
<span class="ref-backs" data-for="cite-7"></span>
<span class="ref-body">
Verdant Foundation. <span class="ref-title">The Verdant Replication Protocol</span>. <em>Verdant Foundation Whitepapers</em>, 2022.
<a class="ref-link" href="#references" target="_self">verdant.example/vrp <span class="ext" aria-hidden="true">↗</span></a>
</span>
<button class="ref-copy" type="button" aria-label="Copy citation 7">Copy</button>
</li>
<li id="ref-8" class="ref-item"
data-author="Aurora DB Maintainers" data-titletext="Transactions & Isolation Levels" data-source="Aurora DB Official Documentation" data-year="2025">
<span class="ref-backs" data-for="cite-8"></span>
<span class="ref-body">
Aurora DB Maintainers. <span class="ref-title">Transactions & Isolation Levels</span>. <em>Aurora DB Official Documentation</em>, 2025.
<a class="ref-link" href="#references" target="_self">docs.aurora.example/txn <span class="ext" aria-hidden="true">↗</span></a>
</span>
<button class="ref-copy" type="button" aria-label="Copy citation 8">Copy</button>
</li>
<li id="ref-9" class="ref-item"
data-author="Aurora DB Maintainers" data-titletext="Tuning Consistency for Latency" data-source="Aurora DB Official Documentation" data-year="2025">
<span class="ref-backs" data-for="cite-9"></span>
<span class="ref-body">
Aurora DB Maintainers. <span class="ref-title">Tuning Consistency for Latency</span>. <em>Aurora DB Official Documentation</em>, 2025.
<a class="ref-link" href="#references" target="_self">docs.aurora.example/tuning <span class="ext" aria-hidden="true">↗</span></a>
</span>
<button class="ref-copy" type="button" aria-label="Copy citation 9">Copy</button>
</li>
</ol>
</article>
<aside class="toc" aria-label="On this page">
<p class="toc-label">On this page</p>
<ul class="toc-list">
<li><a href="#article">Aurora DB</a></li>
<li><a href="#architecture">Storage architecture</a></li>
<li><a href="#consistency">Consistency model</a></li>
<li><a href="#references">References</a></li>
</ul>
</aside>
</main>
</div>
<!-- Citation popover (single instance, repositioned) -->
<div class="cite-pop" id="citePop" role="dialog" aria-label="Citation preview" hidden>
<p class="cite-pop-author" id="popAuthor"></p>
<p class="cite-pop-title" id="popTitle"></p>
<p class="cite-pop-meta"><span id="popSource"></span> · <span id="popYear"></span></p>
<div class="cite-pop-actions">
<a class="cite-pop-jump" id="popJump" href="#references">View reference</a>
<button class="cite-pop-copy" id="popCopy" type="button">Copy citation</button>
</div>
</div>
<div class="backdrop" id="backdrop" hidden></div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Footnotes / Citations Block
A long-form encyclopedia article — the fictional Aurora DB storage engine — set in a clean
white knowledge-base shell with a persistent left sidebar, a readable serif body column, and a
sticky right-rail table of contents. Inline citation superscripts like [1] sit
flush in the prose and link down to a numbered References section, where each entry is
formatted with its author, title, source, year, an external-link icon, and a per-entry copy
button.
The interactions center on the citation markers. Hovering or keyboard-focusing a superscript opens a compact popover that previews the cited work and offers View reference and Copy citation actions, repositioning itself above or below the marker so it never clips the viewport. Clicking a marker smooth-scrolls to its reference and flashes a highlight; caret back-links on each reference jump back to the exact citation in the body. References reused across multiple sections automatically collect multiple back-links.
Supporting chrome keeps it feeling like a real wiki: scrollspy keeps the sidebar and table of contents in sync as you read, a / shortcut focuses the search box, the sidebar collapses into a drawer on small screens, and every copy action confirms with a toast. The whole thing is vanilla HTML, CSS, and JavaScript with no dependencies.
Illustrative UI only — fictional articles, products, and data.