From 9e35d582050edc076ba8c7f91337de84e38b02eb Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Wed, 9 Apr 2025 09:08:15 -0500
Subject: [PATCH 01/16] Update heading snippet for commonality with Preview
 component

---
 src/lib/snippets/PublicationSnippets.svelte | 31 ++++-----------------
 1 file changed, 6 insertions(+), 25 deletions(-)

diff --git a/src/lib/snippets/PublicationSnippets.svelte b/src/lib/snippets/PublicationSnippets.svelte
index 26645fa..8f9e0cc 100644
--- a/src/lib/snippets/PublicationSnippets.svelte
+++ b/src/lib/snippets/PublicationSnippets.svelte
@@ -5,31 +5,12 @@
 </script>
 
 {#snippet sectionHeading(title: string, depth: number)}
-  {#if depth === 0}
-    <h1 class='h-leather'>
-      {title}
-    </h1>
-  {:else if depth === 1}
-    <h2 class='h-leather'>
-      {title}
-    </h2>
-  {:else if depth === 2}
-    <h3 class='h-leather'>
-      {title}
-    </h3>
-  {:else if depth === 3}
-    <h4 class='h-leather'>
-      {title}
-    </h4>
-  {:else if depth === 4}
-    <h5 class='h-leather'>
-      {title}
-    </h5>
-  {:else}
-    <h6 class='h-leather'>
-      {title}
-    </h6>
-  {/if}
+  {@const headingLevel = Math.min(depth + 1, 6)}
+
+  <!-- TODO: Handle floating titles. -->
+  <svelte:element this={`h${headingLevel}`} class='h-leather'>
+    {title}
+  </svelte:element>
 {/snippet}
 
 {#snippet contentParagraph(content: string, publicationType: string, isSectionStart: boolean)}

From 5486c7368576acfb57d6c45b1b27ee8c4c8aff6a Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Wed, 9 Apr 2025 09:16:41 -0500
Subject: [PATCH 02/16] Instanatiate PublicationTree and make it available to
 components

---
 src/app.d.ts                        | 5 +++++
 src/routes/publication/+page.svelte | 7 ++++++-
 src/routes/publication/+page.ts     | 1 +
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/app.d.ts b/src/app.d.ts
index 731967b..418205d 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,4 +1,8 @@
 // See https://kit.svelte.dev/docs/types#app
+
+import NDK, { NDKEvent } from "@nostr-dev-kit/ndk";
+import Pharos from "./lib/parser.ts";
+
 // for information about these interfaces
 declare global {
   namespace App {
@@ -9,6 +13,7 @@ declare global {
       parser?: Pharos;
       waitable?: Promise<any>;
       publicationType?: string;
+      publicationRootEvent?: NDKEvent;
     }
     // interface Platform {}
   }
diff --git a/src/routes/publication/+page.svelte b/src/routes/publication/+page.svelte
index dbd673f..b566965 100644
--- a/src/routes/publication/+page.svelte
+++ b/src/routes/publication/+page.svelte
@@ -2,10 +2,15 @@
   import Article from "$lib/components/Publication.svelte";
   import { TextPlaceholder } from "flowbite-svelte";
   import type { PageData } from "./$types";
-  import { onDestroy } from "svelte";
+  import { onDestroy, setContext } from "svelte";
+  import { PublicationTree } from "$lib/data_structures/publication_tree";
 
   let { data }: { data: PageData } = $props();
 
+  const publicationTree = new PublicationTree(data.publicationRootEvent, data.ndk);
+
+  setContext('publicationTree', publicationTree);
+
   onDestroy(() => data.parser.reset());
 </script>
 
diff --git a/src/routes/publication/+page.ts b/src/routes/publication/+page.ts
index 286063a..72116ec 100644
--- a/src/routes/publication/+page.ts
+++ b/src/routes/publication/+page.ts
@@ -102,5 +102,6 @@ export const load: PageLoad = async ({ url, parent }: { url: URL; parent: () =>
   return {
     waitable: fetchPromise,
     publicationType,
+    publicationRootEvent: indexEvent,
   };
 };

From 5229e807c714c979bbfa307a4b5ffa89917d3fa4 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Mon, 14 Apr 2025 08:57:50 -0500
Subject: [PATCH 03/16] Require SvelteKit >= 2.16.0

---
 deno.lock    | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/deno.lock b/deno.lock
index f113237..9438da1 100644
--- a/deno.lock
+++ b/deno.lock
@@ -2887,7 +2887,7 @@
         "npm:@sveltejs/adapter-auto@3",
         "npm:@sveltejs/adapter-node@^5.2.12",
         "npm:@sveltejs/adapter-static@3",
-        "npm:@sveltejs/kit@2",
+        "npm:@sveltejs/kit@^2.16.0",
         "npm:@sveltejs/vite-plugin-svelte@4",
         "npm:@tailwindcss/forms@0.5",
         "npm:@tailwindcss/typography@0.5",
diff --git a/package.json b/package.json
index 2323efa..ca9cd67 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "@sveltejs/adapter-auto": "3.x",
     "@sveltejs/adapter-node": "^5.2.12",
     "@sveltejs/adapter-static": "3.x",
-    "@sveltejs/kit": "2.x",
+    "@sveltejs/kit": "^2.16.0",
     "@sveltejs/vite-plugin-svelte": "4.x",
     "@types/he": "1.2.x",
     "@types/node": "22.x",

From c63360d1f0b8b43decf23197c6d26dbd9c70b5f6 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Mon, 14 Apr 2025 09:05:56 -0500
Subject: [PATCH 04/16] Update publication page load data handling

---
 src/app.d.ts                        |  3 ++-
 src/routes/publication/+page.svelte | 17 ++++-------------
 src/routes/publication/+page.ts     |  3 ++-
 3 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/app.d.ts b/src/app.d.ts
index 418205d..10e50ba 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -13,7 +13,8 @@ declare global {
       parser?: Pharos;
       waitable?: Promise<any>;
       publicationType?: string;
-      publicationRootEvent?: NDKEvent;
+      indexEvent?: NDKEvent;
+      url?: URL;
     }
     // interface Platform {}
   }
diff --git a/src/routes/publication/+page.svelte b/src/routes/publication/+page.svelte
index e6f532d..032b2f3 100644
--- a/src/routes/publication/+page.svelte
+++ b/src/routes/publication/+page.svelte
@@ -1,28 +1,19 @@
 <script lang="ts">
   import Article from "$lib/components/Publication.svelte";
   import { TextPlaceholder } from "flowbite-svelte";
-  import type { PageData } from "./$types";
+  import type { PageProps } from "./$types";
   import { onDestroy, setContext } from "svelte";
   import { PublicationTree } from "$lib/data_structures/publication_tree";
-  import { page } from "$app/stores";
 
-  // Extend the PageData type with the properties we need
-  interface ExtendedPageData extends PageData {
-    waitable: Promise<any>;
-    publicationType: string;
-    indexEvent: NDKEvent;
-    parser: any;
-  }
+  let { data }: PageProps = $props();
 
-  const publicationTree = new PublicationTree(data.publicationRootEvent, data.ndk);
+  const publicationTree = new PublicationTree(data.indexEvent, data.ndk);
 
   setContext('publicationTree', publicationTree);
 
-  let { data } = $props<{ data: ExtendedPageData }>();
-
   // Get publication metadata for OpenGraph tags
   let title = $derived(data.indexEvent?.getMatchingTags('title')[0]?.[1] || data.parser?.getIndexTitle(data.parser?.getRootIndexId()) || 'Alexandria Publication');
-  let currentUrl = $page.url.href;
+  let currentUrl = data.url?.href ?? '';
   
   // Get image and summary from the event tags if available
   // If image unavailable, use the Alexandria default pic.
diff --git a/src/routes/publication/+page.ts b/src/routes/publication/+page.ts
index 56b7fd1..e3d6bf5 100644
--- a/src/routes/publication/+page.ts
+++ b/src/routes/publication/+page.ts
@@ -2,7 +2,7 @@ import { error } from '@sveltejs/kit';
 import type { Load } from '@sveltejs/kit';
 import type { NDKEvent } from '@nostr-dev-kit/ndk';
 import { nip19 } from 'nostr-tools';
-import { getActiveRelays } from '$lib/ndk.ts';
+import { getActiveRelays } from '$lib/ndk';
 
 /**
  * Decodes an naddr identifier and returns a filter object
@@ -103,5 +103,6 @@ export const load: Load = async ({ url, parent }: { url: URL; parent: () => Prom
     waitable: fetchPromise,
     publicationType,
     indexEvent,
+    url,
   };
 };

From b27a7d2c281e471c8911ee93013f0707c21cb5b3 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Mon, 14 Apr 2025 09:14:23 -0500
Subject: [PATCH 05/16] Article -> Publication in component tag

---
 src/routes/publication/+page.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/publication/+page.svelte b/src/routes/publication/+page.svelte
index 032b2f3..b936814 100644
--- a/src/routes/publication/+page.svelte
+++ b/src/routes/publication/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Article from "$lib/components/Publication.svelte";
+  import Publication from "$lib/components/Publication.svelte";
   import { TextPlaceholder } from "flowbite-svelte";
   import type { PageProps } from "./$types";
   import { onDestroy, setContext } from "svelte";
@@ -47,7 +47,7 @@
   {#await data.waitable}
     <TextPlaceholder divClass='skeleton-leather w-full' size="xxl" />
   {:then}
-  <Article 
+    <Publication 
       rootId={data.parser.getRootIndexId()} 
       publicationType={data.publicationType} 
       indexEvent={data.indexEvent} 

From b199ab1e507ccd95145cc6be18ed6391d32ee5ee Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Mon, 14 Apr 2025 09:29:52 -0500
Subject: [PATCH 06/16] Begin to move off of `<Preview>` and onto
 `<PublicationSection>`

---
 src/lib/components/Publication.svelte        |  4 ++-
 src/lib/components/PublicationSection.svelte | 28 ++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/PublicationSection.svelte

diff --git a/src/lib/components/Publication.svelte b/src/lib/components/Publication.svelte
index e61cbb3..4ff9c7c 100644
--- a/src/lib/components/Publication.svelte
+++ b/src/lib/components/Publication.svelte
@@ -16,6 +16,7 @@
   import { page } from "$app/state";
   import { ndkInstance } from "$lib/ndk";
   import type { NDKEvent } from "@nostr-dev-kit/ndk";
+  import PublicationSection from "./PublicationSection.svelte";
 
   let { rootId, publicationType, indexEvent } = $props<{ 
     rootId: string, 
@@ -131,7 +132,8 @@
   </Sidebar>
 {/if} -->
 <div class="flex flex-col space-y-4 max-w-2xl">
-  <Preview {rootId} {publicationType} />
+  <!-- TODO: Pass in the correct address for each section. -->
+  <PublicationSection rootAddress={rootId} address={''} />
 </div>
 
 <style>
diff --git a/src/lib/components/PublicationSection.svelte b/src/lib/components/PublicationSection.svelte
new file mode 100644
index 0000000..39f0c12
--- /dev/null
+++ b/src/lib/components/PublicationSection.svelte
@@ -0,0 +1,28 @@
+<script lang='ts'>
+  import type { PublicationTree } from "$lib/data_structures/publication_tree";
+  import { contentParagraph } from "$lib/snippets/PublicationSnippets.svelte";
+  import { TextPlaceholder } from "flowbite-svelte";
+  import { getContext } from "svelte";
+
+  let { address, rootAddress }: { address: string, rootAddress: string } = $props();
+
+  const publicationTree = getContext<PublicationTree>('publicationTree');
+
+  let sectionEvent = $derived.by(async () => await publicationTree.getEvent(address));
+  let rootEvent = $derived.by(async () => await publicationTree.getEvent(rootAddress));
+  let publicationType = $derived.by(async () =>
+    (await rootEvent)?.getMatchingTags('type')[0]?.[1]);
+  let hierarchy = $derived.by(async () => await publicationTree.getHierarchy(address));
+  let depth = $derived.by(async () => (await hierarchy).length);
+</script>
+
+<!-- TODO: Correctly handle events that are the start of a content section. -->
+<section>
+  {#await Promise.all([sectionEvent, publicationType])}
+    <TextPlaceholder size='xxl' />
+  {:then [sectionEvent, publicationType]}
+    <!-- TODO: Gracefully handle nulls. -->
+    {@render contentParagraph(sectionEvent?.content ?? '', publicationType ?? 'article', false)}
+  {/await}
+</section>
+

From 46f61da01dbcae8dc51630246dc0332798c02035 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Mon, 14 Apr 2025 23:11:57 -0500
Subject: [PATCH 07/16] Begin to implement import on visibility for publication
 content

---
 src/lib/components/Publication.svelte        | 82 ++++++++++++++++----
 src/lib/components/PublicationSection.svelte | 22 +++++-
 src/routes/publication/+page.svelte          |  6 +-
 3 files changed, 92 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/Publication.svelte b/src/lib/components/Publication.svelte
index 4ff9c7c..167cf67 100644
--- a/src/lib/components/Publication.svelte
+++ b/src/lib/components/Publication.svelte
@@ -9,25 +9,64 @@
     TextPlaceholder,
     Tooltip,
   } from "flowbite-svelte";
-  import { onMount } from "svelte";
+  import { getContext, onMount } from "svelte";
   import { BookOutline } from "flowbite-svelte-icons";
-  import Preview from "./Preview.svelte";
-  import { pharosInstance } from "$lib/parser";
   import { page } from "$app/state";
-  import { ndkInstance } from "$lib/ndk";
   import type { NDKEvent } from "@nostr-dev-kit/ndk";
   import PublicationSection from "./PublicationSection.svelte";
+  import type { PublicationTree } from "$lib/data_structures/publication_tree";
 
-  let { rootId, publicationType, indexEvent } = $props<{ 
-    rootId: string, 
+  let { rootAddress, publicationType, indexEvent } = $props<{ 
+    rootAddress: string, 
     publicationType: string,
     indexEvent: NDKEvent
   }>();
 
-  if (rootId !== $pharosInstance.getRootIndexId()) {
-    console.error("Root ID does not match parser root index ID");
+  const publicationTree = getContext('publicationTree') as PublicationTree;
+
+  // #region Loading
+
+  // TODO: Test load handling.
+
+  let leaves = $state<NDKEvent[]>([]);
+  let isLoading = $state<boolean>(false);
+  let lastElementRef = $state<HTMLElement | null>(null);
+
+  let observer: IntersectionObserver;
+
+  async function loadMore(count: number) {
+    isLoading = true;
+
+    for (let i = 0; i < count; i++) {
+      const nextItem = await publicationTree.next();
+      if (nextItem.done) {
+        break;
+      }
+      leaves.push(nextItem.value);
+    }
+
+    isLoading = false;
+  }
+
+  function setLastElementRef(el: HTMLElement, i: number) {
+    if (i === leaves.length - 1) {
+      lastElementRef = el;
+    }
   }
 
+  $effect(() => {
+    if (!lastElementRef) {
+      return;
+    }
+
+    observer.observe(lastElementRef!);
+    return () => observer.unobserve(lastElementRef!);
+  });
+
+  // #endregion
+
+  // #region ToC
+
   const tocBreakpoint = 1140;
 
   let activeHash = $state(page.url.hash);
@@ -82,21 +121,33 @@
     }
   }
 
+  // #endregion
+
   onMount(() => {
     // Always check whether the TOC sidebar should be visible.
     setTocVisibilityOnResize();
-
     window.addEventListener("hashchange", scrollToElementWithOffset);
     // Also handle the case where the user lands on the page with a hash in the URL
     scrollToElementWithOffset();
-
     window.addEventListener("resize", setTocVisibilityOnResize);
     window.addEventListener("click", hideTocOnClick);
 
+    // Set up the intersection observer.
+    observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && !isLoading) {
+          loadMore(8);
+        }
+      });
+    }, { threshold: 0.5 });
+    loadMore(16);
+
     return () => {
       window.removeEventListener("hashchange", scrollToElementWithOffset);
       window.removeEventListener("resize", setTocVisibilityOnResize);
       window.removeEventListener("click", hideTocOnClick);
+
+      observer.disconnect();
     };
   });
 </script>
@@ -115,7 +166,7 @@
   </Button>
   <Tooltip>Show Table of Contents</Tooltip>
 {/if}
-<!-- TODO: Get TOC from parser. -->
+<!-- TODO: Use loader to build ToC. -->
 <!-- {#if showToc}
   <Sidebar class='sidebar-leather fixed top-20 left-0 px-4 w-60' {activeHash}>
     <SidebarWrapper>
@@ -132,8 +183,13 @@
   </Sidebar>
 {/if} -->
 <div class="flex flex-col space-y-4 max-w-2xl">
-  <!-- TODO: Pass in the correct address for each section. -->
-  <PublicationSection rootAddress={rootId} address={''} />
+  {#each leaves as leaf, i}
+    <PublicationSection
+      rootAddress={rootAddress}
+      address={leaf.tagAddress()}
+      ref={(el) => setLastElementRef(el, i)}
+    />
+  {/each}
 </div>
 
 <style>
diff --git a/src/lib/components/PublicationSection.svelte b/src/lib/components/PublicationSection.svelte
index 39f0c12..8dfa42f 100644
--- a/src/lib/components/PublicationSection.svelte
+++ b/src/lib/components/PublicationSection.svelte
@@ -4,7 +4,15 @@
   import { TextPlaceholder } from "flowbite-svelte";
   import { getContext } from "svelte";
 
-  let { address, rootAddress }: { address: string, rootAddress: string } = $props();
+  let {
+    address,
+    rootAddress,
+    ref,
+  }: {
+    address: string,
+    rootAddress: string,
+    ref: (ref: HTMLElement) => void,
+  } = $props();
 
   const publicationTree = getContext<PublicationTree>('publicationTree');
 
@@ -14,10 +22,20 @@
     (await rootEvent)?.getMatchingTags('type')[0]?.[1]);
   let hierarchy = $derived.by(async () => await publicationTree.getHierarchy(address));
   let depth = $derived.by(async () => (await hierarchy).length);
+
+  let sectionRef: HTMLElement;
+
+  $effect(() => {
+    if (!sectionRef) {
+      return;
+    }
+
+    ref(sectionRef);
+  })
 </script>
 
 <!-- TODO: Correctly handle events that are the start of a content section. -->
-<section>
+<section bind:this={sectionRef}>
   {#await Promise.all([sectionEvent, publicationType])}
     <TextPlaceholder size='xxl' />
   {:then [sectionEvent, publicationType]}
diff --git a/src/routes/publication/+page.svelte b/src/routes/publication/+page.svelte
index b936814..59fa70c 100644
--- a/src/routes/publication/+page.svelte
+++ b/src/routes/publication/+page.svelte
@@ -18,7 +18,7 @@
   // Get image and summary from the event tags if available
   // If image unavailable, use the Alexandria default pic.
   let image = $derived(data.indexEvent?.getMatchingTags('image')[0]?.[1] || '/screenshots/old_books.jpg');
-  let summary = $derived(data.indexEvent?.getMatchingTags('summary')[0]?.[1] || 'Alexandria is a digital library, utilizing Nostr events for curated publications and wiki pages.');
+  let summary = $derived(data.indexEvent?.getMatchingTags('summary')[0]?.[1] || 'Alexandria is a digital library, utilizing Nostr events for curated publications and wiki pages.');  
 
   onDestroy(() => data.parser.reset());
 </script>
@@ -48,9 +48,9 @@
     <TextPlaceholder divClass='skeleton-leather w-full' size="xxl" />
   {:then}
     <Publication 
-      rootId={data.parser.getRootIndexId()} 
+      rootAddress={data.indexEvent.tagAddress()} 
       publicationType={data.publicationType} 
-      indexEvent={data.indexEvent} 
+      indexEvent={data.indexEvent}
     />
   {/await}
 </main>

From b383dd0b0cae128de5eea889d8d9bc5989388d38 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Tue, 15 Apr 2025 09:31:43 -0500
Subject: [PATCH 08/16] Remove PageData typings for NDK and Pharos

Those should be shared among client-side components with `setContext` and `getContext`.
---
 src/app.d.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app.d.ts b/src/app.d.ts
index 10e50ba..1b260cf 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -9,8 +9,6 @@ declare global {
     // interface Error {}
     // interface Locals {}
     interface PageData {
-      ndk?: NDK;
-      parser?: Pharos;
       waitable?: Promise<any>;
       publicationType?: string;
       indexEvent?: NDKEvent;

From 03612ad6de7a63869353d645db5c71e1ee5da2e2 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Tue, 15 Apr 2025 09:32:43 -0500
Subject: [PATCH 09/16] Render publication content and headers

Incomplete.  Some headers are still missing, and we don't yet gracefully handle events that can't be found.
---
 src/lib/components/Publication.svelte        | 10 ++-
 src/lib/components/PublicationSection.svelte | 84 +++++++++++++++++---
 src/routes/publication/+page.svelte          |  2 +
 3 files changed, 79 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/Publication.svelte b/src/lib/components/Publication.svelte
index 167cf67..8bcf5a4 100644
--- a/src/lib/components/Publication.svelte
+++ b/src/lib/components/Publication.svelte
@@ -39,8 +39,9 @@
 
     for (let i = 0; i < count; i++) {
       const nextItem = await publicationTree.next();
-      if (nextItem.done) {
-        break;
+      if (leaves.includes(nextItem.value) || nextItem.done) {
+        isLoading = false;
+        return;
       }
       leaves.push(nextItem.value);
     }
@@ -136,11 +137,11 @@
     observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting && !isLoading) {
-          loadMore(8);
+          loadMore(4);
         }
       });
     }, { threshold: 0.5 });
-    loadMore(16);
+    loadMore(8);
 
     return () => {
       window.removeEventListener("hashchange", scrollToElementWithOffset);
@@ -186,6 +187,7 @@
   {#each leaves as leaf, i}
     <PublicationSection
       rootAddress={rootAddress}
+      leaves={leaves}
       address={leaf.tagAddress()}
       ref={(el) => setLastElementRef(el, i)}
     />
diff --git a/src/lib/components/PublicationSection.svelte b/src/lib/components/PublicationSection.svelte
index 8dfa42f..0ea64f1 100644
--- a/src/lib/components/PublicationSection.svelte
+++ b/src/lib/components/PublicationSection.svelte
@@ -1,27 +1,82 @@
 <script lang='ts'>
   import type { PublicationTree } from "$lib/data_structures/publication_tree";
-  import { contentParagraph } from "$lib/snippets/PublicationSnippets.svelte";
+  import { contentParagraph, sectionHeading } from "$lib/snippets/PublicationSnippets.svelte";
+  import { NDKEvent } from "@nostr-dev-kit/ndk";
   import { TextPlaceholder } from "flowbite-svelte";
   import { getContext } from "svelte";
-
+  import type { Asciidoctor, Document } from "asciidoctor";
   let {
     address,
     rootAddress,
+    leaves,
     ref,
   }: {
     address: string,
     rootAddress: string,
+    leaves: NDKEvent[],
     ref: (ref: HTMLElement) => void,
   } = $props();
 
-  const publicationTree = getContext<PublicationTree>('publicationTree');
+  const publicationTree: PublicationTree = getContext('publicationTree');
+  const asciidoctor: Asciidoctor = getContext('asciidoctor');
 
-  let sectionEvent = $derived.by(async () => await publicationTree.getEvent(address));
-  let rootEvent = $derived.by(async () => await publicationTree.getEvent(rootAddress));
-  let publicationType = $derived.by(async () =>
+  let leafEvent: Promise<NDKEvent | null> = $derived.by(async () =>
+    await publicationTree.getEvent(address));
+  let rootEvent: Promise<NDKEvent | null> = $derived.by(async () =>
+    await publicationTree.getEvent(rootAddress));
+  let publicationType: Promise<string | undefined> = $derived.by(async () =>
     (await rootEvent)?.getMatchingTags('type')[0]?.[1]);
-  let hierarchy = $derived.by(async () => await publicationTree.getHierarchy(address));
-  let depth = $derived.by(async () => (await hierarchy).length);
+  let leafHierarchy: Promise<NDKEvent[]> = $derived.by(async () =>
+    await publicationTree.getHierarchy(address));
+  let leafContent: Promise<string | Document> = $derived.by(async () =>
+    asciidoctor.convert((await leafEvent)?.content ?? ''));
+
+  let previousLeafEvent: NDKEvent | null = $derived.by(() => {
+    const index = leaves.findIndex(leaf => leaf.tagAddress() === address);
+    if (index === 0) {
+      return null;
+    }
+    return leaves[index - 1];
+  });
+  let previousLeafHierarchy: Promise<NDKEvent[] | null> = $derived.by(async () => {
+    const previousLeaf = await previousLeafEvent;
+    if (!previousLeaf) {
+      return null;
+    }
+    return await publicationTree.getHierarchy(previousLeafEvent?.tagAddress() ?? '')
+  });
+
+  let divergingBranches = $derived.by(async () => {
+    const currentHierarchy = await leafHierarchy;
+    const previousHierarchy = await previousLeafHierarchy;
+    
+    const branches: [NDKEvent, number][] = [];
+
+    if (!previousHierarchy) {
+      for (let i = 0; i < currentHierarchy.length - 1; i++) {
+        branches.push([currentHierarchy[i], i]);
+      }
+      return branches;
+    }
+
+    const minLength = Math.min(currentHierarchy.length, previousHierarchy.length);
+    
+    // Find the first diverging node.
+    let divergingIndex = 0;
+    while (
+      divergingIndex < minLength && 
+      currentHierarchy[divergingIndex].tagAddress() === previousHierarchy[divergingIndex].tagAddress()
+    ) {
+      divergingIndex++;
+    }
+    
+    // Add all branches from the first diverging node to the current leaf.
+    for (let i = divergingIndex; i < currentHierarchy.length - 1; i++) {
+      branches.push([currentHierarchy[i], i]);
+    }
+    
+    return branches;
+  });
 
   let sectionRef: HTMLElement;
 
@@ -31,16 +86,19 @@
     }
 
     ref(sectionRef);
-  })
+  });
 </script>
 
 <!-- TODO: Correctly handle events that are the start of a content section. -->
 <section bind:this={sectionRef}>
-  {#await Promise.all([sectionEvent, publicationType])}
+  {#await Promise.all([leafContent, publicationType, divergingBranches])}
     <TextPlaceholder size='xxl' />
-  {:then [sectionEvent, publicationType]}
-    <!-- TODO: Gracefully handle nulls. -->
-    {@render contentParagraph(sectionEvent?.content ?? '', publicationType ?? 'article', false)}
+  {:then [leafContent, publicationType, divergingBranches]}
+    <!-- TODO: Ensure we render all headings, not just the first one. -->
+    {#each divergingBranches as [branch, depth]}
+      {@render sectionHeading(branch.getMatchingTags('title')[0]?.[1] ?? '', depth)}
+    {/each}
+    {@render contentParagraph(leafContent.toString(), publicationType ?? 'article', false)}
   {/await}
 </section>
 
diff --git a/src/routes/publication/+page.svelte b/src/routes/publication/+page.svelte
index 59fa70c..9e9bf1d 100644
--- a/src/routes/publication/+page.svelte
+++ b/src/routes/publication/+page.svelte
@@ -4,12 +4,14 @@
   import type { PageProps } from "./$types";
   import { onDestroy, setContext } from "svelte";
   import { PublicationTree } from "$lib/data_structures/publication_tree";
+  import Processor from "asciidoctor";
 
   let { data }: PageProps = $props();
 
   const publicationTree = new PublicationTree(data.indexEvent, data.ndk);
 
   setContext('publicationTree', publicationTree);
+  setContext('asciidoctor', Processor());
 
   // Get publication metadata for OpenGraph tags
   let title = $derived(data.indexEvent?.getMatchingTags('title')[0]?.[1] || data.parser?.getIndexTitle(data.parser?.getRootIndexId()) || 'Alexandria Publication');

From 787eb0402876041b56dd0033195dc6e4a68ad201 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Wed, 30 Apr 2025 00:07:33 -0500
Subject: [PATCH 10/16] Add Cursor rules

These are used as instructions for all LLMs working on this repo within the Cursor IDE.
---
 .cursor/rules/alexandria.mdc | 62 ++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 .cursor/rules/alexandria.mdc

diff --git a/.cursor/rules/alexandria.mdc b/.cursor/rules/alexandria.mdc
new file mode 100644
index 0000000..4fe24b0
--- /dev/null
+++ b/.cursor/rules/alexandria.mdc
@@ -0,0 +1,62 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+# Project Alexandria
+
+You are senior full-stack software engineer with 20 years of experience writing web apps.  You have been working with the Svelte web development framework for 8 years, since it was first released, and you currently are a leading expert on Svelte 5 and SvelteKit 2.  Additionally, you are a pioneer developer on the Nostr protocol, and have developing production-quality Nostr apps for 4 years.
+
+## Project Overview
+
+Alexandria is a Nostr project written in Svelte 5 and SvelteKit 2.  It is a web app for reading, commenting on, and publishing books, blogs, and other long-form content stored on Nostr relays.  It revolves around breaking long AsciiDoc documents into Nostr events, with each event containing a paragraph or so of text from the document.  These individual content events are organized by index events into publications.  An index contains an ordered list of references to other index events or content events, forming a tree.
+
+### Reader Features
+
+In reader mode, Alexandria loads a document tree from a root publication index event.  The AsciiDoc text content of the various content events, along with headers specified by tags in the index events, is composed and rendered as a single document from the user's point of view.
+
+### Tech Stack
+
+Svelte components in Alexandria use TypeScript exclusively over plain JavaScript.  Styles are defined via Tailwind 4 utility classes, and some custom utility classes are defined in [app.css](mdc:src/app.css).  The app runs on Deno, but maintains compatibility with Node.js.
+
+## General Guidelines
+
+When responding to prompts, adhere to the following rules:
+
+- Avoid making apologetic or conciliatory statements.
+- Avoid verbose responses; be direct and to the point.
+- Provide links to relevant documentation so that I can do further reading on the tools or techniques discussed and used in your responses.
+- When I tell you a response is incorrect, avoid simply agreeing with me; think about the points raised and provide well-reasoned explanations for your subsequent responses.
+- Avoid proposing code edits unless I specifically tell you to do so.
+- When giving examples from my codebase, include the file name and line numbers so I can find the relevant code easily.
+
+## Code Style
+
+Observe the following style guidelines when writing code:
+
+### General Guidance
+
+- Use PascalCase names for Svelte 5 components and their files.
+- Use snake_case names for plain TypeScript files.
+- Use comments sparingly; code should be self-documenting.
+
+### JavaScript/TypeScript
+
+- Use an indentation size of 2 spaces.
+- Use camelCase names for variables, classes, and functions.
+- Give variables, classes, and functions descriptive names that reflect their content and purpose.
+- Use Svelte 5 features, such as runes.  Avoid using legacy Svelte 4 features.
+- Write JSDoc comments for all functions.
+- Use blocks enclosed by curly brackets when writing control flow expressions such as `for` and `while` loops, and `if` and `switch` statements.
+- Begin `case` expressions in a `switch` statement at the same indentation level as the `switch` itself.  Indent code within a `case` block.
+- Limit line length to 100 characters; break statements across lines if necessary.
+- Default to single quotes.
+
+### HTML
+
+- Use an indentation size of 2 spaces.
+- Break long tags across multiple lines.
+- Use Tailwind 4 utility classes for styling.
+- Default to single quotes.
+
+

From 9e35e0b229581ffe925d50fbb22a3237f18079ca Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Wed, 30 Apr 2025 00:07:43 -0500
Subject: [PATCH 11/16] Update D3

---
 deno.lock | 1 +
 1 file changed, 1 insertion(+)

diff --git a/deno.lock b/deno.lock
index 9438da1..c97022c 100644
--- a/deno.lock
+++ b/deno.lock
@@ -2891,6 +2891,7 @@
         "npm:@sveltejs/vite-plugin-svelte@4",
         "npm:@tailwindcss/forms@0.5",
         "npm:@tailwindcss/typography@0.5",
+        "npm:@types/d3@^7.4.3",
         "npm:@types/he@1.2",
         "npm:@types/node@22",
         "npm:asciidoctor@3.0",

From 1ecc6bccbd7be6efb5ee138ad064fb69cfcb184e Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Wed, 30 Apr 2025 00:11:48 -0500
Subject: [PATCH 12/16] Get rendering to work properly with new loader

Load-on-scroll can stand to be improved, but it works at a basic level.  Event content is rendered correctly, with headings, and many content block types have proper styling.
---
 src/app.css                                  | 107 ++++++++++++++++++-
 src/lib/components/PublicationSection.svelte |  40 ++++---
 src/lib/snippets/PublicationSnippets.svelte  |  12 +--
 3 files changed, 128 insertions(+), 31 deletions(-)

diff --git a/src/app.css b/src/app.css
index 314408a..4c538de 100644
--- a/src/app.css
+++ b/src/app.css
@@ -186,11 +186,6 @@
     @apply bg-gray-200 dark:bg-gray-700;
   }
   
-  /* Unordered list */
-  .ul-leather li a {
-    @apply text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500;
-  }
-  
   /* Network visualization */
   .network-link-leather {
     @apply stroke-gray-400 fill-gray-400;
@@ -203,6 +198,43 @@
   }
 }
 
+/* Utilities can be applied via the @apply directive. */
+@layer utilities {
+  .h-leather {
+    @apply text-gray-800 dark:text-gray-300 pt-4;
+  }
+
+  .h1-leather {
+    @apply text-4xl font-bold;
+  }
+
+  .h2-leather {
+    @apply text-3xl font-bold;
+  }
+
+  .h3-leather {
+    @apply text-2xl font-bold;
+  }
+
+  .h4-leather {
+    @apply text-xl font-bold;
+  }
+
+  .h5-leather {
+    @apply text-lg font-semibold;
+  }
+
+  .h6-leather {
+    @apply text-base font-semibold;
+  }
+
+  /* Lists */
+  .ol-leather li a,
+  .ul-leather li a {
+    @apply text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500;
+  }
+}
+
 @layer components {
   /* Legend */
   .leather-legend {
@@ -223,4 +255,69 @@
   .leather-legend button {
     @apply dark:text-white;
   }
+
+  /* Rendered publication content */
+  .publication-leather {
+    @apply flex flex-col space-y-4;
+
+    h1, h2, h3, h4, h5, h6 {
+      @apply h-leather;
+    }
+
+    h1 {
+      @apply h1-leather;
+    }
+
+    h2 {
+      @apply h2-leather;
+    }
+
+    h3 {
+      @apply h3-leather;
+    }
+
+    h4 {
+      @apply h4-leather;
+    }
+
+    h5 {
+      @apply h5-leather;
+    }
+
+    h6 {
+      @apply h6-leather;
+    }
+
+    div {
+      @apply flex flex-col space-y-4;
+    }
+
+    .olist {
+      @apply flex flex-col space-y-4;
+
+      ol {
+        @apply ol-leather list-decimal px-6 flex flex-col space-y-2;
+
+        li {
+          .paragraph {
+            @apply py-2;
+          }
+        }
+      }
+    }
+
+    .ulist {
+      @apply flex flex-col space-y-4;
+
+      ul {
+        @apply ul-leather list-disc px-6 flex flex-col space-y-2;
+
+        li {
+          .paragraph {
+            @apply py-2;
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/src/lib/components/PublicationSection.svelte b/src/lib/components/PublicationSection.svelte
index 0ea64f1..4cafb7c 100644
--- a/src/lib/components/PublicationSection.svelte
+++ b/src/lib/components/PublicationSection.svelte
@@ -5,6 +5,7 @@
   import { TextPlaceholder } from "flowbite-svelte";
   import { getContext } from "svelte";
   import type { Asciidoctor, Document } from "asciidoctor";
+
   let {
     address,
     rootAddress,
@@ -20,7 +21,7 @@
   const publicationTree: PublicationTree = getContext('publicationTree');
   const asciidoctor: Asciidoctor = getContext('asciidoctor');
 
-  let leafEvent: Promise<NDKEvent | null> = $derived.by(async () =>
+  let leafEvent: Promise<NDKEvent | null> = $derived.by(async () => 
     await publicationTree.getEvent(address));
   let rootEvent: Promise<NDKEvent | null> = $derived.by(async () =>
     await publicationTree.getEvent(rootAddress));
@@ -28,6 +29,8 @@
     (await rootEvent)?.getMatchingTags('type')[0]?.[1]);
   let leafHierarchy: Promise<NDKEvent[]> = $derived.by(async () =>
     await publicationTree.getHierarchy(address));
+  let leafTitle: Promise<string | undefined> = $derived.by(async () =>
+    (await leafEvent)?.getMatchingTags('title')[0]?.[1]);
   let leafContent: Promise<string | Document> = $derived.by(async () =>
     asciidoctor.convert((await leafEvent)?.content ?? ''));
 
@@ -39,40 +42,40 @@
     return leaves[index - 1];
   });
   let previousLeafHierarchy: Promise<NDKEvent[] | null> = $derived.by(async () => {
-    const previousLeaf = await previousLeafEvent;
-    if (!previousLeaf) {
+    console.debug('Finding previous leaf hierarchy for ', address);
+    if (!previousLeafEvent) {
       return null;
     }
-    return await publicationTree.getHierarchy(previousLeafEvent?.tagAddress() ?? '')
+    return await publicationTree.getHierarchy(previousLeafEvent.tagAddress());
   });
 
   let divergingBranches = $derived.by(async () => {
-    const currentHierarchy = await leafHierarchy;
-    const previousHierarchy = await previousLeafHierarchy;
+    console.debug('Finding diverging branches for ', address);
+    let [leafHierarchyValue, previousLeafHierarchyValue] = await Promise.all([leafHierarchy, previousLeafHierarchy]);
     
     const branches: [NDKEvent, number][] = [];
 
-    if (!previousHierarchy) {
-      for (let i = 0; i < currentHierarchy.length - 1; i++) {
-        branches.push([currentHierarchy[i], i]);
+    if (!previousLeafHierarchyValue) {
+      for (let i = 0; i < leafHierarchyValue.length - 1; i++) {
+        branches.push([leafHierarchyValue[i], i]);
       }
       return branches;
     }
 
-    const minLength = Math.min(currentHierarchy.length, previousHierarchy.length);
+    const minLength = Math.min(leafHierarchyValue.length, previousLeafHierarchyValue.length);
     
     // Find the first diverging node.
     let divergingIndex = 0;
     while (
       divergingIndex < minLength && 
-      currentHierarchy[divergingIndex].tagAddress() === previousHierarchy[divergingIndex].tagAddress()
+      leafHierarchyValue[divergingIndex].tagAddress() === previousLeafHierarchyValue[divergingIndex].tagAddress()
     ) {
       divergingIndex++;
     }
     
     // Add all branches from the first diverging node to the current leaf.
-    for (let i = divergingIndex; i < currentHierarchy.length - 1; i++) {
-      branches.push([currentHierarchy[i], i]);
+    for (let i = divergingIndex; i < leafHierarchyValue.length - 1; i++) {
+      branches.push([leafHierarchyValue[i], i]);
     }
     
     return branches;
@@ -90,15 +93,18 @@
 </script>
 
 <!-- TODO: Correctly handle events that are the start of a content section. -->
-<section bind:this={sectionRef}>
-  {#await Promise.all([leafContent, publicationType, divergingBranches])}
+<section bind:this={sectionRef} class='publication-leather'>
+  {#await Promise.all([leafTitle, leafContent, leafHierarchy, publicationType, divergingBranches])}
     <TextPlaceholder size='xxl' />
-  {:then [leafContent, publicationType, divergingBranches]}
+  {:then [leafTitle, leafContent, leafHierarchy, publicationType, divergingBranches]}
     <!-- TODO: Ensure we render all headings, not just the first one. -->
     {#each divergingBranches as [branch, depth]}
       {@render sectionHeading(branch.getMatchingTags('title')[0]?.[1] ?? '', depth)}
     {/each}
+    {#if leafTitle}
+      {@const leafDepth = leafHierarchy.length - 1}
+      {@render sectionHeading(leafTitle, leafDepth)}
+    {/if}
     {@render contentParagraph(leafContent.toString(), publicationType ?? 'article', false)}
   {/await}
 </section>
-
diff --git a/src/lib/snippets/PublicationSnippets.svelte b/src/lib/snippets/PublicationSnippets.svelte
index 8f9e0cc..802edfd 100644
--- a/src/lib/snippets/PublicationSnippets.svelte
+++ b/src/lib/snippets/PublicationSnippets.svelte
@@ -14,13 +14,7 @@
 {/snippet}
 
 {#snippet contentParagraph(content: string, publicationType: string, isSectionStart: boolean)}
-  {#if publicationType === 'novel'}
-    <P class='whitespace-normal' firstupper={isSectionStart}>
-      {@html content}
-    </P>
-  {:else}
-    <P class='whitespace-normal' firstupper={false}>
-      {@html content}
-    </P>
-  {/if}
+  <section class='whitespace-normal publication-leather'>
+    {@html content}
+  </section>
 {/snippet}

From 3f479169a7c191bf4c04ff6b9b12fe2ba16b3ac6 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Wed, 30 Apr 2025 00:12:20 -0500
Subject: [PATCH 13/16] Remove leftover console debug statements

---
 src/lib/components/PublicationSection.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/lib/components/PublicationSection.svelte b/src/lib/components/PublicationSection.svelte
index 4cafb7c..5eb4f24 100644
--- a/src/lib/components/PublicationSection.svelte
+++ b/src/lib/components/PublicationSection.svelte
@@ -42,7 +42,6 @@
     return leaves[index - 1];
   });
   let previousLeafHierarchy: Promise<NDKEvent[] | null> = $derived.by(async () => {
-    console.debug('Finding previous leaf hierarchy for ', address);
     if (!previousLeafEvent) {
       return null;
     }
@@ -50,7 +49,6 @@
   });
 
   let divergingBranches = $derived.by(async () => {
-    console.debug('Finding diverging branches for ', address);
     let [leafHierarchyValue, previousLeafHierarchyValue] = await Promise.all([leafHierarchy, previousLeafHierarchy]);
     
     const branches: [NDKEvent, number][] = [];

From 823d5223952a709028522fcab4b99b960cc7951e Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Wed, 30 Apr 2025 00:17:55 -0500
Subject: [PATCH 14/16] Comment out ToC placeholder

---
 src/lib/components/Publication.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Publication.svelte b/src/lib/components/Publication.svelte
index 8bcf5a4..7d53987 100644
--- a/src/lib/components/Publication.svelte
+++ b/src/lib/components/Publication.svelte
@@ -155,7 +155,7 @@
 
 
 {#if showTocButton && !showToc}
-  <Button
+  <!-- <Button
     class="btn-leather fixed top-20 left-4 h-6 w-6"
     outline={true}
     on:click={(ev) => {
@@ -165,7 +165,7 @@
   >
     <BookOutline />
   </Button>
-  <Tooltip>Show Table of Contents</Tooltip>
+  <Tooltip>Show Table of Contents</Tooltip> -->
 {/if}
 <!-- TODO: Use loader to build ToC. -->
 <!-- {#if showToc}

From da0a7dc3cd2e48a028f70cd991b8e7118c276f0b Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Wed, 30 Apr 2025 23:10:09 -0500
Subject: [PATCH 15/16] Polish up some styles

---
 src/app.css | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/app.css b/src/app.css
index 4c538de..cf8680e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -233,6 +233,10 @@
   .ul-leather li a {
     @apply text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500;
   }
+
+  .link {
+    @apply underline cursor-pointer hover:text-primary-400 dark:hover:text-primary-500;
+  }
 }
 
 @layer components {
@@ -319,5 +323,35 @@
         }
       }
     }
+
+    a {
+      @apply link;
+    }
+
+    .imageblock {
+      @apply flex flex-col items-center;
+
+      .title {
+        @apply text-sm text-center;
+      }
+    }
+
+    .stemblock {
+      @apply bg-gray-100 dark:bg-gray-900 p-4 rounded-lg;
+    }
+
+    table {
+      @apply w-full overflow-x-auto;
+
+      caption {
+        @apply text-sm;
+      }
+
+      thead, tbody {
+        th, td {
+          @apply border border-gray-200 dark:border-gray-700;
+        }
+      }
+    }
   }
 }

From 689bd61ae5b76868cb0485222195a2ebcc0ac252 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Thu, 1 May 2025 08:22:14 -0500
Subject: [PATCH 16/16] Add a "construction" banner to the base layout

---
 src/routes/+layout.svelte | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4cac70e..b7593c3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,6 +3,8 @@
   import Navigation from "$lib/components/Navigation.svelte";
   import { onMount } from "svelte";
   import { page } from "$app/stores";
+  import { Alert } from "flowbite-svelte";
+  import { HammerSolid } from "flowbite-svelte-icons";
 
   // Compute viewport height.
   $: displayHeight = window.innerHeight;
@@ -42,5 +44,11 @@
 
 <div class={'leather min-h-full w-full flex flex-col items-center'}>
   <Navigation class='sticky top-0' />
+  <Alert rounded={false} class='border-t-4 border-primary-500 text-gray-900 dark:text-gray-100 dark:border-primary-500 flex justify-left'>
+    <HammerSolid class='mr-2 h-5 w-5 text-primary-500 dark:text-primary-500' />
+    <span class='font-medium'>
+      Pardon our dust!  The publication view is currently using an experimental loader, and may be unstable.
+    </span>
+  </Alert>
   <slot />
 </div>