@iyulab/canopy-page 0.11.1 → 0.12.0

package/CHANGELOG.md

@@ -7,6 +7,27 @@ Notable changes to canopy-page. The format follows
 The `settings.json` contract is what consuming projects plan their upgrades around, so changes
 to it — its fields, its validation, and what the checks reject — are what this file is about.
 
+## [0.12.0] — 2026-08-22
+
+### Added
+
+- **Content images open full-size in a lightbox on click**, closing on a background click,
+  <kbd>Esc</kbd>, or its close button. An image already wrapped in a link to its own file — a
+  common workaround for the lack of a zoom before this — still opens the lightbox first; a
+  middle click or a modifier-held click on it still follows the link, for a reader who wants the
+  file itself.
+
+## [0.11.2] — 2026-08-18
+
+### Changed
+
+- **Upgraded to canopy 0.11.2** — `**` emphasis now closes correctly when a CJK character
+  follows it with no space (a Chinese, Japanese, or Korean particle or full-width punctuation
+  mark sitting flush against the closing marker), instead of surviving into the rendered page as
+  literal asterisks. See
+  [canopy's own changelog](https://github.com/iyulab/canopy/blob/main/CHANGELOG.md#0112--2026-08-18)
+  for details.
+
 ## [0.11.1] — 2026-08-17
 
 ### Changed

package/README.md

@@ -38,6 +38,8 @@ go away.
   you scroll
 - **A dark/light toggle** that remembers a reader's choice; without one, pages follow the
   system setting
+- **Content images open full-size in a lightbox** when clicked, closing on a background click,
+  <kbd>Esc</kbd>, or its close button
 - **Prev/next cards** linking to a page's neighbors in the sidebar's own order, and **backlinks**
   listing every page that points to it
 - **Sidebar groups collapse**, open exactly along the path to the page you're on and closed

package/dist/assets/image-lightbox.css

@@ -0,0 +1,61 @@
+/* Image lightbox — pairs with assets/image-lightbox.js. Reuses canopy's own
+   tokens (--bg-primary, --text-normal, --radius-m, --sp-*) rather than
+   introducing new ones. z-index 30 sits above search's 10 and the mobile
+   nav overlay's 20, since the lightbox can open while either is present. */
+
+.canopy-content img {
+  cursor: zoom-in;
+}
+
+body.canopy-lightbox-open {
+  overflow: hidden;
+}
+
+.canopy-lightbox-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--sp-8);
+  background: rgba(0, 0, 0, 0.85);
+}
+
+.canopy-lightbox-overlay[hidden] {
+  display: none;
+}
+
+.canopy-lightbox-overlay img {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  cursor: default;
+  border-radius: var(--radius-m);
+}
+
+.canopy-lightbox-close {
+  position: fixed;
+  top: var(--sp-4);
+  right: var(--sp-4);
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-m);
+  background: var(--bg-primary);
+  color: var(--text-normal);
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.canopy-lightbox-close::before {
+  content: "\00d7";
+}
+
+.canopy-lightbox-close:hover {
+  background: var(--bg-secondary);
+}

package/dist/assets/image-lightbox.js

@@ -0,0 +1,87 @@
+/**
+ * canopy-page's image lightbox — vanilla JS, no dependencies. Wires every
+ * `<img>` inside `.canopy-content` so a click opens it full-size in a
+ * dismissible overlay, rather than leaving a reader stuck at whatever width
+ * the article column happens to render it at.
+ *
+ * An image an author already wrapped in `<a href="...">` (a common way to
+ * work around the lack of a zoom before this script existed) still opens the
+ * lightbox first: the overlay shows the same source either way, so the link
+ * added nothing a reader couldn't already get from the image itself. The one
+ * case left alone is a click that already carries browser intent to open a
+ * new tab/window — middle click, or a modifier-held click — which this
+ * script never intercepts, so that intent still reaches the ancestor link.
+ *
+ * `shouldIntercept` is exposed for tests: it is the one piece of this file
+ * with real logic, and it needs no DOM to run.
+ */
+var CanopyImageLightbox = (function () {
+  "use strict";
+
+  /** Whether a click should open the lightbox instead of its default action. */
+  function shouldIntercept(event) {
+    return event.button === 0 && !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey;
+  }
+
+  function main() {
+    var images = document.querySelectorAll(".canopy-content img");
+    if (images.length === 0) return;
+
+    var overlay = document.createElement("div");
+    overlay.className = "canopy-lightbox-overlay";
+    overlay.hidden = true;
+
+    var overlayImg = document.createElement("img");
+    overlay.appendChild(overlayImg);
+
+    var closeButton = document.createElement("button");
+    closeButton.type = "button";
+    closeButton.className = "canopy-lightbox-close";
+    closeButton.setAttribute("aria-label", "Close");
+    overlay.appendChild(closeButton);
+
+    var opener = null;
+
+    function close() {
+      overlay.hidden = true;
+      document.body.classList.remove("canopy-lightbox-open");
+      if (opener) {
+        opener.focus();
+        opener = null;
+      }
+    }
+
+    function open(img) {
+      overlayImg.src = img.currentSrc || img.src;
+      overlayImg.alt = img.alt;
+      overlay.hidden = false;
+      document.body.classList.add("canopy-lightbox-open");
+      opener = img;
+      closeButton.focus();
+    }
+
+    overlay.addEventListener("click", function (event) {
+      if (event.target === overlayImg) return;
+      close();
+    });
+    closeButton.addEventListener("click", close);
+    document.addEventListener("keydown", function (event) {
+      if (!overlay.hidden && event.key === "Escape") close();
+    });
+
+    images.forEach(function (img) {
+      img.addEventListener("click", function (event) {
+        if (!shouldIntercept(event)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        open(img);
+      });
+    });
+
+    document.body.appendChild(overlay);
+  }
+
+  if (typeof document !== "undefined") main();
+
+  return { shouldIntercept: shouldIntercept };
+})();

package/dist/assets-bundle.js

@@ -34,11 +34,12 @@ const SEARCH_FAILED_DEFAULT = "Search failed to load.";
  * asset stays valid, readable JavaScript on its own.
  */
 export async function assembleScript(searchFailed) {
-    const [search, scrollspy, themeToggle, mobileNav] = await Promise.all([
+    const [search, scrollspy, themeToggle, mobileNav, imageLightbox] = await Promise.all([
         readAsset("search.js"),
         readAsset("scrollspy.js"),
         readAsset("theme-toggle.js"),
         readAsset("mobile-nav.js"),
+        readAsset("image-lightbox.js"),
     ]);
     // A function replacer, not a replacement string: String.replace treats
     // "$&"/"$'"/"$$" etc. in a replacement string as patterns, and a site
@@ -46,7 +47,7 @@ export async function assembleScript(searchFailed) {
     const searchWithStrings = searchFailed === undefined
         ? search
         : search.replace(JSON.stringify(SEARCH_FAILED_DEFAULT), () => JSON.stringify(searchFailed));
-    return `${searchWithStrings}\n${scrollspy}\n${themeToggle}\n${mobileNav}`;
+    return `${searchWithStrings}\n${scrollspy}\n${themeToggle}\n${mobileNav}\n${imageLightbox}`;
 }
 /**
  * CSS canopy-page contributes on top of a site's own tokens, carried via
@@ -54,7 +55,11 @@ export async function assembleScript(searchFailed) {
  * already uses, so no new canopy surface is needed for this either.
  */
 export async function assembleTokensCss(userTokensCss) {
-    const [search, scrollspy] = await Promise.all([readAsset("search.css"), readAsset("scrollspy.css")]);
-    const own = `${search}\n${scrollspy}`;
+    const [search, scrollspy, imageLightbox] = await Promise.all([
+        readAsset("search.css"),
+        readAsset("scrollspy.css"),
+        readAsset("image-lightbox.css"),
+    ]);
+    const own = `${search}\n${scrollspy}\n${imageLightbox}`;
     return userTokensCss === undefined ? own : `${userTokensCss}\n${own}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/canopy-page",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "Authoring pipeline for documentation sites: one settings file, integrity checks, and a build.",
   "type": "module",
   "license": "MIT",
@@ -53,7 +53,7 @@
     "vitest": "^4.1.9"
   },
   "dependencies": {
-    "@iyulab/canopy": "^0.11.1",
+    "@iyulab/canopy": "^0.11.2",
     "chokidar": "^5.0.0"
   }
 }