Fix exporter

app/scripts/README-TXT-EXPORT.md

@@ -5,13 +5,23 @@ This script exports the article to a simple text format suitable for book publis
 ## Usage
 
 ```bash
-npm run export:txt
+yarn export:txt
 ```
 
 Or with custom filename:
 
 ```bash
-node scripts/export-txt.mjs --filename=my-article
+yarn export:txt -- --filename=my-article
+```
+
+By default, code blocks inside `<c>...</c>` are hard-wrapped to 80 characters per line. You can disable or configure this:
+
+```bash
+# Disable wrapping
+yarn export:txt -- --wrap-code=false
+
+# Change wrap width
+yarn export:txt -- --code-width=100
 ```
 
 ## Output
@@ -65,7 +75,7 @@ Example:
 ```
 Example:
 ```
-Use the <ic>npm install</ic> command to install dependencies.
+Use the <ic>yarn install</ic> command to install dependencies.
 ```
 
 #### LaTeX Formulas

app/scripts/export-docx.mjs

@@ -14,7 +14,7 @@
  *   npm run export:docx
  */
 
-import { Document, Packer, Paragraph, TextRun, HeadingLevel, AlignmentType } from 'docx';
+import { Document, Packer, Paragraph, TextRun, HeadingLevel, AlignmentType, LineRuleType } from 'docx';
 import { promises as fs } from 'node:fs';
 import { resolve } from 'node:path';
 import process from 'node:process';
@@ -93,6 +93,21 @@ function parseInlineFormatting(text) {
   return runs.length > 0 ? runs : [new TextRun(text)];
 }
 
+function codeBlockToParagraph(codeLines) {
+  const codeRuns = codeLines.map((codeLine, idx) => new TextRun({
+    break: idx === 0 ? 0 : 1,
+    children: [codeLine],
+    font: 'Courier New',
+    size: 20
+  }));
+
+  return new Paragraph({
+    children: codeRuns,
+    shading: { fill: 'F5F5F5', type: 'clear' },
+    spacing: { before: 200, after: 200, line: 240, lineRule: LineRuleType.AUTO }
+  });
+}
+
 async function convertTxtToDocx(txtPath, outputPath) {
   console.log(`📖 Reading TXT file: ${txtPath}`);
   const content = await fs.readFile(txtPath, 'utf-8');
@@ -112,12 +127,25 @@ async function convertTxtToDocx(txtPath, outputPath) {
     }
     
     // Handle code blocks <c>...</c>
-    if (line.trim().startsWith('<c>')) {
+    if (/^\s*<c>/.test(line)) {
       inCodeBlock = true;
       codeLines = [];
-      const firstLine = line.replace(/^<c>\s*/, '');
-      if (firstLine && !firstLine.startsWith('</c>')) {
-        codeLines.push(firstLine);
+
+      const firstLine = line.replace(/^\s*<c>/, '');
+      if (firstLine) {
+        // Handle single-line code blocks like: <c>code...</c>
+        if (firstLine.trim().endsWith('</c>')) {
+          const singleLine = firstLine.replace(/<\/c>\s*$/, '');
+          codeLines.push(singleLine);
+          paragraphs.push(codeBlockToParagraph(codeLines));
+          inCodeBlock = false;
+          codeLines = [];
+          continue;
+        }
+
+        if (!firstLine.startsWith('</c>')) {
+          codeLines.push(firstLine);
+        }
       }
       continue;
     }
@@ -128,13 +156,7 @@ async function convertTxtToDocx(txtPath, outputPath) {
       
       // Add code block as paragraph(s)
       if (codeLines.length > 0) {
-        paragraphs.push(new Paragraph({
-          text: codeLines.join('\n'),
-          font: 'Courier New',
-          size: 20,
-          shading: { fill: 'F5F5F5', type: 'clear' },
-          spacing: { before: 200, after: 200 }
-        }));
+        paragraphs.push(codeBlockToParagraph(codeLines));
       }
       
       inCodeBlock = false;

app/scripts/export-txt.mjs

@@ -35,16 +35,23 @@ async function run(command, args = [], options = {}) {
   });
 }
 
-async function waitForServer(url, timeoutMs = 60000) {
+async function waitForServer(urlOrFn, timeoutMs = 60000) {
+  const getUrl = typeof urlOrFn === 'function' ? urlOrFn : () => urlOrFn;
   const start = Date.now();
   while (Date.now() - start < timeoutMs) {
     try {
+      const url = getUrl();
+      if (!url) {
+        await delay(200);
+        continue;
+      }
       const res = await fetch(url);
       if (res.ok) return;
     } catch { }
     await delay(500);
   }
-  throw new Error(`Server did not start in time: ${url}`);
+  const lastUrl = getUrl();
+  throw new Error(`Server did not start in time: ${lastUrl || '(unknown url)'}`);
 }
 
 function parseArgs(argv) {
@@ -57,6 +64,15 @@ function parseArgs(argv) {
   return out;
 }
 
+function parseBoolean(value, defaultValue) {
+  if (value === undefined) return defaultValue;
+  if (value === true) return true;
+  const v = String(value).trim().toLowerCase();
+  if (['1', 'true', 'yes', 'y', 'on'].includes(v)) return true;
+  if (['0', 'false', 'no', 'n', 'off'].includes(v)) return false;
+  return defaultValue;
+}
+
 function slugify(text) {
   return String(text || '')
     .normalize('NFKD')
@@ -99,6 +115,82 @@ function headingToMarkdown(level, text) {
   return `${hashes} ${text}`;
 }
 
+function wrapLineWithIndent(line, maxWidth) {
+  if (line.length <= maxWidth) return [line];
+
+  const indentMatch = line.match(/^\s*/);
+  const indent = indentMatch ? indentMatch[0] : '';
+  const indentLen = indent.length;
+  const available = Math.max(10, maxWidth - indentLen);
+
+  let rest = line.slice(indentLen);
+  const out = [];
+
+  while (rest.length > available) {
+    let breakPos = -1;
+    for (let i = available; i >= 1; i--) {
+      if (/\s/.test(rest[i - 1])) {
+        breakPos = i;
+        break;
+      }
+    }
+    if (breakPos === -1) breakPos = available;
+
+    const chunk = rest.slice(0, breakPos).replace(/\s+$/g, '');
+    out.push(indent + chunk);
+    rest = rest.slice(breakPos).replace(/^\s+/g, '');
+  }
+
+  out.push(indent + rest);
+  return out;
+}
+
+function wrapCodeTextAccountingForTags(codeText, maxWidth) {
+  const width = Number(maxWidth);
+  if (!Number.isFinite(width) || width <= 0) return String(codeText || '');
+
+  const baseLines = String(codeText || '').split('\n');
+  const wrappedLines = [];
+  for (const line of baseLines) wrappedLines.push(...wrapLineWithIndent(line, width));
+
+  if (wrappedLines.length === 0) return '';
+
+  // If the whole block is a single line, account for both "<c>" and "</c>" on that line.
+  if (wrappedLines.length === 1) {
+    const maxInner = width - '<c>'.length - '</c>'.length;
+    if (wrappedLines[0].length > maxInner && maxInner > 0) {
+      return wrapLineWithIndent(wrappedLines[0], maxInner).join('\n');
+    }
+    return wrappedLines[0];
+  }
+
+  // Otherwise, "<c>" applies to the first line and "</c>" to the last line only.
+  const firstMaxInner = width - '<c>'.length;
+  if (firstMaxInner > 0 && wrappedLines[0].length > firstMaxInner) {
+    const rewrappedFirst = wrapLineWithIndent(wrappedLines[0], firstMaxInner);
+    wrappedLines.splice(0, 1, ...rewrappedFirst);
+  }
+
+  const lastMaxInner = width - '</c>'.length;
+  const lastIdx = wrappedLines.length - 1;
+  if (lastMaxInner > 0 && wrappedLines[lastIdx].length > lastMaxInner) {
+    const rewrappedLast = wrapLineWithIndent(wrappedLines[lastIdx], lastMaxInner);
+    wrappedLines.splice(lastIdx, 1, ...rewrappedLast);
+  }
+
+  return wrappedLines.join('\n');
+}
+
+function wrapCodeBlocksInTxt(txt, maxWidth = 80) {
+  const width = Number(maxWidth);
+  if (!Number.isFinite(width) || width <= 0) return txt;
+
+  return String(txt || '').replace(/<c>([\s\S]*?)<\/c>/g, (_m, inner) => {
+    const wrappedInner = wrapCodeTextAccountingForTags(inner, width);
+    return `<c>${wrappedInner}</c>`;
+  });
+}
+
 /**
  * Extract and convert article content to TXT format
  */
@@ -156,8 +248,12 @@ async function extractArticleContent(page) {
     const main = document.querySelector('main');
     if (!main) return 'Error: main element not found';
     
-    // Helper: get all visual elements in DOM order (same as screenshot script)
-    const allVisualElements = Array.from(main.querySelectorAll('.html-embed, .table-scroll > table, .image-wrapper, figure, .katex-display'));
+    // Helper: get all visual elements in DOM order (match screenshot-elements.mjs)
+    // NOTE: Don't include generic `figure` here. The screenshot script indexes only
+    // `.html-embed`, `.table-scroll > table`, `.image-wrapper`, and `.katex-display`.
+    const allVisualElements = Array.from(
+      document.querySelectorAll('.html-embed, .table-scroll > table, .image-wrapper, .katex-display'),
+    );
     const elementIndexMap = new Map();
     
     // Pre-process: assign global indices to visual elements
@@ -168,7 +264,41 @@ async function extractArticleContent(page) {
     // Walk through all child nodes
     const processNode = (node) => {
       const tag = node.tagName?.toLowerCase();
-      
+
+      // Images (Image.astro renders a `.image-wrapper` container; it may or may not contain a <figure>)
+      if (node.classList?.contains('image-wrapper')) {
+        const globalIndex = elementIndexMap.get(node);
+        if (!globalIndex) return;
+
+        const img = node.querySelector('img');
+        const figure = node.querySelector('figure');
+        const caption = figure?.querySelector('figcaption') || node.querySelector('figcaption');
+
+        let name = '';
+        let anchor = '';
+        let description = '';
+
+        // Prefer an explicit figure ID (used for cross-references), otherwise wrapper ID.
+        if (figure?.id) anchor = figure.id;
+        else if (node.id) anchor = node.id;
+
+        if (caption) {
+          const captionText = stripHtml(caption.innerHTML);
+          const parsed = parseCaptionText(captionText, 'Figure');
+          name = parsed.name;
+          description = parsed.description;
+        }
+
+        if (!description && img?.alt) description = img.alt;
+        if (!name) name = `image-${globalIndex}`;
+
+        const parts = [name];
+        if (anchor) parts.push(anchor);
+        if (description) parts.push(description);
+        output.push(`<f>${parts.join(' | ')}</f>\n\n`);
+        return;
+      }
+
       // Headings
       if (/^h[1-6]$/.test(tag)) {
         const level = parseInt(tag[1]);
@@ -291,9 +421,20 @@ async function extractArticleContent(page) {
       
       // Figures (images, embeds)
       if (tag === 'figure') {
+        // If this <figure> is inside an `.image-wrapper`, the wrapper handler above will emit
+        // a single <f> tag for the whole image. Avoid double-emitting.
+        if (node.closest?.('.image-wrapper')) {
+          const isHtmlEmbedFigure = node.matches?.('.html-embed, .html-embed--screenshot');
+          if (!isHtmlEmbedFigure) return;
+        }
+
         const img = node.querySelector('img');
-        const htmlEmbed = node.querySelector('.html-embed, .html-embed--screenshot');
-        const imageWrapper = node.querySelector('.image-wrapper');
+        const htmlEmbed =
+          node.matches?.('.html-embed, .html-embed--screenshot')
+            ? node
+            : node.querySelector('.html-embed, .html-embed--screenshot');
+        // Images are wrapped in a sibling/parent `.image-wrapper` container in this codebase
+        const imageWrapper = node.closest?.('.image-wrapper') || null;
         const caption = node.querySelector('figcaption');
         
         // Skip if it's not really a figure (no img, no embed, no caption)
@@ -358,14 +499,15 @@ async function extractArticleContent(page) {
       
       // Notes (Note component and Sidenote)
       if (node.classList?.contains('note') || node.classList?.contains('sidenote')) {
-        const title = node.querySelector('.note__title, .note-title')?.textContent || '';
-        const content = cleanText(node.textContent);
-        
-        if (title) {
-          output.push(`<n>${title} | ${content}</n>\n\n`);
-        } else {
-          output.push(`<n>${content}</n>\n\n`);
-        }
+        // For Note.astro, avoid duplicating the header/title in exported text by
+        // extracting only the body content.
+        const contentNode =
+          node.classList?.contains('note')
+            ? (node.querySelector('.note__content, .note-content') ?? node)
+            : node;
+        const content = cleanText(contentNode.textContent);
+
+        if (content) output.push(`<n>${content}</n>\n\n`);
         return;
       }
       
@@ -418,6 +560,22 @@ async function main() {
   console.log('> Starting Astro preview…');
   // Capture stdout to detect the actual port used
   let capturedPort = 8080;
+  let sawPreviewUrl = false;
+
+  const maybeCapturePort = (output) => {
+    const match = output.match(/http:\/\/localhost:(\d+)\//);
+    if (match) {
+      capturedPort = parseInt(match[1]);
+      sawPreviewUrl = true;
+    }
+  };
+
+  const previewPortEnv = process.env.PREVIEW_PORT ? Number(process.env.PREVIEW_PORT) : null;
+  if (previewPortEnv) {
+    capturedPort = previewPortEnv;
+    sawPreviewUrl = true;
+  }
+
   const preview = spawn('npm', ['run', 'preview'], { 
     cwd, 
     stdio: ['ignore', 'pipe', 'pipe'],
@@ -428,27 +586,28 @@ async function main() {
   preview.stdout.on('data', (data) => {
     const output = data.toString();
     process.stdout.write(output);
-    const match = output.match(/http:\/\/localhost:(\d+)/);
-    if (match) {
-      capturedPort = parseInt(match[1]);
-    }
+    maybeCapturePort(output);
   });
   
   preview.stderr.on('data', (data) => {
-    process.stderr.write(data);
+    const output = data.toString();
+    process.stderr.write(output);
+    maybeCapturePort(output);
   });
   
   const previewExit = new Promise((resolvePreview) => {
     preview.on('close', (code, signal) => resolvePreview({ code, signal }));
   });
   
-  // Wait a bit for the server to start and output the port
-  await delay(3000);
-  const baseUrl = `http://localhost:${capturedPort}/`;
+  const getBaseUrl = () => {
+    if (!sawPreviewUrl) return null;
+    return `http://localhost:${capturedPort}/`;
+  };
   
   try {
-    await waitForServer(baseUrl, 60000);
-    console.log('> Server ready, extracting content…');
+    await waitForServer(getBaseUrl, 60000);
+    const baseUrl = getBaseUrl();
+    console.log(`> Server ready (${baseUrl}), extracting content…`);
     
     const browser = await chromium.launch({ headless: true });
     try {
@@ -479,10 +638,13 @@ async function main() {
       
       console.log('> Extracting article content…');
       const txtContent = await extractArticleContent(page);
+      const shouldWrapCode = parseBoolean(args['wrap-code'], true);
+      const codeWidth = Number(args['code-width'] ?? 80);
+      const finalTxtContent = shouldWrapCode ? wrapCodeBlocksInTxt(txtContent, codeWidth) : txtContent;
       
       // Write output
       const outPath = resolve(cwd, 'dist', `${outFileBase}.txt`);
-      await fs.writeFile(outPath, txtContent, 'utf-8');
+      await fs.writeFile(outPath, finalTxtContent, 'utf-8');
       console.log(`✅ TXT exported: ${outPath}`);
       
       // Copy to public folder

app/scripts/screenshot-elements.mjs

@@ -1,11 +1,15 @@
 import { chromium } from 'playwright';
 import { mkdir } from 'fs/promises';
-import { join } from 'path';
+import { join, resolve } from 'path';
+import { spawn } from 'node:child_process';
+import { setTimeout as delay } from 'node:timers/promises';
+import { promises as fs } from 'node:fs';
+import net from 'node:net';
 
-const URL = 'http://localhost:4321/?viz=true';
 const OUTPUT_DIR = './screenshots';
 const DEVICE_SCALE_FACTOR = 4; // 4x for high-quality print
 const BASE_VIEWPORT = { width: 1200, height: 800 };
+const SCREENSHOT_TIMEOUT_MS = Number(process.env.SCREENSHOT_TIMEOUT_MS || 15000);
 
 const slugify = (value) =>
   String(value || '')
@@ -14,9 +18,107 @@ const slugify = (value) =>
     .replace(/[^a-z0-9]+/g, '-')
     .replace(/^-+|-+$/g, '');
 
+async function run(command, args = [], options = {}) {
+  return new Promise((resolvePromise, reject) => {
+    const child = spawn(command, args, { stdio: 'inherit', shell: false, ...options });
+    child.on('error', reject);
+    child.on('exit', (code) => {
+      if (code === 0) resolvePromise(undefined);
+      else reject(new Error(`${command} ${args.join(' ')} exited with code ${code}`));
+    });
+  });
+}
+
+async function waitForServer(url, timeoutMs = 60000) {
+  const start = Date.now();
+  while (Date.now() - start < timeoutMs) {
+    try {
+      const res = await fetch(url);
+      if (res.ok) return;
+    } catch { }
+    await delay(500);
+  }
+  throw new Error(`Server did not start in time: ${url}`);
+}
+
+async function getFreePort(preferredPort) {
+  const tryListen = (port) =>
+    new Promise((resolvePromise, reject) => {
+      const server = net.createServer();
+      server.unref();
+      server.on('error', reject);
+      server.listen(port, () => {
+        const addr = server.address();
+        const resolvedPort = typeof addr === 'object' && addr ? addr.port : port;
+        server.close(() => resolvePromise(resolvedPort));
+      });
+    });
+
+  if (typeof preferredPort === 'number' && Number.isFinite(preferredPort) && preferredPort > 0) {
+    try {
+      return await tryListen(preferredPort);
+    } catch { }
+  }
+
+  return await tryListen(0);
+}
+
 async function main() {
   await mkdir(OUTPUT_DIR, { recursive: true });
 
+  const cwd = process.cwd();
+  const distDir = resolve(cwd, 'dist');
+  let hasDist = false;
+  try {
+    const st = await fs.stat(distDir);
+    hasDist = st && st.isDirectory();
+  } catch { }
+  if (!hasDist) {
+    console.log('> Building Astro site…');
+    await run('npm', ['run', 'build'], { cwd });
+  } else {
+    console.log('> Skipping build (dist/ exists)…');
+  }
+
+  const startPreview =
+    !process.env.SCREENSHOT_BASE_URL &&
+    String(process.env.SCREENSHOT_START_PREVIEW || 'true').toLowerCase() !== 'false';
+
+  const preferredPort = process.env.PREVIEW_PORT ? Number(process.env.PREVIEW_PORT) : undefined;
+  const previewPort = startPreview ? await getFreePort(preferredPort) : undefined;
+  const baseUrl = process.env.SCREENSHOT_BASE_URL || `http://localhost:${previewPort}/`;
+  const url = `${baseUrl.replace(/\/?$/, '/')}` + '?viz=true';
+
+  let preview = null;
+  if (startPreview) {
+    console.log(`> Starting Astro preview (port ${previewPort})…`);
+    const astroBin = resolve(
+      cwd,
+      'node_modules',
+      '.bin',
+      process.platform === 'win32' ? 'astro.cmd' : 'astro',
+    );
+    preview = spawn(astroBin, ['preview', '--host', '--port', String(previewPort)], {
+      cwd,
+      stdio: 'inherit',
+      detached: true,
+    });
+  } else {
+    console.log(`> Using existing server: ${baseUrl}`);
+  }
+
+  try {
+    await waitForServer(baseUrl, 60000);
+  } catch (err) {
+    if (preview) {
+      try {
+        // Ensure we don't leave the preview process behind if startup failed
+        process.kill(-preview.pid, 'SIGTERM');
+      } catch { }
+    }
+    throw err;
+  }
+
   console.log('🚀 Launching browser...');
   const browser = await chromium.launch({ headless: true });
   const context = await browser.newContext({
@@ -25,8 +127,15 @@ async function main() {
   });
   const page = await context.newPage();
 
-  console.log(`📄 Navigating to ${URL}...`);
-  await page.goto(URL, { waitUntil: 'domcontentloaded', timeout: 60000 });
+  console.log(`📄 Navigating to ${url}...`);
+  const resp = await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 60000 });
+  if (!resp || !resp.ok()) {
+    const status = resp ? `${resp.status()} ${resp.statusText()}` : 'NO_RESPONSE';
+    throw new Error(
+      `Failed to load ${url} (${status}). ` +
+        `If you are running the site elsewhere, set SCREENSHOT_BASE_URL (e.g. http://localhost:4322/).`,
+    );
+  }
   await page.waitForTimeout(3000);
 
   let totalCount = 0;
@@ -47,12 +156,10 @@ async function main() {
       return 'unknown';
     });
 
-    if (type !== 'katex') {
-      const isVisible = await element.isVisible();
-      if (!isVisible) {
-        console.log(`  ⏭️  Skipping hidden ${type} ${i + 1}`);
-        continue;
-      }
+    const isVisible = await element.isVisible();
+    if (!isVisible) {
+      console.log(`  ⏭️  Skipping hidden ${type} ${i + 1}`);
+      continue;
     }
 
     const label = await element.evaluate((el) => {
@@ -205,7 +312,8 @@ async function main() {
 
         await page.locator(cloneSelector).screenshot({
           path: filepath,
-          type: 'png'
+          type: 'png',
+          timeout: SCREENSHOT_TIMEOUT_MS
         });
 
         await page.evaluate((selector) => {
@@ -262,7 +370,8 @@ async function main() {
 
         await page.locator(cloneSelector).screenshot({
           path: filepath,
-          type: 'png'
+          type: 'png',
+          timeout: SCREENSHOT_TIMEOUT_MS
         });
 
         await page.evaluate((selector) => {
@@ -272,7 +381,8 @@ async function main() {
       } else {
         await element.screenshot({
           path: filepath,
-          type: 'png'
+          type: 'png',
+          timeout: SCREENSHOT_TIMEOUT_MS
         });
       }
 
@@ -308,7 +418,7 @@ async function main() {
             });
 
             await page.waitForTimeout(150);
-            await element.screenshot({ path: openFilepath, type: 'png' });
+            await element.screenshot({ path: openFilepath, type: 'png', timeout: SCREENSHOT_TIMEOUT_MS });
             console.log(`  ✅ ${openFilename}`);
 
             await selectHandle.evaluate((el) => {
@@ -359,6 +469,12 @@ async function main() {
 
   await browser.close();
   console.log(`\n🎉 Done! Captured ${totalCount} screenshots in ${OUTPUT_DIR}/`);
+
+  if (preview) {
+    try {
+      process.kill(-preview.pid, 'SIGTERM');
+    } catch { }
+  }
 }
 
 main().catch(console.error);