Article styles and layout

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>