yamlover 0.3.0

package/src/client/renderers/csv.tsx

@@ -0,0 +1,233 @@
+import { NodeJson } from "../api";
+import { Chunk } from "./registry";
+
+/**
+ * The renderer for a `string`/`text/csv` (or `text/tab-separated-values`) node:
+ * delimited text shown as a table. Like the markdown/asciidoc renderers it works
+ * from the node's string value, so it serves both a whole `.csv`/`.tsv` file
+ * (`render`) and a single inline chunk (`renderChunk`).
+ *
+ * The **main parsing parameters live in the URL**, alongside `?format=csv`, so a
+ * particular reading of a file is a shareable link:
+ *
+ *   - `sep`    — the field separator. `,` `;` `|`, the word `tab` (or `space`), or
+ *                empty/absent for **auto-detect** (the most frequent candidate on
+ *                the first line; `\t` for a `.tsv`).
+ *   - `header` — whether the first row is a header (default true; `false`/`0` off).
+ *
+ * The full-page view exposes these in the node bar beside the renderer's tab (the
+ * {@link CsvControls} `config` control, like the markdown/asciidoc width input),
+ * writing the same query params (via `history.replaceState`, preserving the path +
+ * `format`), so the URL stays the single source of truth — editing it by hand and
+ * reloading is equivalent to using the controls.
+ */
+
+/** Parse delimited text into rows of fields, RFC-4180-ish: fields may be wrapped in
+ *  `quote`, a doubled quote is a literal one, and separators/newlines inside quotes
+ *  are data. Handles `\n` and `\r\n`; a trailing newline does not yield an empty
+ *  row. */
+export function parseDelimited(text: string, sep: string, quote = '"'): string[][] {
+  const rows: string[][] = [];
+  let row: string[] = [];
+  let field = "";
+  let inQuotes = false;
+  let i = 0;
+  const pushField = () => {
+    row.push(field);
+    field = "";
+  };
+  const pushRow = () => {
+    pushField();
+    rows.push(row);
+    row = [];
+  };
+  while (i < text.length) {
+    const c = text[i];
+    if (inQuotes) {
+      if (c === quote) {
+        if (text[i + 1] === quote) {
+          field += quote;
+          i += 2;
+        } else {
+          inQuotes = false;
+          i++;
+        }
+      } else {
+        field += c;
+        i++;
+      }
+      continue;
+    }
+    if (c === quote) {
+      inQuotes = true;
+      i++;
+    } else if (c === sep) {
+      pushField();
+      i++;
+    } else if (c === "\n" || c === "\r") {
+      if (c === "\r" && text[i + 1] === "\n") i++;
+      pushRow();
+      i++;
+    } else {
+      field += c;
+      i++;
+    }
+  }
+  // flush the final field/row unless the text ended exactly on a row break
+  if (field !== "" || row.length) pushRow();
+  return rows;
+}
+
+/** Decode a `sep` URL value to the actual separator character, or null for
+ *  auto-detect (empty/absent). `tab`/`space` are spelled out for URL-friendliness. */
+function decodeSep(v: string | null): string | null {
+  if (!v) return null;
+  if (v === "tab" || v === "\\t") return "\t";
+  if (v === "space") return " ";
+  return v[0];
+}
+
+/** Auto-detect a separator from the first line: a `.tsv` is tab; otherwise the most
+ *  frequent of `, ; \t |` (comma when none appears). */
+function autoSep(text: string, format: string | null): string {
+  if (format === "text/tab-separated-values") return "\t";
+  const firstLine = text.split(/\r?\n/, 1)[0] ?? "";
+  let best = ",";
+  let bestN = 0;
+  for (const c of [",", ";", "\t", "|"]) {
+    const n = firstLine.split(c).length - 1;
+    if (n > bestN) {
+      bestN = n;
+      best = c;
+    }
+  }
+  return best;
+}
+
+const SEP_OPTIONS: { label: string; value: string }[] = [
+  { label: "auto", value: "" },
+  { label: "comma  ,", value: "," },
+  { label: "semicolon  ;", value: ";" },
+  { label: "tab", value: "tab" },
+  { label: "pipe  |", value: "|" },
+];
+
+const params = () => new URLSearchParams(window.location.search);
+
+/** Read the (header) flag from the URL — default true, off for `false`/`0`. */
+function headerOn(p: URLSearchParams): boolean {
+  const h = p.get("header");
+  return !(h === "false" || h === "0");
+}
+
+/** Pad a row to `cols` cells so every `<tr>` is rectangular. */
+function pad(row: string[], cols: number): string[] {
+  return row.length >= cols ? row : [...row, ...Array(cols - row.length).fill("")];
+}
+
+/** The table itself — shared by the full page and the inline chunk. */
+function Table({ rows, header }: { rows: string[][]; header: boolean }) {
+  if (!rows.length) return <p className="csv-empty">(empty)</p>;
+  const cols = rows.reduce((m, r) => Math.max(m, r.length), 0);
+  const head = header ? rows[0] : null;
+  const body = header ? rows.slice(1) : rows;
+  return (
+    <div className="csv-scroll">
+      <table className="csv-table">
+        {head && (
+          <thead>
+            <tr>
+              {pad(head, cols).map((c, i) => (
+                <th key={i}>{c}</th>
+              ))}
+            </tr>
+          </thead>
+        )}
+        <tbody>
+          {body.map((r, ri) => (
+            <tr key={ri}>
+              {pad(r, cols).map((c, ci) => (
+                <td key={ci}>{c}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export function CsvView({ node }: { node: NodeJson }) {
+  // Options are read straight from the URL each render; the node bar's CsvControls
+  // (see registry `config`) write them and re-render the node view, so the URL stays
+  // the single source of truth — this view holds no parsing state of its own.
+  const p = params();
+  const header = headerOn(p);
+  const text = String(node.value ?? "");
+  const sep = decodeSep(p.get("sep")) ?? autoSep(text, node.format ?? null);
+  const rows = parseDelimited(text, sep);
+
+  return (
+    <div className="csv">
+      {node.title && <h1 className="chapter-title">{node.title}</h1>}
+      {node.description && <p className="chapter-subtitle">{node.description}</p>}
+      <Table rows={rows} header={header} />
+    </div>
+  );
+}
+
+/**
+ * The CSV parsing controls (separator + header row) shown in the node bar beside
+ * the renderer's tab — the `config` hook, mirroring the markdown/asciidoc width
+ * input. Each writes a query param (preserving the path + other params) and calls
+ * `rerender` so {@link CsvView} re-reads the URL and re-parses.
+ */
+export function CsvControls({ rerender }: { rerender: () => void }) {
+  const p = params();
+  const sepParam = p.get("sep") ?? "";
+  const header = headerOn(p);
+
+  const setParam = (key: string, value: string) => {
+    const q = params();
+    if (value) q.set(key, value);
+    else q.delete(key);
+    const qs = q.toString();
+    window.history.replaceState({}, "", window.location.pathname + (qs ? "?" + qs : ""));
+    rerender();
+  };
+
+  return (
+    <div className="csv-toolbar">
+      <label>
+        separator{" "}
+        <select value={sepParam} onChange={(e) => setParam("sep", e.target.value)}>
+          {SEP_OPTIONS.map((o) => (
+            <option key={o.value} value={o.value}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={header}
+          onChange={(e) => setParam("header", e.target.checked ? "" : "false")}
+        />{" "}
+        header row
+      </label>
+    </div>
+  );
+}
+
+/** A CSV chunk embedded inline in a chapter: just the table, auto-detecting the
+ *  separator and treating the first row as a header (no per-chunk URL controls). */
+export function CsvChunk({ chunk }: { chunk: Chunk }) {
+  const text = String(chunk.value ?? "");
+  const rows = parseDelimited(text, autoSep(text, chunk.format ?? null));
+  return (
+    <div className="csv">
+      <Table rows={rows} header />
+    </div>
+  );
+}

package/src/client/renderers/decoded.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useState } from "react";
+import { NodeJson, blobUrl } from "../api";
+import { PanZoomImage } from "./imagemap";
+
+/**
+ * Shared scaffold for the file formats the browser cannot display natively but
+ * that we can decode client-side to ordinary raster images (PSD, TIFF, HEIC).
+ * It fetches the node's bytes from `/api/blob`, hands them to a format-specific
+ * `decode` that returns one PNG `Blob` per page, and shows each in the same
+ * pan/zoom viewer as a native image (each decoded page is its own object-URL).
+ * Object-URLs are revoked on unmount / path change so decoded pages don't leak.
+ */
+export function DecodedImageView({
+  node,
+  label,
+  decode,
+}: {
+  node: NodeJson;
+  label: string;
+  decode: (buf: ArrayBuffer) => Promise<Blob[]>;
+}) {
+  const [urls, setUrls] = useState<string[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const created: string[] = [];
+    setUrls([]);
+    setError(null);
+    (async () => {
+      const buf = await fetch(blobUrl(node.path)).then((r) => r.arrayBuffer());
+      const blobs = await decode(buf);
+      if (cancelled) return;
+      for (const b of blobs) created.push(URL.createObjectURL(b));
+      if (!cancelled) setUrls(created);
+    })().catch((e) => !cancelled && setError(String((e as Error).message || e)));
+    return () => {
+      cancelled = true;
+      created.forEach(URL.revokeObjectURL);
+    };
+  }, [node.path]);
+
+  if (error) return <div className="error">{label}: {error}</div>;
+  if (!urls.length) return <div className="loading">decoding {label}…</div>;
+  return (
+    <>
+      {urls.map((url, i) => (
+        <PanZoomImage key={i} src={url} className="filemap fileimagemap" />
+      ))}
+    </>
+  );
+}
+
+/** Paint RGBA pixels onto a canvas and export it as a PNG blob. */
+export async function rgbaToPng(rgba: Uint8ClampedArray | Uint8Array, width: number, height: number): Promise<Blob> {
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("no 2d context");
+  const img = ctx.createImageData(width, height);
+  img.data.set(rgba);
+  ctx.putImageData(img, 0, 0);
+  return canvasToPng(canvas);
+}
+
+/** Export a canvas as a PNG blob (Promise wrapper over the callback API). */
+export function canvasToPng(canvas: HTMLCanvasElement): Promise<Blob> {
+  return new Promise((resolve, reject) =>
+    canvas.toBlob((b) => (b ? resolve(b) : reject(new Error("canvas export failed"))), "image/png"),
+  );
+}

package/src/client/renderers/djvu.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useRef, useState } from "react";
+import { NodeJson, blobUrl } from "../api";
+// The DjVu.js library (GPL-v2), vendored as a prebuilt IIFE bundle. Loaded as a
+// classic <script> so its `var DjVu = (…)()` lands on the global scope; see
+// vendor/README.md for provenance and license.
+import djvuScriptUrl from "../vendor/djvu.js?url";
+
+declare global {
+  interface Window {
+    DjVu?: any;
+  }
+}
+
+let loading: Promise<any> | null = null;
+/** Inject the vendored bundle once; resolve with the global `DjVu` namespace. */
+function loadDjVu(): Promise<any> {
+  if (window.DjVu) return Promise.resolve(window.DjVu);
+  if (!loading) {
+    loading = new Promise((resolve, reject) => {
+      const s = document.createElement("script");
+      s.src = djvuScriptUrl;
+      s.onload = () => (window.DjVu ? resolve(window.DjVu) : reject(new Error("DjVu failed to load")));
+      s.onerror = () => reject(new Error("could not load djvu.js"));
+      document.head.appendChild(s);
+    });
+  }
+  return loading;
+}
+
+/**
+ * Renders an `image/vnd.djvu` document. The browser has no native DjVu support,
+ * so we decode it client-side with DjVu.js: fetch the bytes from `/api/blob`,
+ * build a `DjVu.Document`, and render each page to a PNG object-URL shown as an
+ * `<img>` (cheaper than holding every page as a full-resolution canvas). A plain
+ * wheel scrolls the document; ctrl/alt-wheel zooms (scales the page width), matching
+ * the image/map/pdf viewers (see the UI guide).
+ */
+export function DjvuView({ node }: { node: NodeJson }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [pages, setPages] = useState<string[]>([]);
+  const [count, setCount] = useState(0);
+  const [zoom, setZoom] = useState(1);
+  const [error, setError] = useState<string | null>(null);
+
+  // ctrl/alt-wheel zooms; a plain wheel is left alone so the pane keeps scrolling.
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onWheel = (e: WheelEvent) => {
+      if (!(e.ctrlKey || e.altKey || e.metaKey)) return;
+      e.preventDefault();
+      setZoom((z) => Math.min(5, Math.max(0.4, z * (e.deltaY < 0 ? 1.1 : 1 / 1.1))));
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    const created: string[] = [];
+    setPages([]);
+    setCount(0);
+    setError(null);
+    (async () => {
+      const DjVu = await loadDjVu();
+      const buf = await fetch(blobUrl(node.path)).then((r) => r.arrayBuffer());
+      const doc = new DjVu.Document(buf);
+      const total = doc.getPagesQuantity();
+      if (!cancelled) setCount(total);
+      // Decode page-by-page and reveal each as it's ready, so a long scanned
+      // document shows its first page quickly instead of blocking on the whole.
+      for (let i = 1; i <= total && !cancelled; i++) {
+        const page = await doc.getPage(i);
+        const { url } = await page.createPngObjectUrl();
+        created.push(url);
+        if (!cancelled) setPages((prev) => [...prev, url]);
+      }
+    })().catch((e) => !cancelled && setError(String((e as Error).message || e)));
+    return () => {
+      cancelled = true;
+      created.forEach(URL.revokeObjectURL);
+    };
+  }, [node.path]);
+
+  if (error) return <div className="error">djvu: {error}</div>;
+  return (
+    <div className="filedjvu yo-zoomable" ref={ref}>
+      {count > 0 && pages.length < count && (
+        <div className="loading">decoding djvu… page {pages.length + 1} of {count}</div>
+      )}
+      {count === 0 && pages.length === 0 && <div className="loading">decoding djvu…</div>}
+      {pages.map((url, i) => (
+        <img key={i} className="djvu-page" style={{ width: `${zoom * 100}%` }} src={url} alt={`page ${i + 1}`} />
+      ))}
+    </div>
+  );
+}

package/src/client/renderers/doc.tsx

@@ -0,0 +1,40 @@
+import { NodeJson, blobUrl } from "../api";
+import { Chunk } from "./registry";
+
+/**
+ * Renderer for a legacy `.doc` (Word 97–2003 binary / OLE compound file). Unlike
+ * `.docx`, the old binary format has no reliable pure-browser parser, so rather
+ * than show a broken conversion we present it honestly: a note and a download link
+ * to the raw bytes (served by `/api/blob`). Faithful in-browser rendering would
+ * need a server-side conversion step (e.g. LibreOffice), which is out of scope here.
+ */
+function DocNote({ path }: { path: string }) {
+  return (
+    <div className="office-fallback">
+      <p>
+        Legacy <code>.doc</code> (Word 97–2003) isn’t rendered in the browser — the old binary format has no
+        reliable client-side parser. Newer <code>.docx</code> files render in full.
+      </p>
+      <p>
+        <a className="descend" href={blobUrl(path)} download>
+          ⤓ Download the document
+        </a>{" "}
+        to open it in an office application.
+      </p>
+    </div>
+  );
+}
+
+export function DocView({ node }: { node: NodeJson }) {
+  return (
+    <div className="text">
+      {node.title && <h1 className="chapter-title">{node.title}</h1>}
+      {node.description && <p className="chapter-subtitle">{node.description}</p>}
+      <DocNote path={node.path} />
+    </div>
+  );
+}
+
+export function DocChunk({ chunk }: { chunk: Chunk }) {
+  return <DocNote path={chunk.path} />;
+}

package/src/client/renderers/docx.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+import mammoth from "mammoth/mammoth.browser";
+import { NodeJson, blobUrl } from "../api";
+import { Chunk } from "./registry";
+
+/**
+ * Renderer for a `.docx` (Office Open XML word document). The file is served as
+ * bytes; mammoth converts the document body to clean semantic HTML (headings,
+ * lists, bold/italic, tables, …), shown in the shared `.markup` body. mammoth is
+ * heavy and browser-only, so the registry loads this module lazily.
+ */
+function useDocxHtml(path: string): { html: string | null; error: string | null } {
+  const [html, setHtml] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    setHtml(null);
+    setError(null);
+    fetch(blobUrl(path))
+      .then((r) => r.arrayBuffer())
+      .then((buf) => mammoth.convertToHtml({ arrayBuffer: buf }))
+      .then((res) => !cancelled && setHtml(res.value))
+      .catch((e) => !cancelled && setError(String((e as Error).message || e)));
+    return () => {
+      cancelled = true;
+    };
+  }, [path]);
+  return { html, error };
+}
+
+export function DocxView({ node }: { node: NodeJson }) {
+  const { html, error } = useDocxHtml(node.path);
+  if (error) return <div className="error">docx: {error}</div>;
+  if (html == null) return <div className="loading">converting document…</div>;
+  return (
+    <div className="text">
+      {node.title && <h1 className="chapter-title">{node.title}</h1>}
+      {node.description && <p className="chapter-subtitle">{node.description}</p>}
+      <div className="markup" dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+}
+
+export function DocxChunk({ chunk }: { chunk: Chunk }) {
+  const { html, error } = useDocxHtml(chunk.path);
+  if (error) return <div className="error">docx: {error}</div>;
+  if (html == null) return <div className="loading">converting document…</div>;
+  return <div className="markup" dangerouslySetInnerHTML={{ __html: html }} />;
+}

package/src/client/renderers/epub.tsx

@@ -0,0 +1,147 @@
+import { useEffect, useState } from "react";
+import { unzipSync, strFromU8 } from "fflate";
+import { NodeJson, blobUrl } from "../api";
+
+const XLINK = "http://www.w3.org/1999/xlink";
+
+/** Normalize a zip path: resolve `rel` (which may contain `..`/`.`) against the
+ *  directory `baseDir`, dropping any fragment/query. */
+function resolvePath(baseDir: string, rel: string): string {
+  rel = decodeURIComponent(rel.split("#")[0].split("?")[0]);
+  const parts = (baseDir ? baseDir.split("/") : []).concat(rel.split("/"));
+  const out: string[] = [];
+  for (const p of parts) {
+    if (p === "" || p === ".") continue;
+    if (p === "..") out.pop();
+    else out.push(p);
+  }
+  return out.join("/");
+}
+
+function dirOf(p: string): string {
+  const i = p.lastIndexOf("/");
+  return i < 0 ? "" : p.slice(0, i);
+}
+
+interface Book {
+  title?: string;
+  author?: string;
+  cover?: string;
+  html: string;
+}
+
+/**
+ * Renderer for an `application/epub+zip` (`.epub`) ebook. The file is served as
+ * bytes; here we unzip it, read the package document (OPF) for its metadata,
+ * manifest and spine, then render the spine's XHTML documents in order — with
+ * internal images rewired to object URLs and scripts/styles stripped.
+ */
+export function EpubView({ node }: { node: NodeJson }) {
+  const [book, setBook] = useState<Book | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const urls: string[] = [];
+    setBook(null);
+    setError(null);
+
+    fetch(blobUrl(node.path))
+      .then((r) => r.arrayBuffer())
+      .then((buf) => {
+        if (cancelled) return;
+        const files = unzipSync(new Uint8Array(buf));
+        const text = (p: string) => (files[p] ? strFromU8(files[p]) : "");
+        const parseXml = (p: string) => new DOMParser().parseFromString(text(p), "application/xml");
+
+        // container.xml → the OPF package document
+        const opfPath = parseXml("META-INF/container.xml")
+          .getElementsByTagNameNS("*", "rootfile")[0]
+          ?.getAttribute("full-path");
+        if (!opfPath || !files[opfPath]) throw new Error("no OPF package document");
+        const opf = parseXml(opfPath);
+        const opfDir = dirOf(opfPath);
+
+        // object URL for a zip entry, memoized (and tracked for revocation)
+        const cache = new Map<string, string>();
+        const objUrl = (path: string, type = ""): string => {
+          if (!files[path]) return "";
+          const hit = cache.get(path);
+          if (hit) return hit;
+          const u = URL.createObjectURL(new Blob([files[path]], { type }));
+          cache.set(path, u);
+          urls.push(u);
+          return u;
+        };
+
+        // metadata
+        const title = opf.getElementsByTagNameNS("*", "title")[0]?.textContent?.trim();
+        const author = Array.from(opf.getElementsByTagNameNS("*", "creator"))
+          .map((c) => c.textContent?.trim())
+          .filter(Boolean)
+          .join(", ");
+
+        // manifest: id → { href (zip path), type }
+        const manifest = new Map<string, { path: string; type: string }>();
+        for (const it of Array.from(opf.getElementsByTagNameNS("*", "item"))) {
+          const id = it.getAttribute("id");
+          const href = it.getAttribute("href");
+          if (id && href) manifest.set(id, { path: resolvePath(opfDir, href), type: it.getAttribute("media-type") || "" });
+        }
+
+        // cover image (EPUB2 `<meta name="cover">`)
+        const coverId = Array.from(opf.getElementsByTagNameNS("*", "meta")).find(
+          (m) => m.getAttribute("name") === "cover",
+        )?.getAttribute("content");
+        const coverItem = coverId ? manifest.get(coverId) : undefined;
+        const cover = coverItem ? objUrl(coverItem.path, coverItem.type) : undefined;
+
+        // spine: render each XHTML document in reading order
+        const out: string[] = [];
+        for (const ref of Array.from(opf.getElementsByTagNameNS("*", "itemref"))) {
+          const item = manifest.get(ref.getAttribute("idref") || "");
+          if (!item || !/html/.test(item.type) || !files[item.path]) continue;
+          const docDir = dirOf(item.path);
+          const dom = new DOMParser().parseFromString(strFromU8(files[item.path]), "text/html");
+          const body = dom.body;
+          if (!body) continue;
+          body.querySelectorAll("script, style, link").forEach((e) => e.remove());
+          for (const img of Array.from(body.querySelectorAll("img"))) {
+            const src = img.getAttribute("src");
+            const u = src ? objUrl(resolvePath(docDir, src)) : "";
+            if (u) img.setAttribute("src", u);
+            else img.removeAttribute("src");
+          }
+          for (const im of Array.from(body.querySelectorAll("image"))) {
+            const href = im.getAttributeNS(XLINK, "href") || im.getAttribute("href") || im.getAttribute("xlink:href");
+            const u = href ? objUrl(resolvePath(docDir, href)) : "";
+            if (u) im.setAttributeNS(XLINK, "xlink:href", u);
+          }
+          out.push(`<section class="epub-doc">${body.innerHTML}</section>`);
+        }
+
+        if (cancelled) {
+          urls.forEach(URL.revokeObjectURL);
+          return;
+        }
+        setBook({ title, author: author || undefined, cover, html: out.join("\n") });
+      })
+      .catch((e) => !cancelled && setError(String((e as Error).message || e)));
+
+    return () => {
+      cancelled = true;
+      urls.forEach(URL.revokeObjectURL);
+    };
+  }, [node.path]);
+
+  if (error) return <div className="error">epub: {error}</div>;
+  if (!book) return <div className="loading">unpacking EPUB…</div>;
+  return (
+    <div className="text epub">
+      {book.cover && <img className="fb2-cover" src={book.cover} alt="" />}
+      {book.title && <h1 className="chapter-title">{book.title}</h1>}
+      {book.author && <p className="chapter-subtitle">{book.author}</p>}
+      <div className="markup epub-body" dangerouslySetInnerHTML={{ __html: book.html }} />
+    </div>
+  );
+}