pageproof 0.1.0

package/src/pandoc.js

@@ -0,0 +1,346 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { spawn } from 'node:child_process';
+import { escapeHtml, pathExists } from './util.js';
+
+const BROWSER_TITLE_SENTINEL = 'MDPREVIEW_BROWSER_TITLE';
+const MATHJAX_URL = '/mathjax/tex-mml-chtml-nofont.js';
+
+export function hasYamlBibliography(markdown) {
+  const match = String(markdown).match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?/);
+  return Boolean(match && /^\s*bibliography\s*:/m.test(match[1]));
+}
+
+export async function bibliographyArgs(sourceFile) {
+  const markdown = await fs.readFile(sourceFile, 'utf8');
+  if (hasYamlBibliography(markdown)) return [];
+  const fallback = path.join(path.dirname(sourceFile), 'references.bib');
+  return (await pathExists(fallback)) ? ['--bibliography', fallback] : [];
+}
+
+export async function buildWithPandoc({
+  sourceFile,
+  tempDir,
+  cssFiles,
+  log = console,
+  debugBrowser = false,
+  buildId = 0
+}) {
+  const sourceDir = path.dirname(sourceFile);
+  const nextHtml = path.join(tempDir, 'index.next.html');
+  const finalHtml = path.join(tempDir, 'index.html');
+  const resolvedCssFiles = cssFiles ?? await discoverCssFiles(tempDir);
+  const args = [
+    sourceFile,
+    '--from=markdown',
+    '--to=html5',
+    '--standalone',
+    `--template=${path.join(tempDir, 'template.html')}`,
+    ...resolvedCssFiles.map((cssFile) => `--css=${cssFile}`),
+    `--mathjax=${MATHJAX_URL}`,
+    '--citeproc',
+    `--csl=${path.join(tempDir, 'citations.csl')}`,
+    // Suppresses Pandoc's empty-title warning; the browser title is replaced after Pandoc renders.
+    '--metadata=pagetitle:mdpreview',
+    '--metadata=suppress-bibliography:true',
+    ...(await bibliographyArgs(sourceFile)),
+    `--lua-filter=${path.join(tempDir, 'footnotes-inline.lua')}`,
+    `--output=${nextHtml}`
+  ];
+
+  const result = await runPandoc(args, sourceDir);
+  if (result.stderr) log?.warn?.(result.stderr.trim());
+
+  if (result.code === 0) {
+    const diagnostics = result.stderr;
+    let html = await fs.readFile(nextHtml, 'utf8');
+    html = injectBrowserTitle(html, path.basename(sourceFile));
+    html = injectBuildId(html, buildId);
+    html = injectBrowserDebug(html, debugBrowser);
+    html = injectDiagnostics(html, diagnostics);
+    await fs.writeFile(nextHtml, html);
+    await fs.rename(nextHtml, finalHtml);
+    return { ok: true, diagnostics, stderr: result.stderr };
+  }
+
+  const diagnostics = result.stderr;
+  await writeErrorPage(finalHtml, diagnostics, {
+    debugBrowser,
+    buildId,
+    cssFiles: resolvedCssFiles,
+    browserTitle: path.basename(sourceFile)
+  });
+  await fs.rm(nextHtml, { force: true });
+  return { ok: false, diagnostics, stderr: result.stderr };
+}
+
+async function discoverCssFiles(tempDir) {
+  const files = await fs.readdir(tempDir).catch(() => []);
+  const cascade = files.filter((file) => /^style-\d+-.*\.css$/.test(file)).sort();
+  return cascade.length ? cascade : ['style.css'];
+}
+
+export function injectBrowserDebug(html, debugBrowser) {
+  return String(html).replace(
+    'window.mdpreviewBrowserDebug = false;',
+    `window.mdpreviewBrowserDebug = ${debugBrowser ? 'true' : 'false'};`
+  );
+}
+
+export function injectBuildId(html, buildId) {
+  return String(html).replace(
+    'window.mdpreviewBrowserDebug = false;',
+    `window.mdpreviewBuildId = ${JSON.stringify(buildId)};\n    window.mdpreviewBrowserDebug = false;`
+  );
+}
+
+export function injectBrowserTitle(html, title) {
+  return String(html).replace(
+    `<title>${BROWSER_TITLE_SENTINEL}</title>`,
+    `<title>${escapeHtml(title || 'Markdown preview')}</title>`
+  );
+}
+
+function runPandoc(args, cwd) {
+  return new Promise((resolve, reject) => {
+    const child = spawn('pandoc', args, { cwd, stdio: ['ignore', 'ignore', 'pipe'] });
+    let stderr = '';
+    child.stderr.on('data', (chunk) => {
+      stderr += chunk;
+    });
+    child.on('error', reject);
+    child.on('close', (code) => resolve({ code, stderr }));
+  });
+}
+
+export function injectDiagnostics(html, diagnostics) {
+  const widget = renderDiagnosticsWidget(diagnostics);
+  let next = String(html).replace('<!-- MDPREVIEW_DIAGNOSTICS -->', widget);
+  if (String(diagnostics || '').trim()) {
+    next = next.replace('<body>', '<body class="mdpreview-has-diagnostics">');
+  }
+  return next;
+}
+
+export function renderDiagnosticsWidget(diagnostics, options = {}) {
+  const text = String(diagnostics || '').trim();
+  if (!text) return '';
+  const title = options.title ?? 'Document errors';
+  const note = options.note ? `<p>${escapeHtml(options.note)}</p>` : '';
+  return `<aside class="mdpreview-diagnostics-widget" data-mdpreview-chrome aria-live="polite">
+  <details class="mdpreview-diagnostics-details">
+    <summary class="mdpreview-diagnostics-button" title="${escapeHtml(title)}" aria-label="${escapeHtml(title)}">!</summary>
+    <section class="mdpreview-diagnostics-panel">
+      <h2>${escapeHtml(title)}</h2>
+      ${note}
+      <pre>${escapeHtml(text)}</pre>
+    </section>
+  </details>
+</aside>`;
+}
+
+export async function writeErrorPage(targetHtml, diagnostics, options = {}) {
+  const details = String(diagnostics || '').trim();
+  const filename = options.browserTitle || 'document';
+  const title = `Error compiling ${filename}`;
+  const message = details || 'Pandoc did not produce a preview.';
+  const html = `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${escapeHtml(title)}</title>
+  <style data-pagedjs-ignore>
+    body.mdpreview-disconnected {
+      background: #737373 !important;
+      color: #1f1f1f;
+    }
+
+    body.mdpreview-disconnected main {
+      opacity: 0.55;
+    }
+
+    .mdpreview-disconnect-widget {
+      position: fixed;
+      top: 12pt;
+      right: 12pt;
+      z-index: 10000;
+      font-family: Calibri, Arial, sans-serif;
+    }
+
+    .mdpreview-disconnect-details {
+      position: relative;
+    }
+
+    .mdpreview-disconnect-button {
+      display: block;
+      width: 24pt;
+      height: 24pt;
+      border: 1pt solid #3f3f3f;
+      border-radius: 50%;
+      background: #5b5b5b;
+      color: #f2f2f2;
+      box-shadow: 0 1.5pt 5pt rgba(0, 0, 0, 0.18);
+      cursor: pointer;
+      list-style: none;
+      position: relative;
+      font-size: 0;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    .mdpreview-disconnect-button::-webkit-details-marker {
+      display: none;
+    }
+
+    .mdpreview-disconnect-button::before,
+    .mdpreview-disconnect-button::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform-origin: center;
+    }
+
+    .mdpreview-disconnect-button::before {
+      box-sizing: border-box;
+      width: 12pt;
+      height: 12pt;
+      border: 2pt solid currentColor;
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .mdpreview-disconnect-button::after {
+      width: 14pt;
+      height: 2pt;
+      border-radius: 1pt;
+      background: currentColor;
+      transform: translate(-50%, -50%) rotate(-45deg);
+    }
+
+    .mdpreview-disconnect-panel {
+      box-sizing: border-box;
+      position: absolute;
+      top: 30pt;
+      right: 0;
+      width: min(330pt, calc(100vw - 24pt));
+      max-height: calc(100vh - 54pt);
+      overflow: auto;
+      padding: 12pt 14pt;
+      border-top: 4px solid #3f3f3f;
+      background: #ededed;
+      color: black;
+      font-family: Calibri, Arial, sans-serif;
+      font-size: 10.5pt;
+      line-height: 1.45;
+      box-shadow: 0 3pt 12pt rgba(0, 0, 0, 0.22);
+    }
+  </style>
+</head>
+<body>
+  <main>
+    <h1>${escapeHtml(title)}</h1>
+    <pre>${escapeHtml(message)}</pre>
+  </main>
+  <script>
+    window.mdpreviewBrowserDebug = ${options.debugBrowser ? 'true' : 'false'};
+    window.mdpreviewBuildId = ${JSON.stringify(options.buildId ?? 0)};
+    window.mdpreviewBrowserLogErrors = [];
+    const mdpreviewTextHead = (value) => String(value || '').replace(/\\s+/g, ' ').trim().slice(0, 500);
+    const mdpreviewTextTail = (value) => String(value || '').replace(/\\s+/g, ' ').trim().slice(-500);
+    const mdpreviewPostBrowserLog = (payload) => {
+      const body = JSON.stringify(payload);
+      if (!window.mdpreviewBrowserDebug && navigator.sendBeacon) {
+        const sent = navigator.sendBeacon('/__browser-log', new Blob([body], { type: 'application/json' }));
+        if (sent) return;
+      }
+      fetch('/__browser-log', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body,
+        keepalive: !window.mdpreviewBrowserDebug
+      }).catch(() => {});
+    };
+    const mdpreviewReportErrorPage = () => {
+      const text = document.body?.innerText || document.body?.textContent || '';
+      const payload = {
+        type: 'browser-rendered',
+        buildId: window.mdpreviewBuildId,
+        phase: 'error-page-rendered',
+        ok: false,
+        url: location.href,
+        pageCount: 0,
+        renderedTextLength: text.length,
+        sourceTextLength: 0,
+        renderedTextTail: mdpreviewTextTail(text),
+        errors: []
+      };
+      if (window.mdpreviewBrowserDebug) {
+        payload.renderedTextHead = mdpreviewTextHead(text);
+        payload.documentHtml = document.documentElement.outerHTML;
+        payload.pagesHtml = '';
+        payload.sourceHtml = '';
+      }
+      mdpreviewPostBrowserLog(payload);
+    };
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', mdpreviewReportErrorPage, { once: true });
+    } else {
+      mdpreviewReportErrorPage();
+    }
+
+    const mdpreviewDisconnectedTitle = 'Preview disconnected';
+
+    const mdpreviewEnsureDisconnectedWidget = () => {
+      let widget = document.querySelector('.mdpreview-disconnect-widget');
+      if (widget) return widget;
+      widget = document.createElement('aside');
+      widget.className = 'mdpreview-disconnect-widget';
+      widget.setAttribute('aria-live', 'polite');
+      const details = document.createElement('details');
+      details.className = 'mdpreview-disconnect-details';
+      const button = document.createElement('summary');
+      button.className = 'mdpreview-disconnect-button';
+      button.setAttribute('title', mdpreviewDisconnectedTitle);
+      button.setAttribute('aria-label', mdpreviewDisconnectedTitle);
+      const panel = document.createElement('section');
+      panel.className = 'mdpreview-disconnect-panel';
+      const message = document.createElement('p');
+      const strong = document.createElement('strong');
+      strong.textContent = mdpreviewDisconnectedTitle;
+      message.append(strong);
+      panel.append(message);
+      details.append(button, panel);
+      widget.append(details);
+      document.body.prepend(widget);
+      return widget;
+    };
+
+    const mdpreviewMarkDisconnected = () => {
+      document.body.classList.add('mdpreview-disconnected');
+      mdpreviewEnsureDisconnectedWidget();
+    };
+
+    const mdpreviewClearDisconnected = () => {
+      document.body.classList.remove('mdpreview-disconnected');
+      document.querySelector('.mdpreview-disconnect-widget')?.remove();
+    };
+
+    let mdpreviewDisconnectTimer;
+    const events = new EventSource('/events');
+    events.addEventListener('open', () => {
+      clearTimeout(mdpreviewDisconnectTimer);
+      mdpreviewClearDisconnected();
+    });
+    events.addEventListener('error', () => {
+      clearTimeout(mdpreviewDisconnectTimer);
+      mdpreviewDisconnectTimer = setTimeout(mdpreviewMarkDisconnected, 2500);
+    });
+    events.addEventListener('reload', () => location.reload());
+  </script>
+</body>
+</html>
+`;
+  await fs.writeFile(targetHtml, html);
+}

package/src/server.js

@@ -0,0 +1,228 @@
+import fs from 'node:fs';
+import fsp from 'node:fs/promises';
+import http from 'node:http';
+import path from 'node:path';
+
+const mimeTypes = new Map([
+  ['.html', 'text/html; charset=utf-8'],
+  ['.css', 'text/css; charset=utf-8'],
+  ['.js', 'text/javascript; charset=utf-8'],
+  ['.json', 'application/json; charset=utf-8'],
+  ['.svg', 'image/svg+xml'],
+  ['.png', 'image/png'],
+  ['.jpg', 'image/jpeg'],
+  ['.jpeg', 'image/jpeg'],
+  ['.gif', 'image/gif'],
+  ['.webp', 'image/webp'],
+  ['.pdf', 'application/pdf'],
+  ['.woff', 'font/woff'],
+  ['.woff2', 'font/woff2'],
+  ['.ttf', 'font/ttf'],
+  ['.otf', 'font/otf']
+]);
+
+export function safeResolve(root, requestPath) {
+  let pathname;
+  try {
+    pathname = decodeURIComponent(requestPath.split('?')[0]);
+  } catch {
+    return null;
+  }
+  const relative = pathname.replace(/^\/+/, '');
+  const resolved = path.resolve(root, relative);
+  const normalizedRoot = path.resolve(root);
+  if (resolved !== normalizedRoot && !resolved.startsWith(`${normalizedRoot}${path.sep}`)) {
+    return null;
+  }
+  return resolved;
+}
+
+export function createPreviewServer(options) {
+  const {
+    tempDir,
+    sourceDir,
+    getDiagnostics,
+    onFirstClient,
+    onClientConnected,
+    onAllClientsGone,
+    onBrowserLog,
+    getStatus,
+    onRequest
+  } = options;
+  const clients = new Set();
+  const sockets = new Set();
+  let firstClientSeen = false;
+  let keepalive;
+  let closing = false;
+  let closed = false;
+
+  const server = http.createServer(async (req, res) => {
+    onRequest?.(req);
+    if (req.method === 'POST' && req.url === '/__browser-log') {
+      try {
+        const payload = await readJsonBody(req);
+        await onBrowserLog?.(payload);
+        res.writeHead(204, { 'cache-control': 'no-store' }).end();
+      } catch (error) {
+        res.writeHead(400, {
+          'content-type': 'text/plain; charset=utf-8',
+          'cache-control': 'no-store'
+        }).end(error?.message || 'Bad browser log payload');
+      }
+      return;
+    }
+
+    if (req.method !== 'GET') {
+      res.writeHead(405).end('Method not allowed');
+      return;
+    }
+
+    if (req.url === '/' || req.url?.startsWith('/?')) {
+      await serveFile(path.join(tempDir, 'index.html'), res, { noCache: true });
+      return;
+    }
+
+    if (req.url === '/favicon.ico') {
+      res.writeHead(302, {
+        location: '/favicon.svg',
+        'cache-control': 'public, max-age=3600'
+      }).end();
+      return;
+    }
+
+    if (req.url === '/diagnostics.json') {
+      res.writeHead(200, {
+        'content-type': 'application/json; charset=utf-8',
+        'cache-control': 'no-store'
+      });
+      res.end(JSON.stringify(getDiagnostics?.() ?? []));
+      return;
+    }
+
+    if (req.url === '/status.json') {
+      res.writeHead(200, {
+        'content-type': 'application/json; charset=utf-8',
+        'cache-control': 'no-store'
+      });
+      res.end(JSON.stringify(getStatus?.() ?? {}));
+      return;
+    }
+
+    if (req.url === '/events') {
+      onClientConnected?.();
+      if (!firstClientSeen) {
+        firstClientSeen = true;
+        onFirstClient?.();
+      }
+      res.writeHead(200, {
+        'content-type': 'text/event-stream',
+        'cache-control': 'no-store',
+        connection: 'keep-alive'
+      });
+      res.write(':connected\n\n');
+      clients.add(res);
+      req.on('close', () => {
+        clients.delete(res);
+        if (!closing && clients.size === 0) onAllClientsGone?.();
+      });
+      return;
+    }
+
+    const tempFile = safeResolve(tempDir, req.url ?? '');
+    if (tempFile && (await fileIsReadable(tempFile))) {
+      await serveFile(tempFile, res, { noCache: true });
+      return;
+    }
+
+    const sourceFile = safeResolve(sourceDir, req.url ?? '');
+    if (sourceFile && (await fileIsReadable(sourceFile))) {
+      await serveFile(sourceFile, res);
+      return;
+    }
+
+    res.writeHead(404).end('Not found');
+  });
+
+  server.on('connection', (socket) => {
+    sockets.add(socket);
+    socket.on('close', () => {
+      sockets.delete(socket);
+    });
+  });
+
+  keepalive = setInterval(() => {
+    for (const client of clients) client.write(':keepalive\n\n');
+  }, 15000);
+  keepalive.unref();
+
+  return {
+    server,
+    clients,
+    async listen() {
+      await new Promise((resolve, reject) => {
+        server.once('error', reject);
+        server.listen(0, '127.0.0.1', () => {
+          server.off('error', reject);
+          resolve();
+        });
+      });
+      return server.address();
+    },
+    broadcastReload() {
+      for (const client of clients) client.write('event: reload\ndata:\n\n');
+    },
+    async close() {
+      if (closed) return;
+      closed = true;
+      closing = true;
+      clearInterval(keepalive);
+      const closePromise = new Promise((resolve) => server.close(resolve));
+      for (const client of clients) client.end();
+      for (const socket of sockets) socket.destroy();
+      await closePromise;
+    }
+  };
+}
+
+async function fileIsReadable(filePath) {
+  try {
+    const stat = await fsp.stat(filePath);
+    return stat.isFile();
+  } catch {
+    return false;
+  }
+}
+
+async function serveFile(filePath, res, options = {}) {
+  const ext = path.extname(filePath).toLowerCase();
+  res.writeHead(200, {
+    'content-type': mimeTypes.get(ext) ?? 'application/octet-stream',
+    'cache-control': options.noCache ? 'no-store' : 'public, max-age=3600'
+  });
+  fs.createReadStream(filePath).pipe(res);
+}
+
+function readJsonBody(req, maxBytes = 25 * 1024 * 1024) {
+  return new Promise((resolve, reject) => {
+    let total = 0;
+    const chunks = [];
+    req.on('data', (chunk) => {
+      total += chunk.length;
+      if (total > maxBytes) {
+        reject(new Error('Browser log payload is too large'));
+        req.destroy();
+        return;
+      }
+      chunks.push(chunk);
+    });
+    req.on('error', reject);
+    req.on('end', () => {
+      try {
+        const text = Buffer.concat(chunks).toString('utf8');
+        resolve(text ? JSON.parse(text) : {});
+      } catch {
+        reject(new Error('Browser log payload is not valid JSON'));
+      }
+    });
+  });
+}

package/src/util.js

@@ -0,0 +1,43 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { spawnSync } from 'node:child_process';
+
+export const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+
+export async function pathExists(filePath) {
+  try {
+    await fs.access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function escapeHtml(value) {
+  return String(value)
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+export function isWsl() {
+  if (process.platform !== 'linux') return false;
+  return Boolean(process.env.WSL_DISTRO_NAME || process.env.WSL_INTEROP);
+}
+
+export function commandExists(command) {
+  const result = spawnSync(command, ['--version'], { stdio: 'ignore' });
+  if (result.error?.code === 'ENOENT') return false;
+  return true;
+}
+
+export async function writeJson(filePath, value) {
+  await fs.writeFile(filePath, `${JSON.stringify(value, null, 2)}\n`);
+}
+
+export function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}