From 1ecc6bccbd7be6efb5ee138ad064fb69cfcb184e Mon Sep 17 00:00:00 2001 From: buttercat1791 Date: Wed, 30 Apr 2025 00:11:48 -0500 Subject: [PATCH] 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 = $derived.by(async () => + let leafEvent: Promise = $derived.by(async () => await publicationTree.getEvent(address)); let rootEvent: Promise = $derived.by(async () => await publicationTree.getEvent(rootAddress)); @@ -28,6 +29,8 @@ (await rootEvent)?.getMatchingTags('type')[0]?.[1]); let leafHierarchy: Promise = $derived.by(async () => await publicationTree.getHierarchy(address)); + let leafTitle: Promise = $derived.by(async () => + (await leafEvent)?.getMatchingTags('title')[0]?.[1]); let leafContent: Promise = $derived.by(async () => asciidoctor.convert((await leafEvent)?.content ?? '')); @@ -39,40 +42,40 @@ return leaves[index - 1]; }); let previousLeafHierarchy: Promise = $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 @@ -
- {#await Promise.all([leafContent, publicationType, divergingBranches])} +
+ {#await Promise.all([leafTitle, leafContent, leafHierarchy, publicationType, divergingBranches])} - {:then [leafContent, publicationType, divergingBranches]} + {:then [leafTitle, leafContent, leafHierarchy, publicationType, divergingBranches]} {#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}
- 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'} -

- {@html content} -

- {:else} -

- {@html content} -

- {/if} +
+ {@html content} +
{/snippet}