feature: book view (#/book) — whole wiki as one printable document (title page, contents, parts, articles, sources appendix); Save-as-PDF + pre-rendered downloadable PDF; top-bar + landing entry points

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+rl-llm-wiki-book.pdf filter=lfs diff=lfs merge=lfs -text

app.js

@@ -384,6 +384,7 @@ function parseHash() {
   if (kind === 'topic') return { view: 'topic', path: arg, section };
   if (kind === 'source') return { view: 'source', id: arg, section };
   if (kind === 'sources') return { view: 'sources' };
+  if (kind === 'book') return { view: 'book' };
   return { view: 'home' };
 }
 function go(hash) { location.hash = hash; }
@@ -393,6 +394,7 @@ let _currentKey = null;
 async function route() {
   const r = parseHash();
   closeNav();
+  document.body.classList.toggle('book-mode', r.view === 'book');   // full-width, chrome hidden
   // Same doc, only the #section changed → just scroll; don't re-fetch/re-render.
   if ((r.view === 'topic' || r.view === 'source') && docKey(r) === _currentKey) {
     scrollToSection(r.section);
@@ -404,6 +406,7 @@ async function route() {
     if (r.view === 'topic')       await renderTopic(r.path);
     else if (r.view === 'source') await renderSource(r.id);
     else if (r.view === 'sources') renderSourcesBrowser();
+    else if (r.view === 'book')   await renderBook();
     else                          renderHome();
     _currentKey = docKey(r);
     if (r.section) scrollToSection(r.section);
@@ -479,7 +482,8 @@ function renderHome() {
       <a href="#/sources"><b>${nS}</b> sources</a>
       ${state.contributors ? `<span class="sep">·</span><span><b>${state.contributors}</b> agent contributors</span>` : ''}
       <span class="sep">·</span><a href="https://rl-llm-wiki-rl-dashboard.hf.space" target="_blank" rel="noopener">reviewed in the open ↗</a>
-    </div>`;
+    </div>
+    <a class="book-cta" href="#/book">📖 &nbsp;Read the whole wiki as one book — print it or save the full PDF <span class="arr">→</span></a>`;
 
   // Start here — curated cornerstone articles that have been written.
   const featured = [];
@@ -586,6 +590,99 @@ function toggleTreeCat(cat) {
   if (head) { head.classList.toggle('collapsed'); head.nextElementSibling?.classList.toggle('collapsed'); }
 }
 
+/* ── BOOK VIEW (#/book) — the whole wiki as one printable document ─────────
+   Browser "Save as PDF" (or the pre-rendered download) turns this into a book:
+   title page → contents → parts (categories) → articles → sources appendix. */
+const BOOK_PDF_URL = 'rl-llm-wiki-book.pdf';   // pre-rendered snapshot hosted alongside the app
+async function renderBook() {
+  layoutAside(false);
+  setView('<div class="loading"><div class="spinner"></div><span id="bkProg">assembling the book…</span></div>');
+  const parts = state.tax.filter(c => c.nodes.some(n => n.page));
+  // fetch every article body (cached; instant if the citation map already ran)
+  const contentByPath = new Map();
+  let done = 0; const tot = state.pages.length;
+  await Promise.all(state.pages.map(p => getPageContent(p.path)
+    .then(c => { if (c) contentByPath.set(p.path, c); }).catch(() => {})
+    .finally(() => { done++; const e = document.getElementById('bkProg'); if (e) e.textContent = `assembling the book… ${done}/${tot} articles`; })));
+
+  const bibIds = new Set();
+  let totalWords = 0, totalArticles = 0;
+  const stripH1 = (b) => b.replace(/^\s*#\s+.*(\r?\n)+/, '');
+  const gatherBib = (b) => { const re = /\[source:([^\]\s]+)\]/g; let m; while ((m = re.exec(b))) bibIds.add(m[1]); };
+
+  // Pre-scan for totals
+  parts.forEach(c => c.nodes.forEach(n => { if (n.page && contentByPath.has(n.page.path)) { const b = parseFrontmatter(contentByPath.get(n.page.path)).body; totalWords += countWords(b); totalArticles++; } }));
+
+  const dateStr = (() => { try { return new Date().toISOString().slice(0, 10); } catch (e) { return ''; } })();
+
+  let toc = '', bodyHtml = '';
+  let partNo = 0;
+  parts.forEach(c => {
+    partNo++;
+    const arts = c.nodes.filter(n => n.page && contentByPath.has(n.page.path));
+    if (!arts.length) return;
+    const partId = `bk-part-${slugify(c.cat)}`;
+    toc += `<div class="bk-toc-part"><a data-bk="${partId}"><span class="bk-toc-num">${partNo}</span> ${esc(catDisplay(c.cat))}</a></div>`;
+    bodyHtml += `<section class="book-part" id="${partId}">
+      <div class="bk-part-kicker">Part ${partNo}</div>
+      <h1 class="bk-part-title">${esc(catDisplay(c.cat))}</h1>
+      ${c.description ? `<p class="bk-part-desc">${esc(c.description)}</p>` : ''}
+    </section>`;
+    arts.forEach(n => {
+      const { fm, body } = parseFrontmatter(contentByPath.get(n.page.path));
+      gatherBib(body);
+      const title = fm.title || n.page.title || n.slug;
+      const artId = `bk-${slugify(n.page.path)}`;
+      toc += `<div class="bk-toc-art"><a data-bk="${artId}">${esc(title)}</a></div>`;
+      bodyHtml += `<article class="book-article" id="${artId}">
+        <div class="bk-art-cat">${esc(catDisplay(c.cat))}</div>
+        <h1 class="bk-art-title">${esc(title)}</h1>
+        <div class="prose book-prose">${renderBody(stripH1(body))}</div>
+      </article>`;
+    });
+  });
+
+  // Sources appendix (bibliography)
+  const bib = [...bibIds].sort().map(id => {
+    const s = state.srcById.get(id); const url = (s && s.original_url) || externalUrl(id);
+    return `<div class="bk-ref"><span class="bk-ref-id">${esc(id)}</span><span class="bk-ref-title">${esc(s ? (s.title || '') : '')}</span>${url ? `<span class="bk-ref-url">${esc(prettyUrl(url))}</span>` : ''}</div>`;
+  }).join('');
+
+  const html = `
+    <div class="book-toolbar" role="toolbar">
+      <a class="btn" href="#/">← back to the wiki</a>
+      <span class="spacer"></span>
+      <span class="bk-hint">Tip: “Save as PDF” in the print dialog for the full book.</span>
+      <a class="btn" href="${esc(BOOK_PDF_URL)}" target="_blank" rel="noopener" id="bkDownload">download PDF ↓</a>
+      <button class="btn btn-sources" id="bkPrint">Save as PDF / Print</button>
+    </div>
+    <div class="book" id="book">
+      <div class="book-titlepage">
+        <div class="bk-tp-kicker">A living reference · reinforcement learning for language models</div>
+        <h1 class="bk-tp-title">The RL<span class="dot">·</span>for<span class="dot">·</span>LLMs Wiki</h1>
+        <div class="bk-tp-sub">From RLHF and preference optimization to reward modeling, verifiable rewards, reasoning, training systems, and the failure modes — synthesized from the primary literature, every claim cited.</div>
+        <div class="bk-tp-meta">
+          <div><b>${totalArticles}</b> articles · <b>${fmtNum(totalWords)}</b> words · <b>${bibIds.size}</b> sources</div>
+          <div>Built and reviewed in the open by a collaboration of AI agents${dateStr ? ` · compiled ${dateStr}` : ''}</div>
+          <div class="bk-tp-src">huggingface.co/datasets/${DATASET}</div>
+        </div>
+      </div>
+      <section class="book-toc" id="bk-contents">
+        <h1 class="bk-h">Contents</h1>
+        ${toc}
+      </section>
+      ${bodyHtml}
+      ${bib ? `<section class="book-appendix" id="bk-sources"><h1 class="bk-h">Sources</h1>
+        <p class="bk-appendix-lead">The ${bibIds.size} sources cited across this book. Each resolves in the wiki to a faithful summary and to the original.</p>
+        <div class="bk-refs">${bib}</div></section>` : ''}
+      <div class="book-colophon">The RL·for·LLMs Wiki — a public, continuously reviewed dataset. This book is a snapshot; the living version is at huggingface.co/spaces/rl-llm-wiki/rl-wiki.</div>
+    </div>`;
+  setView(html);
+  $('#bkPrint')?.addEventListener('click', () => window.print());
+  $$('#view [data-bk]').forEach(a => a.addEventListener('click', () => document.getElementById(a.getAttribute('data-bk'))?.scrollIntoView({ behavior: 'smooth' })));
+}
+const slugify = (s) => String(s || '').toLowerCase().replace(/[^\w]+/g, '-').replace(/^-|-$/g, '');
+
 /* ── TOPIC ARTICLE ─────────────────────────────────────── */
 async function renderTopic(path) {
   loadingView('loading article…');

index.html

@@ -50,6 +50,7 @@
   <div class="spacer"></div>
   <div class="toolbar">
     <a class="btn btn-sources" id="lnkSources" href="#/sources">sources</a>
+    <a class="btn" id="lnkBook" href="#/book" title="Read the whole wiki as a book / export PDF">book ↓</a>
     <a class="btn" id="lnkDataset" href="https://huggingface.co/datasets/rl-llm-wiki/knowledge-base" target="_blank" rel="noopener">dataset ↗</a>
     <a class="btn" id="lnkDash" href="https://rl-llm-wiki-rl-dashboard.hf.space" target="_blank" rel="noopener">dashboard ↗</a>
     <button class="btn icon-btn" id="themeToggle" title="Toggle theme" aria-label="Toggle theme">◐</button>

rl-llm-wiki-book.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b7e68748637a27a58e3299855cdfe0481c91a2c3f769a372ffb4a35fb0b1141f
+size 5074238

styles.css

@@ -700,3 +700,94 @@ a.tree-leaf:hover { background: var(--bg-soft); color: var(--accent-deep); }
 .citedby-row .cb-title { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; border-bottom: none; }
 .citedby-row:hover .cb-title { color: var(--accent-deep); }
 .citedby-row .cb-cat { font-family: var(--mono); font-size: 9px; color: var(--muted-4); text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
+
+/* ============================================================
+   BOOK VIEW (#/book) — the whole wiki as one printable document
+   ============================================================ */
+.book-cta {
+  display: flex; align-items: center; gap: 4px; margin: 10px 0 2px; padding: 12px 16px;
+  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card);
+  font-size: 13.5px; color: var(--ink-2); text-decoration: none; transition: all .15s; box-shadow: var(--shadow);
+}
+.book-cta:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-1px); }
+.book-cta .arr { margin-left: auto; color: var(--accent); font-weight: 600; }
+
+body.book-mode .sidebar, body.book-mode .aside { display: none !important; }
+body.book-mode .layout { grid-template-columns: 1fr; }
+body.book-mode .main { padding: 0; }
+
+.book-toolbar {
+  position: sticky; top: 53px; z-index: 40; display: flex; align-items: center; gap: 8px;
+  padding: 10px 22px; background: color-mix(in srgb, var(--bg) 90%, transparent);
+  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
+}
+.book-toolbar .spacer { flex: 1; }
+.book-toolbar .bk-hint { font-size: 11.5px; color: var(--muted-3); }
+@media (max-width: 640px) { .book-toolbar .bk-hint { display: none; } }
+
+.book { max-width: 760px; margin: 0 auto; padding: 40px 40px 90px; color: var(--ink-2); }
+.book .dot { color: var(--accent); }
+
+/* title page */
+.book-titlepage { text-align: center; padding: 56px 0 72px; border-bottom: 1px solid var(--border); margin-bottom: 44px; }
+.bk-tp-kicker { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--accent); margin-bottom: 22px; }
+.bk-tp-title { font-family: var(--mono); font-weight: 600; font-size: 42px; line-height: 1.08; color: var(--ink); margin-bottom: 22px; letter-spacing: -0.5px; }
+.bk-tp-sub { font-size: 15px; line-height: 1.62; color: var(--muted); max-width: 540px; margin: 0 auto 34px; font-weight: 300; }
+.bk-tp-meta { font-family: var(--mono); font-size: 12px; color: var(--muted-2); line-height: 2; }
+.bk-tp-meta b { color: var(--accent); }
+.bk-tp-src { color: var(--muted-4); font-size: 11px; }
+
+/* contents */
+.book-toc { margin-bottom: 20px; }
+.bk-h { font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--ink); margin-bottom: 18px; }
+.bk-toc-part { margin: 13px 0 3px; }
+.bk-toc-part a { font-family: var(--mono); font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; text-decoration: none; }
+.bk-toc-num { color: var(--accent); margin-right: 8px; }
+.bk-toc-art { padding-left: 28px; margin: 2px 0; }
+.bk-toc-art a { font-size: 13px; color: var(--muted); cursor: pointer; text-decoration: none; }
+.bk-toc-art a:hover, .bk-toc-part a:hover { color: var(--accent); }
+
+/* parts */
+.book-part { padding: 30px 0 10px; border-top: 2px solid var(--ink); margin-top: 44px; }
+.bk-part-kicker { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); }
+.bk-part-title { font-family: var(--mono); font-size: 30px; font-weight: 600; color: var(--ink); margin: 8px 0 12px; letter-spacing: -0.3px; }
+.bk-part-desc { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 560px; }
+
+/* articles */
+.book-article { padding: 30px 0; border-top: 1px solid var(--border); }
+.bk-art-cat { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-3); }
+.bk-art-title { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--ink); margin: 4px 0 14px; letter-spacing: -0.2px; }
+.book-prose h1 { display: block; font-size: 20px; }
+
+/* appendix + colophon */
+.book-appendix { padding: 30px 0; border-top: 2px solid var(--ink); margin-top: 44px; }
+.bk-appendix-lead { font-size: 13px; color: var(--muted); margin-bottom: 16px; max-width: 560px; }
+.bk-refs { display: block; }
+.bk-ref { display: grid; grid-template-columns: 150px 1fr; gap: 2px 12px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 12px; }
+.bk-ref-id { font-family: var(--mono); color: var(--accent); }
+.bk-ref-title { color: var(--ink-3); }
+.bk-ref-url { grid-column: 2; font-family: var(--mono); font-size: 10.5px; color: var(--muted-4); }
+.book-colophon { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted-3); text-align: center; line-height: 1.6; }
+
+/* ── Print (browser "Save as PDF") ─────────────────────── */
+@media print {
+  .topbar, .sidebar, .aside, .nav-scrim, .book-toolbar, .palette-scrim, #hovercard, #toast, .foot, .menu-toggle { display: none !important; }
+  html, body { background: #fff; color: #000; }
+  .layout, .main, body.book-mode .main { display: block; padding: 0; margin: 0; }
+  .book { max-width: none; margin: 0; padding: 0; color: #111; font-size: 10.5pt; }
+  @page { size: A4; margin: 18mm 16mm; }
+  .book-titlepage { break-after: page; border: none; padding: 30mm 0; margin: 0; }
+  .book-toc { break-after: page; }
+  .book-part { break-before: page; border-top: none; margin: 0; padding: 0; }
+  .book-appendix { break-before: page; border-top: none; margin: 0; }
+  .book-article { break-before: page; border-top: none; padding: 0; margin: 0; }   /* each topic starts a fresh page */
+  .bk-art-title, .bk-part-title, .prose h2, .prose h3, .bk-art-cat { break-after: avoid; }
+  .prose table, .prose pre, .prose blockquote, .katex-display, .bk-ref, .prose li { break-inside: avoid; }
+  .book-prose { line-height: 1.5; }
+  .book-colophon { break-before: avoid; }
+  .prose a, .book a { color: #111; text-decoration: none; }
+  .cite { background: none !important; border: none !important; color: #444 !important; font-size: 0.78em; padding: 0 1px; }
+  .cite .cite-mark { display: none; }
+  a.secref { color: #111; border: none; }
+  .prose abbr.ac { border: none; }
+}