diff options
Diffstat (limited to 'src/lib')
-rw-r--r-- | src/lib/Article.svelte | 75 | ||||
-rw-r--r-- | src/lib/ArticleHeader.svelte | 2 | ||||
-rw-r--r-- | src/lib/components/Navigation.svelte | 6 |
3 files changed, 55 insertions, 28 deletions
diff --git a/src/lib/Article.svelte b/src/lib/Article.svelte index e61a5bd..55839f8 100644 --- a/src/lib/Article.svelte +++ b/src/lib/Article.svelte @@ -1,46 +1,73 @@ <script lang="ts"> 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 type { NDKEvent } from '@nostr-dev-kit/ndk'; 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() { - $idList.forEach(async (id) => { - const event = await $ndk.fetchEvent(id); - events = [...events, event]; - }); + async function getEvents(): Promise<NDKEvent[]> { + const eventPromises = $idList.map(async (id) => await $ndk.fetchEvent(id)); + const events = await Promise.all(eventPromises); + return events.filter((event) => event != null); } + + 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> -{#await getEvents() then article} - <Sidebar {activeUrl}> +{#await getEvents()} + <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> <SidebarGroup> {#each events as event} <SidebarItem - title={event.getMatchingTags('title')[0][1]} - href={nip19.noteEncode(event.id)} + class='sidebar-item-leather' + label={event.getMatchingTags('title')[0][1]} + href={`${$page.url.pathname}#${event.getMatchingTags('title')[0][1]}`} /> {/each} </SidebarGroup> </SidebarWrapper> </Sidebar> -<!-- <div class="article"> - <div class="toc"> - <Toc notes={events} /> - </div> - - <div class="article-content"> - <Notes notes={events} /> - </div> - </div> --> + <div class='flex flex-col space-y-4 max-w-2xl'> + {#each events as event} + <div class='note-leather flex flex-col space-y-2'> + <Heading tag='h3' class='h-leather'>{event.getMatchingTags('title')[0][1]}</Heading> + {@html converter.makeHtml(event.content)} + </div> + {/each} + </div> {/await} <style> diff --git a/src/lib/ArticleHeader.svelte b/src/lib/ArticleHeader.svelte index eeaa709..fd3ab38 100644 --- a/src/lib/ArticleHeader.svelte +++ b/src/lib/ArticleHeader.svelte @@ -51,7 +51,7 @@ } </script> -<Card class='ArticleBox card-leather w-80'> +<Card class='ArticleBox card-leather w-lg'> <div class='flex flex-col space-y-4'> <a href="/{href}" on:click={handleSendEvents}> <h2>{title}</h2> diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte index 13aab01..d91e3a0 100644 --- a/src/lib/components/Navigation.svelte +++ b/src/lib/components/Navigation.svelte @@ -1,6 +1,5 @@ <script lang="ts"> import { DarkMode, Navbar, NavLi, NavUl, NavHamburger, NavBrand } from 'flowbite-svelte'; - import { HomeSolid } from 'flowbite-svelte-icons'; let className: string; export { className as class }; @@ -11,8 +10,6 @@ <NavBrand href='./'> <h1 class='font-serif'>Alexandria</h1> </NavBrand> - <!-- TODO: Restyle the dark mode icon. --> - <DarkMode btnClass='btn-leather p-4'/> </div> <NavHamburger class='btn-leather' /> <NavUl class='ul-leather'> @@ -20,5 +17,8 @@ <NavLi href='./create'>New Note</NavLi> <NavLi href='./visualize'>Visualize</NavLi> <NavLi href='./login'>Login</NavLi> + <NavLi> + <DarkMode btnClass='btn-leather p-0'/> + </NavLi> </NavUl> </Navbar> |