From b199ab1e507ccd95145cc6be18ed6391d32ee5ee Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Mon, 14 Apr 2025 09:29:52 -0500
Subject: [PATCH] Begin to move off of `<Preview>` and onto
 `<PublicationSection>`

---
 src/lib/components/Publication.svelte        |  4 ++-
 src/lib/components/PublicationSection.svelte | 28 ++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/PublicationSection.svelte

diff --git a/src/lib/components/Publication.svelte b/src/lib/components/Publication.svelte
index e61cbb3..4ff9c7c 100644
--- a/src/lib/components/Publication.svelte
+++ b/src/lib/components/Publication.svelte
@@ -16,6 +16,7 @@
   import { page } from "$app/state";
   import { ndkInstance } from "$lib/ndk";
   import type { NDKEvent } from "@nostr-dev-kit/ndk";
+  import PublicationSection from "./PublicationSection.svelte";
 
   let { rootId, publicationType, indexEvent } = $props<{ 
     rootId: string, 
@@ -131,7 +132,8 @@
   </Sidebar>
 {/if} -->
 <div class="flex flex-col space-y-4 max-w-2xl">
-  <Preview {rootId} {publicationType} />
+  <!-- TODO: Pass in the correct address for each section. -->
+  <PublicationSection rootAddress={rootId} address={''} />
 </div>
 
 <style>
diff --git a/src/lib/components/PublicationSection.svelte b/src/lib/components/PublicationSection.svelte
new file mode 100644
index 0000000..39f0c12
--- /dev/null
+++ b/src/lib/components/PublicationSection.svelte
@@ -0,0 +1,28 @@
+<script lang='ts'>
+  import type { PublicationTree } from "$lib/data_structures/publication_tree";
+  import { contentParagraph } from "$lib/snippets/PublicationSnippets.svelte";
+  import { TextPlaceholder } from "flowbite-svelte";
+  import { getContext } from "svelte";
+
+  let { address, rootAddress }: { address: string, rootAddress: string } = $props();
+
+  const publicationTree = getContext<PublicationTree>('publicationTree');
+
+  let sectionEvent = $derived.by(async () => await publicationTree.getEvent(address));
+  let rootEvent = $derived.by(async () => await publicationTree.getEvent(rootAddress));
+  let publicationType = $derived.by(async () =>
+    (await rootEvent)?.getMatchingTags('type')[0]?.[1]);
+  let hierarchy = $derived.by(async () => await publicationTree.getHierarchy(address));
+  let depth = $derived.by(async () => (await hierarchy).length);
+</script>
+
+<!-- TODO: Correctly handle events that are the start of a content section. -->
+<section>
+  {#await Promise.all([sectionEvent, publicationType])}
+    <TextPlaceholder size='xxl' />
+  {:then [sectionEvent, publicationType]}
+    <!-- TODO: Gracefully handle nulls. -->
+    {@render contentParagraph(sectionEvent?.content ?? '', publicationType ?? 'article', false)}
+  {/await}
+</section>
+