narrarium-astro-reader 0.1.0

package/src/pages/chapters/[chapter].astro

@@ -0,0 +1,102 @@
+---
+import { marked } from "marked";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import { getBookRoot, loadChapterPageData } from "../../lib/book";
+import LinkedValue from "../../components/LinkedValue.astro";
+import MetadataSection from "../../components/MetadataSection.astro";
+import RelatedLinks from "../../components/RelatedLinks.astro";
+import AssetFigure from "../../components/AssetFigure.astro";
+import ChapterPager from "../../components/ChapterPager.astro";
+import { loadRelatedCanonLinks } from "../../lib/canon";
+import { loadAssetFigure } from "../../lib/assets";
+import { listChapters, pathExists } from "narrarium";
+import path from "node:path";
+
+export async function getStaticPaths() {
+  const root = getBookRoot();
+  const ready = await pathExists(path.join(root, "book.md"));
+  if (!ready) return [];
+
+  const chapters = await listChapters(root);
+  return chapters.map((chapter) => ({
+    params: { chapter: chapter.slug },
+    props: { chapterSlug: chapter.slug },
+  }));
+}
+
+const { chapterSlug } = Astro.props;
+const chapter = await loadChapterPageData(chapterSlug);
+const allChapters = await listChapters(getBookRoot());
+const chapterHtml = await marked.parse(chapter.body);
+const chapterMetaEntries = [
+  ["Point of view", chapter.metadata.pov],
+  ["Timeline", chapter.metadata.timeline_ref],
+  ["Tags", chapter.metadata.tags],
+].filter(([, value]) => value !== undefined && value !== null && (!Array.isArray(value) || value.length > 0));
+const chapterRelatedLinks = await loadRelatedCanonLinks(String(chapter.metadata.id), [chapter.metadata.pov, chapter.metadata.timeline_ref]);
+const chapterFigure = await loadAssetFigure(String(chapter.metadata.id), chapter.metadata.title);
+const renderedParagraphs = await Promise.all(
+  chapter.paragraphs.map(async (paragraph) => ({
+    ...paragraph,
+    anchorId: `scene-${path.basename(paragraph.path, ".md")}`,
+    figure: await loadAssetFigure(String(paragraph.metadata.id), paragraph.metadata.title),
+    html: await marked.parse(paragraph.body),
+  })),
+);
+---
+
+<BaseLayout title={chapter.metadata.title} description={chapter.metadata.summary} activeSection="chapters">
+  <section class="hero">
+    <p class="eyebrow">Chapter {String(chapter.metadata.number).padStart(3, "0")}</p>
+    <h1>{chapter.metadata.title}</h1>
+    {chapter.metadata.summary && <p class="lede">{chapter.metadata.summary}</p>}
+    <div class="chapter-meta">
+      <a href="./">Back to contents</a>
+    </div>
+  </section>
+
+  <ChapterPager currentSlug={chapterSlug} chapters={allChapters} />
+
+  {chapter.body && (
+    <section class="section">
+      <article class="scene prose" set:html={chapterHtml} />
+      {chapterFigure && <AssetFigure figure={chapterFigure} className="scene-media" />}
+    </section>
+  )}
+
+  {chapterMetaEntries.length > 0 && (
+    <section class="section">
+      <MetadataSection entries={chapterMetaEntries} heading="Canon links" />
+    </section>
+  )}
+
+  {chapterRelatedLinks.length > 0 && (
+    <section class="section">
+      <RelatedLinks links={chapterRelatedLinks} />
+    </section>
+  )}
+
+  <section class="section">
+    <h2>Scenes</h2>
+    {renderedParagraphs.length > 0 ? (
+      renderedParagraphs.map((paragraph) => (
+        <article class="scene" id={paragraph.anchorId}>
+          <div class="chapter-number">Scene {String(paragraph.metadata.number).padStart(3, "0")}</div>
+          <h3>{paragraph.metadata.title}</h3>
+          {paragraph.metadata.summary && <p class="chapter-meta">{paragraph.metadata.summary}</p>}
+          {paragraph.metadata.viewpoint && (
+            <p class="chapter-meta">
+              Viewpoint: <LinkedValue value={paragraph.metadata.viewpoint} />
+            </p>
+          )}
+          <div class="prose" set:html={paragraph.html} />
+          {paragraph.figure && <AssetFigure figure={paragraph.figure} className="scene-media" />}
+        </article>
+      ))
+    ) : (
+      <div class="empty">No paragraph files exist for this chapter yet.</div>
+    )}
+  </section>
+
+  <ChapterPager currentSlug={chapterSlug} chapters={allChapters} />
+</BaseLayout>

package/src/pages/characters/[slug].astro

@@ -0,0 +1,65 @@
+---
+import { marked } from "marked";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import { getBookRoot, loadEntityPageData } from "../../lib/book";
+import MetadataSection from "../../components/MetadataSection.astro";
+import RelatedLinks from "../../components/RelatedLinks.astro";
+import AssetFigure from "../../components/AssetFigure.astro";
+import { loadRelatedCanonLinks } from "../../lib/canon";
+import { loadAssetFigure } from "../../lib/assets";
+import { listEntities, pathExists } from "narrarium";
+import path from "node:path";
+
+export async function getStaticPaths() {
+  const root = getBookRoot();
+  const ready = await pathExists(path.join(root, "book.md"));
+  if (!ready) return [];
+
+  const entities = await listEntities(root, "character");
+  return entities.map((entity) => ({ params: { slug: entity.slug }, props: { slug: entity.slug } }));
+}
+
+const { slug } = Astro.props;
+const entity = await loadEntityPageData("character", slug);
+const html = await marked.parse(entity.body);
+const metaEntries = [
+  ["Role tier", entity.metadata.role_tier],
+  ["Story role", entity.metadata.story_role],
+  ["Speaking style", entity.metadata.speaking_style],
+  ["Function in book", entity.metadata.function_in_book],
+  ["Occupation", entity.metadata.occupation],
+  ["Origin", entity.metadata.origin],
+  ["Age", entity.metadata.age],
+  ["Introduced in", entity.metadata.introduced_in],
+  ["Factions", entity.metadata.factions],
+  ["Traits", entity.metadata.traits],
+  ["Desires", entity.metadata.desires],
+  ["Fears", entity.metadata.fears],
+].filter(([, value]) => value !== undefined && value !== null && (!Array.isArray(value) || value.length > 0));
+const relatedLinks = await loadRelatedCanonLinks(String(entity.metadata.id ?? `character:${slug}`), [entity.metadata.refs, ...metaEntries.map(([, value]) => value)]);
+const figure = await loadAssetFigure(String(entity.metadata.id ?? `character:${slug}`), String(entity.metadata.name ?? slug));
+---
+
+<BaseLayout title={String(entity.metadata.name ?? slug)} description={String(entity.metadata.function_in_book ?? "Character entry") } activeSection="characters">
+  <section class="hero">
+    <p class="eyebrow">Character</p>
+    <h1>{String(entity.metadata.name ?? slug)}</h1>
+    <p class="lede">{String(entity.metadata.function_in_book ?? entity.metadata.story_role ?? "Canonical character entry.")}</p>
+    <div class="chapter-meta"><a href="characters/">Back to characters</a></div>
+    {figure && <AssetFigure figure={figure} className="hero-media" />}
+  </section>
+
+  <section class="section">
+    <MetadataSection entries={metaEntries} />
+  </section>
+
+  {relatedLinks.length > 0 && (
+    <section class="section">
+      <RelatedLinks links={relatedLinks} />
+    </section>
+  )}
+
+  <section class="section">
+    <article class="scene prose" set:html={html} />
+  </section>
+</BaseLayout>

package/src/pages/characters/index.astro

@@ -0,0 +1,45 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import { loadEntityIndexData } from "../../lib/book";
+import AssetFigure from "../../components/AssetFigure.astro";
+import { loadAssetFigure } from "../../lib/assets";
+
+const { ready, entities } = await loadEntityIndexData("character");
+const cards = await Promise.all(
+  entities.map(async (entity) => ({
+    ...entity,
+    figure: await loadAssetFigure(String(entity.metadata.id ?? `character:${entity.slug}`), String(entity.metadata.name ?? entity.slug)),
+  })),
+);
+---
+
+<BaseLayout title="Characters" description="Browse the book cast." activeSection="characters">
+  <section class="hero">
+    <p class="eyebrow">Canon Atlas</p>
+    <h1>Characters</h1>
+    <p class="lede">Browse the cast register, voice notes, roles, and relationships stored in the repository.</p>
+  </section>
+
+  {ready ? (
+    <section class="section">
+      <div class="catalog-grid">
+        {cards.map((entity) => (
+          <article class="card catalog-card">
+            <a href={`characters/${entity.slug}/`}>
+              {entity.figure && <AssetFigure figure={entity.figure} className="catalog-media" />}
+              <div class="chapter-number">{String(entity.metadata.role_tier ?? "character")}</div>
+              <h2 class="chapter-title">{String(entity.metadata.name ?? entity.slug)}</h2>
+              <div class="chapter-meta">{String(entity.metadata.function_in_book ?? entity.metadata.story_role ?? "Open the entry to inspect role, voice, and notes.")}</div>
+              <div class="chip-row">
+                {entity.metadata.story_role && <span class="chip">{String(entity.metadata.story_role)}</span>}
+                {entity.metadata.historical && <span class="chip">historical</span>}
+              </div>
+            </a>
+          </article>
+        ))}
+      </div>
+    </section>
+  ) : (
+    <div class="empty">No book repository detected for the reader.</div>
+  )}
+</BaseLayout>

package/src/pages/factions/[slug].astro

@@ -0,0 +1,64 @@
+---
+import { marked } from "marked";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import { getBookRoot, loadEntityPageData } from "../../lib/book";
+import MetadataSection from "../../components/MetadataSection.astro";
+import RelatedLinks from "../../components/RelatedLinks.astro";
+import AssetFigure from "../../components/AssetFigure.astro";
+import { loadRelatedCanonLinks } from "../../lib/canon";
+import { loadAssetFigure } from "../../lib/assets";
+import { listEntities, pathExists } from "narrarium";
+import path from "node:path";
+
+export async function getStaticPaths() {
+  const root = getBookRoot();
+  const ready = await pathExists(path.join(root, "book.md"));
+  if (!ready) return [];
+
+  const entities = await listEntities(root, "faction");
+  return entities.map((entity) => ({ params: { slug: entity.slug }, props: { slug: entity.slug } }));
+}
+
+const { slug } = Astro.props;
+const entity = await loadEntityPageData("faction", slug);
+const html = await marked.parse(entity.body);
+const metaEntries = [
+  ["Kind", entity.metadata.faction_kind],
+  ["Mission", entity.metadata.mission],
+  ["Ideology", entity.metadata.ideology],
+  ["Function in book", entity.metadata.function_in_book],
+  ["Public image", entity.metadata.public_image],
+  ["Hidden agenda", entity.metadata.hidden_agenda],
+  ["Leaders", entity.metadata.leaders],
+  ["Allies", entity.metadata.allies],
+  ["Enemies", entity.metadata.enemies],
+  ["Methods", entity.metadata.methods],
+  ["Base location", entity.metadata.base_location],
+].filter(([, value]) => value !== undefined && value !== null && (!Array.isArray(value) || value.length > 0));
+const relatedLinks = await loadRelatedCanonLinks(String(entity.metadata.id ?? `faction:${slug}`), [entity.metadata.refs, ...metaEntries.map(([, value]) => value)]);
+const figure = await loadAssetFigure(String(entity.metadata.id ?? `faction:${slug}`), String(entity.metadata.name ?? slug));
+---
+
+<BaseLayout title={String(entity.metadata.name ?? slug)} description={String(entity.metadata.function_in_book ?? entity.metadata.mission ?? "Faction entry")} activeSection="factions">
+  <section class="hero">
+    <p class="eyebrow">Faction</p>
+    <h1>{String(entity.metadata.name ?? slug)}</h1>
+    <p class="lede">{String(entity.metadata.function_in_book ?? entity.metadata.mission ?? "Canonical faction entry.")}</p>
+    <div class="chapter-meta"><a href="factions/">Back to factions</a></div>
+    {figure && <AssetFigure figure={figure} className="hero-media" />}
+  </section>
+
+  <section class="section">
+    <MetadataSection entries={metaEntries} />
+  </section>
+
+  {relatedLinks.length > 0 && (
+    <section class="section">
+      <RelatedLinks links={relatedLinks} />
+    </section>
+  )}
+
+  <section class="section">
+    <article class="scene prose" set:html={html} />
+  </section>
+</BaseLayout>

package/src/pages/factions/index.astro

@@ -0,0 +1,45 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import { loadEntityIndexData } from "../../lib/book";
+import AssetFigure from "../../components/AssetFigure.astro";
+import { loadAssetFigure } from "../../lib/assets";
+
+const { ready, entities } = await loadEntityIndexData("faction");
+const cards = await Promise.all(
+  entities.map(async (entity) => ({
+    ...entity,
+    figure: await loadAssetFigure(String(entity.metadata.id ?? `faction:${entity.slug}`), String(entity.metadata.name ?? entity.slug)),
+  })),
+);
+---
+
+<BaseLayout title="Factions" description="Browse the factions of the book." activeSection="factions">
+  <section class="hero">
+    <p class="eyebrow">Canon Atlas</p>
+    <h1>Factions</h1>
+    <p class="lede">Map institutions, cults, guilds, and hidden power structures shaping the story.</p>
+  </section>
+
+  {ready ? (
+    <section class="section">
+      <div class="catalog-grid">
+        {cards.map((entity) => (
+          <article class="card catalog-card">
+            <a href={`factions/${entity.slug}/`}>
+              {entity.figure && <AssetFigure figure={entity.figure} className="catalog-media" />}
+              <div class="chapter-number">{String(entity.metadata.faction_kind ?? "faction")}</div>
+              <h2 class="chapter-title">{String(entity.metadata.name ?? entity.slug)}</h2>
+              <div class="chapter-meta">{String(entity.metadata.function_in_book ?? entity.metadata.mission ?? "Open the entry to inspect power, ideology, and methods.")}</div>
+              <div class="chip-row">
+                {entity.metadata.base_location && <span class="chip">{String(entity.metadata.base_location)}</span>}
+                {entity.metadata.historical && <span class="chip">historical</span>}
+              </div>
+            </a>
+          </article>
+        ))}
+      </div>
+    </section>
+  ) : (
+    <div class="empty">No book repository detected for the reader.</div>
+  )}
+</BaseLayout>

package/src/pages/index.astro

@@ -0,0 +1,129 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import { loadHomePageData } from "../lib/book";
+import AssetFigure from "../components/AssetFigure.astro";
+import { loadAssetFigure } from "../lib/assets";
+
+const { ready, root, book, chapters, characters, locations, factions, items, secrets, timelineEvents } = await loadHomePageData();
+const title = book?.frontmatter.title ?? "Narrarium Reader";
+const coverFigure = await loadAssetFigure("book", `${title} cover`);
+const chapterCards = await Promise.all(
+  chapters.map(async (chapter) => ({
+    ...chapter,
+    figure: await loadAssetFigure(String(chapter.metadata.id ?? `chapter:${chapter.slug}`), chapter.metadata.title),
+  })),
+);
+---
+
+<BaseLayout title={title} description="Read a Narrarium repository chapter by chapter." activeSection="home">
+  <section class="hero">
+    <p class="eyebrow">Narrarium Reader</p>
+    <h1>{title}</h1>
+    <p class="lede">
+      {ready
+        ? "A local-first reading view over the canonical book repository. Chapters, scenes, and metadata stay in markdown; the site simply renders them."
+        : "Set NARRARIUM_BOOK_ROOT to a Narrarium book repository and this reader will render its chapters automatically."}
+    </p>
+
+    {ready && <div class="chip-row"><a class="chip" href="downloads/book.epub" download>Download EPUB</a></div>}
+
+    {coverFigure && <AssetFigure figure={coverFigure} className="hero-media" />}
+
+    <div class="grid stats">
+      <div class="card">
+        <div class="label">Book Root</div>
+        <div class="value">{root}</div>
+      </div>
+      <div class="card">
+        <div class="label">Chapters</div>
+        <div class="value">{chapters.length}</div>
+      </div>
+      <div class="card">
+        <div class="label">Author</div>
+        <div class="value">{book?.frontmatter.author ?? "Unknown"}</div>
+      </div>
+      <div class="card">
+        <div class="label">Language</div>
+        <div class="value">{book?.frontmatter.language ?? "n/a"}</div>
+      </div>
+    </div>
+  </section>
+
+  {ready ? (
+    <>
+      <section class="section">
+        <h2>Canon Atlas</h2>
+        <div class="catalog-grid">
+          <article class="card catalog-card">
+            <a href="characters/">
+              <div class="chapter-number">Characters</div>
+              <h3 class="chapter-title">Cast Register</h3>
+              <div class="chapter-meta">Browse protagonists, supporting roles, and reference notes.</div>
+              <div class="chip-row"><span class="chip">{characters.length} entries</span></div>
+            </a>
+          </article>
+          <article class="card catalog-card">
+            <a href="locations/">
+              <div class="chapter-number">Locations</div>
+              <h3 class="chapter-title">World Map</h3>
+              <div class="chapter-meta">See atmosphere, narrative use, and key landmarks.</div>
+              <div class="chip-row"><span class="chip">{locations.length} entries</span></div>
+            </a>
+          </article>
+          <article class="card catalog-card">
+            <a href="factions/">
+              <div class="chapter-number">Factions</div>
+              <h3 class="chapter-title">Power Map</h3>
+              <div class="chapter-meta">Inspect factions, ideology, methods, and narrative pressure.</div>
+              <div class="chip-row"><span class="chip">{factions.length} entries</span></div>
+            </a>
+          </article>
+          <article class="card catalog-card">
+            <a href="items/">
+              <div class="chapter-number">Items</div>
+              <h3 class="chapter-title">Artifacts</h3>
+              <div class="chapter-meta">Track objects, symbols, tools, and plot-driving artifacts.</div>
+              <div class="chip-row"><span class="chip">{items.length} entries</span></div>
+            </a>
+          </article>
+          <article class="card catalog-card">
+            <a href="secrets/">
+              <div class="chapter-number">Secrets</div>
+              <h3 class="chapter-title">Spoiler Vault</h3>
+              <div class="chapter-meta">Review hidden truths, reveal strategy, and narrative stakes.</div>
+              <div class="chip-row"><span class="chip">{secrets.length} entries</span></div>
+            </a>
+          </article>
+          <article class="card catalog-card">
+            <a href="timeline/">
+              <div class="chapter-number">Timeline</div>
+              <h3 class="chapter-title">Chronology</h3>
+              <div class="chapter-meta">Follow major events and continuity anchors.</div>
+              <div class="chip-row"><span class="chip">{timelineEvents.length} events</span></div>
+            </a>
+          </article>
+        </div>
+      </section>
+
+      <section class="section" id="chapters">
+      <h2>Chapters</h2>
+      <div class="chapter-list">
+        {chapterCards.map((chapter) => (
+          <article class="chapter-card">
+            <a href={`chapters/${chapter.slug}/`}>
+              {chapter.figure && <AssetFigure figure={chapter.figure} className="catalog-media" />}
+              <div class="chapter-number">Chapter {String(chapter.metadata.number).padStart(3, "0")}</div>
+              <h3 class="chapter-title">{chapter.metadata.title}</h3>
+              <div class="chapter-meta">{chapter.metadata.summary ?? "Open the chapter to read scenes and notes."}</div>
+            </a>
+          </article>
+        ))}
+      </div>
+      </section>
+    </>
+  ) : (
+    <div class="empty">
+      No book repository detected. Initialize one with the Narrarium MCP server, then run this site again with the correct `NARRARIUM_BOOK_ROOT`.
+    </div>
+  )}
+</BaseLayout>

package/src/pages/items/[slug].astro

@@ -0,0 +1,63 @@
+---
+import { marked } from "marked";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import { getBookRoot, loadEntityPageData } from "../../lib/book";
+import MetadataSection from "../../components/MetadataSection.astro";
+import RelatedLinks from "../../components/RelatedLinks.astro";
+import AssetFigure from "../../components/AssetFigure.astro";
+import { loadRelatedCanonLinks } from "../../lib/canon";
+import { loadAssetFigure } from "../../lib/assets";
+import { listEntities, pathExists } from "narrarium";
+import path from "node:path";
+
+export async function getStaticPaths() {
+  const root = getBookRoot();
+  const ready = await pathExists(path.join(root, "book.md"));
+  if (!ready) return [];
+
+  const entities = await listEntities(root, "item");
+  return entities.map((entity) => ({ params: { slug: entity.slug }, props: { slug: entity.slug } }));
+}
+
+const { slug } = Astro.props;
+const entity = await loadEntityPageData("item", slug);
+const html = await marked.parse(entity.body);
+const metaEntries = [
+  ["Kind", entity.metadata.item_kind],
+  ["Appearance", entity.metadata.appearance],
+  ["Purpose", entity.metadata.purpose],
+  ["Function in book", entity.metadata.function_in_book],
+  ["Significance", entity.metadata.significance],
+  ["Origin story", entity.metadata.origin_story],
+  ["Powers", entity.metadata.powers],
+  ["Limitations", entity.metadata.limitations],
+  ["Owner", entity.metadata.owner],
+  ["Introduced in", entity.metadata.introduced_in],
+].filter(([, value]) => value !== undefined && value !== null && (!Array.isArray(value) || value.length > 0));
+const relatedLinks = await loadRelatedCanonLinks(String(entity.metadata.id ?? `item:${slug}`), [entity.metadata.refs, ...metaEntries.map(([, value]) => value)]);
+const figure = await loadAssetFigure(String(entity.metadata.id ?? `item:${slug}`), String(entity.metadata.name ?? slug));
+---
+
+<BaseLayout title={String(entity.metadata.name ?? slug)} description={String(entity.metadata.function_in_book ?? entity.metadata.purpose ?? "Item entry")} activeSection="items">
+  <section class="hero">
+    <p class="eyebrow">Item</p>
+    <h1>{String(entity.metadata.name ?? slug)}</h1>
+    <p class="lede">{String(entity.metadata.function_in_book ?? entity.metadata.purpose ?? "Canonical item entry.")}</p>
+    <div class="chapter-meta"><a href="items/">Back to items</a></div>
+    {figure && <AssetFigure figure={figure} className="hero-media" />}
+  </section>
+
+  <section class="section">
+    <MetadataSection entries={metaEntries} />
+  </section>
+
+  {relatedLinks.length > 0 && (
+    <section class="section">
+      <RelatedLinks links={relatedLinks} />
+    </section>
+  )}
+
+  <section class="section">
+    <article class="scene prose" set:html={html} />
+  </section>
+</BaseLayout>

package/src/pages/items/index.astro

@@ -0,0 +1,45 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import { loadEntityIndexData } from "../../lib/book";
+import AssetFigure from "../../components/AssetFigure.astro";
+import { loadAssetFigure } from "../../lib/assets";
+
+const { ready, entities } = await loadEntityIndexData("item");
+const cards = await Promise.all(
+  entities.map(async (entity) => ({
+    ...entity,
+    figure: await loadAssetFigure(String(entity.metadata.id ?? `item:${entity.slug}`), String(entity.metadata.name ?? entity.slug)),
+  })),
+);
+---
+
+<BaseLayout title="Items" description="Browse the items and artifacts of the book." activeSection="items">
+  <section class="hero">
+    <p class="eyebrow">Canon Atlas</p>
+    <h1>Items</h1>
+    <p class="lede">Track weapons, documents, relics, tools, and symbolic objects driving the narrative.</p>
+  </section>
+
+  {ready ? (
+    <section class="section">
+      <div class="catalog-grid">
+        {cards.map((entity) => (
+          <article class="card catalog-card">
+            <a href={`items/${entity.slug}/`}>
+              {entity.figure && <AssetFigure figure={entity.figure} className="catalog-media" />}
+              <div class="chapter-number">{String(entity.metadata.item_kind ?? "item")}</div>
+              <h2 class="chapter-title">{String(entity.metadata.name ?? entity.slug)}</h2>
+              <div class="chapter-meta">{String(entity.metadata.function_in_book ?? entity.metadata.purpose ?? "Open the entry to inspect use, origin, and significance.")}</div>
+              <div class="chip-row">
+                {entity.metadata.owner && <span class="chip">{String(entity.metadata.owner)}</span>}
+                {entity.metadata.introduced_in && <span class="chip">{String(entity.metadata.introduced_in)}</span>}
+              </div>
+            </a>
+          </article>
+        ))}
+      </div>
+    </section>
+  ) : (
+    <div class="empty">No book repository detected for the reader.</div>
+  )}
+</BaseLayout>

package/src/pages/locations/[slug].astro

@@ -0,0 +1,61 @@
+---
+import { marked } from "marked";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import { getBookRoot, loadEntityPageData } from "../../lib/book";
+import MetadataSection from "../../components/MetadataSection.astro";
+import RelatedLinks from "../../components/RelatedLinks.astro";
+import AssetFigure from "../../components/AssetFigure.astro";
+import { loadRelatedCanonLinks } from "../../lib/canon";
+import { loadAssetFigure } from "../../lib/assets";
+import { listEntities, pathExists } from "narrarium";
+import path from "node:path";
+
+export async function getStaticPaths() {
+  const root = getBookRoot();
+  const ready = await pathExists(path.join(root, "book.md"));
+  if (!ready) return [];
+
+  const entities = await listEntities(root, "location");
+  return entities.map((entity) => ({ params: { slug: entity.slug }, props: { slug: entity.slug } }));
+}
+
+const { slug } = Astro.props;
+const entity = await loadEntityPageData("location", slug);
+const html = await marked.parse(entity.body);
+const metaEntries = [
+  ["Kind", entity.metadata.location_kind],
+  ["Region", entity.metadata.region],
+  ["Atmosphere", entity.metadata.atmosphere],
+  ["Function in book", entity.metadata.function_in_book],
+  ["Landmarks", entity.metadata.landmarks],
+  ["Risks", entity.metadata.risks],
+  ["Factions present", entity.metadata.factions_present],
+  ["Timeline", entity.metadata.timeline_ref],
+].filter(([, value]) => value !== undefined && value !== null && (!Array.isArray(value) || value.length > 0));
+const relatedLinks = await loadRelatedCanonLinks(String(entity.metadata.id ?? `location:${slug}`), [entity.metadata.refs, ...metaEntries.map(([, value]) => value)]);
+const figure = await loadAssetFigure(String(entity.metadata.id ?? `location:${slug}`), String(entity.metadata.name ?? slug));
+---
+
+<BaseLayout title={String(entity.metadata.name ?? slug)} description={String(entity.metadata.function_in_book ?? entity.metadata.atmosphere ?? "Location entry") } activeSection="locations">
+  <section class="hero">
+    <p class="eyebrow">Location</p>
+    <h1>{String(entity.metadata.name ?? slug)}</h1>
+    <p class="lede">{String(entity.metadata.atmosphere ?? entity.metadata.function_in_book ?? "Canonical location entry.")}</p>
+    <div class="chapter-meta"><a href="locations/">Back to locations</a></div>
+    {figure && <AssetFigure figure={figure} className="hero-media" />}
+  </section>
+
+  <section class="section">
+    <MetadataSection entries={metaEntries} />
+  </section>
+
+  {relatedLinks.length > 0 && (
+    <section class="section">
+      <RelatedLinks links={relatedLinks} />
+    </section>
+  )}
+
+  <section class="section">
+    <article class="scene prose" set:html={html} />
+  </section>
+</BaseLayout>