From 3969a60e0709445b9cfeaa7cd7060cc6a52dc784 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= Date: Mon, 7 Apr 2025 11:07:47 +0200 Subject: [PATCH] Switch columns and styles, additional navigation --- src/app.css | 16 ++- src/lib/components/Navigation.svelte | 2 +- src/lib/components/Preview.svelte | 118 +++++++++++++++--- src/lib/components/Publication.svelte | 139 ++++++---------------- src/lib/components/util/ArticleNav.svelte | 33 +++-- src/lib/stores.ts | 10 ++ src/styles/publications.css | 29 +++++ tailwind.config.cjs | 8 ++ 8 files changed, 217 insertions(+), 138 deletions(-) diff --git a/src/app.css b/src/app.css index b9ea3bc..3d8be5c 100644 --- a/src/app.css +++ b/src/app.css @@ -55,7 +55,11 @@ /* Content */ main { - @apply max-w-full; + @apply max-w-full flex; + } + + main.blog { + max-height: calc(100vh - 130px); } main.main-leather, @@ -69,9 +73,9 @@ @apply bg-primary-0 dark:bg-primary-1000 text-gray-800 dark:text-gray-300 p-2 rounded; } - div.note-leather:hover:not(:has(.note-leather:hover)), - p.note-leather:hover:not(:has(.note-leather:hover)), - section.note-leather:hover:not(:has(.note-leather:hover)) { + .edit div.note-leather:hover:not(:has(.note-leather:hover)), + .edit p.note-leather:hover:not(:has(.note-leather:hover)), + section.edit.note-leather:hover:not(:has(.note-leather:hover)) { @apply hover:bg-primary-100 dark:hover:bg-primary-800; } @@ -128,6 +132,10 @@ } /* Navbar */ + nav.Navbar.navbar-main { + @apply z-30; + } + nav.navbar-leather { @apply bg-primary-0 dark:bg-primary-1000 z-10; } diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte index 2ac6133..ca6cbbb 100644 --- a/src/lib/components/Navigation.svelte +++ b/src/lib/components/Navigation.svelte @@ -7,7 +7,7 @@ let leftMenuOpen = $state(false); - +

Alexandria

diff --git a/src/lib/components/Preview.svelte b/src/lib/components/Preview.svelte index f7dfe03..44e6c83 100644 --- a/src/lib/components/Preview.svelte +++ b/src/lib/components/Preview.svelte @@ -15,8 +15,10 @@ oncursorrelease, parentId, rootId, + index, sectionClass, publicationType, + onBlogUpdate } = $props<{ allowEditing?: boolean; depth?: number; @@ -26,14 +28,19 @@ oncursorrelease?: (e: MouseEvent) => void; parentId?: string | null | undefined; rootId: string; + index: number; sectionClass?: string; publicationType?: string; + onBlogUpdate?: any; }>(); let currentContent: string = $state($pharosInstance.getContent(rootId)); let title: string | undefined = $state($pharosInstance.getIndexTitle(rootId)); let orderedChildren: string[] = $state($pharosInstance.getOrderedChildIds(rootId)); + let blogEntries = $state(Array.from($pharosInstance.getBlogEntries())); + let metadata = $state($pharosInstance.getIndexMetadata()); + let isEditing: boolean = $state(false); let hasCursor: boolean = $state(false); let childHasCursor: boolean = $state(false); @@ -85,6 +92,44 @@ } }); + function byline(rootId: string, index: number) { + console.log(rootId, index, blogEntries); + const event = blogEntries[index][1]; + const author = event ? event.getMatchingTags("author")[0][1] : ''; + return author ?? ""; + } + + function hasCoverImage(rootId: string, index: number) { + console.log(rootId); + const event = blogEntries[index][1]; + const image = event && event.getMatchingTags("image")[0] ? event.getMatchingTags("image")[0][1] : ''; + return image ?? ''; + } + + function publishedAt(rootId: string, index: number) { + console.log(rootId, index); + console.log(blogEntries[index]); + const event = blogEntries[index][1]; + const date = event.created_at ? new Date(event.created_at * 1000) : ''; + if (date !== '') { + const formattedDate = new Intl.DateTimeFormat("en-US", { + year: "numeric", + month: "short", + day: "2-digit", + }).format(date); + return formattedDate ?? ""; + } + return ''; + } + + function readBlog(rootId:string) { + onBlogUpdate?.(rootId); + } + + function propagateBlogUpdate(rootId:string) { + onBlogUpdate?.(rootId); + } + function handleMouseEnter(e: MouseEvent) { hasCursor = true; if (oncursorcapture) { @@ -177,11 +222,38 @@ {/if} {/snippet} +{#snippet coverImage(rootId: string, index: number, depth: number)} + {#if hasCoverImage(rootId, index)} +
+ +
+ {/if} +{/snippet} + +{#snippet blogMetadata(rootId: string, index: number)} +

+ by {byline(rootId, index)} +

+

+ {publishedAt(rootId, index)} +

+{/snippet} + +{#snippet readMoreLink(rootId: string, index: number)} +

+ +

+{/snippet} + {#snippet contentParagraph(content: string, publicationType: string)} {#if publicationType === 'novel'}

{@html content}

+ {:else if publicationType === 'blog'} +

+ {@html content} +

{:else}

{@html content} @@ -240,25 +312,37 @@ {:else} - {@render sectionHeading(title!, depth)} + {#if publicationType === 'blog' && depth === 1} + {@render coverImage(rootId, index, depth)} + {@render sectionHeading(title!, depth)} + {@render blogMetadata(rootId, index)} + {:else} + {@render sectionHeading(title!, depth)} + {/if} {/if} - {#key subtreeUpdateCount} - {#each orderedChildren as id, index} - - {/each} - {/key} + {#if publicationType === 'blog' && depth === 1} + {@render readMoreLink(rootId, index)} + {:else } + {#key subtreeUpdateCount} + {#each orderedChildren as id, index} + + {/each} + {/key} + {/if}

{/if} {#if allowEditing && depth > 0} diff --git a/src/lib/components/Publication.svelte b/src/lib/components/Publication.svelte index 0794cc9..80ade5d 100644 --- a/src/lib/components/Publication.svelte +++ b/src/lib/components/Publication.svelte @@ -1,19 +1,9 @@ - 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); +{#if $publicationColumnVisibility.details} +
+ +
+{/if} - return () => { - window.removeEventListener("hashchange", scrollToElementWithOffset); - window.removeEventListener("resize", setTocVisibilityOnResize); - window.removeEventListener("click", hideTocOnClick); - }; - }); - +{#if isDefaultVisible()} +
+ +
+{/if} -{#if showTocButton && !showToc} - - Show Table of Contents +{#if currentBlog !== null && $publicationColumnVisibility.inner } + {#key currentBlog } +
+ +
+ {/key} {/if} - - -
- -