npm - @velora-cms/server - Versions diffs - 0.11.0 - Mend

@velora-cms/server 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (367) hide show

package/dist/docs-bundle/v1/using-velora/build-a-headless-frontend/index.html ADDED Viewed

@@ -0,0 +1,413 @@
+<!DOCTYPE html><html lang="en" dir="ltr" data-theme="dark" data-has-toc data-has-sidebar class="astro-ewhz5xxr"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Build a headless frontend | Velora</title><link rel="shortcut icon" href="/docs/favicon.svg" type="image/svg+xml"/><meta name="generator" content="Astro v7.2.10"/><meta name="generator" content="Starlight v0.41.5"/><meta property="og:title" content="Build a headless frontend"/><meta property="og:type" content="article"/><meta property="og:locale" content="en"/><meta property="og:description" content="Build hello-website — a plain Node site on Velora's headless API, one file, no dependencies — line by line, running against the public demo."/><meta property="og:site_name" content="Velora"/><meta name="twitter:card" content="summary_large_image"/><meta name="description" content="Build hello-website — a plain Node site on Velora's headless API, one file, no dependencies — line by line, running against the public demo."/><script>
+	window.StarlightThemeProvider = (() => {
+		const storedTheme =
+			typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme');
+		const theme =
+			storedTheme ||
+			(window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+		document.documentElement.dataset.theme = theme === 'light' ? 'light' : 'dark';
+		return {
+			updatePickers(theme = storedTheme || 'auto') {
+				document.querySelectorAll('starlight-theme-select').forEach((picker) => {
+					const select = picker.querySelector('select');
+					if (select) select.value = theme;
+					/** @type {HTMLTemplateElement | null} */
+					const tmpl = document.querySelector(`#theme-icons`);
+					const newIcon = tmpl && tmpl.content.querySelector('.' + theme);
+					if (newIcon) {
+						const oldIcon = picker.querySelector('svg.label-icon');
+						if (oldIcon) {
+							oldIcon.replaceChildren(...newIcon.cloneNode(true).childNodes);
+						}
+					}
+				});
+			},
+		};
+	})();
+</script><template id="theme-icons"><svg aria-hidden="true" class="light astro-24n5ceuf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5 12a1 1 0 0 0-1-1H3a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Zm.64 5-.71.71a1 1 0 0 0 0 1.41 1 1 0 0 0 1.41 0l.71-.71A1 1 0 0 0 5.64 17ZM12 5a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v1a1 1 0 0 0 1 1Zm5.66 2.34a1 1 0 0 0 .7-.29l.71-.71a1 1 0 1 0-1.41-1.41l-.66.71a1 1 0 0 0 0 1.41 1 1 0 0 0 .66.29Zm-12-.29a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.71-.71a1.004 1.004 0 1 0-1.43 1.41l.73.71ZM21 11h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2Zm-2.64 6A1 1 0 0 0 17 18.36l.71.71a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.76-.66ZM12 6.5a5.5 5.5 0 1 0 5.5 5.5A5.51 5.51 0 0 0 12 6.5Zm0 9a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Zm0 3.5a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1Z"/></svg><svg aria-hidden="true" class="dark astro-24n5ceuf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.64 13a1 1 0 0 0-1.05-.14 8.049 8.049 0 0 1-3.37.73 8.15 8.15 0 0 1-8.14-8.1 8.59 8.59 0 0 1 .25-2A1 1 0 0 0 8 2.36a10.14 10.14 0 1 0 14 11.69 1 1 0 0 0-.36-1.05Zm-9.5 6.69A8.14 8.14 0 0 1 7.08 5.22v.27a10.15 10.15 0 0 0 10.14 10.14 9.784 9.784 0 0 0 2.1-.22 8.11 8.11 0 0 1-7.18 4.32v-.04Z"/></svg><svg aria-hidden="true" class="auto astro-24n5ceuf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg></template><link rel="stylesheet" href="/docs/_astro/print.ehPL0gv-.css" media="print"><link rel="stylesheet" href="/docs/_astro/common.DTXA7sXM.css"><script type="module" src="/docs/_astro/page.Dwipeu-R.js"></script></head><body class="astro-ewhz5xxr"><a class="sl-skip-link astro-zufphfvp" href="#_top">Skip to content</a><div class="page sl-flex astro-5auw3bkx"><header class="header astro-5auw3bkx"><div class="header astro-6ytusalw"><div class="title-wrapper sl-flex astro-6ytusalw"><a href="/docs/" class="site-title sl-flex astro-nu4hftpf"><span class="astro-nu4hftpf" translate="no">Velora</span></a></div><div class="sl-flex print:hidden astro-6ytusalw"><site-search class="astro-6ytusalw astro-zwj6qr56" data-translations="{&quot;placeholder&quot;:&quot;Search&quot;}"><button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-zwj6qr56"><svg aria-hidden="true" class="astro-zwj6qr56 astro-24n5ceuf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg><span class="sl-hidden md:sl-block astro-zwj6qr56" aria-hidden="true">Search</span><kbd class="sl-hidden md:sl-flex astro-zwj6qr56" style="display: none;"><kbd class="astro-zwj6qr56">Ctrl</kbd><kbd class="astro-zwj6qr56">K</kbd></kbd></button><dialog style="padding:0" aria-label="Search" class="astro-zwj6qr56"><div class="dialog-frame sl-flex astro-zwj6qr56"><button data-close-modal class="sl-flex md:sl-hidden astro-zwj6qr56">Cancel</button><div class="search-container astro-zwj6qr56"><div id="starlight__search" class="astro-zwj6qr56"></div></div></div></dialog></site-search><script>
+	(() => {
+		const openBtn = document.querySelector('button[data-open-modal]');
+		const shortcut = openBtn?.querySelector('kbd');
+		if (!openBtn || !(shortcut instanceof HTMLElement)) return;
+		const platformKey = shortcut.querySelector('kbd');
+		if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
+			platformKey.textContent = '⌘';
+			openBtn.setAttribute('aria-keyshortcuts', 'Meta+K');
+		}
+		shortcut.style.display = '';
+	})();
+</script><script type="module" src="/docs/_astro/Search.astro_astro_type_script_index_0_lang.CavldbAs.js"></script></div><div class="sl-hidden md:sl-flex print:hidden right-group astro-6ytusalw"><div class="sl-flex social-icons astro-6ytusalw"></div><starlight-theme-select><label style="--sl-select-width: 6.25em" class="astro-7uz3f5wr"><span class="sr-only astro-7uz3f5wr">Select theme</span><svg aria-hidden="true" class="icon label-icon astro-7uz3f5wr astro-24n5ceuf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg><select autocomplete="off" class="astro-7uz3f5wr"><option value="dark" class="astro-7uz3f5wr">Dark</option><option value="light" class="astro-7uz3f5wr">Light</option><option value="auto" selected class="astro-7uz3f5wr">Auto</option></select><svg aria-hidden="true" class="icon caret astro-7uz3f5wr astro-24n5ceuf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg></label></starlight-theme-select><script>
+	StarlightThemeProvider.updatePickers();
+</script><script type="module">var e=`starlight-theme`,t=e=>e===`auto`||e===`dark`||e===`light`?e:`auto`,n=()=>t(typeof localStorage<`u`&&localStorage.getItem(e));function r(t){typeof localStorage<`u`&&localStorage.setItem(e,t===`light`||t===`dark`?t:``)}var i=()=>matchMedia(`(prefers-color-scheme: light)`).matches?`light`:`dark`;function a(e){StarlightThemeProvider.updatePickers(e),document.documentElement.dataset.theme=e===`auto`?i():e,r(e)}matchMedia(`(prefers-color-scheme: light)`).addEventListener(`change`,()=>{n()===`auto`&&a(`auto`)});var o=class extends HTMLElement{constructor(){super(),a(n()),this.querySelector(`select`)?.addEventListener(`change`,e=>{e.currentTarget instanceof HTMLSelectElement&&a(t(e.currentTarget.value))})}};customElements.define(`starlight-theme-select`,o);</script><script type="module">var e=class extends HTMLElement{constructor(){super();let e=this.querySelector(`select`);e&&(e.addEventListener(`change`,e=>{e.currentTarget instanceof HTMLSelectElement&&(window.location.pathname=e.currentTarget.value)}),window.addEventListener(`pageshow`,t=>{if(!t.persisted)return;let n=e.querySelector(`option[selected]`)?.index;n!==e.selectedIndex&&(e.selectedIndex=n??0)}))}};customElements.define(`starlight-lang-select`,e);</script></div></div></header><nav class="sidebar print:hidden astro-5auw3bkx" aria-label="Main"><starlight-menu-button class="print:hidden astro-gnkm6dw5"><button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-gnkm6dw5"><svg aria-hidden="true" class="open-menu astro-gnkm6dw5 astro-24n5ceuf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg><svg aria-hidden="true" class="close-menu astro-gnkm6dw5 astro-24n5ceuf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="m13.41 12 6.3-6.29a1.004 1.004 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1.004 1.004 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 0 1.42.998.998 0 0 0 1.42 0l6.29-6.3 6.29 6.3a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.42L13.41 12Z"/></svg></button></starlight-menu-button><script type="module">var e=class extends HTMLElement{btn=this.querySelector(`button`);constructor(){super(),this.btn.addEventListener(`click`,()=>this.toggleExpanded());let e=this.closest(`nav`);e&&e.addEventListener(`keyup`,e=>this.closeOnEscape(e)),matchMedia(`(min-width: 50em)`).addEventListener(`change`,()=>this.setExpanded(!1))}setExpanded(e){this.setAttribute(`aria-expanded`,String(e)),document.body.toggleAttribute(`data-mobile-menu-expanded`,e),document.querySelectorAll(`.main-frame, .sl-skip-link`).forEach(t=>{t.toggleAttribute(`inert`,e)})}toggleExpanded(){this.setExpanded(this.getAttribute(`aria-expanded`)!==`true`)}closeOnEscape(e){e.code===`Escape`&&(this.setExpanded(!1),this.btn.focus())}};customElements.define(`starlight-menu-button`,e);</script><div id="starlight__sidebar" class="sidebar-pane astro-5auw3bkx"><div class="sidebar-content sl-flex astro-5auw3bkx"><sl-sidebar-state-persist data-hash="03jp7ll" class="astro-pcs3l5kp"><script aria-hidden="true">
+		(() => {
+			try {
+				if (!matchMedia('(min-width: 50em)').matches) return;
+				/** @type {HTMLElement | null} */
+				const target = document.querySelector('sl-sidebar-state-persist');
+				const state = JSON.parse(sessionStorage.getItem('sl-sidebar-state') || '0');
+				if (!target || !state || target.dataset.hash !== state.hash) return;
+				window._starlightScrollRestore = state.scroll;
+				customElements.define(
+					'sl-sidebar-restore',
+					class SidebarRestore extends HTMLElement {
+						connectedCallback() {
+							try {
+								const idx = parseInt(this.dataset.index || '');
+								const details = this.closest('details');
+								if (details && typeof state.open[idx] === 'boolean') details.open = state.open[idx];
+							} catch {}
+						}
+					}
+				);
+			} catch {}
+		})();
+	</script><ul class="top-level astro-ck7l566j"><li class="astro-ck7l566j"><details open class="astro-ck7l566j"><summary class="astro-ck7l566j"><span class="group-label astro-ck7l566j"><span class="large astro-ck7l566j">Using Velora</span></span><svg aria-hidden="true" class="caret astro-ck7l566j astro-24n5ceuf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></summary><sl-sidebar-restore data-index="0"></sl-sidebar-restore><ul class="astro-ck7l566j"><li class="astro-ck7l566j"><a href="/docs/v1/using-velora/" class="astro-ck7l566j"><span class="astro-ck7l566j">Using Velora</span></a></li><li class="astro-ck7l566j"><a href="/docs/v1/using-velora/getting-started/" class="astro-ck7l566j"><span class="astro-ck7l566j">Getting started</span></a></li><li class="astro-ck7l566j"><a href="/docs/v1/using-velora/installation/" class="astro-ck7l566j"><span class="astro-ck7l566j">Installation</span></a></li><li class="astro-ck7l566j"><a href="/docs/v1/using-velora/content-model/" class="astro-ck7l566j"><span class="astro-ck7l566j">Document types</span></a></li><li class="astro-ck7l566j"><a href="/docs/v1/using-velora/editing/" class="astro-ck7l566j"><span class="astro-ck7l566j">Content editing</span></a></li><li class="astro-ck7l566j"><a href="/docs/v1/using-velora/media/" class="astro-ck7l566j"><span class="astro-ck7l566j">Media</span></a></li><li class="astro-ck7l566j"><a href="/docs/v1/using-velora/users-and-roles/" class="astro-ck7l566j"><span class="astro-ck7l566j">Users and roles</span></a></li><li class="astro-ck7l566j"><a href="/docs/v1/using-velora/installing-plugins/" class="astro-ck7l566j"><span class="astro-ck7l566j">Installing plugins</span></a></li><li class="astro-ck7l566j"><a href="/docs/v1/using-velora/headless-api/" class="astro-ck7l566j"><span class="astro-ck7l566j">Headless API</span></a></li><li class="astro-ck7l566j"><a href="/docs/v1/using-velora/build-a-headless-frontend/" aria-current="page" class="astro-ck7l566j"><span class="astro-ck7l566j">Build a headless frontend</span></a></li></ul></details></li></ul><script aria-hidden="true">
+		(() => {
+			const scroller = document.getElementById('starlight__sidebar');
+			if (!window._starlightScrollRestore || !scroller) return;
+			scroller.scrollTop = window._starlightScrollRestore;
+			delete window._starlightScrollRestore;
+		})();
+	</script></sl-sidebar-state-persist><div class="md:sl-hidden"><div class="mobile-preferences sl-flex astro-yfet6llj"><div class="social-icons astro-yfet6llj"></div><starlight-theme-select><label style="--sl-select-width: 6.25em" class="astro-7uz3f5wr"><span class="sr-only astro-7uz3f5wr">Select theme</span><svg aria-hidden="true" class="icon label-icon astro-7uz3f5wr astro-24n5ceuf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg><select autocomplete="off" class="astro-7uz3f5wr"><option value="dark" class="astro-7uz3f5wr">Dark</option><option value="light" class="astro-7uz3f5wr">Light</option><option value="auto" selected class="astro-7uz3f5wr">Auto</option></select><svg aria-hidden="true" class="icon caret astro-7uz3f5wr astro-24n5ceuf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg></label></starlight-theme-select><script>
+	StarlightThemeProvider.updatePickers();
+</script></div></div></div></div></nav><div class="main-frame astro-5auw3bkx"><script type="module">var e=document.getElementById(`starlight__sidebar`),t=e?.querySelector(`sl-sidebar-state-persist`),n=`sl-sidebar-state`,r=()=>{let r=[],i=t?.dataset.hash||``;try{let e=sessionStorage.getItem(n),t=JSON.parse(e||`{}`);Array.isArray(t.open)&&t.hash===i&&(r=t.open)}catch{}return{hash:i,open:r,scroll:e?.scrollTop||0}},i=e=>{try{sessionStorage.setItem(n,JSON.stringify(e))}catch{}},a=()=>i(r()),o=(e,t)=>{let n=r();n.open[t]=e,i(n)};t?.addEventListener(`click`,e=>{if(!(e.target instanceof Element))return;let t=e.target.closest(`summary`)?.closest(`details`);if(!t)return;let n=t.querySelector(`sl-sidebar-restore`),r=parseInt(n?.dataset.index||``);isNaN(r)||o(!t.open,r)}),addEventListener(`visibilitychange`,()=>{document.visibilityState===`hidden`&&a()});</script><div class="lg:sl-flex astro-perbdhd2"><aside class="right-sidebar-container print:hidden astro-perbdhd2"><div class="right-sidebar astro-perbdhd2"><div class="lg:sl-hidden astro-epm5tkrc"><mobile-starlight-toc data-min-h="2" data-max-h="3" class="astro-bnvebtr4"><nav aria-labelledby="starlight__on-this-page--mobile" class="astro-bnvebtr4"><details id="starlight__mobile-toc" class="astro-bnvebtr4"><summary id="starlight__on-this-page--mobile" class="sl-flex astro-bnvebtr4"><span class="toggle sl-flex astro-bnvebtr4">On this page<svg aria-hidden="true" class="caret astro-bnvebtr4 astro-24n5ceuf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></span><span class="display-current astro-bnvebtr4"></span></summary><div class="dropdown astro-bnvebtr4"><ul class="isMobile astro-lptfoybu" style="--depth: 0;"><li style="--depth: 0;" class="astro-lptfoybu"><a href="#_top" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">Overview</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#run-it-first" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">Run it first</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#what-the-site-reads" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">What the site reads</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#1-load-env-without-a-dependency" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">1. Load .env without a dependency</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#2-one-function-for-the-whole-api-client" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">2. One function for the whole API client</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#3-html-helpers" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">3. HTML helpers</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#4-the-home-page-two-requests-one-grouped-list" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">4. The home page: two requests, one grouped list</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#5-the-item-page-fields-from-one-call" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">5. The item page: fields from one call</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#6-the-server" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">6. The server</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#what-it-renders" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">What it renders</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#point-it-at-your-own-instance" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">Point it at your own instance</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#make-it-say-hello-world" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">Make it say hello world</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#where-to-go-next" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">Where to go next</span></a></li></ul></div></details></nav></mobile-starlight-toc><script type="module" src="/docs/_astro/MobileTableOfContents.astro_astro_type_script_index_0_lang.BcSo_yiZ.js"></script></div><div class="right-sidebar-panel sl-hidden lg:sl-block astro-epm5tkrc"><div class="sl-container astro-epm5tkrc"><starlight-toc data-min-h="2" data-max-h="3"><nav aria-labelledby="starlight__on-this-page"><h2 id="starlight__on-this-page">On this page</h2><ul class="astro-lptfoybu" style="--depth: 0;"><li style="--depth: 0;" class="astro-lptfoybu"><a href="#_top" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">Overview</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#run-it-first" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">Run it first</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#what-the-site-reads" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">What the site reads</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#1-load-env-without-a-dependency" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">1. Load .env without a dependency</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#2-one-function-for-the-whole-api-client" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">2. One function for the whole API client</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#3-html-helpers" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">3. HTML helpers</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#4-the-home-page-two-requests-one-grouped-list" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">4. The home page: two requests, one grouped list</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#5-the-item-page-fields-from-one-call" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">5. The item page: fields from one call</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#6-the-server" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">6. The server</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#what-it-renders" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">What it renders</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#point-it-at-your-own-instance" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">Point it at your own instance</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#make-it-say-hello-world" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">Make it say hello world</span></a></li><li style="--depth: 0;" class="astro-lptfoybu"><a href="#where-to-go-next" style="--depth: 0;" class="astro-lptfoybu"><span style="--depth: 0;" class="astro-lptfoybu">Where to go next</span></a></li></ul></nav></starlight-toc><script type="module" src="/docs/_astro/TableOfContents.astro_astro_type_script_index_0_lang.Csloo1VZ.js"></script></div></div></div></aside><div class="main-pane astro-perbdhd2"><main data-pagefind-body class="astro-ewhz5xxr" lang="en" dir="ltr"><div class="content-panel astro-ahkzlqop"><div class="sl-container astro-ahkzlqop"><h1 id="_top" class="astro-oef2efwn">Build a headless frontend</h1></div></div><div class="content-panel astro-ahkzlqop"><div class="sl-container astro-ahkzlqop"><div class="sl-markdown-content"><p>This tutorial builds a working website on top of Velora’s <a href="/docs/v1/using-velora/headless-api/">headless
+API</a>: one file, plain Node, no framework
+and no npm dependencies. It fetches content <strong>server-side</strong>, so the API
+key never reaches a browser, lists every published item grouped by
+document type, and renders any item’s fields when you click it.</p>
+<p>The finished file is <code dir="auto">examples/hello-website/server.js</code> in the public
+starter repository,
+<a href="https://github.com/velora-cms/velora-starter">velora-cms/velora-starter</a>.
+Every code block below is a slice of that same file, in file order — paste
+them one after another and you have it. You can also clone the repository
+and read ahead at any point.</p>
+<p>It runs against the public demo instance, so you need no Velora of your
+own to finish it. Node 18 or newer is the only requirement (the code uses
+the built-in <code dir="auto">fetch</code>).</p>
+<div class="sl-heading-wrapper level-h2"><h2 id="run-it-first">Run it first</h2><a class="sl-anchor-link" href="#run-it-first"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"></path></svg></span><span class="sr-only" data-pagefind-ignore="">Section titled “Run it first”</span></a></div>
+<p>Cloning the starter and running the example takes about a minute and gives
+you the finished thing to compare against:</p>
+<div class="expressive-code"><link rel="stylesheet" href="/docs/_astro/ec.w36nc.css"><script type="module" src="/docs/_astro/ec.0vx5m.js"></script><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#82AAFF;--1:#3B61B0">git</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#ECC48D;--1:#3B61B0">clone</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">--depth</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#F78C6C;--1:#AA0982">1</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#ECC48D;--1:#3B61B0">https://github.com/velora-cms/velora-starter</span></div></div><div class="ec-line"><div class="code"><span style="--0:#C5E478;--1:#3B61B0">cd</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#ECC48D;--1:#3B61B0">velora-starter/examples/hello-website</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><button title="Copy to clipboard" data-copied="Copied!" data-code="git clone --depth 1 https://github.com/velora-cms/velora-startercd velora-starter/examples/hello-website"><div></div></button></div></figure></div>
+<p>You now have four files: <code dir="auto">server.js</code> (the whole site), <code dir="auto">package.json</code>
+(name and a <code dir="auto">start</code> script — no dependencies), <code dir="auto">.env.example</code>, and a
+<code dir="auto">README.md</code> covering the same ground as this tutorial.</p>
+<p>The site reads its configuration from <code dir="auto">.env</code>. Create one pointing at the
+public demo:</p>
+<div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#82AAFF;--1:#3B61B0">cat</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#7FDBCA;--1:#096E72">></span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#ECC48D;--1:#3B61B0">.env</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#7FDBCA;--1:#096E72">&#x3C;&#x3C;</span><span style="--0:#D9F5DD;--1:#111111">'ENV'</span></div></div><div class="ec-line"><div class="code"><span style="--0:#ECC48D;--1:#984E4D">VELORA_API_URL=https://demo.velora-cms.com</span></div></div><div class="ec-line"><div class="code"><span style="--0:#ECC48D;--1:#984E4D">VELORA_API_KEY=vk_4ac0a6b78b953a13b8646e6379fcbb6bee1a269af253a14eebce668572019328</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D9F5DD;--1:#111111">ENV</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><button title="Copy to clipboard" data-copied="Copied!" data-code="cat > .env <<&#x27;ENV&#x27;VELORA_API_URL=https://demo.velora-cms.comVELORA_API_KEY=vk_4ac0a6b78b953a13b8646e6379fcbb6bee1a269af253a14eebce668572019328ENV"><div></div></button></div></figure></div>
+<p>That key is intentionally public: it belongs to the demo instance, it is
+rate-limited, and it is rotated whenever the demo is reseeded. (It is a
+normal API key — see <a href="/docs/v1/using-velora/headless-api/#what-a-key-can-do">What a key can
+do</a> — created with the
+default read scope, so Velora itself refuses writes with it; the demo’s
+reverse proxy also rejects every non-<code dir="auto">GET</code> request except GraphQL
+queries before Velora sees them, as a second layer.)</p>
+<p>Start the server:</p>
+<div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#82AAFF;--1:#3B61B0">node</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#ECC48D;--1:#3B61B0">server.js</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><button title="Copy to clipboard" data-copied="Copied!" data-code="node server.js"><div></div></button></div></figure></div>
+<p>It prints one line and stays running:</p>
+<div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="plaintext"><code><div class="ec-line"><div class="code"><span style="--0:#d6deeb;--1:#403f53">Hello-website running at http://localhost:4600</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><button title="Copy to clipboard" data-copied="Copied!" data-code="Hello-website running at http://localhost:4600"><div></div></button></div></figure></div>
+<p>Open that URL and you will see the demo’s content — a heading per document
+type, and every published item beneath it. The rest of this page explains
+how the file gets there, block by block.</p>
+<div class="sl-heading-wrapper level-h2"><h2 id="what-the-site-reads">What the site reads</h2><a class="sl-anchor-link" href="#what-the-site-reads"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"></path></svg></span><span class="sr-only" data-pagefind-ignore="">Section titled “What the site reads”</span></a></div>
+<p>Three environment variables, all read at startup:</p>
+<table><thead><tr><th>Name</th><th>Type</th><th>Meaning</th><th>Example</th></tr></thead><tbody><tr><td><code dir="auto">VELORA_API_URL</code></td><td>string (URL)</td><td>Origin of the Velora instance. Every request is resolved against it as <code dir="auto">&#x3C;origin>/api/v1/…</code>. No default — the site refuses to render without it.</td><td><code dir="auto">https://demo.velora-cms.com</code></td></tr><tr><td><code dir="auto">VELORA_API_KEY</code></td><td>string</td><td>An API key, sent as <code dir="auto">Authorization: Bearer &#x3C;key></code>. Minted in the admin under <strong>Settings → API Keys</strong>. No default.</td><td><code dir="auto">vk_4ac0a6b78b953a13b8646e6379fcbb6bee1a269af253a14eebce668572019328</code></td></tr><tr><td><code dir="auto">PORT</code></td><td>integer</td><td>Port this site listens on. Default <code dir="auto">4600</code>.</td><td><code dir="auto">4600</code></td></tr></tbody></table>
+<p>Real shell exports win over the <code dir="auto">.env</code> file, so
+<code dir="auto">PORT=5000 node server.js</code> overrides the file without editing it.</p>
+<div class="sl-heading-wrapper level-h2"><h2 id="1-load-env-without-a-dependency">1. Load <code dir="auto">.env</code> without a dependency</h2><a class="sl-anchor-link" href="#1-load-env-without-a-dependency"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"></path></svg></span><span class="sr-only" data-pagefind-ignore="">Section titled “1. Load .env without a dependency”</span></a></div>
+<p>The file opens by pulling <code dir="auto">KEY=value</code> pairs out of <code dir="auto">.env</code> into
+<code dir="auto">process.env</code>. Ten lines replace a dotenv dependency, and the <code dir="auto">!(m[1] in process.env)</code> check is what makes a real shell export take precedence:</p>
+<div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="js"><code><div class="ec-line"><div class="code"><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">http</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#82AAFF;--1:#3B61B0">require</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">node:http</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">fs</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#82AAFF;--1:#3B61B0">require</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">node:fs</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">path</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#82AAFF;--1:#3B61B0">require</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">node:path</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">);</span></div></div><div class="ec-line"><div class="code">
+</div></div><div class="ec-line"><div class="code"><span style="--0:#919F9F;--1:#5D6376">// --- tiny .env loader (real shell exports win over the file) ------------</span></div></div><div class="ec-line"><div class="code"><span style="--0:#C792EA;--1:#8844AE">try</span><span style="--0:#D6DEEB;--1:#403F53"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">lines</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#7FDBCA;--1:#096E72">fs</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">readFileSync</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#7FDBCA;--1:#096E72">path</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">join</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">__dirname</span></span><span style="--0:#C792EA;--1:#8844AE">, </span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">.env</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">)</span><span style="--0:#C792EA;--1:#8844AE">, </span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">utf8</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">)</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">split</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">/</span><span style="--0:#82AAFF;--1:#3B61B0">\r</span><span style="--0:#7FDBCA;--1:#096E72">?</span><span style="--0:#82AAFF;--1:#3B61B0">\n</span><span style="--0:#D9F5DD;--1:#111111">/</span><span style="--0:#D6DEEB;--1:#403F53">);</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">for</span><span style="--0:#D6DEEB;--1:#403F53"> (</span><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">line</span><span style="--0:#C792EA;--1:#8844AE"> </span><span style="--0:#7FDBCA;--1:#096E72">of</span><span style="--1:#403F53"><span style="--0:#D6DEEB"> </span><span style="--0:#D7DBE0">lines</span><span style="--0:#D6DEEB">) {</span></span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">m</span><span style="--0:#C792EA;--1:#8844AE"> =</span><span style="--0:#5CA7E4;--1:#3A688F"> </span><span style="--0:#D9F5DD;--1:#111111">/</span><span style="--0:#C792EA;--1:#8844AE">^</span><span style="--0:#82AAFF;--1:#3B61B0">\s</span><span style="--0:#7FDBCA;--1:#096E72">*</span><span style="--0:#5CA7E4;--1:#3A688F">(</span><span style="--0:#82AAFF;--1:#3B61B0">[A-Z0-9_]</span><span style="--0:#7FDBCA;--1:#096E72">+</span><span style="--0:#5CA7E4;--1:#3A688F">)</span><span style="--0:#82AAFF;--1:#3B61B0">\s</span><span style="--0:#7FDBCA;--1:#096E72">*</span><span style="--0:#5CA7E4;--1:#3A688F">=</span><span style="--0:#82AAFF;--1:#3B61B0">\s</span><span style="--0:#7FDBCA;--1:#096E72">*</span><span style="--0:#5CA7E4;--1:#3A688F">(</span><span style="--0:#82AAFF;--1:#3B61B0">.</span><span style="--0:#7FDBCA;--1:#096E72">*</span><span style="--0:#5CA7E4;--1:#3A688F">)</span><span style="--0:#82AAFF;--1:#3B61B0">\s</span><span style="--0:#7FDBCA;--1:#096E72">*</span><span style="--0:#C792EA;--1:#8844AE">$</span><span style="--0:#D9F5DD;--1:#111111">/</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">exec</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">line</span><span style="--0:#D6DEEB">);</span></span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#C792EA;--1:#8844AE">if</span><span style="--1:#403F53"><span style="--0:#D6DEEB"> (</span><span style="--0:#D7DBE0">m</span><span style="--0:#D6DEEB"> </span></span><span style="--0:#C792EA;--1:#8844AE">&#x26;&#x26;</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">!</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">m</span><span style="--0:#D6DEEB">[</span></span><span style="--0:#F78C6C;--1:#AA0982">1</span><span style="--0:#D6DEEB;--1:#403F53">] </span><span style="--0:#7FDBCA;--1:#096E72">in</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#7FDBCA;--1:#096E72">process</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">env</span><span style="--0:#D6DEEB;--1:#403F53">)) </span><span style="--0:#7FDBCA;--1:#096E72">process</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">env</span><span style="--1:#403F53"><span style="--0:#D6DEEB">[</span><span style="--0:#D7DBE0">m</span><span style="--0:#D6DEEB">[</span></span><span style="--0:#F78C6C;--1:#AA0982">1</span><span style="--0:#D6DEEB;--1:#403F53">]] </span><span style="--0:#C792EA;--1:#8844AE">=</span><span style="--1:#403F53"><span style="--0:#D6DEEB"> </span><span style="--0:#D7DBE0">m</span><span style="--0:#D6DEEB">[</span></span><span style="--0:#F78C6C;--1:#AA0982">2</span><span style="--0:#D6DEEB;--1:#403F53">];</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">  </span></span><span style="--0:#D6DEEB;--1:#403F53">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">} </span><span style="--0:#C792EA;--1:#8844AE">catch</span><span style="--0:#D6DEEB;--1:#403F53"> { </span><span style="--0:#919F9F;--1:#5F636F">/* no .env file — env vars only */</span><span style="--0:#D6DEEB;--1:#403F53"> }</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><button title="Copy to clipboard" data-copied="Copied!" data-code="const http = require(&#x22;node:http&#x22;);const fs = require(&#x22;node:fs&#x22;);const path = require(&#x22;node:path&#x22;);// --- tiny .env loader (real shell exports win over the file) ------------try {  const lines = fs.readFileSync(path.join(__dirname, &#x22;.env&#x22;), &#x22;utf8&#x22;).split(/\r?\n/);  for (const line of lines) {    const m = /^\s*([A-Z0-9_]+)\s*=\s*(.*)\s*$/.exec(line);    if (m &#x26;&#x26; !(m[1] in process.env)) process.env[m[1]] = m[2];  }} catch { /* no .env file — env vars only */ }"><div></div></button></div></figure></div>
+<p>A missing <code dir="auto">.env</code> is swallowed on purpose: the site still starts when
+configuration comes from the environment instead, which is how you would
+run it on a host that injects secrets rather than mounting files.</p>
+<p>Next, the three values become constants:</p>
+<div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="js"><code><div class="ec-line"><div class="code"><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">API_URL</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#7FDBCA;--1:#096E72">process</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#FAF39F;--1:#111111">env</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">VELORA_API_URL</span><span style="--0:#D6DEEB;--1:#403F53">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">API_KEY</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#7FDBCA;--1:#096E72">process</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#FAF39F;--1:#111111">env</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">VELORA_API_KEY</span><span style="--0:#D6DEEB;--1:#403F53">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">PORT</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#82AAFF;--1:#3B61B0">Number</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#7FDBCA;--1:#096E72">process</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#FAF39F;--1:#111111">env</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">PORT</span><span style="--0:#C792EA;--1:#8844AE"> || </span><span style="--0:#F78C6C;--1:#AA0982">4600</span><span style="--0:#D6DEEB;--1:#403F53">);</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><button title="Copy to clipboard" data-copied="Copied!" data-code="const API_URL = process.env.VELORA_API_URL;const API_KEY = process.env.VELORA_API_KEY;const PORT = Number(process.env.PORT || 4600);"><div></div></button></div></figure></div>
+<p><code dir="auto">API_URL</code> and <code dir="auto">API_KEY</code> are deliberately left undefined when unset rather
+than defaulted — the request handler in step 6 turns that into a readable
+error page instead of a confusing 401 from a server you did not mean to
+call.</p>
+<div class="sl-heading-wrapper level-h2"><h2 id="2-one-function-for-the-whole-api-client">2. One function for the whole API client</h2><a class="sl-anchor-link" href="#2-one-function-for-the-whole-api-client"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"></path></svg></span><span class="sr-only" data-pagefind-ignore="">Section titled “2. One function for the whole API client”</span></a></div>
+<p>Talking to Velora needs no SDK. Every route takes the same bearer header
+and answers JSON, so the entire client is six lines:</p>
+<div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="js"><code><div class="ec-line"><div class="code"><span style="--0:#C792EA;--1:#8844AE">async</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">function</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">velora</span><span style="--0:#D9F5DD;--1:#111111">(</span><span style="--0:#D7DBE0;--1:#403F53">apiPath</span><span style="--0:#D9F5DD;--1:#111111">)</span><span style="--0:#D6DEEB;--1:#403F53"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">res</span><span style="--0:#C792EA;--1:#8844AE"> = await </span><span style="--0:#82AAFF;--1:#3B61B0">fetch</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#7FDBCA;--1:#096E72">new</span><span style="--0:#C792EA;--1:#8844AE"> </span><span style="--0:#82AAFF;--1:#3B61B0">URL</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">apiPath</span></span><span style="--0:#889FB2;--1:#4D667B">,</span><span style="--0:#C792EA;--1:#8844AE"> </span><span style="--0:#82AAFF;--1:#3B61B0">API_URL</span><span style="--0:#D6DEEB;--1:#403F53">)</span><span style="--0:#889FB2;--1:#4D667B">,</span><span style="--0:#C792EA;--1:#8844AE"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#C792EA;--1:#8844AE">    </span></span><span style="--0:#C792EA;--1:#8844AE">headers: { authorization: </span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#ECC48D;--1:#3B61B0">Bearer </span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">API_KEY</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#C792EA;--1:#8844AE"> }</span><span style="--0:#889FB2;--1:#4D667B">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#C792EA;--1:#8844AE">  </span></span><span style="--0:#C792EA;--1:#8844AE">}</span><span style="--0:#D6DEEB;--1:#403F53">);</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">if</span><span style="--0:#D6DEEB;--1:#403F53"> (</span><span style="--0:#C792EA;--1:#8844AE">!</span><span style="--0:#7FDBCA;--1:#096E72">res</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">ok</span><span style="--0:#D6DEEB;--1:#403F53">) </span><span style="--0:#C792EA;--1:#8844AE">throw</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#7FDBCA;--1:#096E72">new</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">Error</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#D7DBE0;--1:#403F53">apiPath</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0"> -> HTTP </span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#7FDBCA;--1:#096E72">res</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">status</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#D6DEEB;--1:#403F53">);</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">return</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#7FDBCA;--1:#096E72">res</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">json</span><span style="--0:#D6DEEB;--1:#403F53">();</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">}</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><button title="Copy to clipboard" data-copied="Copied!" data-code="async function velora(apiPath) {  const res = await fetch(new URL(apiPath, API_URL), {    headers: { authorization: &#x60;Bearer ${API_KEY}&#x60; },  });  if (!res.ok) throw new Error(&#x60;${apiPath} -> HTTP ${res.status}&#x60;);  return res.json();}"><div></div></button></div></figure></div>
+<p><code dir="auto">new URL(apiPath, API_URL)</code> joins the path to the configured origin, so
+callers below write <code dir="auto">/api/v1/content</code> and never string-concatenate. A
+non-2xx response throws with its status attached — a <code dir="auto">401</code> here means the
+key is missing, wrong or revoked; a <code dir="auto">404</code> on <code dir="auto">/api/v1/…</code> usually means the
+instance was not started with <code dir="auto">VELORA_HEADLESS=true</code>, so the routes do not
+exist at all.</p>
+<p>Because this runs in Node, <code dir="auto">API_KEY</code> stays on the server. Nothing in the
+HTML this site emits contains the key.</p>
+<div class="sl-heading-wrapper level-h2"><h2 id="3-html-helpers">3. HTML helpers</h2><a class="sl-anchor-link" href="#3-html-helpers"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"></path></svg></span><span class="sr-only" data-pagefind-ignore="">Section titled “3. HTML helpers”</span></a></div>
+<p>Three small helpers do all the rendering. <code dir="auto">esc</code> escapes every value that
+came from the API — content is data, and data goes through escaping before
+it becomes markup:</p>
+<div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="js"><code><div class="ec-line"><div class="code"><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">esc</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#D9F5DD;--1:#111111">(</span><span style="--0:#D7DBE0;--1:#403F53">s</span><span style="--0:#D9F5DD;--1:#111111">)</span><span style="--0:#C792EA;--1:#8844AE"> =></span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#82AAFF;--1:#3B61B0">String</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">s</span><span style="--0:#D6DEEB">)</span></span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">replace</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">/</span><span style="--0:#82AAFF;--1:#3B61B0">[&#x26;&#x3C;>"']</span><span style="--0:#D9F5DD;--1:#111111">/</span><span style="--0:#5CA7E4;--1:#3A688F">g</span><span style="--0:#C792EA;--1:#8844AE">, </span><span style="--0:#D9F5DD;--1:#111111">(</span><span style="--0:#D7DBE0;--1:#403F53">c</span><span style="--0:#D9F5DD;--1:#111111">)</span><span style="--0:#C792EA;--1:#8844AE"> => </span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#ECC48D;--1:#3B61B0">&#x26;#</span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#7FDBCA;--1:#096E72">c</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">charCodeAt</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#F78C6C;--1:#AA0982">0</span><span style="--0:#D6DEEB;--1:#403F53">)</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0">;</span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#D6DEEB;--1:#403F53">);</span></div></div><div class="ec-line"><div class="code">
+</div></div><div class="ec-line"><div class="code"><span style="--0:#C792EA;--1:#8844AE">function</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">page</span><span style="--0:#D9F5DD;--1:#111111">(</span><span style="--1:#403F53"><span style="--0:#D7DBE0">title</span><span style="--0:#D6DEEB">, </span><span style="--0:#D7DBE0">body</span></span><span style="--0:#D9F5DD;--1:#111111">)</span><span style="--0:#D6DEEB;--1:#403F53"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">return</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;!doctype html>&#x3C;meta charset="utf-8"></span></div></div><div class="ec-line"><div class="code"><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;meta name="viewport" content="width=device-width, initial-scale=1"></span></div></div><div class="ec-line"><div class="code"><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;title></span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">esc</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">title</span><span style="--0:#D6DEEB">)</span></span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;/title></span></div></div><div class="ec-line"><div class="code"><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;style></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#ECC48D;--1:#3B61B0">  </span></span><span style="--0:#ECC48D;--1:#3B61B0">body { font-family: system-ui, sans-serif; max-width: 42rem;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#ECC48D;--1:#3B61B0">         </span></span><span style="--0:#ECC48D;--1:#3B61B0">margin-inline: auto; padding: 2rem 1rem; line-height: 1.6; }</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#ECC48D;--1:#3B61B0">  </span></span><span style="--0:#ECC48D;--1:#3B61B0">h1 { border-block-end: 2px solid #ddd; padding-block-end: .5rem; }</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#ECC48D;--1:#3B61B0">  </span></span><span style="--0:#ECC48D;--1:#3B61B0">a { color: #0369a1; }</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#ECC48D;--1:#3B61B0">  </span></span><span style="--0:#ECC48D;--1:#3B61B0">dt { font-weight: 600; margin-block-start: 1rem; }</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#ECC48D;--1:#3B61B0">  </span></span><span style="--0:#ECC48D;--1:#3B61B0">dd { margin-inline-start: 0; }</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#ECC48D;--1:#3B61B0">  </span></span><span style="--0:#ECC48D;--1:#3B61B0">pre { background: #f5f5f4; padding: 1rem; overflow-x: auto; }</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#ECC48D;--1:#3B61B0">  </span></span><span style="--0:#ECC48D;--1:#3B61B0">small { color: #78716c; }</span></div></div><div class="ec-line"><div class="code"><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;/style></span></div></div><div class="ec-line"><div class="code"><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;body></span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#D7DBE0;--1:#403F53">body</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;/body></span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#D6DEEB;--1:#403F53">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">}</span></div></div><div class="ec-line"><div class="code">
+</div></div><div class="ec-line"><div class="code"><span style="--0:#C792EA;--1:#8844AE">function</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">renderValue</span><span style="--0:#D9F5DD;--1:#111111">(</span><span style="--0:#D7DBE0;--1:#403F53">v</span><span style="--0:#D9F5DD;--1:#111111">)</span><span style="--0:#D6DEEB;--1:#403F53"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">if</span><span style="--1:#403F53"><span style="--0:#D6DEEB"> (</span><span style="--0:#D7DBE0">v</span><span style="--0:#D6DEEB"> </span></span><span style="--0:#C792EA;--1:#8844AE">===</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#FF6A83;--1:#A24848">null</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">||</span><span style="--1:#403F53"><span style="--0:#D6DEEB"> </span><span style="--0:#D7DBE0">v</span><span style="--0:#D6DEEB"> </span></span><span style="--0:#C792EA;--1:#8844AE">===</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">undefined</span><span style="--0:#D6DEEB;--1:#403F53">) </span><span style="--0:#C792EA;--1:#8844AE">return</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">&#x3C;small>(empty)&#x3C;/small></span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">if</span><span style="--0:#D6DEEB;--1:#403F53"> (</span><span style="--0:#7FDBCA;--1:#096E72">typeof</span><span style="--1:#403F53"><span style="--0:#D6DEEB"> </span><span style="--0:#D7DBE0">v</span><span style="--0:#D6DEEB"> </span></span><span style="--0:#C792EA;--1:#8844AE">===</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">object</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">) </span><span style="--0:#C792EA;--1:#8844AE">return</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;pre></span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">esc</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#82AAFF;--1:#3B61B0">JSON</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">stringify</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">v</span></span><span style="--0:#889FB2;--1:#4D667B">,</span><span style="--0:#E2817F;--1:#B23834"> </span><span style="--0:#FF6A83;--1:#A24848">null</span><span style="--0:#889FB2;--1:#4D667B">,</span><span style="--0:#E2817F;--1:#B23834"> </span><span style="--0:#F78C6C;--1:#AA0982">2</span><span style="--0:#D6DEEB;--1:#403F53">))</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;/pre></span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#D6DEEB;--1:#403F53">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">return</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">esc</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">v</span><span style="--0:#D6DEEB">);</span></span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">}</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><button title="Copy to clipboard" data-copied="Copied!" data-code="const esc = (s) =>  String(s).replace(/[&#x26;<>&#x22;&#x27;]/g, (c) => &#x60;&#x26;#${c.charCodeAt(0)};&#x60;);function page(title, body) {  return &#x60;<!doctype html><meta charset=&#x22;utf-8&#x22;><meta name=&#x22;viewport&#x22; content=&#x22;width=device-width, initial-scale=1&#x22;><title>${esc(title)}</title><style>  body { font-family: system-ui, sans-serif; max-width: 42rem;         margin-inline: auto; padding: 2rem 1rem; line-height: 1.6; }  h1 { border-block-end: 2px solid #ddd; padding-block-end: .5rem; }  a { color: #0369a1; }  dt { font-weight: 600; margin-block-start: 1rem; }  dd { margin-inline-start: 0; }  pre { background: #f5f5f4; padding: 1rem; overflow-x: auto; }  small { color: #78716c; }</style><body>${body}</body>&#x60;;}function renderValue(v) {  if (v === null || v === undefined) return &#x22;<small>(empty)</small>&#x22;;  if (typeof v === &#x22;object&#x22;) return &#x60;<pre>${esc(JSON.stringify(v, null, 2))}</pre>&#x60;;  return esc(v);}"><div></div></button></div></figure></div>
+<p><code dir="auto">page</code> wraps a body in a complete document with a small stylesheet — note
+<code dir="auto">margin-inline</code>, <code dir="auto">padding-block-end</code> and <code dir="auto">margin-inline-start</code> rather than
+their left/right equivalents, so the layout mirrors correctly in a
+right-to-left locale. <code dir="auto">renderValue</code> is the honest part: a field’s value can
+be a string, a number, or a nested object (rich text arrives as a document
+object, not HTML), so anything structural is pretty-printed as JSON rather
+than guessed at.</p>
+<div class="sl-heading-wrapper level-h2"><h2 id="4-the-home-page-two-requests-one-grouped-list">4. The home page: two requests, one grouped list</h2><a class="sl-anchor-link" href="#4-the-home-page-two-requests-one-grouped-list"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"></path></svg></span><span class="sr-only" data-pagefind-ignore="">Section titled “4. The home page: two requests, one grouped list”</span></a></div>
+<p>The home page needs two things — the list of published content, and the
+names of the document types those items belong to, since content rows
+carry only a <code dir="auto">documentTypeId</code>. Both are fetched in parallel:</p>
+<div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="js"><code><div class="ec-line"><div class="code"><span style="--0:#C792EA;--1:#8844AE">async</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">function</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">home</span><span style="--0:#D9F5DD;--1:#111111">()</span><span style="--0:#D6DEEB;--1:#403F53"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">const [</span><span style="--0:#82AAFF;--1:#3B61B0">types</span><span style="--0:#889FB2;--1:#4D667B">,</span><span style="--0:#C792EA;--1:#8844AE"> </span><span style="--0:#82AAFF;--1:#3B61B0">content</span><span style="--0:#C792EA;--1:#8844AE">] = await </span><span style="--0:#C5E478;--1:#3B61B0">Promise</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">all</span><span style="--0:#D6DEEB;--1:#403F53">([</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#82AAFF;--1:#3B61B0">velora</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">/api/v1/document-types?limit=100</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">)</span><span style="--0:#889FB2;--1:#4D667B">,</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#82AAFF;--1:#3B61B0">velora</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">/api/v1/content?limit=100</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">)</span><span style="--0:#889FB2;--1:#4D667B">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">  </span></span><span style="--0:#D6DEEB;--1:#403F53">]);</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">typeName</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#7FDBCA;--1:#096E72">new</span><span style="--0:#C792EA;--1:#8844AE"> </span><span style="--0:#82AAFF;--1:#3B61B0">Map</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#7FDBCA;--1:#096E72">types</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#FAF39F;--1:#111111">items</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">map</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">(</span><span style="--0:#D7DBE0;--1:#403F53">t</span><span style="--0:#D9F5DD;--1:#111111">)</span><span style="--0:#C792EA;--1:#8844AE"> =></span><span style="--0:#D6DEEB;--1:#403F53"> [</span><span style="--0:#7FDBCA;--1:#096E72">t</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">id</span><span style="--0:#889FB2;--1:#4D667B">,</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#7FDBCA;--1:#096E72">t</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">name</span><span style="--0:#D6DEEB;--1:#403F53">]));</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">groups</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#7FDBCA;--1:#096E72">new</span><span style="--0:#C792EA;--1:#8844AE"> </span><span style="--0:#82AAFF;--1:#3B61B0">Map</span><span style="--0:#D6DEEB;--1:#403F53">();</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">for</span><span style="--0:#D6DEEB;--1:#403F53"> (</span><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">item</span><span style="--0:#C792EA;--1:#8844AE"> </span><span style="--0:#7FDBCA;--1:#096E72">of</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#7FDBCA;--1:#096E72">content</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">items</span><span style="--0:#D6DEEB;--1:#403F53">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">name</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#7FDBCA;--1:#096E72">typeName</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">get</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#7FDBCA;--1:#096E72">item</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">documentTypeId</span><span style="--0:#D6DEEB;--1:#403F53">)</span><span style="--0:#C792EA;--1:#8844AE"> || </span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">Unknown type</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#C792EA;--1:#8844AE">if</span><span style="--0:#D6DEEB;--1:#403F53"> (</span><span style="--0:#C792EA;--1:#8844AE">!</span><span style="--0:#7FDBCA;--1:#096E72">groups</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">has</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">name</span><span style="--0:#D6DEEB">)) </span></span><span style="--0:#7FDBCA;--1:#096E72">groups</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">set</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">name</span></span><span style="--0:#889FB2;--1:#4D667B">,</span><span style="--0:#D6DEEB;--1:#403F53"> []);</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#7FDBCA;--1:#096E72">groups</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">get</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">name</span><span style="--0:#D6DEEB">)</span></span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">push</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">item</span><span style="--0:#D6DEEB">);</span></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">  </span></span><span style="--0:#D6DEEB;--1:#403F53">}</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><button title="Copy to clipboard" data-copied="Copied!" data-code="async function home() {  const [types, content] = await Promise.all([    velora(&#x22;/api/v1/document-types?limit=100&#x22;),    velora(&#x22;/api/v1/content?limit=100&#x22;),  ]);  const typeName = new Map(types.items.map((t) => [t.id, t.name]));  const groups = new Map();  for (const item of content.items) {    const name = typeName.get(item.documentTypeId) || &#x22;Unknown type&#x22;;    if (!groups.has(name)) groups.set(name, []);    groups.get(name).push(item);  }"><div></div></button></div></figure></div>
+<p>After those two calls, <code dir="auto">groups</code> maps a type name like <code dir="auto">Post</code> to the items
+of that type. The two responses are worth knowing by shape:</p>
+<table><thead><tr><th>Name</th><th>Type</th><th>Meaning</th><th>Example</th></tr></thead><tbody><tr><td><code dir="auto">GET /api/v1/document-types</code></td><td>request</td><td>Every document type, with its fields.</td><td><code dir="auto">/api/v1/document-types?limit=100</code></td></tr><tr><td><code dir="auto">GET /api/v1/content</code></td><td>request</td><td>Every <strong>published</strong> node, in tree order, without field values.</td><td><code dir="auto">/api/v1/content?limit=100</code></td></tr><tr><td><code dir="auto">items</code></td><td>array</td><td>The page of rows for either call.</td><td><code dir="auto">[{ "id": "…", "name": "Post" }]</code></td></tr><tr><td><code dir="auto">nextCursor</code></td><td>string (uuid) or null</td><td>Cursor for the next page — <code dir="auto">null</code> when this was the last one.</td><td><code dir="auto">null</code></td></tr><tr><td><code dir="auto">items[].id</code></td><td>string (uuid)</td><td>Type id on the first call, node id on the second.</td><td><code dir="auto">f0491ccf-0511-43a7-862b-fdf9dce55f3c</code></td></tr><tr><td><code dir="auto">items[].name</code></td><td>string</td><td>Document types only: the display name this page groups by.</td><td><code dir="auto">Post</code></td></tr><tr><td><code dir="auto">items[].documentTypeId</code></td><td>string (uuid)</td><td>Content rows only: which type the node is. Joined against the map above.</td><td><code dir="auto">f0491ccf-0511-43a7-862b-fdf9dce55f3c</code></td></tr><tr><td><code dir="auto">items[].path</code></td><td>string</td><td>Content rows only: the node’s place in the tree, used here as its label.</td><td><code dir="auto">/jane-doe/hello-velora</code></td></tr><tr><td><code dir="auto">items[].locale</code></td><td>string</td><td>Content rows only: which translation the row is.</td><td><code dir="auto">en</code></td></tr></tbody></table>
+<p>Both calls pass <code dir="auto">limit=100</code>, the practical maximum (the API’s ceiling is
+100 per page). A bigger site pages with <code dir="auto">nextCursor</code> — see <a href="/docs/v1/using-velora/headless-api/#cursor-pagination">Cursor
+pagination</a>; this example
+deliberately stops at one page to stay short.</p>
+<p>The rest of <code dir="auto">home()</code> turns those groups into markup:</p>
+<div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="js"><code><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">let </span><span style="--0:#D7DBE0;--1:#403F53">body</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;h1>Hello, Velora&#x3C;/h1></span></div></div><div class="ec-line"><div class="code"><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;p>Everything below is live, published content served by the headless</span></div></div><div class="ec-line"><div class="code"><span style="--0:#ECC48D;--1:#3B61B0">API at &#x3C;code></span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">esc</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#82AAFF;--1:#3B61B0">API_URL</span><span style="--0:#D6DEEB;--1:#403F53">)</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;/code>. Publish something in the admin and</span></div></div><div class="ec-line"><div class="code"><span style="--0:#ECC48D;--1:#3B61B0">refresh — no rebuild.&#x3C;/p></span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#D6DEEB;--1:#403F53">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">for</span><span style="--0:#D6DEEB;--1:#403F53"> (</span><span style="--0:#C792EA;--1:#8844AE">const [</span><span style="--0:#82AAFF;--1:#3B61B0">name</span><span style="--0:#C792EA;--1:#8844AE">, </span><span style="--0:#82AAFF;--1:#3B61B0">items</span><span style="--0:#C792EA;--1:#8844AE">] </span><span style="--0:#7FDBCA;--1:#096E72">of</span><span style="--1:#403F53"><span style="--0:#D6DEEB"> </span><span style="--0:#D7DBE0">groups</span><span style="--0:#D6DEEB">) {</span></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--1:#403F53">    </span></span><span style="--0:#D7DBE0;--1:#403F53">body</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">+=</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;h2></span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">esc</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">name</span><span style="--0:#D6DEEB">)</span></span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;/h2>&#x3C;ul></span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">+</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#7FDBCA;--1:#096E72">items</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">map</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">(</span><span style="--0:#D7DBE0;--1:#403F53">i</span><span style="--0:#D9F5DD;--1:#111111">)</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">=></span></div></div><div class="ec-line"><div class="code"><span class="indent">      </span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;li>&#x3C;a href="/item?id=</span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">esc</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#7FDBCA;--1:#096E72">i</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">id</span><span style="--0:#D6DEEB;--1:#403F53">)</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0">"></span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">esc</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#7FDBCA;--1:#096E72">i</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">path</span><span style="--0:#D6DEEB;--1:#403F53">)</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;/a></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#ECC48D;--1:#3B61B0">       </span></span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;small>(</span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">esc</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#7FDBCA;--1:#096E72">i</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">locale</span><span style="--0:#D6DEEB;--1:#403F53">)</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0">)&#x3C;/small>&#x3C;/li></span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#D6DEEB;--1:#403F53">)</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">join</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">""</span><span style="--0:#D6DEEB;--1:#403F53">) </span><span style="--0:#C792EA;--1:#8844AE">+</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">&#x3C;/ul></span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">  </span></span><span style="--0:#D6DEEB;--1:#403F53">}</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">if</span><span style="--0:#D6DEEB;--1:#403F53"> (</span><span style="--0:#7FDBCA;--1:#096E72">content</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#FAF39F;--1:#111111">items</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">length</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">===</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#F78C6C;--1:#AA0982">0</span><span style="--0:#D6DEEB;--1:#403F53">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--1:#403F53">    </span></span><span style="--0:#D7DBE0;--1:#403F53">body</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">+=</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">&#x3C;p>No published content yet — create and publish an item in the Velora admin, then refresh.&#x3C;/p></span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">  </span></span><span style="--0:#D6DEEB;--1:#403F53">}</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">return</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">page</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">Hello, Velora</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--1:#403F53"><span style="--0:#D6DEEB">, </span><span style="--0:#D7DBE0">body</span><span style="--0:#D6DEEB">);</span></span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">}</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><button title="Copy to clipboard" data-copied="Copied!" data-code="  let body = &#x60;<h1>Hello, Velora</h1><p>Everything below is live, published content served by the headlessAPI at <code>${esc(API_URL)}</code>. Publish something in the admin andrefresh — no rebuild.</p>&#x60;;  for (const [name, items] of groups) {    body += &#x60;<h2>${esc(name)}</h2><ul>&#x60; + items.map((i) =>      &#x60;<li><a href=&#x22;/item?id=${esc(i.id)}&#x22;>${esc(i.path)}</a>       <small>(${esc(i.locale)})</small></li>&#x60;).join(&#x22;&#x22;) + &#x22;</ul>&#x22;;  }  if (content.items.length === 0) {    body += &#x22;<p>No published content yet — create and publish an item in the Velora admin, then refresh.</p>&#x22;;  }  return page(&#x22;Hello, Velora&#x22;, body);}"><div></div></button></div></figure></div>
+<p>Each item links to <code dir="auto">/item?id=&#x3C;id></code>, which is the second route. The
+empty-state branch matters more than it looks: a fresh instance has no
+published content, and “nothing here yet” is a much better first
+impression than a blank page.</p>
+<div class="sl-heading-wrapper level-h2"><h2 id="5-the-item-page-fields-from-one-call">5. The item page: fields from one call</h2><a class="sl-anchor-link" href="#5-the-item-page-fields-from-one-call"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"></path></svg></span><span class="sr-only" data-pagefind-ignore="">Section titled “5. The item page: fields from one call”</span></a></div>
+<p>Clicking through fetches the full item — the one call that returns field
+values:</p>
+<div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="js"><code><div class="ec-line"><div class="code"><span style="--0:#C792EA;--1:#8844AE">async</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">function</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">item</span><span style="--0:#D9F5DD;--1:#111111">(</span><span style="--0:#D7DBE0;--1:#403F53">id</span><span style="--0:#D9F5DD;--1:#111111">)</span><span style="--0:#D6DEEB;--1:#403F53"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">it</span><span style="--0:#C792EA;--1:#8844AE"> = await </span><span style="--0:#82AAFF;--1:#3B61B0">velora</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#ECC48D;--1:#3B61B0">/api/v1/content/</span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">encodeURIComponent</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">id</span><span style="--0:#D6DEEB">)</span></span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#D6DEEB;--1:#403F53">);</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">fields</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#7FDBCA;--1:#096E72">Object</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">entries</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#7FDBCA;--1:#096E72">it</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">data</span><span style="--0:#D6DEEB;--1:#403F53">)</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">map</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">(</span><span style="--1:#403F53"><span style="--0:#D6DEEB">[</span><span style="--0:#D7DBE0">k</span></span><span style="--0:#889FB2;--1:#4D667B">,</span><span style="--1:#403F53"><span style="--0:#D6DEEB"> </span><span style="--0:#D7DBE0">v</span><span style="--0:#D6DEEB">]</span></span><span style="--0:#D9F5DD;--1:#111111">)</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">=></span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;dt></span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">esc</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">k</span><span style="--0:#D6DEEB">)</span></span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;/dt>&#x3C;dd></span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">renderValue</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">v</span><span style="--0:#D6DEEB">)</span></span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;/dd></span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#D6DEEB;--1:#403F53">)</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">join</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">""</span><span style="--0:#D6DEEB;--1:#403F53">);</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">return</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">page</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">id</span></span><span style="--0:#889FB2;--1:#4D667B">,</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;p>&#x3C;a href="/">&#x26;#8592; all content&#x3C;/a>&#x3C;/p></span></div></div><div class="ec-line"><div class="code"><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;h1>Content item&#x3C;/h1></span></div></div><div class="ec-line"><div class="code"><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;p>&#x3C;small>version </span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">esc</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#7FDBCA;--1:#096E72">it</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">version</span><span style="--0:#D6DEEB;--1:#403F53">)</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0"> · locale </span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">esc</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#7FDBCA;--1:#096E72">it</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">locale</span><span style="--0:#D6DEEB;--1:#403F53">)</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0"> ·</span></div></div><div class="ec-line"><div class="code"><span style="--0:#ECC48D;--1:#3B61B0">published </span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">esc</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#7FDBCA;--1:#096E72">it</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">publishedAt</span><span style="--0:#E2817F;--1:#B23834"> </span><span style="--0:#C792EA;--1:#8844AE">??</span><span style="--0:#E2817F;--1:#B23834"> </span><span style="--0:#D6DEEB;--1:#403F53">"</span><span style="--0:#ECC48D;--1:#984E4D">—</span><span style="--0:#D6DEEB;--1:#403F53">"</span><span style="--0:#D6DEEB;--1:#403F53">)</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;/small>&#x3C;/p></span></div></div><div class="ec-line"><div class="code"><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;dl></span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#D7DBE0;--1:#403F53">fields</span><span style="--0:#E2817F;--1:#B23834"> </span><span style="--0:#C792EA;--1:#8844AE">||</span><span style="--0:#E2817F;--1:#B23834"> </span><span style="--0:#D6DEEB;--1:#403F53">"</span><span style="--0:#ECC48D;--1:#984E4D">&#x3C;dd>&#x3C;small>(this item has no field data)&#x3C;/small>&#x3C;/dd></span><span style="--0:#D6DEEB;--1:#403F53">"</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;/dl></span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#D6DEEB;--1:#403F53">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">}</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><button title="Copy to clipboard" data-copied="Copied!" data-code="async function item(id) {  const it = await velora(&#x60;/api/v1/content/${encodeURIComponent(id)}&#x60;);  const fields = Object.entries(it.data)    .map(([k, v]) => &#x60;<dt>${esc(k)}</dt><dd>${renderValue(v)}</dd>&#x60;)    .join(&#x22;&#x22;);  return page(id, &#x60;<p><a href=&#x22;/&#x22;>&#x26;#8592; all content</a></p><h1>Content item</h1><p><small>version ${esc(it.version)} · locale ${esc(it.locale)} ·published ${esc(it.publishedAt ?? &#x22;—&#x22;)}</small></p><dl>${fields || &#x22;<dd><small>(this item has no field data)</small></dd>&#x22;}</dl>&#x60;);}"><div></div></button></div></figure></div>
+<p>That renders a definition list of every field, plus the item’s version and
+publish time. The properties this function touches:</p>
+<table><thead><tr><th>Name</th><th>Type</th><th>Meaning</th><th>Example</th></tr></thead><tbody><tr><td><code dir="auto">it.data</code></td><td>object</td><td>Field values keyed by field <strong>id</strong> — the keys are whatever the document type defines.</td><td><code dir="auto">{"title":"Hello, Velora"}</code></td></tr><tr><td><code dir="auto">it.version</code></td><td>positive integer</td><td>Which immutable version is currently published. Every save mints a new one.</td><td><code dir="auto">3</code></td></tr><tr><td><code dir="auto">it.locale</code></td><td>string</td><td>The translation served.</td><td><code dir="auto">en</code></td></tr><tr><td><code dir="auto">it.publishedAt</code></td><td>ISO datetime string or null</td><td>When it was published; <code dir="auto">null</code> only for a draft read with a preview token.</td><td><code dir="auto">2026-08-25T15:36:10.252Z</code></td></tr></tbody></table>
+<p>Keying on field id is why the page prints <code dir="auto">title</code>, <code dir="auto">body</code>, <code dir="auto">seo</code> rather
+than the friendly labels: labels live on the document type, which the home
+page already fetched. Joining the two is a natural next exercise.</p>
+<div class="sl-heading-wrapper level-h2"><h2 id="6-the-server">6. The server</h2><a class="sl-anchor-link" href="#6-the-server"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"></path></svg></span><span class="sr-only" data-pagefind-ignore="">Section titled “6. The server”</span></a></div>
+<p>The last block wires the two routes together and turns anything thrown
+above into a readable page:</p>
+<div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="js"><code><div class="ec-line"><div class="code"><span style="--0:#7FDBCA;--1:#096E72">http</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">createServer</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#C792EA;--1:#8844AE">async</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#D9F5DD;--1:#111111">(</span><span style="--1:#403F53"><span style="--0:#D7DBE0">req</span><span style="--0:#D6DEEB">, </span><span style="--0:#D7DBE0">res</span></span><span style="--0:#D9F5DD;--1:#111111">)</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">=></span><span style="--0:#D6DEEB;--1:#403F53"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#C792EA;--1:#8844AE">try</span><span style="--0:#D6DEEB;--1:#403F53"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#C792EA;--1:#8844AE">if</span><span style="--0:#D6DEEB;--1:#403F53"> (</span><span style="--0:#C792EA;--1:#8844AE">!</span><span style="--0:#82AAFF;--1:#3B61B0">API_URL</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">||</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">!</span><span style="--0:#82AAFF;--1:#3B61B0">API_KEY</span><span style="--0:#D6DEEB;--1:#403F53">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent">      </span><span style="--0:#C792EA;--1:#8844AE">throw</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#7FDBCA;--1:#096E72">new</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">Error</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">VELORA_API_URL / VELORA_API_KEY are not set — copy .env.example to .env and fill them in (demo values are in the file's comments).</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">    </span></span><span style="--0:#D6DEEB;--1:#403F53">}</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">url</span><span style="--0:#C792EA;--1:#8844AE"> = </span><span style="--0:#7FDBCA;--1:#096E72">new</span><span style="--0:#C792EA;--1:#8844AE"> </span><span style="--0:#82AAFF;--1:#3B61B0">URL</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#7FDBCA;--1:#096E72">req</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">url</span><span style="--0:#C792EA;--1:#8844AE">, </span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#ECC48D;--1:#3B61B0">http://localhost:</span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">PORT</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#D6DEEB;--1:#403F53">);</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#C792EA;--1:#8844AE">const </span><span style="--0:#82AAFF;--1:#3B61B0">html</span><span style="--0:#C792EA;--1:#8844AE"> =</span></div></div><div class="ec-line"><div class="code"><span class="indent">      </span><span style="--0:#7FDBCA;--1:#096E72">url</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">pathname</span><span style="--0:#C792EA;--1:#8844AE"> === </span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">/item</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#C792EA;--1:#8844AE"> &#x26;&#x26; </span><span style="--0:#7FDBCA;--1:#096E72">url</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#FAF39F;--1:#111111">searchParams</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">get</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">id</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">)</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#C792EA;--1:#8844AE">?</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">await</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">item</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#7FDBCA;--1:#096E72">url</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#FAF39F;--1:#111111">searchParams</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">get</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">id</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">))</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#C792EA;--1:#8844AE">:</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">await</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">home</span><span style="--0:#D6DEEB;--1:#403F53">();</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#7FDBCA;--1:#096E72">res</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">writeHead</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#F78C6C;--1:#AA0982">200</span><span style="--0:#D6DEEB;--1:#403F53">, { </span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">content-type</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">: </span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">text/html; charset=utf-8</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53"> });</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#7FDBCA;--1:#096E72">res</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">end</span><span style="--1:#403F53"><span style="--0:#D6DEEB">(</span><span style="--0:#D7DBE0">html</span><span style="--0:#D6DEEB">);</span></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">  </span></span><span style="--0:#D6DEEB;--1:#403F53">} </span><span style="--0:#C792EA;--1:#8844AE">catch</span><span style="--1:#403F53"><span style="--0:#D6DEEB"> (</span><span style="--0:#D7DBE0">err</span><span style="--0:#D6DEEB">) {</span></span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#7FDBCA;--1:#096E72">res</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">writeHead</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#F78C6C;--1:#AA0982">500</span><span style="--0:#D6DEEB;--1:#403F53">, { </span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">content-type</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">: </span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">text/html; charset=utf-8</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53"> });</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#7FDBCA;--1:#096E72">res</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">end</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#82AAFF;--1:#3B61B0">page</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">Error</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">, </span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;h1>Something went wrong&#x3C;/h1>&#x3C;pre></span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">esc</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#7FDBCA;--1:#096E72">err</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#7FDBCA;--1:#096E72">message</span><span style="--0:#D6DEEB;--1:#403F53">)</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#ECC48D;--1:#3B61B0">&#x3C;/pre></span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#D6DEEB;--1:#403F53">));</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">  </span></span><span style="--0:#D6DEEB;--1:#403F53">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">})</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">listen</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#82AAFF;--1:#3B61B0">PORT</span><span style="--0:#D6DEEB;--1:#403F53">, </span><span style="--0:#D9F5DD;--1:#111111">()</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#C792EA;--1:#8844AE">=></span><span style="--0:#D6DEEB;--1:#403F53"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#7FDBCA;--1:#096E72">console</span><span style="--0:#C792EA;--1:#8844AE">.</span><span style="--0:#82AAFF;--1:#3B61B0">log</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#ECC48D;--1:#3B61B0">Hello-website running at http://localhost:</span><span style="--0:#E2817F;--1:#B23834">${</span><span style="--0:#82AAFF;--1:#3B61B0">PORT</span><span style="--0:#E2817F;--1:#B23834">}</span><span style="--0:#D6DEEB;--1:#403F53">`</span><span style="--0:#D6DEEB;--1:#403F53">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">});</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><button title="Copy to clipboard" data-copied="Copied!" data-code="http.createServer(async (req, res) => {  try {    if (!API_URL || !API_KEY) {      throw new Error(&#x22;VELORA_API_URL / VELORA_API_KEY are not set — copy .env.example to .env and fill them in (demo values are in the file&#x27;s comments).&#x22;);    }    const url = new URL(req.url, &#x60;http://localhost:${PORT}&#x60;);    const html =      url.pathname === &#x22;/item&#x22; &#x26;&#x26; url.searchParams.get(&#x22;id&#x22;)        ? await item(url.searchParams.get(&#x22;id&#x22;))        : await home();    res.writeHead(200, { &#x22;content-type&#x22;: &#x22;text/html; charset=utf-8&#x22; });    res.end(html);  } catch (err) {    res.writeHead(500, { &#x22;content-type&#x22;: &#x22;text/html; charset=utf-8&#x22; });    res.end(page(&#x22;Error&#x22;, &#x60;<h1>Something went wrong</h1><pre>${esc(err.message)}</pre>&#x60;));  }}).listen(PORT, () => {  console.log(&#x60;Hello-website running at http://localhost:${PORT}&#x60;);});"><div></div></button></div></figure></div>
+<p>Any path other than <code dir="auto">/item?id=…</code> renders the home page, and a failed fetch
+becomes a <code dir="auto">500</code> page showing its message — <code dir="auto">"/api/v1/content -> HTTP 401"</code>
+when the key is wrong — instead of crashing the process. That is the whole
+file: roughly 120 lines, and every line of it is above.</p>
+<div class="sl-heading-wrapper level-h2"><h2 id="what-it-renders">What it renders</h2><a class="sl-anchor-link" href="#what-it-renders"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"></path></svg></span><span class="sr-only" data-pagefind-ignore="">Section titled “What it renders”</span></a></div>
+<p>With the demo <code dir="auto">.env</code> in place, starting the server and requesting the home
+page returns HTML like this — a live response from a real run against
+<code dir="auto">https://demo.velora-cms.com</code>, trimmed to the body:</p>
+<div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="html"><code><div class="ec-line"><div class="code"><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;</span><span style="--0:#CAECE6">body</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">h1</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">Hello, Velora</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">h1</span><span style="--0:#7FDBCA">></span></span></div></div><div class="ec-line"><div class="code"><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;</span><span style="--0:#CAECE6">p</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">Everything below is live, published content served by the headless</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">API at </span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;</span><span style="--0:#CAECE6">code</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">https://demo.velora-cms.com</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">code</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">. Publish something in the admin and</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">refresh — no rebuild.</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">p</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">h2</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">Tag</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">h2</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">ul</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">li</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">a</span><span style="--0:#7FDBCA"> </span></span><span style="--0:#C5E478;--1:#3B61B0">href</span><span style="--0:#7FDBCA;--1:#8844AE">=</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">/item?id=2e9053b1-a300-493f-a48b-58440cdf3629</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#7FDBCA;--1:#8844AE">></span><span style="--0:#D6DEEB;--1:#403F53">/announcements</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">a</span><span style="--0:#7FDBCA">></span></span></div></div><div class="ec-line"><div class="code"><span class="indent">       </span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;</span><span style="--0:#CAECE6">small</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">(en)</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">small</span><span style="--0:#7FDBCA">>&#x3C;/</span><span style="--0:#CAECE6">li</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">li</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">a</span><span style="--0:#7FDBCA"> </span></span><span style="--0:#C5E478;--1:#3B61B0">href</span><span style="--0:#7FDBCA;--1:#8844AE">=</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">/item?id=45dfb6ca-ffa7-482e-842b-f662c0c1034c</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#7FDBCA;--1:#8844AE">></span><span style="--0:#D6DEEB;--1:#403F53">/guides</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">a</span><span style="--0:#7FDBCA">></span></span></div></div><div class="ec-line"><div class="code"><span class="indent">       </span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;</span><span style="--0:#CAECE6">small</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">(en)</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">small</span><span style="--0:#7FDBCA">>&#x3C;/</span><span style="--0:#CAECE6">li</span><span style="--0:#7FDBCA">>&#x3C;/</span><span style="--0:#CAECE6">ul</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">h2</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">Author</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">h2</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">ul</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">li</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">a</span><span style="--0:#7FDBCA"> </span></span><span style="--0:#C5E478;--1:#3B61B0">href</span><span style="--0:#7FDBCA;--1:#8844AE">=</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">/item?id=acc3aefb-6254-465a-b088-c9578b2794af</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#7FDBCA;--1:#8844AE">></span><span style="--0:#D6DEEB;--1:#403F53">/jane-doe</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">a</span><span style="--0:#7FDBCA">></span></span></div></div><div class="ec-line"><div class="code"><span class="indent">       </span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;</span><span style="--0:#CAECE6">small</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">(en)</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">small</span><span style="--0:#7FDBCA">>&#x3C;/</span><span style="--0:#CAECE6">li</span><span style="--0:#7FDBCA">>&#x3C;/</span><span style="--0:#CAECE6">ul</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">h2</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">Post</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">h2</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">ul</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">li</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">a</span><span style="--0:#7FDBCA"> </span></span><span style="--0:#C5E478;--1:#3B61B0">href</span><span style="--0:#7FDBCA;--1:#8844AE">=</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">/item?id=afe5b000-d81e-4c51-b60a-1f5f04d6dacf</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#7FDBCA;--1:#8844AE">></span><span style="--0:#D6DEEB;--1:#403F53">/jane-doe/hello-velora</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">a</span><span style="--0:#7FDBCA">></span></span></div></div><div class="ec-line"><div class="code"><span class="indent">       </span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;</span><span style="--0:#CAECE6">small</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">(en)</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">small</span><span style="--0:#7FDBCA">>&#x3C;/</span><span style="--0:#CAECE6">li</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">li</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">a</span><span style="--0:#7FDBCA"> </span></span><span style="--0:#C5E478;--1:#3B61B0">href</span><span style="--0:#7FDBCA;--1:#8844AE">=</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">/item?id=ce16029a-f5ef-4bbe-ad07-6eede30c9b8c</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#7FDBCA;--1:#8844AE">></span><span style="--0:#D6DEEB;--1:#403F53">/jane-doe/writing-your-first-post</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">a</span><span style="--0:#7FDBCA">></span></span></div></div><div class="ec-line"><div class="code"><span class="indent">       </span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;</span><span style="--0:#CAECE6">small</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">(en)</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">small</span><span style="--0:#7FDBCA">>&#x3C;/</span><span style="--0:#CAECE6">li</span><span style="--0:#7FDBCA">>&#x3C;/</span><span style="--0:#CAECE6">ul</span><span style="--0:#7FDBCA">>&#x3C;/</span><span style="--0:#CAECE6">body</span><span style="--0:#7FDBCA">></span></span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><button title="Copy to clipboard" data-copied="Copied!" data-code="<body><h1>Hello, Velora</h1><p>Everything below is live, published content served by the headlessAPI at <code>https://demo.velora-cms.com</code>. Publish something in the admin andrefresh — no rebuild.</p><h2>Tag</h2><ul><li><a href=&#x22;/item?id=2e9053b1-a300-493f-a48b-58440cdf3629&#x22;>/announcements</a>       <small>(en)</small></li><li><a href=&#x22;/item?id=45dfb6ca-ffa7-482e-842b-f662c0c1034c&#x22;>/guides</a>       <small>(en)</small></li></ul><h2>Author</h2><ul><li><a href=&#x22;/item?id=acc3aefb-6254-465a-b088-c9578b2794af&#x22;>/jane-doe</a>       <small>(en)</small></li></ul><h2>Post</h2><ul><li><a href=&#x22;/item?id=afe5b000-d81e-4c51-b60a-1f5f04d6dacf&#x22;>/jane-doe/hello-velora</a>       <small>(en)</small></li><li><a href=&#x22;/item?id=ce16029a-f5ef-4bbe-ad07-6eede30c9b8c&#x22;>/jane-doe/writing-your-first-post</a>       <small>(en)</small></li></ul></body>"><div></div></button></div></figure></div>
+<p>In a browser that is three headings — <strong>Tag</strong>, <strong>Author</strong>, <strong>Post</strong> — with
+the demo’s five published nodes listed under them by path.</p>
+<p>Following the first Post link renders its fields — a live response from
+the same run, trimmed to the body:</p>
+<div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="html"><code><div class="ec-line"><div class="code"><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;</span><span style="--0:#CAECE6">body</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">p</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">a</span><span style="--0:#7FDBCA"> </span></span><span style="--0:#C5E478;--1:#3B61B0">href</span><span style="--0:#7FDBCA;--1:#8844AE">=</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">/</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#7FDBCA;--1:#8844AE">></span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#8592;</span><span style="--0:#D6DEEB;--1:#403F53"> all content</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">a</span><span style="--0:#7FDBCA">>&#x3C;/</span><span style="--0:#CAECE6">p</span><span style="--0:#7FDBCA">></span></span></div></div><div class="ec-line"><div class="code"><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;</span><span style="--0:#CAECE6">h1</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">Content item</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">h1</span><span style="--0:#7FDBCA">></span></span></div></div><div class="ec-line"><div class="code"><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;</span><span style="--0:#CAECE6">p</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">small</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">version 3 · locale en ·</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">published 2026-08-25T15:36:10.252Z</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">small</span><span style="--0:#7FDBCA">>&#x3C;/</span><span style="--0:#CAECE6">p</span><span style="--0:#7FDBCA">></span></span></div></div><div class="ec-line"><div class="code"><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;</span><span style="--0:#CAECE6">dl</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">dt</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">seo</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">dt</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">dd</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">pre</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">{</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">title</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">: </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">Hello, Velora — the capstone post</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">,</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">description</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">: </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">A published post proving the SEO plugin composes with the Blog starter on the deployed Velora demo.</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">}</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">pre</span><span style="--0:#7FDBCA">>&#x3C;/</span><span style="--0:#CAECE6">dd</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">dt</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">body</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">dt</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">dd</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">pre</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">{</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">type</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">: </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">doc</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">,</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">content</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">: [</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">    </span></span><span style="--0:#D6DEEB;--1:#403F53">{</span></div></div><div class="ec-line"><div class="code"><span class="indent">      </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">type</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">: </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">paragraph</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">,</span></div></div><div class="ec-line"><div class="code"><span class="indent">      </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">content</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">: [</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">        </span></span><span style="--0:#D6DEEB;--1:#403F53">{</span></div></div><div class="ec-line"><div class="code"><span class="indent">          </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">text</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">: </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">This sample post was created by the Blog template. Edit or delete it freely.</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">,</span></div></div><div class="ec-line"><div class="code"><span class="indent">          </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">type</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">: </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">text</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">        </span></span><span style="--0:#D6DEEB;--1:#403F53">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">      </span></span><span style="--0:#D6DEEB;--1:#403F53">]</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">    </span></span><span style="--0:#D6DEEB;--1:#403F53">},</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">    </span></span><span style="--0:#D6DEEB;--1:#403F53">{</span></div></div><div class="ec-line"><div class="code"><span class="indent">      </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">type</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">: </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">paragraph</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">,</span></div></div><div class="ec-line"><div class="code"><span class="indent">      </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">content</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">: [</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">        </span></span><span style="--0:#D6DEEB;--1:#403F53">{</span></div></div><div class="ec-line"><div class="code"><span class="indent">          </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">text</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">: </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">Updated live during the Session 168 capstone story.</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">,</span></div></div><div class="ec-line"><div class="code"><span class="indent">          </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">type</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">: </span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span><span style="--0:#D6DEEB;--1:#403F53">text</span><span style="--0:#82AAFF;--1:#3B61B0">&#x26;#34;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">        </span></span><span style="--0:#D6DEEB;--1:#403F53">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">      </span></span><span style="--0:#D6DEEB;--1:#403F53">]</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">    </span></span><span style="--0:#D6DEEB;--1:#403F53">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">  </span></span><span style="--0:#D6DEEB;--1:#403F53">]</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">}</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">pre</span><span style="--0:#7FDBCA">>&#x3C;/</span><span style="--0:#CAECE6">dd</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">dt</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">tags</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">dt</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">dd</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">announcements</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">dd</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">dt</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">title</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">dt</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">dd</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">Hello, Velora</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">dd</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">dt</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">publishedDate</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">dt</span><span style="--0:#7FDBCA">>&#x3C;</span><span style="--0:#CAECE6">dd</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">2026-08-13</span><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">dd</span><span style="--0:#7FDBCA">>&#x3C;/</span><span style="--0:#CAECE6">dl</span><span style="--0:#7FDBCA">>&#x3C;/</span><span style="--0:#CAECE6">body</span><span style="--0:#7FDBCA">></span></span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><button title="Copy to clipboard" data-copied="Copied!" data-code="<body><p><a href=&#x22;/&#x22;>&#x26;#8592; all content</a></p><h1>Content item</h1><p><small>version 3 · locale en ·published 2026-08-25T15:36:10.252Z</small></p><dl><dt>seo</dt><dd><pre>{  &#x26;#34;title&#x26;#34;: &#x26;#34;Hello, Velora — the capstone post&#x26;#34;,  &#x26;#34;description&#x26;#34;: &#x26;#34;A published post proving the SEO plugin composes with the Blog starter on the deployed Velora demo.&#x26;#34;}</pre></dd><dt>body</dt><dd><pre>{  &#x26;#34;type&#x26;#34;: &#x26;#34;doc&#x26;#34;,  &#x26;#34;content&#x26;#34;: [    {      &#x26;#34;type&#x26;#34;: &#x26;#34;paragraph&#x26;#34;,      &#x26;#34;content&#x26;#34;: [        {          &#x26;#34;text&#x26;#34;: &#x26;#34;This sample post was created by the Blog template. Edit or delete it freely.&#x26;#34;,          &#x26;#34;type&#x26;#34;: &#x26;#34;text&#x26;#34;        }      ]    },    {      &#x26;#34;type&#x26;#34;: &#x26;#34;paragraph&#x26;#34;,      &#x26;#34;content&#x26;#34;: [        {          &#x26;#34;text&#x26;#34;: &#x26;#34;Updated live during the Session 168 capstone story.&#x26;#34;,          &#x26;#34;type&#x26;#34;: &#x26;#34;text&#x26;#34;        }      ]    }  ]}</pre></dd><dt>tags</dt><dd>announcements</dd><dt>title</dt><dd>Hello, Velora</dd><dt>publishedDate</dt><dd>2026-08-13</dd></dl></body>"><div></div></button></div></figure></div>
+<p>The back-link at the top returns to the home page. Plain fields (<code dir="auto">title</code>,
+<code dir="auto">tags</code>, <code dir="auto">publishedDate</code>) render as text; the structured ones (<code dir="auto">seo</code>, and
+the rich-text <code dir="auto">body</code>, which stores TipTap’s JSON document format) render
+as pretty-printed JSON, which is exactly the shape you would design real
+markup against.</p>
+<p>Stop the server with <code dir="auto">Ctrl-C</code> when you are done.</p>
+<div class="sl-heading-wrapper level-h2"><h2 id="point-it-at-your-own-instance">Point it at your own instance</h2><a class="sl-anchor-link" href="#point-it-at-your-own-instance"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"></path></svg></span><span class="sr-only" data-pagefind-ignore="">Section titled “Point it at your own instance”</span></a></div>
+<p>Three changes move the site off the demo.</p>
+<p>First, the instance must serve the public API — it is a deploy-time
+opt-in, so start your server with the variable set. Run this from the
+repository root:</p>
+<div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#C5E478;--1:#3B61B0">VELORA_HEADLESS</span><span style="--0:#C792EA;--1:#8844AE">=</span><span style="--0:#ECC48D;--1:#3B61B0">true</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">node</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#ECC48D;--1:#3B61B0">apps/server/dist/index.js</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><button title="Copy to clipboard" data-copied="Copied!" data-code="VELORA_HEADLESS=true node apps/server/dist/index.js"><div></div></button></div></figure></div>
+<p>Without it, <code dir="auto">/api/v1/*</code> does not exist and every call from this site fails
+with <code dir="auto">HTTP 404</code> rather than <code dir="auto">401</code>.</p>
+<p>Second, mint a key: in the admin, <strong>Settings → API Keys → Create key</strong>.
+The secret is shown once. Treat it as a secret — keys are created
+read-only by default, and a key minted with the <strong>Read and write</strong> option
+can also create and publish content (<a href="/docs/v1/using-velora/headless-api/#what-a-key-can-do">What a key can
+do</a>), and
+<a href="/docs/v1/using-velora/users-and-roles/">Users and roles</a> covers rotating and
+revoking one.</p>
+<p>Third, point <code dir="auto">.env</code> at your origin and that key, then restart:</p>
+<div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#82AAFF;--1:#3B61B0">cat</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#7FDBCA;--1:#096E72">></span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#ECC48D;--1:#3B61B0">.env</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#7FDBCA;--1:#096E72">&#x3C;&#x3C;</span><span style="--0:#D9F5DD;--1:#111111">'ENV'</span></div></div><div class="ec-line"><div class="code"><span style="--0:#ECC48D;--1:#984E4D">VELORA_API_URL=http://localhost:3000</span></div></div><div class="ec-line"><div class="code"><span style="--0:#ECC48D;--1:#984E4D">VELORA_API_KEY=vk_your_key_here</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D9F5DD;--1:#111111">ENV</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><button title="Copy to clipboard" data-copied="Copied!" data-code="cat > .env <<&#x27;ENV&#x27;VELORA_API_URL=http://localhost:3000VELORA_API_KEY=vk_your_key_hereENV"><div></div></button></div></figure></div>
+<p>Restarting <code dir="auto">node server.js</code> now shows <em>your</em> content — or the empty-state
+line, if nothing is published yet.</p>
+<div class="sl-heading-wrapper level-h2"><h2 id="make-it-say-hello-world">Make it say hello world</h2><a class="sl-anchor-link" href="#make-it-say-hello-world"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"></path></svg></span><span class="sr-only" data-pagefind-ignore="">Section titled “Make it say hello world”</span></a></div>
+<p>With the site pointed at your own instance, three steps in the admin put
+something on it:</p>
+<ol>
+<li><strong>Document types → Create.</strong> Name it <code dir="auto">Page</code>, add a Text field <code dir="auto">title</code>
+and a Rich text field <code dir="auto">body</code>. Field ids become the keys in <code dir="auto">data</code>, so
+<code dir="auto">title</code> here is <code dir="auto">data.title</code> in the API response.</li>
+<li><strong>Content → Create → Page.</strong> Type “Hello world” into <code dir="auto">title</code>, write
+something in <code dir="auto">body</code>, and <strong>Save</strong>.</li>
+<li><strong>Publish.</strong> Only published content appears on the public API — a saved
+draft is invisible to this site, deliberately.</li>
+</ol>
+<p>Refresh the browser. Your page is listed under <strong>Page</strong>; clicking it shows
+<code dir="auto">title</code> as text and <code dir="auto">body</code> as the rich-text document object. There is no
+rebuild and no cache to clear: the next request re-fetches from the API,
+which is the whole point of rendering server-side.</p>
+<div class="sl-heading-wrapper level-h2"><h2 id="where-to-go-next">Where to go next</h2><a class="sl-anchor-link" href="#where-to-go-next"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"></path></svg></span><span class="sr-only" data-pagefind-ignore="">Section titled “Where to go next”</span></a></div>
+<p>The site above uses four endpoints. Two more make it a real website:</p>
+<table><thead><tr><th>Name</th><th>Type</th><th>Meaning</th><th>Example</th></tr></thead><tbody><tr><td><code dir="auto">GET /api/v1/content/by-path</code></td><td>request</td><td>Resolves a URL path straight to an item, so <code dir="auto">/about</code> on your site can map to <code dir="auto">/about</code> in the content tree instead of an opaque id.</td><td><code dir="auto">/api/v1/content/by-path?path=/about</code></td></tr><tr><td><code dir="auto">GET /api/v1/content/:id/children</code></td><td>request</td><td>One level of the tree, paginated — navigation menus and section index pages.</td><td><code dir="auto">/api/v1/content/acc3aefb-…/children?limit=20</code></td></tr><tr><td><code dir="auto">nextCursor</code></td><td>string (uuid) or null</td><td>Feed it back as <code dir="auto">?cursor=…</code> to page past the first 100 items.</td><td><code dir="auto">45dfb6ca-ffa7-482e-842b-f662c0c1034c</code></td></tr></tbody></table>
+<ul>
+<li><a href="/docs/v1/using-velora/headless-api/">Headless API</a> — the complete reference:
+every route, parameter, response property, error body and rate limit,
+plus the GraphQL surface if you would rather fetch a page and its
+children in one round trip.</li>
+<li><a href="/docs/v1/using-velora/content-model/">Content model</a> — designing the
+document types this site reads.</li>
+<li><a href="https://github.com/velora-cms/velora-starter">velora-cms/velora-starter</a>
+— the finished <code dir="auto">examples/hello-website</code>, plus issues and discussions.</li>
+</ul></div><footer class="sl-flex astro-gjkl2a5w"><div class="meta sl-flex astro-gjkl2a5w"></div><div class="pagination-links print:hidden astro-3tj6ibx2" dir="ltr"><a href="/docs/v1/using-velora/headless-api/" rel="prev" class="astro-3tj6ibx2"><svg aria-hidden="true" class="astro-3tj6ibx2 astro-24n5ceuf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg><span class="astro-3tj6ibx2">Previous<br class="astro-3tj6ibx2"><span class="link-title astro-3tj6ibx2">Headless API</span></span></a></div></footer><div class="velora-bundle-stamp astro-llmj63sw">Velora 0.9.0 &middot; bundled documentation</div></div></div></main></div></div></div></div></body></html>