diff --git a/src/app.css b/src/app.css index 79655e8..ae4ac69 100644 --- a/src/app.css +++ b/src/app.css @@ -1,5 +1,5 @@ @import './styles/base.css'; -@import 'styles/scrollbar.css'; +@import './styles/scrollbar.css'; @import './styles/publications.css'; @import './styles/visualize.css'; @@ -58,10 +58,13 @@ @apply max-w-full flex; } + main.publication { + @apply mt-[70px]; + } + /* To scroll columns independently */ main.publication.blog { @apply w-full sm:w-auto min-h-full; - max-height: calc(100vh - 146px); } main.main-leather, @@ -259,6 +262,10 @@ @apply max-h-72; } + .tags span { + @apply bg-primary-50 text-primary-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-primary-900 dark:text-primary-200; + } + } @layer components { @@ -379,7 +386,6 @@ } .line-ellipsis { - max-width: 100%; overflow: hidden; text-overflow: ellipsis; } \ No newline at end of file diff --git a/src/lib/components/Login.svelte b/src/lib/components/Login.svelte index 1456149..0149a0d 100644 --- a/src/lib/components/Login.svelte +++ b/src/lib/components/Login.svelte @@ -46,7 +46,7 @@ {#if $ndkSignedIn} {:else} - + import { - Button, Card, Img, + Button, Card, Sidebar, SidebarGroup, SidebarItem, SidebarWrapper, Skeleton, TextPlaceholder, - Tooltip, + Tooltip } from "flowbite-svelte"; - import { getContext, onMount } from "svelte"; + import { HeartOutline } from 'flowbite-svelte-icons'; + import { getContext, onDestroy, onMount } from "svelte"; import type { NDKEvent } from "@nostr-dev-kit/ndk"; import PublicationSection from "./PublicationSection.svelte"; import type { PublicationTree } from "$lib/data_structures/publication_tree"; 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 ZapOutline from "$components/util/ZapOutline.svelte"; let { rootAddress, publicationType, indexEvent } = $props<{ rootAddress: string, @@ -83,14 +86,14 @@ } function isSocialActive() { - return $publicationColumnVisibility.social; + return $publicationColumnVisibility.discussion; } function loadBlog(rootId: string) { // depending on the size of the screen, also toggle blog list & social visibility if (window.innerWidth < 1024) { $publicationColumnVisibility.blog = false; - $publicationColumnVisibility.social = false; + $publicationColumnVisibility.discussion = false; } $publicationColumnVisibility.inner = true; currentBlog = rootId; @@ -98,9 +101,8 @@ currentBlogEvent = leaves.find(i => i.tagAddress() === currentBlog) ?? null; } - function showBlogHeaderOnMobile() { - return (currentBlog && currentBlogEvent && window.innerWidth < 1024); + return (currentBlog && currentBlogEvent && window.innerWidth < 1140); } onMount(() => { @@ -119,6 +121,18 @@ }; }); + onDestroy(() => { + // reset visibility + $publicationColumnVisibility = { + toc: false, + blog: true, + main: true, + inner: true, + discussion: false, + editing: false + }; + }) + {#if isDefaultVisible()} @@ -156,15 +170,23 @@ {#if isInnerActive() } {#key currentBlog } -
+
{#each leaves as leaf, i} {#if leaf.tagAddress() === currentBlog} +
+
+
+ setLastElementRef(el, i)} /> + + + + {/if} {/each}
@@ -172,7 +194,7 @@ {/if} {#if isSocialActive() } -
+
{#if showBlogHeaderOnMobile()} {/if} -
+
-
+
+ Unknown + 1.1.1970 +
- This is a placeholder comment... + This is a very intelligent comment placeholder that applies to all the content equally well. +
+ + + +
+ Unknown + 1.1.1970 +
+
+ +
+ + + +
+ Unknown + 1.1.1970 +
+
+
-
diff --git a/src/lib/components/blog/BlogHeader.svelte b/src/lib/components/blog/BlogHeader.svelte index b5f1ff3..f7fc25b 100644 --- a/src/lib/components/blog/BlogHeader.svelte +++ b/src/lib/components/blog/BlogHeader.svelte @@ -5,6 +5,7 @@ import InlineProfile from "$components/util/InlineProfile.svelte"; import Interactions from "$components/util/Interactions.svelte"; import { quintOut } from "svelte/easing"; + import CardActions from "$components/util/CardActions.svelte"; const { rootId, event, onBlogUpdate, active = true } = $props<{ rootId: string, event: NDKEvent, onBlogUpdate?: any, active: boolean }>(); @@ -12,6 +13,7 @@ let author: string = $derived(event.getMatchingTags('author')[0]?.[1] ?? 'unknown'); let image: string = $derived(event.getMatchingTags('image')[0]?.[1] ?? null); let authorPubkey: string = $derived(event.getMatchingTags('p')[0]?.[1] ?? null); + let hashtags: string = $derived(event.getMatchingTags('t') ?? null); function publishedAt() { const date = event.created_at ? new Date(event.created_at * 1000) : ''; @@ -35,8 +37,11 @@
- - {publishedAt()} +
+ + {publishedAt()} +
+
{#if image && active}
showBlog()} class='text-left'>

{title}

+ {#if hashtags} +
+ {#each hashtags as tag} + {tag} + {/each} +
+ {/if}
{#if active} -
-
{/if}
diff --git a/src/lib/components/util/ArticleNav.svelte b/src/lib/components/util/ArticleNav.svelte index d89d372..d220f50 100644 --- a/src/lib/components/util/ArticleNav.svelte +++ b/src/lib/components/util/ArticleNav.svelte @@ -22,13 +22,16 @@ let pubkey: string = $derived(indexEvent.getMatchingTags('p')[0]?.[1] ?? null); // Function to toggle column visibility - function toggleColumn(column: 'blog'|'inner'|'social') { + function toggleColumn(column: 'blog'|'inner'|'discussion') { publicationColumnVisibility.update(store => { store[column] = !store[column]; // Toggle true/false - if (window.innerWidth < 1400 && $publicationColumnVisibility.social) { + if (window.innerWidth < 1400 && column === 'discussion' && $publicationColumnVisibility.discussion) { $publicationColumnVisibility.blog = false; } - if (window.innerWidth < 1200) { + if (window.innerWidth < 1400 && column === 'blog' && $publicationColumnVisibility.blog) { + $publicationColumnVisibility.discussion = false; + } + if (window.innerWidth < 980) { $publicationColumnVisibility.inner = false; } return { ...store }; // Ensure reactivity @@ -36,23 +39,23 @@ } function backToMain() { - if ($publicationColumnVisibility.social) { + if ($publicationColumnVisibility.discussion) { $publicationColumnVisibility.inner = true; - $publicationColumnVisibility.social = false; + $publicationColumnVisibility.discussion = false; } else { $publicationColumnVisibility.blog = true; $publicationColumnVisibility.inner = false; - $publicationColumnVisibility.social = false; + $publicationColumnVisibility.discussion = false; } } -