-
-
diff --git a/src/lib/components/Publication.svelte b/src/lib/components/publications/Publication.svelte
similarity index 72%
rename from src/lib/components/Publication.svelte
rename to src/lib/components/publications/Publication.svelte
index 11d90e6..9a0dd70 100644
--- a/src/lib/components/Publication.svelte
+++ b/src/lib/components/publications/Publication.svelte
@@ -7,6 +7,7 @@
SidebarGroup,
SidebarWrapper,
Heading,
+ CloseButton,
} from "flowbite-svelte";
import { getContext, onDestroy, onMount } from "svelte";
import {
@@ -15,13 +16,13 @@
} from "flowbite-svelte-icons";
import type { NDKEvent } from "@nostr-dev-kit/ndk";
import PublicationSection from "./PublicationSection.svelte";
- import type { PublicationTree } from "$lib/data_structures/publication_tree";
import Details from "$components/util/Details.svelte";
import { publicationColumnVisibility } from "$lib/stores";
import BlogHeader from "$components/cards/BlogHeader.svelte";
import Interactions from "$components/util/Interactions.svelte";
- import TocToggle from "$components/util/TocToggle.svelte";
- import { pharosInstance } from "$lib/parser";
+ import type { SveltePublicationTree } from "./svelte_publication_tree.svelte";
+ import TableOfContents from "./TableOfContents.svelte";
+ import type { TableOfContents as TocType } from "./table_of_contents.svelte";
let { rootAddress, publicationType, indexEvent } = $props<{
rootAddress: string;
@@ -29,16 +30,16 @@
indexEvent: NDKEvent;
}>();
- const publicationTree = getContext("publicationTree") as PublicationTree;
+ const publicationTree = getContext("publicationTree") as SveltePublicationTree;
+ const toc = getContext("toc") as TocType;
// #region Loading
- // TODO: Test load handling.
-
let leaves = $state>([]);
let isLoading = $state(false);
let isDone = $state(false);
let lastElementRef = $state(null);
+ let activeAddress = $state(null);
let observer: IntersectionObserver;
@@ -82,7 +83,8 @@
// #endregion
- // region Columns visibility
+ // #region Columns visibility
+
let currentBlog: null | string = $state(null);
let currentBlogEvent: null | NDKEvent = $state(null);
const isLeaf = $derived(indexEvent.kind === 30041);
@@ -91,6 +93,10 @@
return currentBlog !== null && $publicationColumnVisibility.inner;
}
+ function closeToc() {
+ publicationColumnVisibility.update((v) => ({ ...v, toc: false }));
+ }
+
function closeDiscussion() {
publicationColumnVisibility.update((v) => ({ ...v, discussion: false }));
}
@@ -119,6 +125,33 @@
return currentBlog && currentBlogEvent && window.innerWidth < 1140;
}
+ // #endregion
+
+ /**
+ * Performs actions on the DOM element for a publication tree leaf when it is mounted.
+ *
+ * @param el The DOM element that was mounted.
+ * @param address The address of the event that was mounted.
+ */
+ function onPublicationSectionMounted(el: HTMLElement, address: string) {
+ // Update last element ref for the intersection observer.
+ setLastElementRef(el, leaves.length);
+
+ // Michael J - 08 July 2025 - NOTE: Updating the ToC from here somewhat breaks separation of
+ // concerns, since the TableOfContents component is primarily responsible for working with the
+ // ToC data structure. However, the Publication component has direct access to the needed DOM
+ // element already, and I want to avoid complicated callbacks between the two components.
+ // Update the ToC from the contents of the leaf section.
+ const entry = toc.getEntry(address);
+ if (!entry) {
+ console.warn(`[Publication] No parent found for ${address}`);
+ return;
+ }
+ toc.buildTocFromDocument(el, entry);
+ }
+
+ // #region Lifecycle hooks
+
onDestroy(() => {
// reset visibility
publicationColumnVisibility.reset();
@@ -154,13 +187,27 @@
};
});
- // Whenever the publication changes, update rootId
- let rootId = $derived($pharosInstance.getRootIndexId());
+ // #endregion
-{#if publicationType !== "blog" || !isLeaf}
-
+{#if publicationType !== 'blog' || !isLeaf}
+ {#if $publicationColumnVisibility.toc}
+
+
+ publicationTree.setBookmark(address)}
+ />
+
+ {/if}
{/if}
@@ -179,11 +226,12 @@
Error loading content. One or more events could not be loaded.
{:else}
+ {@const address = leaf.tagAddress()}
setLastElementRef(el, i)}
+ {address}
+ ref={(el) => onPublicationSectionMounted(el, address)}
/>
{/if}
{/each}
@@ -193,7 +241,7 @@
{:else if !isDone}
{:else}
-
This is a very intelligent comment placeholder that applies to
diff --git a/src/lib/components/PublicationFeed.svelte b/src/lib/components/publications/PublicationFeed.svelte
similarity index 100%
rename from src/lib/components/PublicationFeed.svelte
rename to src/lib/components/publications/PublicationFeed.svelte
diff --git a/src/lib/components/publications/PublicationHeader.svelte b/src/lib/components/publications/PublicationHeader.svelte
new file mode 100644
index 0000000..25dfdc4
--- /dev/null
+++ b/src/lib/components/publications/PublicationHeader.svelte
@@ -0,0 +1,64 @@
+
+
+{#if title != null && href != null}
+
+ {#if image}
+
+
+{/if}
diff --git a/src/lib/components/publications/PublicationSection.svelte b/src/lib/components/publications/PublicationSection.svelte
new file mode 100644
index 0000000..7b24fb3
--- /dev/null
+++ b/src/lib/components/publications/PublicationSection.svelte
@@ -0,0 +1,122 @@
+
+
+
+ {#await Promise.all([leafTitle, leafContent, leafHierarchy, publicationType, divergingBranches])}
+
+ {:then [leafTitle, leafContent, leafHierarchy, publicationType, divergingBranches]}
+ {#each divergingBranches as [branch, depth]}
+ {@render sectionHeading(getMatchingTags(branch, '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}
+
diff --git a/src/lib/components/publications/TableOfContents.svelte b/src/lib/components/publications/TableOfContents.svelte
new file mode 100644
index 0000000..08097ed
--- /dev/null
+++ b/src/lib/components/publications/TableOfContents.svelte
@@ -0,0 +1,77 @@
+
+
+
+
+
+ {#each entries as entry}
+ {@const address = entry.address}
+ {@const expanded = toc.expandedMap.get(address) ?? false}
+ {@const isLeaf = toc.leaves.has(address)}
+ {#if isLeaf}
+ onSectionFocused?.(address)}
+ />
+ {:else}
+ {@const childDepth = depth + 1}
+ expanded,
+ (open) => setEntryExpanded(address, open)
+ }
+ >
+
+
+ {/if}
+ {/each}
+
diff --git a/src/lib/components/publications/svelte_publication_tree.svelte.ts b/src/lib/components/publications/svelte_publication_tree.svelte.ts
new file mode 100644
index 0000000..0c1eefc
--- /dev/null
+++ b/src/lib/components/publications/svelte_publication_tree.svelte.ts
@@ -0,0 +1,111 @@
+import { SvelteSet } from "svelte/reactivity";
+import { PublicationTree } from "../../data_structures/publication_tree.ts";
+import NDK, { NDKEvent } from "@nostr-dev-kit/ndk";
+
+export class SveltePublicationTree {
+ resolvedAddresses: SvelteSet = new SvelteSet();
+
+ #publicationTree: PublicationTree;
+ #nodeResolvedObservers: Array<(address: string) => void> = [];
+ #bookmarkMovedObservers: Array<(address: string) => void> = [];
+
+ constructor(rootEvent: NDKEvent, ndk: NDK) {
+ this.#publicationTree = new PublicationTree(rootEvent, ndk);
+
+ this.#publicationTree.onNodeResolved(this.#handleNodeResolved);
+ this.#publicationTree.onBookmarkMoved(this.#handleBookmarkMoved);
+ }
+
+ // #region Proxied Public Methods
+
+ getChildAddresses(address: string): Promise> {
+ return this.#publicationTree.getChildAddresses(address);
+ }
+
+ getEvent(address: string): Promise {
+ return this.#publicationTree.getEvent(address);
+ }
+
+ getHierarchy(address: string): Promise {
+ return this.#publicationTree.getHierarchy(address);
+ }
+
+ async getParent(address: string): Promise {
+ const hierarchy = await this.getHierarchy(address);
+
+ // The last element in the hierarchy is the event with the given address, so the parent is the
+ // second to last element.
+ return hierarchy.at(-2) ?? null;
+ }
+
+ setBookmark(address: string) {
+ this.#publicationTree.setBookmark(address);
+ }
+
+ /**
+ * Registers an observer function that is invoked whenever a new node is resolved.
+ * @param observer The observer function.
+ */
+ onNodeResolved(observer: (address: string) => void) {
+ this.#nodeResolvedObservers.push(observer);
+ }
+
+ /**
+ * Registers an observer function that is invoked whenever the bookmark is moved.
+ * @param observer The observer function.
+ */
+ onBookmarkMoved(observer: (address: string) => void) {
+ this.#bookmarkMovedObservers.push(observer);
+ }
+
+ // #endregion
+
+ // #region Proxied Async Iterator Methods
+
+ [Symbol.asyncIterator](): AsyncIterator {
+ return this;
+ }
+
+ next(): Promise> {
+ return this.#publicationTree.next();
+ }
+
+ previous(): Promise> {
+ return this.#publicationTree.previous();
+ }
+
+ // #endregion
+
+ // #region Private Methods
+
+ /**
+ * Observer function that is invoked whenever a new node is resolved on the publication tree.
+ *
+ * @param address The address of the resolved node.
+ *
+ * This member is declared as an arrow function to ensure that the correct `this` context is
+ * used when the function is invoked in this class's constructor.
+ */
+ #handleNodeResolved = (address: string) => {
+ this.resolvedAddresses.add(address);
+ for (const observer of this.#nodeResolvedObservers) {
+ observer(address);
+ }
+ }
+
+ /**
+ * Observer function that is invoked whenever the bookmark is moved on the publication tree.
+ *
+ * @param address The address of the new bookmark.
+ *
+ * This member is declared as an arrow function to ensure that the correct `this` context is
+ * used when the function is invoked in this class's constructor.
+ */
+ #handleBookmarkMoved = (address: string) => {
+ for (const observer of this.#bookmarkMovedObservers) {
+ observer(address);
+ }
+ }
+
+ // #endregion
+}
\ No newline at end of file
diff --git a/src/lib/components/publications/table_of_contents.svelte.ts b/src/lib/components/publications/table_of_contents.svelte.ts
new file mode 100644
index 0000000..0e4e310
--- /dev/null
+++ b/src/lib/components/publications/table_of_contents.svelte.ts
@@ -0,0 +1,292 @@
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { SveltePublicationTree } from './svelte_publication_tree.svelte.ts';
+import type { NDKEvent } from '../../utils/nostrUtils.ts';
+import { indexKind } from '../../consts.ts';
+
+export interface TocEntry {
+ address: string;
+ title: string;
+ href?: string;
+ children: TocEntry[];
+ parent?: TocEntry;
+ depth: number;
+ childrenResolved: boolean;
+ resolveChildren: () => Promise;
+}
+
+/**
+ * Maintains a table of contents (ToC) for a `SveltePublicationTree`. Since publication trees are
+ * conceptually infinite and lazy-loading, the ToC represents only the portion of the tree that has
+ * been "discovered". The ToC is updated as new nodes are resolved within the publication tree.
+ *
+ * @see SveltePublicationTree
+ */
+export class TableOfContents {
+ public addressMap: SvelteMap = new SvelteMap();
+ public expandedMap: SvelteMap = new SvelteMap();
+ public leaves: SvelteSet = new SvelteSet();
+
+ #root: TocEntry | null = null;
+ #publicationTree: SveltePublicationTree;
+ #pagePathname: string;
+
+ /**
+ * Constructs a `TableOfContents` from a `SveltePublicationTree`.
+ *
+ * @param rootAddress The address of the root event.
+ * @param publicationTree The SveltePublicationTree instance.
+ * @param pagePathname The current page pathname for href generation.
+ */
+ constructor(rootAddress: string, publicationTree: SveltePublicationTree, pagePathname: string) {
+ this.#publicationTree = publicationTree;
+ this.#pagePathname = pagePathname;
+ this.#init(rootAddress);
+ }
+
+ // #region Public Methods
+
+ /**
+ * Returns the root entry of the ToC.
+ *
+ * @returns The root entry of the ToC, or `null` if the ToC has not been initialized.
+ */
+ getRootEntry(): TocEntry | null {
+ return this.#root;
+ }
+
+ getEntry(address: string): TocEntry | undefined {
+ return this.addressMap.get(address);
+ }
+
+ /**
+ * Builds a table of contents from the DOM subtree rooted at `parentElement`.
+ *
+ * @param parentElement The root of the DOM subtree containing the content to be added to the
+ * ToC.
+ * @param parentAddress The address of the event corresponding to the DOM subtree root indicated
+ * by `parentElement`.
+ *
+ * This function is intended for use on segments of HTML markup that are not directly derived
+ * from a structure publication of the kind supported by `PublicationTree`. It may be used to
+ * produce a table of contents from the contents of a kind `30041` event with AsciiDoc markup, or
+ * from a kind `30023` event with Markdown content.
+ */
+ buildTocFromDocument(
+ parentElement: HTMLElement,
+ parentEntry: TocEntry,
+ ) {
+ parentElement
+ .querySelectorAll(`h${parentEntry.depth}`)
+ .forEach((header) => {
+ // TODO: Correctly update ToC state from DOM.
+ const title = header.textContent?.trim();
+ const id = header.id;
+
+ // Only create an entry if the header has an ID and a title.
+ if (id && title) {
+ const href = `${this.#pagePathname}#${id}`;
+
+ // TODO: Check this logic.
+ const tocEntry: TocEntry = {
+ address: parentEntry.address,
+ title,
+ href,
+ depth: parentEntry.depth + 1,
+ children: [],
+ childrenResolved: true,
+ resolveChildren: () => Promise.resolve(),
+ };
+ parentEntry.children.push(tocEntry);
+ this.expandedMap.set(tocEntry.address, false);
+
+ this.buildTocFromDocument(header, tocEntry);
+ }
+ });
+ }
+
+ // #endregion
+
+ // #region Iterator Methods
+
+ /**
+ * Iterates over all ToC entries in depth-first order.
+ */
+ *[Symbol.iterator](): IterableIterator {
+ function* traverse(entry: TocEntry | null): IterableIterator {
+ if (!entry) {
+ return;
+ }
+
+ yield entry;
+
+ if (entry.children) {
+ for (const child of entry.children) {
+ yield* traverse(child);
+ }
+ }
+ }
+
+ yield* traverse(this.#root);
+ }
+
+ // #endregion
+
+ // #region Private Methods
+
+ /**
+ * Initializes the ToC from the associated publication tree.
+ *
+ * @param rootAddress The address of the publication's root event.
+ *
+ * Michael J - 07 July 2025 - NOTE: Since the publication tree is conceptually infinite and
+ * lazy-loading, the ToC is not guaranteed to contain all the nodes at any layer until the
+ * publication has been fully resolved.
+ *
+ * Michael J - 07 July 2025 - TODO: If the relay provides event metadata, use the metadata to
+ * initialize the ToC with all of its first-level children.
+ */
+ async #init(rootAddress: string) {
+ const rootEvent = await this.#publicationTree.getEvent(rootAddress);
+ if (!rootEvent) {
+ throw new Error(`[ToC] Root event ${rootAddress} not found.`);
+ }
+
+ this.#root = await this.#buildTocEntry(rootAddress);
+
+ this.addressMap.set(rootAddress, this.#root);
+
+ // Handle any other nodes that have already been resolved in parallel.
+ await Promise.all(
+ Array.from(this.#publicationTree.resolvedAddresses).map((address) =>
+ this.#buildTocEntryFromResolvedNode(address)
+ )
+ );
+
+ // Set up an observer to handle progressive resolution of the publication tree.
+ this.#publicationTree.onNodeResolved((address: string) => {
+ this.#buildTocEntryFromResolvedNode(address);
+ });
+ }
+
+ #getTitle(event: NDKEvent | null): string {
+ if (!event) {
+ // TODO: What do we want to return in this case?
+ return '[untitled]';
+ }
+ const titleTag = event.getMatchingTags?.('title')?.[0]?.[1];
+ return titleTag || event.tagAddress() || '[untitled]';
+ }
+
+ async #buildTocEntry(address: string): Promise {
+ // Michael J - 07 July 2025 - NOTE: This arrow function is nested so as to use its containing
+ // scope in its operation. Do not move it to the top level without ensuring it still has access
+ // to the necessary variables.
+ const resolver = async () => {
+ if (entry.childrenResolved) {
+ return;
+ }
+
+ const event = await this.#publicationTree.getEvent(entry.address);
+ if (event?.kind !== indexKind) {
+ // TODO: Build ToC entries from HTML markup in this case.
+ return;
+ }
+
+ const childAddresses = await this.#publicationTree.getChildAddresses(entry.address);
+ for (const childAddress of childAddresses) {
+ if (!childAddress) {
+ continue;
+ }
+
+ // Michael J - 16 June 2025 - This duplicates logic in the outer function, but is necessary
+ // here so that we can determine whether to render an entry as a leaf before it is fully
+ // resolved.
+ if (childAddress.split(':')[0] !== indexKind.toString()) {
+ this.leaves.add(childAddress);
+ }
+
+ // Michael J - 05 June 2025 - The `getChildAddresses` method forces node resolution on the
+ // publication tree. This is acceptable here, because the tree is always resolved
+ // top-down. Therefore, by the time we handle a node's resolution, its parent and
+ // siblings have already been resolved.
+ const childEntry = await this.#buildTocEntry(childAddress);
+ childEntry.parent = entry;
+ childEntry.depth = entry.depth + 1;
+ entry.children.push(childEntry);
+ this.addressMap.set(childAddress, childEntry);
+ }
+
+ await this.#matchChildrenToTagOrder(entry);
+
+ entry.childrenResolved = true;
+ }
+
+ const event = await this.#publicationTree.getEvent(address);
+ if (!event) {
+ throw new Error(`[ToC] Event ${address} not found.`);
+ }
+
+ const depth = (await this.#publicationTree.getHierarchy(address)).length;
+
+ const entry: TocEntry = {
+ address,
+ title: this.#getTitle(event),
+ href: `${this.#pagePathname}#${address}`,
+ children: [],
+ depth,
+ childrenResolved: false,
+ resolveChildren: resolver,
+ };
+ this.expandedMap.set(address, false);
+
+ // Michael J - 16 June 2025 - We determine whether to add a leaf both here and in the inner
+ // resolver function. The resolver function is called when entries are resolved by expanding
+ // a ToC entry, and we'll reach the block below when entries are resolved by the publication
+ // tree.
+ if (event.kind !== indexKind) {
+ this.leaves.add(address);
+ }
+
+ return entry;
+ }
+
+ /**
+ * Reorders the children of a ToC entry to match the order of 'a' tags in the corresponding
+ * Nostr index event.
+ *
+ * @param entry The ToC entry to reorder.
+ *
+ * This function has a time complexity of `O(n log n)`, where `n` is the number of children the
+ * parent event has. Average size of `n` is small enough to be negligible.
+ */
+ async #matchChildrenToTagOrder(entry: TocEntry) {
+ const parentEvent = await this.#publicationTree.getEvent(entry.address);
+ if (parentEvent?.kind === indexKind) {
+ const tagOrder = parentEvent.getMatchingTags('a').map(tag => tag[1]);
+ const addressToOrdinal = new Map();
+
+ // Build map of addresses to their ordinals from tag order
+ tagOrder.forEach((address, index) => {
+ addressToOrdinal.set(address, index);
+ });
+
+ entry.children.sort((a, b) => {
+ const aOrdinal = addressToOrdinal.get(a.address) ?? Number.MAX_SAFE_INTEGER;
+ const bOrdinal = addressToOrdinal.get(b.address) ?? Number.MAX_SAFE_INTEGER;
+ return aOrdinal - bOrdinal;
+ });
+ }
+ }
+
+ #buildTocEntryFromResolvedNode(address: string) {
+ if (this.addressMap.has(address)) {
+ return;
+ }
+
+ this.#buildTocEntry(address).then((entry) => {
+ this.addressMap.set(address, entry);
+ });
+ }
+
+ // #endregion
+}
diff --git a/src/lib/components/util/ArticleNav.svelte b/src/lib/components/util/ArticleNav.svelte
index 1fcc001..24d2137 100644
--- a/src/lib/components/util/ArticleNav.svelte
+++ b/src/lib/components/util/ArticleNav.svelte
@@ -1,41 +1,35 @@
-
-