Browse Source
[WIP] New Publication Loader and Renderer
## Changes
- The new publication tree loader is used to dynamically load publication events.
- The Preview Svelte component is replaced by the PublicationSection component for read-only mode. Editing is not yet defined.
- Only part of a publication loads, initially. Scrolling within a publication causes additional sections of that publication to load.
- This just-in-time loading currently works only in one direction. Users start at the top of a publication and scroll down.
- Planned work will implement bookmarks to allow users to return to a saved point in the middle of a publication.
- The table of contents placeholder is removed.
- Tailwind utilities and components are used for styling within HTML generated from AsciiDoc sources.
- Asciidoctor extensions are scoped so as not to pollute the global scope.
master
Michael J
11 months ago
11 changed files with 423 additions and 77 deletions
@ -0,0 +1,62 @@
@@ -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. |
||||
|
||||
|
||||
@ -0,0 +1,108 @@
@@ -0,0 +1,108 @@
|
||||
<script lang='ts'> |
||||
import type { PublicationTree } from "$lib/data_structures/publication_tree"; |
||||
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: PublicationTree = getContext('publicationTree'); |
||||
const asciidoctor: Asciidoctor = getContext('asciidoctor'); |
||||
|
||||
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 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 ?? '')); |
||||
|
||||
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 () => { |
||||
if (!previousLeafEvent) { |
||||
return null; |
||||
} |
||||
return await publicationTree.getHierarchy(previousLeafEvent.tagAddress()); |
||||
}); |
||||
|
||||
let divergingBranches = $derived.by(async () => { |
||||
let [leafHierarchyValue, previousLeafHierarchyValue] = await Promise.all([leafHierarchy, previousLeafHierarchy]); |
||||
|
||||
const branches: [NDKEvent, number][] = []; |
||||
|
||||
if (!previousLeafHierarchyValue) { |
||||
for (let i = 0; i < leafHierarchyValue.length - 1; i++) { |
||||
branches.push([leafHierarchyValue[i], i]); |
||||
} |
||||
return branches; |
||||
} |
||||
|
||||
const minLength = Math.min(leafHierarchyValue.length, previousLeafHierarchyValue.length); |
||||
|
||||
// Find the first diverging node. |
||||
let divergingIndex = 0; |
||||
while ( |
||||
divergingIndex < minLength && |
||||
leafHierarchyValue[divergingIndex].tagAddress() === previousLeafHierarchyValue[divergingIndex].tagAddress() |
||||
) { |
||||
divergingIndex++; |
||||
} |
||||
|
||||
// Add all branches from the first diverging node to the current leaf. |
||||
for (let i = divergingIndex; i < leafHierarchyValue.length - 1; i++) { |
||||
branches.push([leafHierarchyValue[i], i]); |
||||
} |
||||
|
||||
return branches; |
||||
}); |
||||
|
||||
let sectionRef: HTMLElement; |
||||
|
||||
$effect(() => { |
||||
if (!sectionRef) { |
||||
return; |
||||
} |
||||
|
||||
ref(sectionRef); |
||||
}); |
||||
</script> |
||||
|
||||
<!-- TODO: Correctly handle events that are the start of a content section. --> |
||||
<section bind:this={sectionRef} class='publication-leather'> |
||||
{#await Promise.all([leafTitle, leafContent, leafHierarchy, publicationType, divergingBranches])} |
||||
<TextPlaceholder size='xxl' /> |
||||
{: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> |
||||
Loading…
Reference in new issue