Merges pull request #18

Issue#201 format discrete headings

src/app.css

@@ -74,7 +74,7 @@
     @apply hover:bg-primary-100 dark:hover:bg-primary-800;
   }
 
-  /* Heading */
+  /* Section headers */
   h1.h-leather,
   h2.h-leather,
   h3.h-leather,

src/lib/components/Preview.svelte

@@ -150,31 +150,12 @@
 </script>
 
 {#snippet sectionHeading(title: string, depth: number)}
-  {#if depth === 0}
-    <h1 class='h-leather'>
-      {title}
-    </h1>
-  {:else if depth === 1}
-    <h2 class='h-leather'>
-      {title}
-    </h2>
-  {:else if depth === 2}
-    <h3 class='h-leather'>
-      {title}
-    </h3>
-  {:else if depth === 3}
-    <h4 class='h-leather'>
-      {title}
-    </h4>
-  {:else if depth === 4}
-    <h5 class='h-leather'>
-      {title}
-    </h5>
-  {:else}
-    <h6 class='h-leather'>
-      {title}
-    </h6>
-  {/if}
+  {@const headingLevel = Math.min(depth + 1, 6)}
+  {@const className = $pharosInstance.isFloatingTitle(rootId) ? 'discrete' : 'h-leather'}
+  
+  <svelte:element this={`h${headingLevel}`} class={className}>
+    {title}
+  </svelte:element>
 {/snippet}
 
 {#snippet contentParagraph(content: string, publicationType: string)}

src/lib/parser.ts

@@ -270,6 +270,21 @@ export default class Pharos {
     return block.convert();
   }
 
+  /**
+   * Checks if the node with the given ID is a floating title (discrete header).
+   * @param id The ID of the node to check.
+   * @returns True if the node is a floating title, false otherwise.
+   */
+  isFloatingTitle(id: string): boolean {
+    const normalizedId = this.normalizeId(id);
+    if (!normalizedId || !this.nodes.has(normalizedId)) {
+      return false;
+    }
+    
+    const context = this.eventToContextMap.get(normalizedId);
+    return context === 'floating_title';
+  }
+
   /**
    * Updates the `content` field of a Nostr event in-place.
    * @param dTag The d tag of the event to update.

src/routes/[...catchall]/+page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+  import { Button, P } from 'flowbite-svelte';
+</script>
+
+<div class="leather flex flex-col items-center justify-center min-h-screen text-center px-4">
+  <h1 class="h-leather mb-4">404 - Page Not Found</h1>
+  <P class="note-leather mb-6">The page you are looking for does not exist or has been moved.</P>
+  <div class="flex space-x-4">
+    <Button class="btn-leather !w-fit" on:click={() => goto('/')}>Return to Home</Button>
+    <Button class="btn-leather !w-fit" outline on:click={() => window.history.back()}>Go Back</Button>
+  </div>
+</div>

src/styles/publications.css

@@ -229,4 +229,28 @@
     .audioblock .content audio {
         @apply w-full;
     }
+
+    /* Discrete headers */
+    h3.discrete,
+    h4.discrete,
+    h5.discrete,
+    h6.discrete {
+        @apply text-gray-800 dark:text-gray-300;
+    }
+
+    h3.discrete {
+        @apply text-2xl font-bold;
+    }
+
+    h4.discrete {
+        @apply text-xl font-bold;
+    }
+
+    h5.discrete {
+        @apply text-lg font-semibold;
+    }
+
+    h6.discrete {
+        @apply text-base font-semibold;
+    }
 }