@apisurf/canonui 0.1.2 → 0.1.4

package/README.md

@@ -56,20 +56,20 @@ one stylesheet of plain CSS with tokens on `:root`.
 The page is two columns: the document — title, description, a copy button, then
 every block in order — and a rail listing its titled blocks and the headings
 inside markdown blocks. There is no framework, and the client-side runtime is
-five small scripts: the wide toggle, the copy button, the one that puts it on
-each section's heading, the rail's scroll tracking, and mermaid when the document holds a diagram — bundled into the site
+five small scripts: the wide toggle, the copy button, the one that puts it
+under each section's heading, the rail's scroll tracking, and mermaid when the document holds a diagram — bundled into the site
 rather than fetched from a CDN, so it works offline.
 
-| File                                 | What it is                                      |
-| ------------------------------------ | ----------------------------------------------- |
-| `theme/layouts/Site.astro`           | The shell, and every slot a theme would replace |
-| `theme/components/Block.astro`       | One block, drawn according to its type          |
-| `theme/components/Toc.astro`         | The contents rail                               |
-| `theme/components/Copy.astro`        | The button that copies the document as markdown |
-| `theme/components/SectionCopy.astro` | The same button, on each section's heading      |
-| `theme/pages/index.astro`            | The document, at `/`                            |
-| `theme/styles/theme.css`             | The whole of the styling                        |
-| `theme/lib/snapshot.ts`              | The snapshot, read once at build time           |
+| File                                 | What it is                                          |
+| ------------------------------------ | --------------------------------------------------- |
+| `theme/layouts/Site.astro`           | The shell, and every slot a theme would replace     |
+| `theme/components/Block.astro`       | One block, drawn according to its type              |
+| `theme/components/Toc.astro`         | The contents rail                                   |
+| `theme/components/Copy.astro`        | The button that copies the document as markdown     |
+| `theme/components/SectionCopy.astro` | The same button, twice under each section's heading |
+| `theme/pages/index.astro`            | The document, at `/`                                |
+| `theme/styles/theme.css`             | The whole of the styling                            |
+| `theme/lib/snapshot.ts`              | The snapshot, read once at build time               |
 
 ### The markdown twin
 

package/dist/bin.js

@@ -118,7 +118,34 @@ function shiftHeadings(markdown, by) {
 import { dirname, isAbsolute, resolve } from "node:path";
 import { homedir } from "node:os";
 import { existsSync, mkdirSync } from "node:fs";
-import Database from "better-sqlite3";
+
+// ../db/src/driver.ts
+import Database from "libsql";
+function openDatabase(file) {
+  const db = new Database(file);
+  const prepare2 = db.prepare.bind(db);
+  db.prepare = (sql) => {
+    const stmt = prepare2(sql);
+    const get = stmt.get.bind(stmt);
+    const all = stmt.all.bind(stmt);
+    const run2 = stmt.run.bind(stmt);
+    stmt.get = (...params) => withoutMetadata(get(params));
+    stmt.all = (...params) => all(params);
+    stmt.run = (...params) => run2(params);
+    return stmt;
+  };
+  db.pragma = (source, options) => {
+    const stmt = db.prepare(`PRAGMA ${source}`);
+    if (!options?.simple) return stmt.all();
+    const row = stmt.get();
+    return row && Object.values(row)[0];
+  };
+  return db;
+}
+function withoutMetadata(row) {
+  if (row && typeof row === "object") Reflect.deleteProperty(row, "_metadata");
+  return row;
+}
 
 // ../db/src/schema.ts
 var MIGRATIONS = [
@@ -243,7 +270,7 @@ function openDb(options = {}) {
     );
   }
   if (!options.mustExist) mkdirSync(dirname(file), { recursive: true });
-  const db = new Database(file);
+  const db = openDatabase(file);
   db.pragma("journal_mode = WAL");
   db.pragma("synchronous = NORMAL");
   db.pragma("temp_store = MEMORY");
@@ -1276,8 +1303,9 @@ The markdown twin
 
   Each top-level section \u2014 a titled block, or an h1 or h2 at the top of an
   untitled markdown block, up to the next heading of its rank \u2014 has its own
-  under /sections/, copied by the button that appears when its heading is
-  hovered. An h1 runs on past the h2s under it, so it copies all of them.
+  under /sections/, copied by the "Copy section" button under its heading.
+  An h1 runs on past the h2s under it, so it copies all of them. The "Copy
+  heading" button beside it copies the heading's text alone.
 
   The button fetches what it copies, so it wants the site served rather than
   opened off the disk \u2014 canonui open is enough, and so is any host. Everything

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apisurf/canonui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "canonui — build and preview the documents that canon holds: render one into static HTML, or serve it locally.",
   "keywords": [
     "astro",
@@ -39,13 +39,12 @@
   },
   "dependencies": {
     "astro": "7.2.0",
-    "better-sqlite3": "11.7.0",
+    "libsql": "0.5.29",
     "marked": "18.0.9",
     "mermaid": "11.16.1"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.10",
-    "@types/better-sqlite3": "7.6.12",
     "@types/node": "22.14.0",
     "tsup": "8.3.5",
     "typescript": "5.6.3",

package/theme/components/Copy.astro

@@ -13,7 +13,7 @@
 interface Props {
   /** The .md the button copies. Left out when a script fills it in. */
   href?: string;
-  /** What it copies, for the resting label — "document", "section". */
+  /** What it copies, for the resting label — "document", "section", "heading". */
   what: string;
 }
 
@@ -109,7 +109,14 @@ const { href, what } = Astro.props;
     }
   }
 
-  async function copy(url: string): Promise<boolean> {
+  /** What a button copies: the text it carries, or the .md it points at. */
+  function source(button: HTMLButtonElement): Promise<string> | null {
+    const { copy: url, copyText: text } = button.dataset;
+    if (text !== undefined) return Promise.resolve(text);
+    return url ? markdown(url) : null;
+  }
+
+  async function copy(pending: Promise<string>): Promise<boolean> {
     /*
      * Handing the clipboard the pending fetch rather than awaiting it first is
      * what keeps this working in Safari, which grants the write only while the
@@ -117,7 +124,7 @@ const { href, what } = Astro.props;
      */
     if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
       try {
-        const blob = markdown(url).then((text) => new Blob([text], { type: "text/plain" }));
+        const blob = pending.then((text) => new Blob([text], { type: "text/plain" }));
         await navigator.clipboard.write([new ClipboardItem({ "text/plain": blob })]);
         return true;
       } catch {
@@ -125,7 +132,7 @@ const { href, what } = Astro.props;
       }
     }
 
-    const text = await markdown(url);
+    const text = await pending;
     try {
       await navigator.clipboard.writeText(text);
       return true;
@@ -136,14 +143,14 @@ const { href, what } = Astro.props;
 
   /*
    * Bound once on the document rather than on each button: the section buttons
-   * are put on their headings after this runs, and a handler per button would
+   * are put under their headings after this runs, and a handler per button would
    * miss them.
    */
   const timers = new WeakMap<HTMLButtonElement, ReturnType<typeof setTimeout>>();
 
   const buttonOf = (event: Event) =>
     event.target instanceof Element
-      ? event.target.closest<HTMLButtonElement>("button[data-copy]")
+      ? event.target.closest<HTMLButtonElement>("button[data-copy], button[data-copy-text]")
       : null;
 
   // Intent, a moment before the click. By the time it lands the document is
@@ -158,13 +165,13 @@ const { href, what } = Astro.props;
 
   document.addEventListener("click", async (event) => {
     const button = buttonOf(event);
-    const url = button?.dataset.copy;
-    if (!button || !url) return;
+    const pending = button && source(button);
+    if (!button || !pending) return;
 
     clearTimeout(timers.get(button));
     let ok = false;
     try {
-      ok = await copy(url);
+      ok = await copy(pending);
     } catch {
       ok = false;
     }

package/theme/components/SectionCopy.astro

@@ -1,11 +1,12 @@
 ---
 /**
- * A copy button on each top-level section's heading, shown when it is hovered.
+ * Two copy buttons under each top-level section's heading: one for the heading
+ * alone, one for the whole section as markdown.
  *
  * The headings come from two places — a block's title, drawn here, and an h2
- * inside a markdown block, drawn by marked as a string — so the button is put
- * on them in the browser, from one template, rather than written twice. It is
- * `Copy` either way, so it looks and behaves like the document's own.
+ * inside a markdown block, drawn by marked as a string — so the buttons are put
+ * under them in the browser, from one template, rather than written twice. They
+ * are `Copy` either way, so they look and behave like the document's own.
  */
 import Copy from "./Copy.astro";
 
@@ -20,7 +21,10 @@ const { sections } = Astro.props;
 {
   sections.length > 0 && (
     <template data-section-copy={JSON.stringify(sections)}>
-      <Copy what="section" />
+      <p class="section-actions">
+        <Copy what="heading" />
+        <Copy what="section" />
+      </p>
     </template>
   )
 }
@@ -36,16 +40,18 @@ const { sections } = Astro.props;
     // A titled block's anchor is on the block, and its heading is the title.
     const target = document.getElementById(id);
     const heading = target?.matches("h1, h2") ? target : target?.querySelector(":scope > h2");
-    const button = template?.content.firstElementChild?.cloneNode(true);
-    if (!heading || !(button instanceof HTMLButtonElement)) continue;
+    const actions = template?.content.firstElementChild?.cloneNode(true);
+    if (!heading || !(actions instanceof HTMLElement)) continue;
+    const [headingCopy, sectionCopy] = actions.querySelectorAll("button");
+    if (!headingCopy || !sectionCopy) continue;
 
     const title = heading.textContent?.trim() ?? "";
-    button.dataset.copy = href;
-    button.classList.add("section-copy");
-    button.setAttribute("aria-label", `Copy the section “${title}” as markdown`);
-    // Named for its own text, not the button that now sits inside it.
-    heading.setAttribute("aria-label", title);
+    // The heading is already on the page, so it is copied from there.
+    headingCopy.dataset.copyText = title;
+    headingCopy.setAttribute("aria-label", `Copy the heading “${title}”`);
+    sectionCopy.dataset.copy = href;
+    sectionCopy.setAttribute("aria-label", `Copy the section “${title}” as markdown`);
     heading.classList.add("section-heading");
-    heading.append(button);
+    heading.after(actions);
   }
 </script>

package/theme/styles/theme.css

@@ -437,53 +437,20 @@ pre.mermaid[data-processed="true"] {
 }
 
 /*
- * The same button on each section's heading, kept out of sight until the
- * heading is hovered. Pinned to the right edge rather than set after the title,
- * so turning it on does not rewrap the heading.
+ * The same button under each section's heading, twice: one for the heading
+ * alone and one for the section it opens. On a line of their own rather than
+ * beside the title, so a long title has nothing to run into.
  */
-.section-heading {
-  position: relative;
-  /* One line of the heading — 1.35rem at a leading of 1.3 — so the button can
-     centre on the first line rather than on all of them when the title wraps. */
-  --section-line: 1.755rem;
-}
-
-/* 2rem at 1.25. */
-h1.section-heading {
-  --section-line: 2.5rem;
-}
-
-.section-copy {
-  position: absolute;
-  right: 0;
-  top: calc(var(--section-line) / 2);
-  transform: translateY(-50%);
-  background: var(--bg);
-  font-weight: 400;
-  letter-spacing: normal;
-  opacity: 0;
-  transition:
-    opacity 120ms ease,
-    color 120ms ease,
-    border-color 120ms ease,
-    background-color 120ms ease;
+h1.section-heading,
+h2.section-heading {
+  margin-bottom: 0.4rem;
 }
 
-.section-heading:hover > .section-copy,
-.section-copy:focus-visible,
-.section-copy:not([data-state="idle"]) {
-  opacity: 1;
-}
-
-/* Nothing to hover on a touchscreen, so there it sits after the title instead. */
-@media (hover: none) {
-  .section-copy {
-    position: static;
-    transform: none;
-    margin-left: 0.6rem;
-    vertical-align: middle;
-    opacity: 1;
-  }
+p.section-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin: 0 0 0.9rem;
 }
 
 /* -----------------------------------------------------------------------------