Article styles and layout

package.json

@@ -2,6 +2,7 @@
   "name": "nostrwiki",
   "version": "0.0.1",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -11,10 +12,26 @@
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write ."
   },
+  "dependencies": {
+    "@nostr-dev-kit/ndk": "^2.3.3",
+    "@nostr-dev-kit/ndk-cache-dexie": "^2.2.4",
+    "@popperjs/core": "^2.11.8",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10",
+    "markdown-it": "^14.0.0",
+    "markdown-it-plain-text": "^0.3.0",
+    "marked": "^11.1.1",
+    "nostr-tools": "^2.1.4",
+    "showdown": "^2.1.0",
+    "svelte-add": "2023.12.16-0.0",
+    "tailwind-merge": "^2.2.1"
+  },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.1.1",
     "@sveltejs/kit": "^2.4.3",
     "@types/markdown-it": "^13.0.7",
+    "@types/showdown": "^2.0.6",
     "autoprefixer": "^10.4.17",
     "eslint-plugin-svelte": "^2.35.1",
     "flowbite": "^2.2.1",
@@ -30,21 +47,5 @@
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
-  },
-  "type": "module",
-  "dependencies": {
-    "@nostr-dev-kit/ndk": "^2.3.3",
-    "@nostr-dev-kit/ndk-cache-dexie": "^2.2.4",
-    "@popperjs/core": "^2.11.8",
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.10",
-    "markdown-it": "^14.0.0",
-    "markdown-it-plain-text": "^0.3.0",
-    "marked": "^11.1.1",
-    "nostr-tools": "^2.1.4",
-    "showdown": "^2.1.0",
-    "svelte-add": "2023.12.16-0.0",
-    "tailwind-merge": "^2.2.1"
   }
 }

pnpm-lock.yaml

@@ -57,6 +57,9 @@ importers:
       '@types/markdown-it':
         specifier: ^13.0.7
         version: 13.0.7
+      '@types/showdown':
+        specifier: ^2.0.6
+        version: 2.0.6
       autoprefixer:
         specifier: ^10.4.17
         version: 10.4.17(postcss@8.4.33)
@@ -507,6 +510,9 @@ packages:
   '@types/pug@2.0.10':
     resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==}
 
+  '@types/showdown@2.0.6':
+    resolution: {integrity: sha512-pTvD/0CIeqe4x23+YJWlX2gArHa8G0J0Oh6GKaVXV7TAeickpkkZiNOgFcFcmLQ5lB/K0qBJL1FtRYltBfbGCQ==}
+
   '@typescript-eslint/types@6.21.0':
     resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -2316,6 +2322,8 @@ snapshots:
 
   '@types/pug@2.0.10': {}
 
+  '@types/showdown@2.0.6': {}
+
   '@typescript-eslint/types@6.21.0': {}
 
   '@typescript-eslint/typescript-estree@6.21.0(typescript@5.3.3)':

src/app.css

@@ -5,16 +5,16 @@
 @layer components {
   /* General */
   .leather {
-    @apply bg-primary-1000 dark:bg-primary-0;
+    @apply bg-primary-0 dark:bg-primary-1000 text-gray-800 dark:text-gray-300;
   }
 
   /* Button */
   button.btn-leather.text-white {
-    @apply text-primary-1000;
+    @apply text-primary-0;
   }
 
   .btn-leather span svg {
-    @apply fill-gray-700 hover:fill-primary-400 dark:fill-gray-400 dark:hover:fill-primary-700;
+    @apply fill-gray-800 hover:fill-primary-400 dark:fill-gray-300 dark:hover:fill-primary-500;
   }
 
   .btn-leather.text-xs {
@@ -35,7 +35,7 @@
 
   /* Card */
   div.card-leather {
-    @apply bg-primary-1000 dark:bg-primary-0 border-gray-200 has-[:hover]:border-primary-400 dark:border-gray-700 dark:has-[:hover]:border-primary-700;
+    @apply bg-primary-0 dark:bg-primary-1000 border-gray-200 has-[:hover]:border-primary-800 dark:border-gray-800 dark:has-[:hover]:border-primary-500;
   }
 
   div.card-leather h1,
@@ -44,12 +44,26 @@
   div.card-leather h4,
   div.card-leather h5,
   div.card-leather h6 {
-  @apply text-gray-700 hover:text-primary-400 dark:text-gray-400 dark:hover:text-primary-700;
+    @apply text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500;
+  }
+
+  /* Content */
+  div.note-leather {
+    @apply bg-primary-0 dark:bg-primary-1000 text-gray-800 dark:text-gray-300 hover:bg-primary-100 dark:hover:bg-primary-800 p-2 rounded;
+  }
+
+  /* Heading */
+  h1.h-leather,
+  h2.h-leather,
+  h3.h-leather,
+  h4.h-leather,
+  h5.h-leather {
+    @apply text-gray-800 dark:text-gray-300;
   }
 
   /* Modal */
   div.modal-leather > div {
-    @apply bg-primary-1000 dark:bg-primary-0 border-b-[1px] border-gray-700 dark:border-gray-400;
+    @apply bg-primary-0 dark:bg-primary-1000 border-b-[1px] border-gray-800 dark:border-gray-500;
   }
 
   div.modal-leather > div > h1, 
@@ -58,20 +72,20 @@
   div.modal-leather > div > h4, 
   div.modal-leather > div > h5, 
   div.modal-leather > div > h6 {
-    @apply text-gray-700 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-400;
+    @apply text-gray-800 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-300;
   }
 
   div.modal-leather button {
-    @apply bg-primary-1000 hover:bg-primary-1000 dark:bg-primary-0 dark:hover:bg-primary-0 text-gray-700 hover:text-primary-400 dark:text-gray-400 dark:hover:text-primary-700;
+    @apply bg-primary-0 hover:bg-primary-0 dark:bg-primary-1000 dark:hover:bg-primary-1000 text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500;
   }
 
   /* Navbar */
   nav.navbar-leather {
-    @apply bg-primary-1000 dark:bg-primary-0;
+    @apply bg-primary-0 dark:bg-primary-1000;
   }
 
   nav.navbar-leather svg {
-    @apply fill-gray-700 hover:fill-primary-400 dark:fill-gray-400 dark:hover:fill-primary-700;
+    @apply fill-gray-800 hover:fill-primary-400 dark:fill-gray-300 dark:hover:fill-primary-500;
   }
 
   nav.navbar-leather h1,
@@ -80,16 +94,25 @@
   nav.navbar-leather h4,
   nav.navbar-leather h5,
   nav.navbar-leather h6 {
-    @apply text-gray-700 hover:text-primary-400 dark:text-gray-400 dark:hover:text-primary-700;
+    @apply text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500;
+  }
+
+  /* Sidebar */
+  aside.sidebar-leather > div {
+    @apply bg-gray-100 dark:bg-gray-900;
+  }
+
+  a.sidebar-item-leather {
+    @apply hover:bg-primary-100 dark:hover:bg-primary-800;
   }
 
   /* Tooltip */
   div.tooltip-leather {
-    @apply text-gray-700 dark:text-gray-400;
+    @apply text-gray-800 dark:text-gray-300;
   }
 
   /* Unordered list */
   .ul-leather li a {
-    @apply text-gray-700 hover:text-primary-400 dark:text-gray-400 dark:hover:text-primary-700;
+    @apply text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500;
   }
 }

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(): 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
+  };
 
-  async function getEvents() {
-    $idList.forEach(async (id) => {
-      const event = await $ndk.fetchEvent(id);
-      events = [...events, event];
+  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 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>
-
-    <div class="article-content">
-      <Notes notes={events} />
+    {/each}
   </div>
-  </div> -->
 {/await}
 
 <style>

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>

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>

tailwind.config.cjs

@@ -12,18 +12,18 @@ const config = {
     extend: {
       colors: {
         primary: {
-          0: '#110d08',
-          50: '#231a10',
-          100: '#342718',
-          200: '#574229',
-          300: '#795c39',
-          400: '#9c7649',
-          500: '#ad8351',
-          600: '#b58f62',
-          700: '#c6a885',
-          800: '#d6c1a8',
-          900: '#decdb9',
-          1000: '#efe6dc',
+          0: '#efe6dc',
+          50: '#decdb9',
+          100: '#d6c1a8',
+          200: '#c6a885',
+          300: '#b58f62',
+          400: '#ad8351',
+          500: '#9c7649',
+          600: '#795c39',
+          700: '#574229',
+          800: '#342718',
+          900: '#231a10',
+          1000: '#110d08',
         },
       }
     },