Fix/honest preview title page (#23)

* Fix title page preview to show only explicit frontmatter content

Author: arthurkowalsky

RELEASES.md

@@ -5,6 +5,10 @@
 ### New features
 - **Document sharing** — Share documents via encrypted URL links. Content is compressed (pako deflate) and encrypted (AES-256-GCM) client-side, then embedded in the URL fragment which never leaves the browser. Two modes: link-only (encryption key in URL) and password-protected (PBKDF2 key derivation). Configurable link expiry (1h to 30 days). Import shared documents with Replace All or Merge options. Optional URL shortening via is.gd.
 
+### Changed
+- **Honest title page preview** — Live preview now shows title page only from explicit YAML frontmatter instead of auto-generating phantom titles and dates from H1 headings and `new Date()`. When no frontmatter is present, a clickable placeholder guides users to add metadata. DOCX/PDF/HTML export retains auto-fallback behavior for professional output.
+- **Document Options** — "Export Options" renamed to "Document Options". Toggles (Title Page, ToC, Header, Footer) now affect both live preview and export, making the editor truly WYSIWYG.
+
 ---
 
 ## 1.3.1

index.html

@@ -402,7 +402,9 @@
         padding: 2px;
         color: #9ca3af;
         border-radius: 3px;
-        transition: color 0.1s, background 0.1s;
+        transition:
+          color 0.1s,
+          background 0.1s;
       }
       .explorer-item .item-actions button:hover {
         color: #ef4444;
@@ -698,7 +700,7 @@
       <div id="settingsPanel" class="settings-panel bg-gray-900 border-t border-gray-800">
         <div class="px-4 py-3 flex flex-wrap items-center gap-6">
           <span class="text-xs text-gray-500 uppercase tracking-wider font-medium"
-            >Export Options</span
+            >Document Options</span
           >
 
           <label class="flex items-center gap-2 cursor-pointer group">
@@ -746,18 +748,50 @@
     </header>
 
     <main class="flex-1 flex flex-col lg:flex-row min-h-0 relative">
-      <div id="explorerPanel" class="hidden lg:flex flex-col min-h-0 bg-white border-r border-gray-200 overflow-hidden absolute left-0 top-0 bottom-0 z-30 shadow-lg" style="width: 0; min-width: 0; pointer-events: none; transition: width 0.2s ease, min-width 0.2s ease, box-shadow 0.2s ease;">
-        <div class="px-3 py-2 bg-white border-b border-gray-200 flex items-center justify-between shrink-0">
+      <div
+        id="explorerPanel"
+        class="hidden lg:flex flex-col min-h-0 bg-white border-r border-gray-200 overflow-hidden absolute left-0 top-0 bottom-0 z-30 shadow-lg"
+        style="
+          width: 0;
+          min-width: 0;
+          pointer-events: none;
+          transition:
+            width 0.2s ease,
+            min-width 0.2s ease,
+            box-shadow 0.2s ease;
+        "
+      >
+        <div
+          class="px-3 py-2 bg-white border-b border-gray-200 flex items-center justify-between shrink-0"
+        >
           <span class="text-xs font-medium text-gray-500 uppercase tracking-wider">Files</span>
           <div class="flex items-center gap-1">
-            <button id="addDocBtn" class="text-gray-400 hover:text-kyotu-orange transition-colors p-0.5" title="New document">
+            <button
+              id="addDocBtn"
+              class="text-gray-400 hover:text-kyotu-orange transition-colors p-0.5"
+              title="New document"
+            >
               <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 4v16m8-8H4"
+                />
               </svg>
             </button>
-            <button id="explorerClose" class="text-gray-400 hover:text-gray-600 transition-colors p-0.5" title="Close (Ctrl+B)">
+            <button
+              id="explorerClose"
+              class="text-gray-400 hover:text-gray-600 transition-colors p-0.5"
+              title="Close (Ctrl+B)"
+            >
               <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M6 18L18 6M6 6l12 12"
+                />
               </svg>
             </button>
           </div>
@@ -770,9 +804,18 @@
           class="px-4 py-2.5 bg-white border-b border-gray-200 flex items-center justify-between shrink-0"
         >
           <div class="flex items-center gap-2">
-            <button id="explorerToggle" class="opacity-50 hover:opacity-80 text-gray-500 transition-all hidden lg:block" title="Toggle file explorer (Ctrl+B)">
+            <button
+              id="explorerToggle"
+              class="opacity-50 hover:opacity-80 text-gray-500 transition-all hidden lg:block"
+              title="Toggle file explorer (Ctrl+B)"
+            >
               <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+                />
               </svg>
             </button>
             <div

src/html-preview.js

@@ -84,16 +84,42 @@ function generateTitlePage(metadata, theme, options = {}) {
   return html;
 }
 
+function generateTitlePagePlaceholder() {
+  return `<div class="title-page-placeholder" data-action="insert-frontmatter">
+    <div class="title-page-placeholder-icon">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 5v14m-7-7h14"/>
+      </svg>
+    </div>
+    <div class="title-page-placeholder-text">Click to add title page</div>
+    <div class="title-page-placeholder-hint">title &middot; subtitle &middot; author &middot; date</div>
+  </div>`;
+}
+
 export function generateHTMLPreview(elements, metadata, themeIdOrObject = "kyotu", options = {}) {
   const theme = typeof themeIdOrObject === "string" ? getTheme(themeIdOrObject) : themeIdOrObject;
 
   let html = "";
-  if (metadata.title || metadata.subtitle || metadata.author || metadata.date) {
-    html += generateTitlePage(metadata, theme, options);
-    if (options.pagedMode) {
-      html += '<div class="title-page-break"></div>';
+  const showTitlePage = options.showTitlePage !== false;
+
+  if (showTitlePage) {
+    const isUserPreview = !!options.interactive || !!options.pagedMode;
+    const explicit = metadata._explicitFields;
+    const hasExplicitContent =
+      explicit && (explicit.title || explicit.subtitle || explicit.author || explicit.date);
+
+    if (hasExplicitContent) {
+      html += generateTitlePage(isUserPreview ? explicit : metadata, theme, options);
+      if (options.pagedMode) {
+        html += '<div class="title-page-break"></div>';
+      }
+    } else if (!isUserPreview && (metadata.title || metadata.date)) {
+      html += generateTitlePage(metadata, theme, options);
+    } else if (options.interactive) {
+      html += generateTitlePagePlaceholder();
     }
   }
+
   const interactive = !!options.interactive;
   for (const el of elements) html += elementToHTML(el, theme, interactive);
   return html;

src/main.js

@@ -186,6 +186,7 @@ Object.keys(toggles).forEach((id) => {
         })
       );
     } catch {}
+    updatePreview();
   });
 });
 
@@ -627,10 +628,18 @@ async function updatePreview() {
   }
 
   if (previewMode === "pages") {
-    const previewOptions = { logoDataUrl, pagedMode: true };
+    const previewOptions = {
+      logoDataUrl,
+      pagedMode: true,
+      showTitlePage: exportOptions.showTitlePage,
+    };
     await updatePreviewPaged(elements, metadata, theme, previewOptions);
   } else {
-    const previewOptions = { logoDataUrl, interactive: true };
+    const previewOptions = {
+      logoDataUrl,
+      interactive: true,
+      showTitlePage: exportOptions.showTitlePage,
+    };
     preview.classList.remove("page-mode");
     await renderPreview(preview, elements, metadata, theme, previewOptions);
   }
@@ -1088,6 +1097,31 @@ initScrollSync(markdownInput, preview);
 initFormattingToolbar(markdownInput);
 initIncludeAutocomplete(markdownInput, () => allDocuments);
 initDiagramActions(preview);
+
+preview.addEventListener("click", (e) => {
+  const placeholder = e.target.closest("[data-action='insert-frontmatter']");
+  if (!placeholder) return;
+  insertFrontmatterTemplate();
+});
+
+function insertFrontmatterTemplate() {
+  const current = markdownInput.value;
+  if (current.trimStart().startsWith("---")) {
+    markdownInput.focus();
+    const firstNewline = current.indexOf("\n");
+    markdownInput.setSelectionRange(firstNewline + 1, firstNewline + 1);
+    markdownInput.scrollTop = 0;
+    return;
+  }
+  const template = `---\ntitle: ""\nsubtitle: ""\nauthor: ""\ndate: ""\n---\n\n`;
+  markdownInput.value = template + current;
+  markdownInput.focus();
+  const cursorPos = template.indexOf('title: "') + 'title: "'.length;
+  markdownInput.setSelectionRange(cursorPos, cursorPos);
+  markdownInput.scrollTop = 0;
+  markdownInput.dispatchEvent(new Event("input"));
+}
+
 updateSyncToggleUI();
 
 function updateSyncToggleUI() {

src/parser.js

@@ -27,10 +27,12 @@ export function parseMarkdown(content) {
   const lines = content.split("\n");
   let metadata = {};
   let bodyLines = lines;
+  let hasExplicitFrontmatter = false;
 
   if (lines[0] === "---") {
     const endIndex = lines.findIndex((l, i) => i > 0 && l === "---");
     if (endIndex > 0) {
+      hasExplicitFrontmatter = true;
       const yamlLines = lines.slice(1, endIndex);
       yamlLines.forEach((line) => {
         const match = line.match(/^([\w-]+):\s*"?([^"]*)"?$/);
@@ -40,6 +42,13 @@ export function parseMarkdown(content) {
     }
   }
 
+  const explicitFields = {
+    title: metadata.title || null,
+    subtitle: metadata.subtitle || null,
+    author: metadata.author || null,
+    date: metadata.date || null,
+  };
+
   if (!metadata.title) {
     const firstH1 = bodyLines.find((l) => l.match(/^# /));
     metadata.title = firstH1 ? firstH1.replace(/^# /, "") : "Document";
@@ -64,6 +73,9 @@ export function parseMarkdown(content) {
     metadata.date = `${months[now.getMonth()]} ${now.getFullYear()}`;
   }
 
+  metadata._hasExplicitFrontmatter = hasExplicitFrontmatter;
+  metadata._explicitFields = explicitFields;
+
   return { metadata, body: bodyLines.join("\n") };
 }
 

src/preview-styles.js

@@ -230,6 +230,42 @@ export function generatePreviewStyles(theme, selectors = "#preview, #tePreview")
       page-break-after: always;
       display: block;
     }
+    :is(${selectors}) .title-page-placeholder {
+      border: 2px dashed #${c.muted}80;
+      border-radius: 8px;
+      padding: 2rem;
+      margin-bottom: 2rem;
+      text-align: center;
+      cursor: pointer;
+      transition: border-color 0.2s, background 0.2s;
+      background: transparent;
+    }
+    :is(${selectors}) .title-page-placeholder:hover {
+      border-color: #${c.primary};
+      background: #${c.primary}08;
+    }
+    :is(${selectors}) .title-page-placeholder-icon {
+      color: #${c.muted};
+      margin-bottom: 0.5rem;
+      display: flex;
+      justify-content: center;
+      transition: color 0.2s;
+    }
+    :is(${selectors}) .title-page-placeholder:hover .title-page-placeholder-icon {
+      color: #${c.primary};
+    }
+    :is(${selectors}) .title-page-placeholder-text {
+      font-family: ${bodyFont};
+      font-size: 14px;
+      font-weight: 500;
+      color: #${c.secondary};
+    }
+    :is(${selectors}) .title-page-placeholder-hint {
+      font-family: ${bodyFont};
+      font-size: 12px;
+      color: #${c.muted};
+      margin-top: 0.25rem;
+    }
   `;
 }
 

tests/features/preview/headings.feature

@@ -34,3 +34,28 @@ Feature: Heading rendering in preview
     Then the preview should contain text "My Report"
     And the preview should contain text "Executive Summary"
     And the preview should contain text "Test Author"
+
+  Scenario: Preview without frontmatter shows placeholder instead of phantom title page
+    Given the editor contains:
+      """
+      # My Document
+      Some content here.
+      """
+    When the preview renders
+    Then the preview should contain a ".title-page-placeholder" element
+    And the preview should not contain a ".title-page" element
+
+  Scenario: Title page toggle OFF hides title page and placeholder from preview
+    Given the editor contains:
+      """
+      ---
+      title: "My Report"
+      author: "Author"
+      ---
+      # Introduction
+      Content.
+      """
+    When the title page toggle is turned off
+    And the preview renders
+    Then the preview should not contain a ".title-page" element
+    And the preview should not contain a ".title-page-placeholder" element

tests/steps/common.steps.js

@@ -2,25 +2,11 @@ import { createBdd } from "playwright-bdd";
 import { test as base } from "playwright-bdd";
 import { chromium } from "playwright-core";
 
-/**
- * Custom test fixture that launches a fresh Chromium instance per test.
- * Required for gVisor/container environments where --single-process mode
- * crashes after browser context cleanup.
- *
- * In CI environments with proper Chromium support, the standard
- * Playwright browser management works fine.
- */
 export const test = base.extend({
   page: async ({}, use) => {
     const browser = await chromium.launch({
       headless: true,
-      args: [
-        "--no-sandbox",
-        "--disable-setuid-sandbox",
-        "--disable-gpu",
-        "--single-process",
-        "--no-zygote",
-      ],
+      args: ["--no-sandbox", "--disable-setuid-sandbox", "--disable-gpu"],
     });
     const context = await browser.newContext({
       viewport: { width: 1280, height: 720 },

tests/steps/preview.steps.js

@@ -102,6 +102,16 @@ Then("the preview paragraph should not contain an {string} element", async ({ pa
   expect(count).toBe(0);
 });
 
+Then("the preview should not contain a {string} element", async ({ page }, selector) => {
+  const count = await page.locator(`#preview ${selector}`).count();
+  expect(count).toBe(0);
+});
+
+When("the title page toggle is turned off", async ({ page }) => {
+  await page.click("#settingsBtn");
+  await page.click("#toggleTitlePage");
+});
+
 // --- Table ---
 
 Then("the first row should contain {string} cells", async ({ page }, cellTag) => {