@ -2,6 +2,7 @@
@@ -2,6 +2,7 @@
import {
Alert,
Button,
Card,
Sidebar,
SidebarGroup,
SidebarItem,
@ -9,21 +10,31 @@
@@ -9,21 +10,31 @@
Skeleton,
TextPlaceholder,
Tooltip,
Heading,
} from "flowbite-svelte";
import { getContext , onMount } from "svelte";
import { BookOutline , ExclamationCircleOutline } from "flowbite-svelte-icons";
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";
let { rootAddress , publicationType , indexEvent } = $props< {
rootAddress: string,
publicationType: string,
indexEvent: NDKEvent
import Details from "$components/util/Details.svelte";
import { publicationColumnVisibility } from "$lib/stores";
import BlogHeader from "$components/blog/BlogHeader.svelte";
import Interactions from "$components/util/Interactions.svelte";
import TocToggle from "$components/util/TocToggle.svelte";
let { rootAddress , publicationType , indexEvent } = $props< {
rootAddress: string;
publicationType: string;
indexEvent: NDKEvent;
}>();
const publicationTree = getContext('publicationTree') as PublicationTree;
const publicationTree = getContext("publicationTree" ) as PublicationTree;
// #region Loading
@ -76,157 +87,214 @@
@@ -76,157 +87,214 @@
// #endregion
// #region ToC
const tocBreakpoint = 1140;
// region Columns visibility
let currentBlog: null | string = $state(null);
let currentBlogEvent: null | NDKEvent = $state(null);
const isLeaf = $derived(indexEvent.kind === 30041);
let activeHash = $state(page.url.hash);
let currentBlog: null|string = $state(null);
function isInnerActive() {
return currentBlog !== null & & $publicationColumnVisibility.inner;
}
function isDefaultVisible() {
if (publicationType !== 'blog') {
return true;
} else {
return $publicationColumnVisibility.blog;
}
function closeDiscussion() {
publicationColumnVisibility.update((v) => ({ ... v , discussion : false } ));
}
function loadBlog(rootId: string) {
// depending on the size of the screen, also toggle blog list visibility
if (window.innerWidth < 1024 ) {
$publicationColumnVisibility.blog = false;
}
$publicationColumnVisibility.inner = true;
// depending on the size of the screen, also toggle blog list & discussion visibility
publicationColumnVisibility.update((current) => {
const updated = current;
if (window.innerWidth < 1024 ) {
updated.blog = false;
updated.discussion = false;
}
updated.inner = true;
return updated;
});
currentBlog = rootId;
// set current blog values for publication render
currentBlogEvent =
leaves.find((i) => i.tagAddress() === currentBlog) ?? null;
}
< / script >
{ #if $publicationColumnVisibility . details }
< div class = "flex flex-col space-y-4 max-w-xl flex-grow-1 p-2 bg-highlight" >
< Details event = { indexEvent } / >
< / div >
{ /if }
{ #if isDefaultVisible ()}
< div class = "flex flex-col space-y-4 overflow-auto
{ publicationType === 'blog' ? 'max-w-xl flex-grow-1' : 'max-w-2xl flex-grow-2' }
{ currentBlog !== null ? 'discreet' : '' }
">
< Preview { rootId } { publicationType } index = { 0 } onBlogUpdate= { loadBlog } />
< / div >
{ /if }
{ #if currentBlog !== null && $publicationColumnVisibility . inner }
{ #key currentBlog }
< div class = "flex flex-col space-y-4 max-w-3xl overflow-auto flex-grow-2" >
< Preview rootId = { currentBlog } { publicationType } index= { 0 } />
< / div >
{ /key }
{ /if }
{ #if $publicationColumnVisibility . social }
< div class = "flex flex-col space-y-4 max-w-xl overflow-auto flex-grow-1 bg-highlight" >
< p > Social column< / p >
< / div >
{ /if }
function showBlogHeader() {
return currentBlog & & currentBlogEvent & & window.innerWidth < 1140 ;
}
// #endregion
onDestroy(() => {
// reset visibility
publicationColumnVisibility.reset();
});
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 current columns depending on the publication type
const isBlog = publicationType === "blog";
publicationColumnVisibility.update((v) => ({
...v,
main: !isBlog,
blog: isBlog,
}));
if (isLeaf || isBlog) {
publicationColumnVisibility.update((v) => ({ ... v , toc : false } ));
}
// Set up the intersection observer.
observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && !isLoading && !isDone) {
loadMore(1);
}
});
}, { threshold : 0.5 } );
observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && !isLoading && !isDone) {
loadMore(1);
}
});
},
{ threshold : 0.5 } ,
);
loadMore(8);
return () => {
window.removeEventListener("hashchange", scrollToElementWithOffset);
window.removeEventListener("resize", setTocVisibilityOnResize);
window.removeEventListener("click", hideTocOnClick);
observer.disconnect();
};
});
< / script >
<!-- TODO: Keep track of already - loaded leaves. -->
<!-- TODO: Handle entering mid - document and scrolling up. -->
{ #if showTocButton && ! showToc }
<!-- <Button
class="btn-leather fixed top-20 left-4 h-6 w-6"
outline={ true }
on:click={( ev ) => {
showToc = true;
ev.stopPropagation();
}}
<!-- Table of contents -->
{ #if publicationType !== "blog" || ! isLeaf }
< TocToggle rootId = { rootAddress } / >
{ /if }
<!-- Default publications -->
{ #if $publicationColumnVisibility . main }
< div class = "flex flex-col p-4 space-y-4 overflow-auto max-w-2xl flex-grow-2" >
< div
class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
>
< Details event = { indexEvent } / >
< / div >
<!-- Publication -->
{ #each leaves as leaf , i }
{ #if leaf == null }
< Alert class = "flex space-x-2" >
< ExclamationCircleOutline class = "w-5 h-5" / >
Error loading content. One or more events could not be loaded.
< / Alert >
{ : else }
< PublicationSection
{ rootAddress }
{ leaves }
address={ leaf . tagAddress ()}
ref={( el ) => setLastElementRef ( el , i )}
/>
{ /if }
{ /each }
< div class = "flex justify-center my-4" >
{ #if isLoading }
< Button disabled color = "primary" > Loading...< / Button >
{ :else if ! isDone }
< Button color = "primary" on:click = {() => loadMore ( 1 )} > Show More </ Button >
{ : else }
< p class = "text-gray-500 dark:text-gray-400" >
You've reached the end of the publication.
< / p >
{ /if }
< / div >
< / div >
{ /if }
<!-- Blog list -->
{ #if $publicationColumnVisibility . blog }
< div
class="flex flex-col p-4 space-y-4 overflow-auto max-w-xl flex-grow-1
{ isInnerActive () ? 'discreet' : '' }
"
>
< BookOutline / >
< / Button >
< Tooltip > Show Table of Contents< / Tooltip > -->
< div
class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
>
< Details event = { indexEvent } / >
< / div >
<!-- List blog excerpts -->
{ #each leaves as leaf , i }
< BlogHeader
rootId={ leaf . tagAddress ()}
event={ leaf }
onBlogUpdate={ loadBlog }
active={ ! isInnerActive ()}
/>
{ /each }
< / div >
{ /if }
<!-- TODO: Use loader to build ToC. -->
<!-- {#if showToc}
< Sidebar class = 'sidebar-leather fixed top-20 left-0 px-4 w-60' { activeHash } >
< SidebarWrapper >
< SidebarGroup class = 'sidebar-group-leather overflow-y-scroll' >
{ #each events as event }
< SidebarItem
class='sidebar-item-leather'
label={ event . getMatchingTags ( 'title' )[ 0 ][ 1 ]}
href={ ` ${ $page . url . pathname } # ${ normalizeHashPath ( event . getMatchingTags ( 'title' )[ 0 ][ 1 ]) } ` }
{ #if isInnerActive ()}
{ #key currentBlog }
< div
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 }
< div
class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
>
< Details event = { leaf } / >
< / div >
< PublicationSection
{ rootAddress }
{ leaves }
address={ leaf . tagAddress ()}
ref={( el ) => setLastElementRef ( el , i )}
/>
{ /each }
< Card class = "ArticleBox !hidden card-leather min-w-full grid mt-4" >
< Interactions rootId = { currentBlog } / >
< / Card >
{ /if }
{ /each }
< / div >
{ /key }
{ /if }
{ #if $publicationColumnVisibility . discussion }
< Sidebar class = "sidebar-leather right-0 md:!pl-8" >
< SidebarWrapper >
< SidebarGroup class = "sidebar-group-leather" >
< div class = "flex justify-between items-baseline" >
< Heading tag = "h1" class = "h-leather !text-lg" > Discussion< / Heading >
< Button
class="btn-leather hidden sm:flex z-30 !p-1 bg-primary-50 dark:bg-gray-800"
outline
onclick={ closeDiscussion }
>
< CloseOutline / >
< / Button >
< / div >
< div class = "flex flex-col space-y-4" >
<!-- TODO
alternative for other publications and
when blog is not opened, but discussion is opened from the list
-->
{ #if showBlogHeader ()}
< BlogHeader
rootId={ currentBlog }
event={ currentBlogEvent }
onBlogUpdate={ loadBlog }
active={ true }
/>
{ /if }
< div class = "flex flex-col w-full space-y-4" >
< Card class = "ArticleBox card-leather w-full grid max-w-xl" >
< div class = "flex flex-col my-2" >
< span > Unknown< / span >
< span class = "text-gray-500" > 1.1.1970< / span >
< / div >
< div class = "flex flex-col flex-grow space-y-4" >
This is a very intelligent comment placeholder that applies to
all the content equally well.
< / div >
< / Card >
< / div >
< / div >
< / SidebarGroup >
< / SidebarWrapper >
< / Sidebar >
{ /if } -->
< div class = "flex flex-col space-y-4 max-w-2xl pb-10 px-4 sm:px-6 md:px-8" >
{ #each leaves as leaf , i }
{ #if leaf == null }
< Alert class = 'flex space-x-2' >
< ExclamationCircleOutline class = 'w-5 h-5' / >
Error loading content. One or more events could not be loaded.
< / Alert >
{ : else }
< PublicationSection
rootAddress={ rootAddress }
leaves={ leaves }
address={ leaf . tagAddress ()}
ref={( el ) => setLastElementRef ( el , i )}
/>
{ /if }
{ /each }
< div class = "flex justify-center my-4" >
{ #if isLoading }
< Button disabled color = "primary" >
Loading...
< / Button >
{ :else if ! isDone }
< Button color = "primary" on:click = {() => loadMore ( 1 )} >
Show More
< / Button >
{ : else }
< p class = "text-gray-500 dark:text-gray-400" > You've reached the end of the publication.< / p >
{ /if }
< / div >
< / div >
< style >
:global(.sidebar-group-leather) {
max-height: calc(100vh - 8rem);
}
< / style >
{ /if }
