|
|
|
@ -1,46 +1,73 @@ |
|
|
|
<script lang="ts"> |
|
|
|
<script lang="ts"> |
|
|
|
import { ndk } from '$lib/ndk'; |
|
|
|
import { ndk } from '$lib/ndk'; |
|
|
|
import Toc from '$lib/components/Toc.svelte'; |
|
|
|
|
|
|
|
import Notes from '$lib/components/Note.svelte'; |
|
|
|
|
|
|
|
import { idList } from '$lib/stores'; |
|
|
|
import { idList } from '$lib/stores'; |
|
|
|
import type { NDKEvent } from '@nostr-dev-kit/ndk'; |
|
|
|
import type { NDKEvent } from '@nostr-dev-kit/ndk'; |
|
|
|
import { page } from '$app/stores'; |
|
|
|
import { page } from '$app/stores'; |
|
|
|
import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper } from 'flowbite-svelte'; |
|
|
|
import { Heading, Sidebar, SidebarGroup, SidebarItem, SidebarWrapper, Skeleton, TextPlaceholder } from 'flowbite-svelte'; |
|
|
|
|
|
|
|
import showdown from 'showdown'; |
|
|
|
|
|
|
|
import { sineIn } from 'svelte/easing'; |
|
|
|
|
|
|
|
import { onMount } from 'svelte'; |
|
|
|
|
|
|
|
|
|
|
|
$: activeUrl = $page.url.pathname; |
|
|
|
$: activeHash = $page.url.hash; |
|
|
|
|
|
|
|
|
|
|
|
let events: NDKEvent[] = []; |
|
|
|
async function getEvents(): Promise<NDKEvent[]> { |
|
|
|
|
|
|
|
const eventPromises = $idList.map(async (id) => await $ndk.fetchEvent(id)); |
|
|
|
async function getEvents() { |
|
|
|
const events = await Promise.all(eventPromises); |
|
|
|
$idList.forEach(async (id) => { |
|
|
|
return events.filter((event) => event != null); |
|
|
|
const event = await $ndk.fetchEvent(id); |
|
|
|
|
|
|
|
events = [...events, event]; |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const converter = new showdown.Converter(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const transitionParams = { |
|
|
|
|
|
|
|
x: -320, |
|
|
|
|
|
|
|
duration: 200, |
|
|
|
|
|
|
|
easing: sineIn |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let width: number; |
|
|
|
|
|
|
|
let breakpoint: number = 768; // Tailwind md breakpoint |
|
|
|
|
|
|
|
let drawerHidden: boolean = false; |
|
|
|
|
|
|
|
$: width >= breakpoint |
|
|
|
|
|
|
|
? drawerHidden = false |
|
|
|
|
|
|
|
: drawerHidden = true; |
|
|
|
|
|
|
|
onMount(() => { |
|
|
|
|
|
|
|
width >= breakpoint |
|
|
|
|
|
|
|
? drawerHidden = false |
|
|
|
|
|
|
|
: drawerHidden = true; |
|
|
|
|
|
|
|
}); |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
{#await getEvents() then article} |
|
|
|
{#await getEvents()} |
|
|
|
<Sidebar {activeUrl}> |
|
|
|
<Sidebar class='sidebar-leather fixed top-20 left-0 px-4 w-60'> |
|
|
|
|
|
|
|
<SidebarWrapper> |
|
|
|
|
|
|
|
<Skeleton/> |
|
|
|
|
|
|
|
</SidebarWrapper> |
|
|
|
|
|
|
|
</Sidebar> |
|
|
|
|
|
|
|
<TextPlaceholder class='max-w-2xl'/> |
|
|
|
|
|
|
|
{:then events} |
|
|
|
|
|
|
|
<!-- TODO: Collapse the sidebar when the page gets below a certain width. --> |
|
|
|
|
|
|
|
<!-- TODO: Handle hash paths for navigation within the article. --> |
|
|
|
|
|
|
|
<Sidebar class='sidebar-leather fixed top-20 left-0 px-4 w-60' {activeHash}> |
|
|
|
<SidebarWrapper> |
|
|
|
<SidebarWrapper> |
|
|
|
<SidebarGroup> |
|
|
|
<SidebarGroup> |
|
|
|
{#each events as event} |
|
|
|
{#each events as event} |
|
|
|
<SidebarItem |
|
|
|
<SidebarItem |
|
|
|
title={event.getMatchingTags('title')[0][1]} |
|
|
|
class='sidebar-item-leather' |
|
|
|
href={nip19.noteEncode(event.id)} |
|
|
|
label={event.getMatchingTags('title')[0][1]} |
|
|
|
|
|
|
|
href={`${$page.url.pathname}#${event.getMatchingTags('title')[0][1]}`} |
|
|
|
/> |
|
|
|
/> |
|
|
|
{/each} |
|
|
|
{/each} |
|
|
|
</SidebarGroup> |
|
|
|
</SidebarGroup> |
|
|
|
</SidebarWrapper> |
|
|
|
</SidebarWrapper> |
|
|
|
</Sidebar> |
|
|
|
</Sidebar> |
|
|
|
<!-- <div class="article"> |
|
|
|
<div class='flex flex-col space-y-4 max-w-2xl'> |
|
|
|
<div class="toc"> |
|
|
|
{#each events as event} |
|
|
|
<Toc notes={events} /> |
|
|
|
<div class='note-leather flex flex-col space-y-2'> |
|
|
|
</div> |
|
|
|
<Heading tag='h3' class='h-leather'>{event.getMatchingTags('title')[0][1]}</Heading> |
|
|
|
|
|
|
|
{@html converter.makeHtml(event.content)} |
|
|
|
<div class="article-content"> |
|
|
|
</div> |
|
|
|
<Notes notes={events} /> |
|
|
|
{/each} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
{/await} |
|
|
|
{/await} |
|
|
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
<style> |
|
|
|
|
buttercat1791
2 years ago
committed by
Silberengel