From 0612f79a1ea773d58c3e6d34d46c38e9fafbe67b Mon Sep 17 00:00:00 2001
From: limina1 <liminal@duck.com>
Date: Sun, 10 Aug 2025 15:10:57 -0400
Subject: [PATCH] refactor: remove gradient, work on preview

---
 package-lock.json                      | 180 ++++++------
 src/lib/components/ZettelEditor.svelte | 366 ++++++++++++++++---------
 src/lib/utils/asciidoc_metadata.ts     | 141 +++++++---
 3 files changed, 434 insertions(+), 253 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ed96156..003bf33 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2783,19 +2783,39 @@
       }
     },
     "node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "devOptional": true,
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
       "license": "MIT",
       "dependencies": {
-        "readdirp": "^4.0.1"
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
       },
       "engines": {
-        "node": ">= 14.16.0"
+        "node": ">= 8.10.0"
       },
       "funding": {
         "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
       }
     },
     "node_modules/cliui": {
@@ -3711,6 +3731,16 @@
         }
       }
     },
+    "node_modules/eslint-plugin-svelte/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "8.4.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
@@ -5953,17 +5983,27 @@
       }
     },
     "node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "devOptional": true,
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
       "engines": {
-        "node": ">= 14.18.0"
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/readdirp/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
       },
       "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
     "node_modules/require-directory": {
@@ -6471,6 +6511,36 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/svelte-check/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/svelte-check/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/svelte-eslint-parser": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-1.3.1.tgz",
@@ -6671,54 +6741,6 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/tailwindcss/node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/tailwindcss/node_modules/postcss-load-config": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
@@ -6767,30 +6789,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/tailwindcss/node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/yaml": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
-      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
-    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -7376,13 +7374,15 @@
       }
     },
     "node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true,
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
       "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 14.6"
       }
     },
     "node_modules/yargs": {
diff --git a/src/lib/components/ZettelEditor.svelte b/src/lib/components/ZettelEditor.svelte
index a993d26..535dd8b 100644
--- a/src/lib/components/ZettelEditor.svelte
+++ b/src/lib/components/ZettelEditor.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Textarea, Button } from "flowbite-svelte";
-  import { EyeOutline } from "flowbite-svelte-icons";
+  import { EyeOutline, QuestionCircleOutline } from "flowbite-svelte-icons";
   import {
   extractSmartMetadata,
   parseAsciiDocWithMetadata,
@@ -11,42 +11,15 @@
   metadataToTags,
   parseSimpleAttributes,
 } from "$lib/utils/asciidoc_metadata";
-import asciidoctor from "asciidoctor";
+import Asciidoctor from "asciidoctor";
+
+  // Initialize Asciidoctor processor
+  const asciidoctor = Asciidoctor();
 
   // Component props
   let {
     content = "",
-    placeholder = `// ITERATIVE PARSING - Choose your publishing level:
-// Level 2: Only == sections become events (containing === and deeper)
-// Level 3: == sections become indices, === sections become events
-// Level 4: === sections become indices, ==== sections become events
-
-= Understanding Knowledge
-:image: https://i.nostr.build/IUs0xNyUEf5hXTFL.jpg
-:published: 2025-04-21
-:tags: knowledge, philosophy, education
-:type: text
-
-== Preface
-:tags: introduction, preface
-
-This essay outlines the purpose of Alexandria...
-
-== Introduction: Knowledge as a Living Ecosystem
-:tags: introduction, ecosystem
-
-Knowledge exists as dynamic representations...
-
-=== Why Investigate the Nature of Knowledge?
-:difficulty: intermediate
-
-Understanding the nature of knowledge itself...
-
-==== The Four Perspectives
-:complexity: high
-
-1. Material Cause: The building blocks...
-    `,
+    placeholder = "Start writing your AsciiDoc content here...",
     showPreview = false,
     parseLevel = 2,
     onContentChange = (content: string) => {},
@@ -117,16 +90,20 @@ Understanding the nature of knowledge itself...
   let parsedSections = $derived.by(() => {
     if (!parsedContent) return [];
     
-    return parsedContent.sections.map((section: { metadata: AsciiDocMetadata; content: string; title: string }) => {
+    return parsedContent.sections.map((section: { metadata: AsciiDocMetadata; content: string; title: string; level?: number }) => {
       // Use simple parsing directly on section content for accurate tag extraction
       const tags = parseSimpleAttributes(section.content);
-      const level = getSectionLevel(section.content);
+      const level = section.level || getSectionLevel(section.content);
+      
+      // Determine if this is an index section (just title) or content section (full content)
+      const isIndex = parseLevel > 2 && level < parseLevel;
       
       return {
         title: section.title || "Untitled",
         content: section.content.trim(),
         tags,
         level,
+        isIndex,
       };
     });
   });
@@ -147,12 +124,20 @@ Understanding the nature of knowledge itself...
     }
   }
 
+  // Tutorial sidebar state
+  let showTutorial = $state(false);
+
   // Toggle preview panel
   function togglePreview() {
     const newShowPreview = !showPreview;
     onPreviewToggle(newShowPreview);
   }
 
+  // Toggle tutorial sidebar
+  function toggleTutorial() {
+    showTutorial = !showTutorial;
+  }
+
   // Handle content changes
   function handleContentChange(event: Event) {
     const target = event.target as HTMLTextAreaElement;
@@ -162,7 +147,7 @@ Understanding the nature of knowledge itself...
 
 <div class="flex flex-col space-y-4">
   <!-- Smart Publishing Interface -->
-  <div class="bg-gradient-to-r from-blue-50 to-green-50 dark:from-blue-900/20 dark:to-green-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4">
+  <div class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 mb-4">
     <div class="flex items-start justify-between">
       <div class="flex-1">
         <h3 class="text-sm font-medium text-gray-800 dark:text-gray-200 mb-2">
@@ -206,39 +191,44 @@ Understanding the nature of knowledge itself...
   </div>
 
   <div class="flex items-center justify-between">
-    <Button
-      color="light"
-      size="sm"
-      on:click={togglePreview}
-      class="flex items-center space-x-1"
-    >
-      {#if showPreview}
-        <EyeOutline class="w-4 h-4" />
-        <span>Hide Preview</span>
-      {:else}
-        <EyeOutline class="w-4 h-4" />
-        <span>Show Preview</span>
-      {/if}
-    </Button>
-
-    <!-- Smart Publishing Button -->
-    {#if generatedEvents && contentType !== 'none'}
+    <div class="flex items-center space-x-2">
       <Button
-        color={contentType === 'article' ? 'blue' : 'green'}
+        color="light"
         size="sm"
-        on:click={handlePublish}
+        on:click={togglePreview}
         class="flex items-center space-x-1"
       >
-        {#if contentType === 'article'}
-          <span>📚 Publish Article</span>
-          <span class="text-xs opacity-75">({generatedEvents.contentEvents.length + 1} events)</span>
+        {#if showPreview}
+          <EyeOutline class="w-4 h-4" />
+          <span>Hide Preview</span>
         {:else}
-          <span>📝 Publish Notes</span>
-          <span class="text-xs opacity-75">({generatedEvents.contentEvents.length} events)</span>
+          <EyeOutline class="w-4 h-4" />
+          <span>Show Preview</span>
         {/if}
       </Button>
+
+      <Button
+        color="light"
+        size="sm"
+        on:click={toggleTutorial}
+        class="flex items-center space-x-1"
+      >
+        <QuestionCircleOutline class="w-4 h-4" />
+        <span>{showTutorial ? 'Hide' : 'Show'} Help</span>
+      </Button>
+    </div>
+
+    <!-- Publishing Button -->
+    {#if generatedEvents && contentType !== 'none'}
+      <Button
+        color="primary"
+        size="sm"
+        on:click={handlePublish}
+      >
+        Publish
+      </Button>
     {:else}
-      <div class="text-xs text-gray-500 dark:text-gray-400 italic">
+      <div class="text-xs text-gray-500 dark:text-gray-400">
         Add content to enable publishing
       </div>
     {/if}
@@ -246,7 +236,7 @@ Understanding the nature of knowledge itself...
 
   <div class="flex space-x-6 h-96">
     <!-- Editor Panel -->
-    <div class="{showPreview ? 'w-1/2' : 'w-full'} flex flex-col">
+    <div class="{showPreview && showTutorial ? 'w-1/3' : showPreview || showTutorial ? 'w-1/2' : 'w-full'} flex flex-col">
       <div class="flex-1 relative border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-900">
         <Textarea
           bind:value={content}
@@ -295,92 +285,206 @@ Understanding the nature of knowledge itself...
                 </div>
               {/if}
               
-              {#snippet previewContent()}
-                {@const levelColors = {
-                  2: 'bg-red-400', 
-                  3: 'bg-blue-400',
-                  4: 'bg-green-400',
-                  5: 'bg-yellow-400',
-                  6: 'bg-purple-400'
-                } as Record<number, string>}
-                
-                <!-- Calculate continuous indent guides that span multiple sections -->
-                {@const maxLevel = Math.max(...parsedSections.map(s => s.level))}
-                {@const guideLevels = Array.from({length: maxLevel - 1}, (_, i) => i + 2)}
-                
-                {@const minLevel = Math.min(...parsedSections.map(s => s.level))}
-                {@const maxIndentLevel = Math.max(...parsedSections.map(s => Math.max(0, s.level - minLevel)))}
-                {@const containerPadding = 24}
+              <div class="prose prose-sm dark:prose-invert max-w-none">
+                <!-- Render full document with title if it's an article -->
+                {#if contentType === 'article' && parsedContent?.title}
+                  {@const documentHeader = content.split(/\n==\s+/)[0]}
+                  <div class="mb-6 border-b border-gray-200 dark:border-gray-700 pb-4">
+                    <div class="asciidoc-content">
+                      {@html asciidoctor.convert(documentHeader, {
+                        standalone: false,
+                        attributes: {
+                          showtitle: true,
+                          sectids: false,
+                        }
+                      })}
+                    </div>
+                    <!-- Document-level tags -->
+                    {#if parsedContent.content}
+                      {@const documentTags = parseSimpleAttributes(parsedContent.content)}
+                      {#if documentTags.filter(tag => tag[0] === 't').length > 0}
+                        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 mt-3">
+                          <div class="flex flex-wrap gap-2 items-center">
+                            <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Document tags:</span>
+                            <!-- Show only hashtags (t-tags) -->
+                            {#each documentTags.filter(tag => tag[0] === 't') as tag}
+                              <div class="bg-blue-600 text-blue-100 px-2 py-1 rounded-full text-xs font-medium flex items-baseline">
+                                <span class="mr-1">#</span>
+                                <span>{tag[1]}</span>
+                              </div>
+                            {/each}
+                          </div>
+                        </div>
+                      {/if}
+                    {/if}
+                  </div>
+                {/if}
                 
-                <div class="prose prose-sm dark:prose-invert max-w-none relative" style="padding-left: {containerPadding}px;">
-
                 {#each parsedSections as section, index}
-                  {#snippet sectionContent()}
-                    {@const indentLevel = Math.max(0, section.level - 2)}
-                    {@const currentColor = levelColors[section.level] || 'bg-gray-500'}
-                    
-                    <div class="mb-12 relative" style="margin-left: {indentLevel * 24 - containerPadding}px; padding-left: 12px;">
-                      <!-- Current level highlight guide -->
-                      <div 
-                        class="absolute top-0 w-1.5 {currentColor} opacity-60"
-                        style="left: {-4}px; height: 100%;"
-                      ></div>
+                  {@const indentLevel = Math.max(0, section.level - 2)}
+                  {@const levelColors = {
+                    2: 'bg-yellow-400', 
+                    3: 'bg-yellow-500',
+                    4: 'bg-yellow-600',
+                    5: 'bg-gray-400',
+                    6: 'bg-gray-500'
+                  } as Record<number, string>}
+                  {@const currentColor = levelColors[section.level] || 'bg-gray-600'}
+                  
+                  <div class="mb-6 relative" style="margin-left: {indentLevel * 24}px; padding-left: 12px;">
+                    <!-- Vertical indent guide -->
+                    <div 
+                      class="absolute top-0 w-1 {currentColor} opacity-60"
+                      style="left: 0; height: 100%;"
+                    ></div>
                     
-                      <!-- Section content -->
-                      <div class="prose-content">
-                        {@html asciidoctor().convert(
-                          `${'='.repeat(section.level)} ${section.title}\n\n${section.content}`,
-                          {
+                    <div
+                      class="text-sm text-gray-800 dark:text-gray-200 asciidoc-content"
+                    >
+                      {#if section.isIndex}
+                        <!-- Index section: just show the title as a header -->
+                        <div class="font-semibold text-gray-900 dark:text-gray-100 py-2">
+                          {section.title}
+                        </div>
+                      {:else}
+                        <!-- Content section: render full content -->
+                        <div class="prose prose-sm dark:prose-invert">
+                          {@html asciidoctor.convert(section.content, {
                             standalone: false,
-                            doctype: "article",
                             attributes: {
                               showtitle: true,
-                              sectids: true,
-                            },
-                          },
-                        )}
-                      </div>
-
-                      <!-- Tags -->
-                      {#if section.tags && section.tags.filter(tag => tag[0] === 't').length > 0}
-                        <div class="mt-4 pt-3 border-t border-gray-100 dark:border-gray-800">
-                          <div class="flex flex-wrap gap-2">
-                            {#each section.tags.filter(tag => tag[0] === 't') as tag}
-                              <span class="bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300 px-2 py-1 rounded text-xs">
-                                #{tag[1]}
-                              </span>
-                            {/each}
-                          </div>
+                              sectanchors: true,
+                              sectids: true
+                            }
+                          })}
                         </div>
                       {/if}
+                    </div>
 
-                      <!-- Event boundary indicator -->
-                      {#if index < parsedSections.length - 1}
-                        <div class="mt-8 pt-4 border-t border-dashed border-gray-300 dark:border-gray-600 relative">
-                          <div class="absolute -top-2.5 left-1/2 transform -translate-x-1/2 bg-white dark:bg-gray-900 px-2">
-                            <span class="text-xs text-gray-500 dark:text-gray-400 font-medium">Event Boundary</span>
+                    <!-- Gray area with tag bubbles only for content sections -->
+                    {#if !section.isIndex}
+                      <div class="my-4 relative">
+                        <!-- Gray background area -->
+                        <div
+                          class="bg-gray-200 dark:bg-gray-700 rounded-lg p-3 mb-2"
+                        >
+                          <div class="flex flex-wrap gap-2 items-center">
+                            {#if section.tags && section.tags.filter(tag => tag[0] === 't').length > 0}
+                              <!-- Show only hashtags (t-tags) -->
+                              {#each section.tags.filter(tag => tag[0] === 't') as tag}
+                                <div
+                                  class="bg-blue-600 text-blue-100 px-2 py-1 rounded-full text-xs font-medium flex items-baseline"
+                                >
+                                  <span class="mr-1">#</span>
+                                  <span>{tag[1]}</span>
+                                </div>
+                              {/each}
+                            {:else}
+                              <span
+                                class="text-gray-500 dark:text-gray-400 text-xs italic"
+                                >No hashtags</span
+                              >
+                            {/if}
                           </div>
                         </div>
-                      {/if}
-                    </div>
-                  {/snippet}
-                  {@render sectionContent()}
-                  {/each}
-                </div>
 
-                <!-- Event count summary -->
-                <div class="mt-8 pt-4 border-t border-gray-200 dark:border-gray-700">
-                  <div class="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 px-3 py-2 rounded">
-                    <strong>Total Events:</strong> {parsedSections.length + (contentType === 'article' ? 1 : 0)}
-                    ({contentType === 'article' ? '1 index + ' : ''}{parsedSections.length} content)
+                        {#if index < parsedSections.length - 1 && !parsedSections[index + 1].isIndex}
+                          <!-- Event boundary line only between content sections -->
+                          <div
+                            class="border-t-2 border-dashed border-blue-400 relative"
+                          >
+                            <div
+                              class="absolute -top-2 left-1/2 transform -translate-x-1/2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded text-xs font-medium"
+                            >
+                              Event Boundary
+                            </div>
+                          </div>
+                        {/if}
+                      </div>
+                    {/if}
                   </div>
-                </div>
-              {/snippet}
-              {@render previewContent()}
+                {/each}
+              </div>
+
+              <div
+                class="mt-4 text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-900 p-2 rounded border"
+              >
+                <strong>Event Count:</strong>
+                {parsedSections.length + (contentType === 'article' ? 1 : 0)} event{(parsedSections.length + (contentType === 'article' ? 1 : 0)) !== 1
+                  ? "s"
+                  : ""}
+                ({contentType === 'article' ? '1 index + ' : ''}{parsedSections.length} content)
+              </div>
             {/if}
           </div>
         </div>
       </div>
     {/if}
+
+    <!-- Tutorial Sidebar -->
+    {#if showTutorial}
+      <div class="{showPreview ? 'w-1/3' : 'w-1/2'} flex flex-col">
+        <div class="border border-gray-200 dark:border-gray-700 rounded-lg h-full flex flex-col overflow-hidden">
+          <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
+              AsciiDoc Guide
+            </h3>
+          </div>
+          
+          <div class="flex-1 overflow-y-auto p-4 text-sm text-gray-700 dark:text-gray-300 space-y-4">
+            <div>
+              <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Publishing Levels</h4>
+              <ul class="space-y-1 text-xs">
+                <li><strong>Level 2:</strong> Only == sections become events (containing === and deeper)</li>
+                <li><strong>Level 3:</strong> == sections become indices, === sections become events</li>
+                <li><strong>Level 4:</strong> === sections become indices, ==== sections become events</li>
+              </ul>
+            </div>
+
+            <div>
+              <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Example Structure</h4>
+              <pre class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-xs font-mono overflow-x-auto">{`= Understanding Knowledge
+:image: https://i.nostr.build/example.jpg
+:published: 2025-04-21
+:tags: knowledge, philosophy, education
+:type: text
+
+== Preface
+:tags: introduction, preface
+
+This essay outlines the purpose...
+
+== Introduction: Knowledge Ecosystem
+:tags: introduction, ecosystem
+
+Knowledge exists as dynamic representations...
+
+=== Why Investigate Knowledge?
+:difficulty: intermediate
+
+Understanding the nature of knowledge...
+
+==== The Four Perspectives
+:complexity: high
+
+1. Material Cause: The building blocks...`}</pre>
+            </div>
+
+            <div>
+              <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Attributes</h4>
+              <p class="text-xs">Use <code>:key: value</code> format to add metadata that becomes event tags.</p>
+            </div>
+
+            <div>
+              <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Content Types</h4>
+              <ul class="space-y-1 text-xs">
+                <li><strong>Article:</strong> Starts with = title, creates index + content events</li>
+                <li><strong>Notes:</strong> Just == sections, creates individual content events</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    {/if}
   </div>
 </div>
diff --git a/src/lib/utils/asciidoc_metadata.ts b/src/lib/utils/asciidoc_metadata.ts
index 3f739d5..b70e15b 100644
--- a/src/lib/utils/asciidoc_metadata.ts
+++ b/src/lib/utils/asciidoc_metadata.ts
@@ -75,6 +75,30 @@ function createProcessor() {
   return Processor();
 }
 
+/**
+ * Decodes HTML entities in a string
+ */
+function decodeHtmlEntities(text: string): string {
+  const entities: Record<string, string> = {
+    '&#8217;': "'",
+    '&#8216;': "'",
+    '&#8220;': '"',
+    '&#8221;': '"',
+    '&amp;': '&',
+    '&lt;': '<',
+    '&gt;': '>',
+    '&quot;': '"',
+    '&#39;': "'",
+    '&apos;': "'",
+  };
+  
+  let result = text;
+  for (const [entity, char] of Object.entries(entities)) {
+    result = result.replace(new RegExp(entity, 'g'), char);
+  }
+  return result;
+}
+
 /**
  * Extracts tags from attributes, combining tags and keywords
  */
@@ -305,7 +329,7 @@ export function extractDocumentMetadata(inputContent: string): {
 
   // Extract basic metadata
   const title = document.getTitle();
-  if (title) metadata.title = title;
+  if (title) metadata.title = decodeHtmlEntities(title);
 
   // Handle multiple authors - combine header line and attributes
   const authors = extractAuthorsFromHeader(document.getSource());
@@ -367,32 +391,24 @@ export function extractSectionMetadata(inputSectionContent: string): {
   content: string;
   title: string;
 } {
-  const asciidoctor = createProcessor();
-  const document = asciidoctor.load(`= Temp\n\n${inputSectionContent}`, { standalone: false }) as Document;
-  const sections = document.getSections();
-  
-  if (sections.length === 0) {
-    return { metadata: {}, content: inputSectionContent, title: '' };
+  // Extract title directly from the content using regex for more control
+  const titleMatch = inputSectionContent.match(/^(=+)\s+(.+)$/m);
+  let title = '';
+  if (titleMatch) {
+    title = titleMatch[2].trim();
   }
-
-  const section = sections[0];
-  const title = section.getTitle() || '';
+  
   const metadata: SectionMetadata = { title };
   
-  // Parse attributes from the section content (no longer used - we use simple parsing in generateNostrEvents)
-  const attributes = {};
-
   // Extract authors from section content
   const authors = extractAuthorsFromHeader(inputSectionContent, true);
   if (authors.length > 0) {
     metadata.authors = authors;
   }
 
-  // Map attributes to metadata (sections can have authors)
-  mapAttributesToMetadata(attributes, metadata, false);
-
-  // Handle tags and keywords
-  const tags = extractTagsFromAttributes(attributes);
+  // Extract tags using parseSimpleAttributes (which is what's used in generateNostrEvents)
+  const simpleAttrs = parseSimpleAttributes(inputSectionContent);
+  const tags = simpleAttrs.filter(attr => attr[0] === 't').map(attr => attr[1]);
   if (tags.length > 0) {
     metadata.tags = tags;
   }
@@ -590,7 +606,12 @@ export function parseAsciiDocIterative(content: string, parseLevel: number = 2):
         // Save previous section if exists
         if (currentSection) {
           const sectionContent = currentSectionContent.join('\n');
-          sections.push(extractSectionMetadata(sectionContent));
+          const sectionMeta = extractSectionMetadata(sectionContent);
+          // For level 2, preserve the full content including the header
+          sections.push({
+            ...sectionMeta,
+            content: sectionContent  // Use full content, not stripped
+          });
         }
         
         // Start new section
@@ -606,7 +627,12 @@ export function parseAsciiDocIterative(content: string, parseLevel: number = 2):
     // Save the last section
     if (currentSection) {
       const sectionContent = currentSectionContent.join('\n');
-      sections.push(extractSectionMetadata(sectionContent));
+      const sectionMeta = extractSectionMetadata(sectionContent);
+      // For level 2, preserve the full content including the header
+      sections.push({
+        ...sectionMeta,
+        content: sectionContent  // Use full content, not stripped
+      });
     }
     
     const docContent = documentContent.join('\n');
@@ -618,30 +644,36 @@ export function parseAsciiDocIterative(content: string, parseLevel: number = 2):
     };
   }
   
-  // Level 3+: Parse both index level (parseLevel-1) and content level (parseLevel)
-  const indexLevelPattern = new RegExp(`^${'='.repeat(parseLevel - 1)}\\s+`);
-  const contentLevelPattern = new RegExp(`^${'='.repeat(parseLevel)}\\s+`);
+  // Level 3+: Parse hierarchically
+  // All levels from 2 to parseLevel-1 are indices (title only)
+  // Level parseLevel are content sections (full content)
   
+  // First, collect all sections at the content level (parseLevel)
+  const contentLevelPattern = new RegExp(`^${'='.repeat(parseLevel)}\\s+`);
   let currentSection: string | null = null;
   let currentSectionContent: string[] = [];
   let documentContent: string[] = [];
   let inDocumentHeader = true;
   
   for (const line of lines) {
-    // Check for both index level and content level headers
-    if (line.match(indexLevelPattern) || line.match(contentLevelPattern)) {
+    if (line.match(contentLevelPattern)) {
       inDocumentHeader = false;
       
       // Save previous section if exists
       if (currentSection) {
         const sectionContent = currentSectionContent.join('\n');
-        sections.push(extractSectionMetadata(sectionContent));
+        const sectionMeta = extractSectionMetadata(sectionContent);
+        sections.push({
+          ...sectionMeta,
+          content: sectionContent  // Full content including headers
+        });
       }
       
-      // Start new section
+      // Start new content section
       currentSection = line;
       currentSectionContent = [line];
     } else if (currentSection) {
+      // Continue collecting content for current section
       currentSectionContent.push(line);
     } else if (inDocumentHeader) {
       documentContent.push(line);
@@ -651,15 +683,60 @@ export function parseAsciiDocIterative(content: string, parseLevel: number = 2):
   // Save the last section
   if (currentSection) {
     const sectionContent = currentSectionContent.join('\n');
-    sections.push(extractSectionMetadata(sectionContent));
+    const sectionMeta = extractSectionMetadata(sectionContent);
+    sections.push({
+      ...sectionMeta,
+      content: sectionContent  // Full content including headers
+    });
+  }
+  
+  // Now collect index sections (all levels from 2 to parseLevel-1)
+  // These should be shown as navigation/structure but not full content
+  const indexSections: Array<{
+    metadata: SectionMetadata;
+    content: string;
+    title: string;
+    level: number;
+  }> = [];
+  
+  for (let level = 2; level < parseLevel; level++) {
+    const levelPattern = new RegExp(`^${'='.repeat(level)}\\s+(.+)$`, 'gm');
+    const matches = content.matchAll(levelPattern);
+    
+    for (const match of matches) {
+      const title = match[1].trim();
+      indexSections.push({
+        metadata: { title },
+        content: `${'='.repeat(level)} ${title}`, // Just the header line for index sections
+        title,
+        level
+      });
+    }
   }
   
+  // Add actual level to content sections based on their content
+  const contentSectionsWithLevel = sections.map(s => ({
+    ...s, 
+    level: getSectionLevel(s.content)
+  }));
+  
+  // Combine index sections and content sections
+  // Sort by position in original content to maintain order
+  const allSections = [...indexSections, ...contentSectionsWithLevel];
+  
+  // Sort sections by their appearance in the original content
+  allSections.sort((a, b) => {
+    const posA = content.indexOf(a.content.split('\n')[0]);
+    const posB = content.indexOf(b.content.split('\n')[0]);
+    return posA - posB;
+  });
+  
   const docContent = documentContent.join('\n');
   return {
     metadata: docMetadata,
     content: docContent,
     title: docMetadata.title || '',
-    sections: sections
+    sections: allSections
   };
 }
 
@@ -721,9 +798,9 @@ export function generateNostrEvents(parsed: ParsedAsciiDoc, parseLevel: number =
   const generateSectionId = (title: string): string => {
     return title
       .toLowerCase()
-      .replace(/[^a-z0-9\s]/g, '')
-      .replace(/\s+/g, '-')
-      .trim();
+      .replace(/[^\p{L}\p{N}]/gu, "-")
+      .replace(/-+/g, "-")
+      .replace(/^-|-$/g, "");
   };
   
   // Build hierarchical tree structure