Use Preview component for reader view

src/lib/components/Article.svelte

@@ -3,36 +3,24 @@
   import type { NDKEvent } from '@nostr-dev-kit/ndk';
   import { page } from '$app/stores';
   import { Button, Heading, Sidebar, SidebarGroup, SidebarItem, SidebarWrapper, Skeleton, TextPlaceholder, Tooltip } from 'flowbite-svelte';
-  import showdown from 'showdown';
   import { onMount } from 'svelte';
   import { BookOutline } from 'flowbite-svelte-icons';
-  import { zettelKinds } from '../consts';
+  import Pharos, { parser } from '$lib/parser';
+  import Preview from './Preview.svelte';
 
   export let index: NDKEvent | null | undefined;
 
-  $: activeHash = $page.url.hash;
+  $parser ??= new Pharos($ndk);
 
-  const getEvents = async (index?: NDKEvent | null | undefined): Promise<Set<NDKEvent>> => {
+  $: activeHash = $page.url.hash;
-    if (index == null) {
-      // TODO: Add error handling.
-    }
 
-    const eventIds = index!.getMatchingTags('e').map((value) => value[1]);
+  const getContentRoot = async (index?: NDKEvent | null | undefined): Promise<string | null> => {
-    const events = await $ndk.fetchEvents(
+    if (!index) {
-      {
+      return null;
-        // @ts-ignore
-        kinds: zettelKinds,
-        ids: eventIds,
-      },
-      { 
-        groupable: false,
-        skipVerification: false,
-        skipValidation: false
     }
-  );
 
-    console.debug(`Fetched ${events.size} events from ${eventIds.length} references.`);
+    await $parser.fetch(index);
-    return events;
+    return $parser.getRootIndexId();
   };
 
   function normalizeHashPath(str: string): string {
@@ -104,18 +92,17 @@
       window.removeEventListener('click', hideTocOnClick);
     };
   });
-
-  const converter = new showdown.Converter();
 </script>
 
-{#await getEvents(index)}
+{#await getContentRoot(index)}
   <Sidebar class='sidebar-leather fixed top-20 left-0 px-4 w-60'>
     <SidebarWrapper>
       <Skeleton/>
     </SidebarWrapper>
   </Sidebar>
   <TextPlaceholder class='max-w-2xl'/>
-{:then events}
+{:then rootId}
+  {#if rootId}
     {#if showTocButton && !showToc}
       <Button
         class='btn-leather fixed top-20 left-4 h-6 w-6'
@@ -131,7 +118,8 @@
         Show Table of Contents
       </Tooltip>
     {/if}
-  {#if showToc}
+    <!-- TODO: Get TOC from parser. -->
+    <!-- {#if showToc}
       <Sidebar class='sidebar-leather fixed top-20 left-0 px-4 w-60' {activeHash}>
         <SidebarWrapper>
           <SidebarGroup class='sidebar-group-leather overflow-y-scroll'>
@@ -145,21 +133,13 @@
           </SidebarGroup>
         </SidebarWrapper>
       </Sidebar>
-  {/if}
+    {/if} -->
     <div class='flex flex-col space-y-4 max-w-2xl'>
-    {#each events as event}
+      <Preview rootId={rootId} />
-      <div class='note-leather flex flex-col space-y-2'>
-        <Heading
-          tag='h3'
-          class='h-leather'
-          id={normalizeHashPath(event.getMatchingTags('title')[0][1])}
-        >
-          {event.getMatchingTags('title')[0][1]}
-        </Heading>
-        {@html converter.makeHtml(event.content)}
-      </div>
-    {/each}
     </div>
+  {:else}
+    <!-- TODO: Display empty state. -->
+  {/if}
 {/await}
 
 <style>