silberengel
10 months ago
28 changed files with 1152 additions and 297 deletions
@ -0,0 +1,70 @@
@@ -0,0 +1,70 @@
|
||||
<script lang="ts"> |
||||
import type { NDKEvent } from '@nostr-dev-kit/ndk'; |
||||
import { scale } from 'svelte/transition'; |
||||
import { Card, Img } from "flowbite-svelte"; |
||||
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 }>(); |
||||
|
||||
let title: string = $derived(event.getMatchingTags('title')[0]?.[1]); |
||||
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) : ''; |
||||
if (date !== '') { |
||||
const formattedDate = new Intl.DateTimeFormat("en-US", { |
||||
year: "numeric", |
||||
month: "short", |
||||
day: "2-digit", |
||||
}).format(date); |
||||
return formattedDate ?? ""; |
||||
} |
||||
return ''; |
||||
} |
||||
|
||||
function showBlog() { |
||||
onBlogUpdate?.(rootId); |
||||
} |
||||
</script> |
||||
|
||||
{#if title != null} |
||||
<Card class="ArticleBox card-leather w-full grid max-w-xl {active ? 'active' : ''}"> |
||||
<div class='space-y-4'> |
||||
<div class="flex flex-row justify-between my-2"> |
||||
<div class="flex flex-col"> |
||||
<InlineProfile pubkey={authorPubkey} title={author} /> |
||||
<span class='text-gray-500'>{publishedAt()}</span> |
||||
</div> |
||||
<CardActions event={event} /> |
||||
</div> |
||||
{#if image && active} |
||||
<div class="ArticleBoxImage flex col justify-center" |
||||
in:scale={{ start: 0.8, duration: 500, delay: 100, easing: quintOut }} |
||||
> |
||||
<Img src={image} class="rounded w-full max-h-72 object-cover"/> |
||||
</div> |
||||
{/if} |
||||
<div class='flex flex-col flex-grow space-y-4'> |
||||
<button onclick={() => showBlog()} class='text-left'> |
||||
<h2 class='text-lg font-bold line-clamp-2' title="{title}">{title}</h2> |
||||
</button> |
||||
{#if hashtags} |
||||
<div class="tags"> |
||||
{#each hashtags as tag} |
||||
<span>{tag}</span> |
||||
{/each} |
||||
</div> |
||||
{/if} |
||||
</div> |
||||
{#if active} |
||||
<Interactions rootId={rootId} event={event} /> |
||||
{/if} |
||||
</div> |
||||
</Card> |
||||
{/if} |
||||
@ -0,0 +1,149 @@
@@ -0,0 +1,149 @@
|
||||
<script lang="ts"> |
||||
import { BookOutline, CaretLeftOutline, CloseOutline, GlobeOutline } from "flowbite-svelte-icons"; |
||||
import { Button } from "flowbite-svelte"; |
||||
import { publicationColumnVisibility } from "$lib/stores"; |
||||
import InlineProfile from "$components/util/InlineProfile.svelte"; |
||||
import type { NDKEvent } from "@nostr-dev-kit/ndk"; |
||||
import { onDestroy, onMount } from "svelte"; |
||||
|
||||
let { |
||||
rootId, |
||||
publicationType, |
||||
indexEvent |
||||
} = $props<{ |
||||
rootId: any, |
||||
publicationType: string, |
||||
indexEvent: NDKEvent |
||||
}>(); |
||||
|
||||
let title: string = $derived(indexEvent.getMatchingTags('title')[0]?.[1]); |
||||
let author: string = $derived(indexEvent.getMatchingTags('author')[0]?.[1] ?? 'unknown'); |
||||
let pubkey: string = $derived(indexEvent.getMatchingTags('p')[0]?.[1] ?? null); |
||||
let isLeaf: boolean = $derived(indexEvent.kind === 30041); |
||||
|
||||
let lastScrollY = $state(0); |
||||
let isVisible = $state(true); |
||||
|
||||
// Function to toggle column visibility |
||||
function toggleColumn(column: 'toc' | 'blog' | 'inner' | 'discussion') { |
||||
publicationColumnVisibility.update(current => { |
||||
const newValue = !current[column]; |
||||
const updated = { ...current, [column]: newValue }; |
||||
|
||||
if (window.innerWidth < 1400 && column === 'blog' && newValue) { |
||||
updated.discussion = false; |
||||
} |
||||
|
||||
return updated; |
||||
}); |
||||
} |
||||
|
||||
function shouldShowBack() { |
||||
const vis = $publicationColumnVisibility; |
||||
return ['discussion', 'toc', 'inner'].some(key => vis[key as keyof typeof vis]); |
||||
} |
||||
|
||||
function backToMain() { |
||||
publicationColumnVisibility.update(current => { |
||||
const updated = { ...current }; |
||||
|
||||
// if current is 'inner', just go back to blog |
||||
if (current.inner && !(current.discussion || current.toc)) { |
||||
updated.inner = false; |
||||
updated.blog = true; |
||||
return updated; |
||||
} |
||||
|
||||
updated.discussion = false; |
||||
updated.toc = false; |
||||
|
||||
if (publicationType === 'blog') { |
||||
updated.inner = true; |
||||
updated.blog = false; |
||||
} else { |
||||
updated.main = true; |
||||
} |
||||
|
||||
return updated; |
||||
}); |
||||
} |
||||
|
||||
function backToBlog() { |
||||
publicationColumnVisibility.update(current => { |
||||
const updated = { ...current }; |
||||
updated.inner = false; |
||||
updated.discussion = false; |
||||
updated.blog = true; |
||||
return updated; |
||||
}) |
||||
} |
||||
|
||||
function handleScroll() { |
||||
if (window.innerWidth < 768) { |
||||
const currentScrollY = window.scrollY; |
||||
|
||||
// Hide on scroll down |
||||
if (currentScrollY > lastScrollY && currentScrollY > 50) { |
||||
isVisible = false; |
||||
} |
||||
// Show on scroll up |
||||
else if (currentScrollY < lastScrollY) { |
||||
isVisible = true; |
||||
} |
||||
|
||||
lastScrollY = currentScrollY; |
||||
} |
||||
} |
||||
|
||||
let unsubscribe: () => void; |
||||
onMount(() => { |
||||
window.addEventListener('scroll', handleScroll); |
||||
unsubscribe = publicationColumnVisibility.subscribe(() => { |
||||
isVisible = true; // show navbar when store changes |
||||
}); |
||||
}); |
||||
|
||||
onDestroy(() => { |
||||
window.removeEventListener('scroll', handleScroll); |
||||
unsubscribe(); |
||||
}); |
||||
</script> |
||||
|
||||
<nav class="Navbar navbar-leather flex fixed top-[60px] sm:top-[76px] w-full min-h-[70px] px-2 sm:px-4 py-2.5 z-10 transition-transform duration-300 {isVisible ? 'translate-y-0' : '-translate-y-full'}"> |
||||
<div class="mx-auto flex space-x-2 container"> |
||||
<div class="flex items-center space-x-2 md:min-w-52 min-w-8"> |
||||
{#if shouldShowBack()} |
||||
<Button class='btn-leather !w-auto sm:hidden' outline={true} onclick={backToMain}> |
||||
<CaretLeftOutline class="!fill-none inline mr-1" /><span class="hidden sm:inline">Back</span> |
||||
</Button> |
||||
{/if} |
||||
{#if !isLeaf} |
||||
{#if publicationType === 'blog'} |
||||
<Button class="btn-leather hidden sm:flex !w-auto {$publicationColumnVisibility.blog ? 'active' : ''}" |
||||
outline={true} onclick={() => toggleColumn('blog')} > |
||||
<BookOutline class="!fill-none inline mr-1" /><span class="hidden sm:inline">Table of Contents</span> |
||||
</Button> |
||||
{:else if !$publicationColumnVisibility.discussion && !$publicationColumnVisibility.toc} |
||||
<Button class='btn-leather !w-auto' outline={true} onclick={() => toggleColumn('toc')}> |
||||
<BookOutline class="!fill-none inline mr-1" /><span class="hidden sm:inline">Table of Contents</span> |
||||
</Button> |
||||
{/if} |
||||
{/if} |
||||
</div> |
||||
<div class="flex flex-grow text justify-center items-center"> |
||||
<p class="max-w-[60vw] line-ellipsis"><b class="text-nowrap">{title}</b> <span class="whitespace-nowrap">by <InlineProfile pubkey={pubkey} title={author} /></span></p> |
||||
</div> |
||||
<div class="flex justify-end items-center space-x-2 md:min-w-52 min-w-8"> |
||||
{#if $publicationColumnVisibility.inner} |
||||
<Button class='btn-leather !w-auto hidden sm:flex' outline={true} onclick={backToBlog}> |
||||
<CloseOutline class="!fill-none inline mr-1" /><span class="hidden sm:inline">Close</span> |
||||
</Button> |
||||
{/if} |
||||
{#if publicationType !== 'blog' && !$publicationColumnVisibility.discussion} |
||||
<Button class="btn-leather !hidden sm:flex !w-auto" outline={true} onclick={() => toggleColumn('discussion')} > |
||||
<GlobeOutline class="!fill-none inline mr-1" /><span class="hidden sm:inline">Discussion</span> |
||||
</Button> |
||||
{/if} |
||||
</div> |
||||
</div> |
||||
</nav> |
||||
@ -0,0 +1,109 @@
@@ -0,0 +1,109 @@
|
||||
<script lang="ts"> |
||||
import InlineProfile from "$components/util/InlineProfile.svelte"; |
||||
import CardActions from "$components/util/CardActions.svelte"; |
||||
import Interactions from "$components/util/Interactions.svelte"; |
||||
import { P } from "flowbite-svelte"; |
||||
|
||||
// isModal |
||||
// - don't show interactions in modal view |
||||
// - don't show all the details when _not_ in modal view |
||||
let { event, isModal = false } = $props(); |
||||
|
||||
let title: string = $derived(event.getMatchingTags('title')[0]?.[1]); |
||||
let author: string = $derived(event.getMatchingTags('author')[0]?.[1] ?? 'unknown'); |
||||
let version: string = $derived(event.getMatchingTags('version')[0]?.[1] ?? '1'); |
||||
let image: string = $derived(event.getMatchingTags('image')[0]?.[1] ?? null); |
||||
let originalAuthor: string = $derived(event.getMatchingTags('p')[0]?.[1] ?? null); |
||||
let summary: string = $derived(event.getMatchingTags('summary')[0]?.[1] ?? null); |
||||
let type: string = $derived(event.getMatchingTags('type')[0]?.[1] ?? null); |
||||
let language: string = $derived(event.getMatchingTags('l')[0]?.[1] ?? null); |
||||
let source: string = $derived(event.getMatchingTags('source')[0]?.[1] ?? null); |
||||
let publisher: string = $derived(event.getMatchingTags('published_by')[0]?.[1] ?? null); |
||||
let identifier: string = $derived(event.getMatchingTags('i')[0]?.[1] ?? null); |
||||
let hashtags: [] = $derived(event.getMatchingTags('t') ?? []); |
||||
let rootId: string = $derived(event.getMatchingTags('d')[0]?.[1] ?? null); |
||||
let kind = $derived(event.kind); |
||||
|
||||
|
||||
</script> |
||||
|
||||
|
||||
<div class="flex flex-col relative mb-2"> |
||||
{#if !isModal} |
||||
<div class="flex flex-row justify-between items-center"> |
||||
<P class='text-base font-normal'><InlineProfile pubkey={event.pubkey} /></P> |
||||
<CardActions event={event}></CardActions> |
||||
</div> |
||||
{/if} |
||||
<div class="flex-grow grid grid-cols-1 md:grid-cols-[auto_1fr] gap-4 items-center"> |
||||
{#if image} |
||||
<div class="my-2"> |
||||
<img class="w-full md:max-w-48 object-contain rounded" alt={title} src={image} /> |
||||
</div> |
||||
{/if} |
||||
<div class="space-y-4 my-4"> |
||||
<h1 class="text-3xl font-bold">{title}</h1> |
||||
<h2 class="text-base font-bold"> |
||||
by |
||||
{#if originalAuthor !== null} |
||||
<InlineProfile pubkey={originalAuthor} title={author} /> |
||||
{:else} |
||||
{author} |
||||
{/if} |
||||
</h2> |
||||
{#if version !== '1' } |
||||
<h4 class="text-base font-thin">Version: {version}</h4> |
||||
{/if} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
{#if summary} |
||||
<div class="flex flex-row my-2"> |
||||
<p class='text-base text-primary-900 dark:text-highlight'>{summary}</p> |
||||
</div> |
||||
{/if} |
||||
|
||||
{#if hashtags.length} |
||||
<div class="tags my-2"> |
||||
{#each hashtags as tag} |
||||
<span class="text-sm">#{tag[1]}</span> |
||||
{/each} |
||||
</div> |
||||
{/if} |
||||
|
||||
{#if isModal} |
||||
<div class="flex flex-row my-4"> |
||||
<h4 class='text-base font-normal mt-2'> |
||||
{#if kind === 30040} |
||||
<span>Index author:</span> |
||||
{:else} |
||||
<span>Author:</span> |
||||
{/if} |
||||
<InlineProfile pubkey={event.pubkey} /> |
||||
</h4> |
||||
</div> |
||||
|
||||
|
||||
<div class="flex flex-col pb-4 space-y-1"> |
||||
{#if source !== null} |
||||
<h5 class="text-sm">Source: <a class="underline break-all" href={source} target="_blank">{source}</a></h5> |
||||
{/if} |
||||
{#if type !== null} |
||||
<h5 class="text-sm">Publication type: {type}</h5> |
||||
{/if} |
||||
{#if language !== null} |
||||
<h5 class="text-sm">Language: {language}</h5> |
||||
{/if} |
||||
{#if publisher !== null} |
||||
<h5 class="text-sm">Published by: {publisher}</h5> |
||||
{/if} |
||||
{#if identifier !== null} |
||||
<h5 class="text-sm">{identifier}</h5> |
||||
{/if} |
||||
</div> |
||||
{/if} |
||||
|
||||
{#if !isModal} |
||||
<Interactions event={event} rootId={rootId} direction="row"/> |
||||
{/if} |
||||
@ -0,0 +1,93 @@
@@ -0,0 +1,93 @@
|
||||
<script lang="ts"> |
||||
import { |
||||
Button, Modal, P |
||||
} from "flowbite-svelte"; |
||||
import { HeartOutline, FilePenOutline, AnnotationOutline } from 'flowbite-svelte-icons'; |
||||
import ZapOutline from "$components/util/ZapOutline.svelte"; |
||||
import type { NDKEvent } from "@nostr-dev-kit/ndk"; |
||||
import { onMount } from "svelte"; |
||||
import { ndkInstance } from '$lib/ndk'; |
||||
import { publicationColumnVisibility } from "$lib/stores"; |
||||
|
||||
const { rootId, event, direction = 'row' } = $props<{ rootId: string, event?: NDKEvent, direction?: string }>(); |
||||
|
||||
// Reactive arrays to hold incoming events |
||||
let likes: NDKEvent[] = []; |
||||
let zaps: NDKEvent[] = []; |
||||
let highlights: NDKEvent[] = []; |
||||
let comments: NDKEvent[] = []; |
||||
|
||||
let interactionOpen: boolean = $state(false); |
||||
|
||||
// Reactive counts derived from array lengths |
||||
// Derived counts from store values |
||||
const likeCount = $derived(likes.length); |
||||
const zapCount = $derived(zaps.length); |
||||
const highlightCount = $derived(highlights.length); |
||||
const commentCount = $derived(comments.length); |
||||
|
||||
/** |
||||
* Subscribe to Nostr events of a given kind that reference our root event via e-tag. |
||||
* Push new events into the provided array if not already present. |
||||
* Returns the subscription for later cleanup. |
||||
*/ |
||||
function subscribeCount(kind: number, targetArray: NDKEvent[]) { |
||||
const sub = $ndkInstance.subscribe({ |
||||
kinds: [kind], |
||||
'#a': [rootId] // Will this work? |
||||
}); |
||||
|
||||
|
||||
sub.on('event', (evt: NDKEvent) => { |
||||
// Only add if we haven't seen this event ID yet |
||||
if (!targetArray.find(e => e.id === evt.id)) { |
||||
targetArray.push(evt); |
||||
} |
||||
}); |
||||
|
||||
return sub; |
||||
} |
||||
|
||||
let subs: any[] = []; |
||||
|
||||
onMount(() => { |
||||
// Subscribe to each kind; store subs for cleanup |
||||
subs.push(subscribeCount(7, likes)); // likes (Reaction) |
||||
subs.push(subscribeCount(9735, zaps)); // zaps (Zap Receipts) |
||||
subs.push(subscribeCount(30023, highlights)); // highlights (custom kind) |
||||
subs.push(subscribeCount(1, comments)); // comments (Text Notes) |
||||
}); |
||||
|
||||
function showDiscussion() { |
||||
publicationColumnVisibility.update(v => { |
||||
const updated = { ...v, discussion: true}; |
||||
// hide blog, unless the only column |
||||
if (v.inner) { |
||||
updated.blog = (v.blog && window.innerWidth >= 1400 ); |
||||
} |
||||
return updated; |
||||
}); |
||||
} |
||||
|
||||
function doLike() { |
||||
interactionOpen = true; |
||||
} |
||||
function doHighlight() { |
||||
interactionOpen = true; |
||||
} |
||||
function doZap() { |
||||
interactionOpen = true; |
||||
} |
||||
</script> |
||||
|
||||
<div class='InteractiveMenu !hidden flex-{direction} justify-around align-middle text-primary-700 dark:text-gray-500'> |
||||
<Button color="none" class='flex flex-{direction} shrink-0 md:min-w-11 min-h-11 items-center p-0' onclick={doLike}><HeartOutline class="mx-2" size="lg" /><span>{likeCount}</span></Button> |
||||
<Button color="none" class='flex flex-{direction} shrink-0 md:min-w-11 min-h-11 items-center p-0' onclick={doZap}><ZapOutline className="mx-2" /><span>{zapCount}</span></Button> |
||||
<Button color="none" class='flex flex-{direction} shrink-0 md:min-w-11 min-h-11 items-center p-0' onclick={doHighlight}><FilePenOutline class="mx-2" size="lg"/><span>{highlightCount}</span></Button> |
||||
<Button color="none" class='flex flex-{direction} shrink-0 md:min-w-11 min-h-11 items-center p-0' onclick={showDiscussion}><AnnotationOutline class="mx-2" size="lg"/><span>{commentCount}</span></Button> |
||||
</div> |
||||
|
||||
<Modal class='modal-leather' title='Interaction' bind:open={interactionOpen} autoclose outsideclose size='sm'> |
||||
<P>Can't like, zap or highlight yet.</P> |
||||
<P>You should totally check out the discussion though.</P> |
||||
</Modal> |
||||
@ -0,0 +1,143 @@
@@ -0,0 +1,143 @@
|
||||
<script lang="ts"> |
||||
import { |
||||
Heading, |
||||
Sidebar, |
||||
SidebarGroup, |
||||
SidebarItem, |
||||
SidebarWrapper, |
||||
} from "flowbite-svelte"; |
||||
import { onMount } from "svelte"; |
||||
import { pharosInstance, tocUpdate } from "$lib/parser"; |
||||
import { publicationColumnVisibility } from "$lib/stores"; |
||||
|
||||
let { rootId } = $props<{ rootId: string }>(); |
||||
|
||||
if (rootId !== $pharosInstance.getRootIndexId()) { |
||||
console.error("Root ID does not match parser root index ID"); |
||||
} |
||||
|
||||
const tocBreakpoint = 1140; |
||||
|
||||
let activeHash = $state(window.location.hash); |
||||
|
||||
interface TocItem { |
||||
label: string; |
||||
hash: string; |
||||
} |
||||
|
||||
// Get TOC items from parser |
||||
let tocItems = $state<TocItem[]>([]); |
||||
|
||||
$effect(() => { |
||||
// This will re-run whenever tocUpdate changes |
||||
tocUpdate; |
||||
const items: TocItem[] = []; |
||||
const childIds = $pharosInstance.getChildIndexIds(rootId); |
||||
console.log('TOC rootId:', rootId, 'childIds:', childIds); |
||||
const processNode = (nodeId: string) => { |
||||
const title = $pharosInstance.getIndexTitle(nodeId); |
||||
if (title) { |
||||
items.push({ |
||||
label: title, |
||||
hash: `#${nodeId}` |
||||
}); |
||||
} |
||||
const children = $pharosInstance.getChildIndexIds(nodeId); |
||||
children.forEach(processNode); |
||||
}; |
||||
childIds.forEach(processNode); |
||||
tocItems = items; |
||||
}); |
||||
|
||||
function normalizeHashPath(str: string): string { |
||||
return str |
||||
.toLowerCase() |
||||
.replace(/\s+/g, "-") |
||||
.replace(/[^\w-]/g, ""); |
||||
} |
||||
|
||||
function scrollToElementWithOffset() { |
||||
const hash = window.location.hash; |
||||
if (hash) { |
||||
const targetElement = document.querySelector(hash); |
||||
if (targetElement) { |
||||
const headerOffset = 80; |
||||
const elementPosition = targetElement.getBoundingClientRect().top; |
||||
const offsetPosition = elementPosition + window.scrollY - headerOffset; |
||||
|
||||
window.scrollTo({ |
||||
top: offsetPosition, |
||||
behavior: "auto", |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
|
||||
function updateActiveHash() { |
||||
activeHash = window.location.hash; |
||||
} |
||||
|
||||
/** |
||||
* Hides the table of contents sidebar when the window shrinks below a certain size. This |
||||
* prevents the sidebar from occluding the article content. |
||||
*/ |
||||
function setTocVisibilityOnResize() { |
||||
// Always show TOC on laptop and larger screens, collapsible only on small/medium |
||||
publicationColumnVisibility.update(v => ({ ...v, toc: window.innerWidth >= tocBreakpoint })); |
||||
} |
||||
|
||||
/** |
||||
* Hides the table of contents sidebar when the user clicks outside of it. |
||||
*/ |
||||
function hideTocOnClick(ev: MouseEvent) { |
||||
const target = ev.target as HTMLElement; |
||||
|
||||
if (target.closest(".sidebar-leather") || target.closest(".btn-leather")) { |
||||
return; |
||||
} |
||||
|
||||
// Only allow hiding TOC on screens smaller than tocBreakpoint |
||||
if (window.innerWidth < tocBreakpoint && $publicationColumnVisibility.toc) { |
||||
publicationColumnVisibility.update(v => ({ ...v, toc: false})); |
||||
} |
||||
} |
||||
|
||||
onMount(() => { |
||||
// Always check whether the TOC sidebar should be visible. |
||||
setTocVisibilityOnResize(); |
||||
|
||||
window.addEventListener("hashchange", updateActiveHash); |
||||
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); |
||||
|
||||
return () => { |
||||
window.removeEventListener("hashchange", updateActiveHash); |
||||
window.removeEventListener("hashchange", scrollToElementWithOffset); |
||||
window.removeEventListener("resize", setTocVisibilityOnResize); |
||||
window.removeEventListener("click", hideTocOnClick); |
||||
}; |
||||
}); |
||||
</script> |
||||
|
||||
<!-- TODO: Get TOC from parser. --> |
||||
{#if $publicationColumnVisibility.toc} |
||||
<Sidebar class='sidebar-leather left-0'> |
||||
<SidebarWrapper> |
||||
<SidebarGroup class='sidebar-group-leather'> |
||||
<Heading tag="h1" class="h-leather !text-lg">Table of contents</Heading> |
||||
<p>(This ToC is only for demo purposes, and is not fully-functional.)</p> |
||||
{#each tocItems as item} |
||||
<SidebarItem |
||||
class="sidebar-item-leather {activeHash === item.hash ? 'bg-primary-200 font-bold' : ''}" |
||||
label={item.label} |
||||
href={item.hash} |
||||
/> |
||||
{/each} |
||||
</SidebarGroup> |
||||
</SidebarWrapper> |
||||
</Sidebar> |
||||
{/if} |
||||
@ -0,0 +1,19 @@
@@ -0,0 +1,19 @@
|
||||
<script> |
||||
export let size = 24; // default size |
||||
export let className = ''; |
||||
</script> |
||||
|
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={size} |
||||
height={size} |
||||
fill="none" |
||||
stroke="currentColor" |
||||
stroke-width="2" |
||||
stroke-linecap="round" |
||||
stroke-linejoin="round" |
||||
class={className} |
||||
viewBox="0 0 24 24" |
||||
> |
||||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/> |
||||
</svg> |
||||
@ -1,3 +1,9 @@
@@ -1,3 +1,9 @@
|
||||
@tailwind base; |
||||
@tailwind components; |
||||
@tailwind utilities; |
||||
|
||||
@layer components { |
||||
body { |
||||
@apply bg-primary-0 dark:bg-primary-1000; |
||||
} |
||||
} |
||||
@ -0,0 +1,20 @@
@@ -0,0 +1,20 @@
|
||||
@layer components { |
||||
/* Global scrollbar styles */ |
||||
* { |
||||
scrollbar-color: rgba(87, 66, 41, 0.8) transparent; /* Transparent track, default scrollbar thumb */ |
||||
} |
||||
|
||||
/* Webkit Browsers (Chrome, Safari, Edge) */ |
||||
*::-webkit-scrollbar { |
||||
width: 12px; /* Thin scrollbar */ |
||||
} |
||||
|
||||
*::-webkit-scrollbar-track { |
||||
background: transparent; /* Fully transparent track */ |
||||
} |
||||
|
||||
*::-webkit-scrollbar-thumb { |
||||
@apply bg-primary-500 dark:bg-primary-600 hover:bg-primary-600 dark:hover:bg-primary-800;; |
||||
border-radius: 6px; /* Rounded scrollbar */ |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 385 KiB |
|
After Width: | Height: | Size: 205 KiB |
Loading…
Reference in new issue