made header handling more concise and dynamic section/disrete

src/lib/components/Preview.svelte

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