Begin to move off of `<Preview>` and onto `<PublicationSection>`

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>

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>
+