From 1acd8b3acf38ece94b1d6ebffeeafc29ad893b4f Mon Sep 17 00:00:00 2001 From: Silberengel Date: Mon, 19 May 2025 20:29:23 +0200 Subject: [PATCH] Tidied up and display rudimentary ToC. Updated screenshots. --- src/lib/components/Preview.svelte | 2 +- src/lib/components/Publication.svelte | 40 ++++++----- src/lib/components/PublicationSection.svelte | 2 +- src/lib/components/util/ArticleNav.svelte | 4 +- src/lib/components/util/Interactions.svelte | 2 +- src/lib/components/util/TocToggle.svelte | 70 ++++++++++++++----- src/lib/parser.ts | 5 ++ src/routes/new/compose/+page.svelte | 3 +- src/routes/new/edit/+page.svelte | 3 +- src/routes/start/+page.svelte | 15 ++-- static/screenshots/ToC_blog.png | Bin 0 -> 393850 bytes static/screenshots/ToC_normal.png | Bin 0 -> 210166 bytes 12 files changed, 96 insertions(+), 50 deletions(-) create mode 100644 static/screenshots/ToC_blog.png create mode 100644 static/screenshots/ToC_normal.png diff --git a/src/lib/components/Preview.svelte b/src/lib/components/Preview.svelte index b2ec5f4..d25ac71 100644 --- a/src/lib/components/Preview.svelte +++ b/src/lib/components/Preview.svelte @@ -299,7 +299,7 @@ {/if} {#if publicationType === 'blog' && depth === 1} - + {:else } {#key subtreeUpdateCount} {#each orderedChildren as id, index} diff --git a/src/lib/components/Publication.svelte b/src/lib/components/Publication.svelte index 38372fa..5df2fe4 100644 --- a/src/lib/components/Publication.svelte +++ b/src/lib/components/Publication.svelte @@ -5,20 +5,14 @@ Card, Sidebar, SidebarGroup, - SidebarItem, SidebarWrapper, - Skeleton, - TextPlaceholder, - Tooltip, Heading, } from "flowbite-svelte"; import { getContext, onDestroy, onMount } from "svelte"; import { CloseOutline, - BookOutline, ExclamationCircleOutline, } from "flowbite-svelte-icons"; - import { page } from "$app/state"; import type { NDKEvent } from "@nostr-dev-kit/ndk"; import PublicationSection from "./PublicationSection.svelte"; import type { PublicationTree } from "$lib/data_structures/publication_tree"; @@ -27,6 +21,7 @@ import BlogHeader from "$components/blog/BlogHeader.svelte"; import Interactions from "$components/util/Interactions.svelte"; import TocToggle from "$components/util/TocToggle.svelte"; + import { pharosInstance } from '$lib/parser'; let { rootAddress, publicationType, indexEvent } = $props<{ rootAddress: string; @@ -114,8 +109,10 @@ currentBlog = rootId; // set current blog values for publication render - currentBlogEvent = - leaves.find((i) => i.tagAddress() === currentBlog) ?? null; + if (leaves.length > 0) { + currentBlogEvent = + leaves.find((i) => i && i.tagAddress() === currentBlog) ?? null; + } } function showBlogHeader() { @@ -156,11 +153,14 @@ observer.disconnect(); }; }); + + // Whenever the publication changes, update rootId + let rootId = $derived($pharosInstance.getRootIndexId()); {#if publicationType !== "blog" || !isLeaf} - + {/if} @@ -171,7 +171,7 @@ >
- + {#each leaves as leaf, i} {#if leaf == null} @@ -215,12 +215,14 @@ {#each leaves as leaf, i} - + {#if leaf} + + {/if} {/each} {/if} @@ -231,7 +233,7 @@ class="flex flex-col p-4 max-w-3xl overflow-auto flex-grow-2 max-h-[calc(100vh-146px)] sticky top-[146px]" > {#each leaves as leaf, i} - {#if leaf.tagAddress() === currentBlog} + {#if leaf && leaf.tagAddress() === currentBlog}
@@ -245,7 +247,7 @@ ref={(el) => setLastElementRef(el, i)} /> - + {/if} @@ -273,7 +275,7 @@ alternative for other publications and when blog is not opened, but discussion is opened from the list --> - {#if showBlogHeader()} + {#if showBlogHeader() && currentBlog && currentBlogEvent} -
+
{#await Promise.all([leafTitle, leafContent, leafHierarchy, publicationType, divergingBranches])} {:then [leafTitle, leafContent, leafHierarchy, publicationType, divergingBranches]} diff --git a/src/lib/components/util/ArticleNav.svelte b/src/lib/components/util/ArticleNav.svelte index f7cdd29..8665ece 100644 --- a/src/lib/components/util/ArticleNav.svelte +++ b/src/lib/components/util/ArticleNav.svelte @@ -40,7 +40,7 @@ function shouldShowBack() { const vis = $publicationColumnVisibility; - return ['discussion', 'toc', 'inner'].some(key => vis[key]); + return ['discussion', 'toc', 'inner'].some(key => vis[key as keyof typeof vis]); } function backToMain() { @@ -140,7 +140,7 @@ {/if} {#if publicationType !== 'blog' && !$publicationColumnVisibility.discussion} - {/if} diff --git a/src/lib/components/util/Interactions.svelte b/src/lib/components/util/Interactions.svelte index 2f1c913..52e9bab 100644 --- a/src/lib/components/util/Interactions.svelte +++ b/src/lib/components/util/Interactions.svelte @@ -80,7 +80,7 @@ } -
+
diff --git a/src/lib/components/util/TocToggle.svelte b/src/lib/components/util/TocToggle.svelte index 7aaaa69..8fe9626 100644 --- a/src/lib/components/util/TocToggle.svelte +++ b/src/lib/components/util/TocToggle.svelte @@ -1,19 +1,15 @@