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. + + diff --git a/deno.lock b/deno.lock index f113237..c97022c 100644 --- a/deno.lock +++ b/deno.lock @@ -2887,10 +2887,11 @@ "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", + "npm:@types/d3@^7.4.3", "npm:@types/he@1.2", "npm:@types/node@22", "npm:asciidoctor@3.0", diff --git a/package.json b/package.json index eab2229..b0f1151 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/d3": "^7.4.3", "@types/he": "1.2.x", diff --git a/src/app.css b/src/app.css index 314408a..cf8680e 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,47 @@ } } +/* 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; + } + + .link { + @apply underline cursor-pointer hover:text-primary-400 dark:hover:text-primary-500; + } +} + @layer components { /* Legend */ .leather-legend { @@ -223,4 +259,99 @@ .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; + } + } + } + } + + 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; + } + } + } + } } diff --git a/src/app.d.ts b/src/app.d.ts index 731967b..1b260cf 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -1,14 +1,18 @@ // 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 { // interface Error {} // interface Locals {} interface PageData { - ndk?: NDK; - parser?: Pharos; waitable?: Promise; publicationType?: string; + indexEvent?: NDKEvent; + url?: URL; } // interface Platform {} } diff --git a/src/lib/components/Publication.svelte b/src/lib/components/Publication.svelte index e61cbb3..7d53987 100644 --- a/src/lib/components/Publication.svelte +++ b/src/lib/components/Publication.svelte @@ -9,24 +9,65 @@ 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([]); + let isLoading = $state(false); + let lastElementRef = $state(null); + + let observer: IntersectionObserver; + + async function loadMore(count: number) { + isLoading = true; + + for (let i = 0; i < count; i++) { + const nextItem = await publicationTree.next(); + if (leaves.includes(nextItem.value) || nextItem.done) { + isLoading = false; + return; + } + 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); @@ -81,28 +122,40 @@ } } + // #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(4); + } + }); + }, { threshold: 0.5 }); + loadMore(8); + return () => { window.removeEventListener("hashchange", scrollToElementWithOffset); window.removeEventListener("resize", setTocVisibilityOnResize); window.removeEventListener("click", hideTocOnClick); + + observer.disconnect(); }; }); {#if showTocButton && !showToc} - - Show Table of Contents + Show Table of Contents --> {/if} - +
- + {#each leaves as leaf, i} + setLastElementRef(el, i)} + /> + {/each}