wiki-print/public/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light">
  <title>wiki-print · Wiki.js to PDF</title>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <div class="page-shell">
    <header class="site-header">
      <div class="brand">
        <div class="brand-mark" aria-hidden="true">W</div>
        <div>
          <div class="brand-name">wiki-print</div>
          <div class="brand-subtitle">Wiki.js subtree → one linked PDF</div>
        </div>
      </div>
      <a class="header-link" href="/healthz">health</a>
    </header>

    <main>
      <section class="hero">
        <h1>Export a Wiki.js page tree to PDF</h1>
        <p>
          The wiki URL and API key are configured on the server through <code>WIKI_URL</code> and
          <code>WIKI_API_KEY</code>. Pick a starting page from the list below. That page and every
          page beneath it are combined into a single PDF. Links between exported pages become
          internal PDF links; links to other pages and websites stay clickable online links.
        </p>
      </section>

      <form id="export-form" class="card" novalidate>
        <p id="config-notice" class="config-notice" role="alert" hidden></p>

        <div class="field">
          <label for="page-filter">Starting page</label>
          <input
            id="page-filter"
            type="search"
            placeholder="Filter pages by title or path…"
            autocomplete="off"
            spellcheck="false"
            disabled
          >
          <select id="start-page" required aria-label="Starting page" disabled>
            <option value="">Loading pages…</option>
          </select>
          <p id="page-status" class="hint">Loading the page list from Wiki.js…</p>
        </div>

        <details class="advanced">
          <summary>Advanced options</summary>
          <div class="field max-pages-field">
            <label for="max-pages">Maximum pages</label>
            <input id="max-pages" name="maxPages" type="number" min="1" max="5000" value="500">
            <p class="hint">The export stops with an error if the subtree is larger.</p>
          </div>

          <div class="checks">
            <label class="check">
              <input id="include-unpublished" name="includeUnpublished" type="checkbox">
              <span>Include unpublished pages</span>
            </label>
            <label class="check">
              <input id="include-toc" name="includeToc" type="checkbox" checked>
              <span>Add a table of contents</span>
            </label>
            <label class="check">
              <input id="inline-images" name="inlineImages" type="checkbox" checked>
              <span>Embed images in the PDF</span>
            </label>
          </div>
        </details>

        <div class="actions">
          <button id="submit-button" class="button button-primary" type="submit">Create PDF</button>
          <span class="actions-note">Exports run one at a time and can take a few minutes.</span>
        </div>
      </form>

      <section id="status-panel" class="card status-card" hidden aria-live="polite">
        <div class="status-heading">
          <div>
            <div id="status-eyebrow" class="status-eyebrow">Export</div>
            <h2 id="status-title">Queued</h2>
          </div>
          <span id="status-badge" class="badge">queued</span>
        </div>

        <p id="status-message" class="status-message"></p>

        <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
          <div id="progress-fill" class="progress-fill"></div>
        </div>
        <div id="status-pages" class="status-pages"></div>

        <div id="error-box" class="error-box" hidden>
          <strong>Export failed</strong>
          <p id="error-message"></p>
        </div>

        <div id="result-box" class="result-box" hidden>
          <div>
            <div class="result-title">Your PDF is ready</div>
            <div id="result-meta" class="result-meta"></div>
          </div>
          <a id="download-button" class="button button-primary" href="#">Download PDF</a>
        </div>

        <details id="warnings" class="warnings" hidden>
          <summary><span id="warnings-count">0</span> warning(s)</summary>
          <ul id="warnings-list"></ul>
        </details>
      </section>
    </main>

    <footer class="site-footer">
      <span>Links are preserved with Chromium's PDF renderer. The produced file works offline for the exported subtree.</span>
    </footer>
  </div>

  <script src="/app.js" defer></script>
</body>
</html>