@hyperbook/markdown 0.29.5 → 0.31.0

package/dist/assets/client.js

@@ -230,8 +230,42 @@ var hyperbook = (function () {
    * @param {HTMLElement} el - The element to toggle.
    */
   function toggleLightbox(el) {
-    el.parentElement.classList.toggle("lightbox");
-    el.parentElement.classList.toggle("normal");
+    const overlay = document.createElement("div");
+    overlay.classList.add("lightbox-overlay");
+
+    const captionText =
+      el.parentElement.querySelector("figcaption")?.textContent || "";
+
+    // container for image + caption
+    const content = document.createElement("div");
+    content.classList.add("lightbox-content");
+
+    // image container fills remaining space
+    const imgContainer = document.createElement("div");
+    imgContainer.classList.add("lightbox-image-container");
+
+    const lightboxImg = document.createElement("img");
+    lightboxImg.src = el.src;
+    imgContainer.appendChild(lightboxImg);
+
+    content.appendChild(imgContainer);
+
+    // add caption if exists
+    if (captionText) {
+      const caption = document.createElement("div");
+      caption.classList.add("caption");
+      caption.textContent = captionText;
+      content.appendChild(caption);
+    }
+
+    overlay.appendChild(content);
+
+    overlay.addEventListener("click", () => {
+      document.body.removeChild(overlay);
+    });
+
+    document.body.appendChild(overlay);
+    overlay.style.display = "flex";
   }
 
   function init(root) {

package/dist/assets/content.css

@@ -27,27 +27,42 @@ figure {
   max-width: 100%;
 }
 
-.hyperbook-markdown figure.lightbox {
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 1em;
-  z-index: 10000;
-  margin: 0px;
-  background: rgba(0, 0, 0, 0.5);
+.hyperbook-markdown figure.align-left {
+  display: table;
+  float: left;
+  margin-right: 1.75rem;
 }
 
-.hyperbook-markdown figure.lightbox img {
-  min-width: 100%;
-  min-height: 100%;
-  cursor: zoom-out;
-  object-fit: contain;
+.hyperbook-markdown figure.align-right {
+  display: table;
+  float: right;
+  margin-left: 1.75rem;
+}
+
+.hyperbook-markdown figure.align-rightplus {
+  display: table;
+  float: right;
+  margin-left: 1.75rem;
+  margin-right: -1.5rem;
+}
+
+.hyperbook-markdown figure.align-leftplus {
+  display: table;
+  float: left;
+  margin-right: 1.75rem;
+  margin-left: -1.5rem;
+}
+
+.hyperbook-markdown figure.align-centerplus {
+  display: grid;
+  justify-items: center;
+  clear: both;
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+
+  img {
+    width: 100%;
+  }
 }
 
 .hyperbook-markdown table {
@@ -76,12 +91,16 @@ figure {
 }
 
 .hyperbook-markdown figure.normal {
-  text-align: center;
+  display: grid;
+  clear: both;
+  justify-items: center;
+  align-content: center;
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
 .hyperbook-markdown figure.normal img {
+  display: inline-block;
   cursor: zoom-in;
 }
 
@@ -148,11 +167,11 @@ figure {
   margin-bottom: 0;
 }
 
-.hyperbook-markdown li + li {
+.hyperbook-markdown li+li {
   margin-top: 0.25em;
 }
 
-.hyperbook-markdown li > p {
+.hyperbook-markdown li>p {
   margin-top: 16px;
 }
 
@@ -226,6 +245,7 @@ figure {
 .hyperbook-markdown h4,
 .hyperbook-markdown h5,
 .hyperbook-markdown h6 {
+  clear: both;
   font-family: hyperbook-heading, sans-serif;
   margin-top: 24px;
   margin-bottom: 16px;
@@ -305,10 +325,10 @@ figure {
   list-style-type: none;
 }
 
-.hyperbook-markdown #toc-toggle > .bar1,
-.hyperbook-markdown #toc-toggle > .bar2,
-.hyperbook-markdown #toc-toggle > .bar3,
-.hyperbook-markdown #toc-toggle > .bar4 {
+.hyperbook-markdown #toc-toggle>.bar1,
+.hyperbook-markdown #toc-toggle>.bar2,
+.hyperbook-markdown #toc-toggle>.bar3,
+.hyperbook-markdown #toc-toggle>.bar4 {
   background-color: var(--color-text);
 }
 
@@ -431,16 +451,16 @@ figure {
   height: 100%;
 }
 
-.toc-drawer-content > nav {
+.toc-drawer-content>nav {
   padding: 20px;
   flex: 1;
 }
 
-.toc-drawer-content > nav li a {
+.toc-drawer-content>nav li a {
   display: block;
 }
 
-.toc-drawer-content > nav li a:hover {
+.toc-drawer-content>nav li a:hover {
   text-decoration: underline;
 }
 
@@ -547,16 +567,16 @@ figure {
   opacity: 1;
 }
 
-.hyperbook-markdown #toc-toggle > .bar1,
-.hyperbook-markdown #toc-toggle > .bar3 {
+.hyperbook-markdown #toc-toggle>.bar1,
+.hyperbook-markdown #toc-toggle>.bar3 {
   width: 20px;
   height: 2px;
   margin: 2px 3px;
   transition: 0.4s;
 }
 
-.hyperbook-markdown #toc-toggle > .bar2,
-.hyperbook-markdown #toc-toggle > .bar4 {
+.hyperbook-markdown #toc-toggle>.bar2,
+.hyperbook-markdown #toc-toggle>.bar4 {
   width: 25px;
   height: 2px;
   margin: 2px 3px;

package/dist/assets/directive-alert/style.css

@@ -1,3 +1,8 @@
+:root {
+  --alert-color: var(--color-nav-border);
+  --alert-content: "";
+}
+
 .directive-alert>p {
   margin-bottom: 0;
 }
@@ -15,97 +20,45 @@
   position: relative;
   border-left-width: 4px;
   border-left-style: solid;
+  background-color: var(--color-nav);
+  border-left-color: var(--alert-color);
+  border-left-style: solid;
+  border-left-width: 4px;
 }
 
-.directive-alert::before {
+.directive-alert.icon::before {
   border-radius: 100%;
   font-size: 14px;
   font-weight: 700;
-  left: -12px;
-  line-height: 20px;
+  left: -14px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
-  height: 20px;
-  width: 20px;
-  text-align: center;
-  top: 12px;
-}
-
-.directive-alert.success {
-  border-left-style: solid;
-  border-left-width: 4px;
-}
-
-.directive-alert.success::before {
-  content: "✓";
-}
-
-.directive-alert.info {
-  border-left-style: solid;
-  border-left-width: 4px;
-}
-
-.directive-alert.info::before {
-  content: "i";
-}
-
-.directive-alert.warn {
-  border-left-style: solid;
-  border-left-width: 4px;
-}
-
-.directive-alert.warn::before {
-  content: "!";
-}
-
-.directive-alert.error {
-  border-left-style: solid;
-  border-left-width: 4px;
-}
-
-.directive-alert.error::before {
-  content: "x";
-}
-
-.directive-alert {
-  background-color: var(--color-nav);
-  border-left-color: var(--color-nav-border);
-}
-
-.directive-alert::before {
+  height: 24px;
+  width: 24px;
+  top: 8px;
   color: #fff;
+  content: var(--alert-content);
+  background-color: var(--alert-color);
 }
 
 .directive-alert.success {
-  border-left-color: #00c851;
-}
-
-.directive-alert.success::before {
-  background-color: #00c851;
+  --alert-color: #00c851;
+  --alert-content: "✓";
 }
 
 .directive-alert.info {
-  border-left-color: #33b5e5;
-}
-
-.directive-alert.info::before {
-  background-color: #33b5e5;
+  --alert-color: #33b5e5;
+  --alert-content: "i";
 }
 
 .directive-alert.warn {
-  border-left-color: #f0b429;
-}
-
-.directive-alert.warn::before {
-  background-color: #f0b429;
+  --alert-color: #f0b429;
+  --alert-content: "!";
 }
 
 .directive-alert.error {
-  border-left-color: #ef4e4e;
-}
-
-.directive-alert.error::before {
-  background-color: #ef4e4e;
+  --alert-color: #ef4e4e;
+  --alert-content: "x";
 }

package/dist/assets/shell.css

@@ -740,3 +740,69 @@ nav.toc li.level-3 {
   cursor: pointer;
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVwbG9hZCI+PHBhdGggZD0iTTIxIDE1djRhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ2LTQiLz48cG9seWxpbmUgcG9pbnRzPSIxNyA4IDEyIDMgNyA4Ii8+PGxpbmUgeDE9IjEyIiB4Mj0iMTIiIHkxPSIzIiB5Mj0iMTUiLz48L3N2Zz4=");
 }
+
+.lightbox-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 10000;
+  padding: 1em;
+  /* small margin around edges */
+  box-sizing: border-box;
+}
+
+.lightbox-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100%;
+  max-height: 100%;
+  height: 100vh;
+  /* Ensure full height usage */
+  box-sizing: border-box;
+}
+
+.lightbox-image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  flex: 1;
+  /* Take up remaining space after caption */
+  min-height: 0;
+  /* Allow flexbox shrinking */
+}
+
+.lightbox-image-container img {
+  width: calc(100vw - 1em);
+  /* Forces image to grow to this width */
+  height: 100%;
+  /* Use all available height in the flex container */
+  max-width: calc(100vw - 1em);
+  /* Prevents overflow */
+  max-height: 100%;
+  /* Prevents overflow */
+  object-fit: contain;
+  /* Maintains aspect ratio while filling the space */
+  cursor: zoom-out;
+}
+
+.lightbox-content .caption {
+  color: white;
+  font-family: hyperbook-body, sans-serif;
+  text-align: center;
+  font-size: 1em;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  /* Add bottom margin for spacing */
+  max-width: 90vw;
+  word-wrap: break-word;
+  flex-shrink: 0;
+  /* Prevent caption from shrinking */
+}

package/dist/index.js

@@ -63923,14 +63923,16 @@ var remarkImage_default = (ctx) => () => {
         });
       }
       node3.data.hName = "figure";
+      let figureProps = node3.data.hProperties;
       node3.data.hProperties = {
-        class: "normal"
+        class: "normal " + figureProps?.class
       };
       node3.data.hChildren = [
         {
           type: "element",
           tagName: "img",
           properties: {
+            ...figureProps,
             src: node3.url,
             alt: node3.alt,
             onclick: `hyperbook.toggleLightbox(this)`
@@ -63989,10 +63991,16 @@ var remarkDirectiveAlert_default = (ctx) => () => {
         const data = node3.data || (node3.data = {});
         expectContainerDirective(node3, file, name);
         registerDirective(file, name, [], ["style.css"], []);
-        const type = Object.keys(node3.attributes || {}).join(" ");
+        const color2 = node3.attributes?.color;
+        const content5 = node3.attributes?.label;
+        const type = Object.keys(node3.attributes || {}).join(" ").trim();
+        const icon = content5 || type;
+        delete node3.attributes?.color;
+        delete node3.attributes?.label;
         data.hName = "div";
         data.hProperties = {
-          class: ("directive-alert " + type).trim()
+          class: `directive-alert ${type} ${icon ? "icon" : ""}`.trim(),
+          style: `${color2 ? `--alert-color: ${color2};` : ""} ${content5 ? `--alert-content: '${content5}';` : ""}`
         };
       }
     });
@@ -78370,6 +78378,93 @@ function supersub() {
   };
 }
 
+// src/remarkImageAttrs.ts
+var ATTR_BLOCK_RE = /^\s*\{([\s\S]*?)\}/;
+var ATTR_PAIR_RE = /([:\w-]+)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'}]+))/g;
+var SHORTHAND_RE = /([#.])([\w-]+)/g;
+function parseAttrBlock(input) {
+  const m = ATTR_BLOCK_RE.exec(input);
+  if (!m) return null;
+  const inner2 = m[1];
+  const attrs = {};
+  let classes = [];
+  let pair;
+  while ((pair = ATTR_PAIR_RE.exec(inner2)) !== null) {
+    const key2 = pair[1];
+    const val = pair[2] ?? pair[3] ?? pair[4] ?? "";
+    attrs[key2] = val;
+  }
+  let sm;
+  while ((sm = SHORTHAND_RE.exec(inner2)) !== null) {
+    if (sm[1] === "#") {
+      attrs["id"] = sm[2];
+    } else if (sm[1] === ".") {
+      classes.push(sm[2]);
+    }
+  }
+  if (classes.length > 0) {
+    attrs["class"] = classes.join(" ");
+  }
+  return { attrs, length: m[0].length };
+}
+function detectAlignment(prev, next2) {
+  let left = prev?.value.endsWith("-") ? prev.value.match(/-+$/)?.[0] ?? "" : "";
+  let right = next2?.value.startsWith("-") ? next2.value.match(/^-+/)?.[0] ?? "" : "";
+  if (left === "-" && !right) return "align-left";
+  if (left === "--" && !right) return "align-leftplus";
+  if (right === "-" && !left) return "align-right";
+  if (right === "--" && !left) return "align-rightplus";
+  if (left === "--" && right === "--") return "align-centerplus";
+  return "";
+}
+var remarkImageAttrs = (ctx) => () => {
+  return (tree) => {
+    visit(tree, "paragraph", (para) => {
+      const children = para.children;
+      for (let i = 0; i < children.length; i++) {
+        const img = children[i];
+        if (!img || img.type !== "image") continue;
+        const prev = children[i - 1];
+        const next2 = children[i + 1];
+        const alignClass = detectAlignment(prev, next2);
+        img.data ||= {};
+        img.data.hProperties ||= {};
+        const hProps = img.data.hProperties;
+        if (alignClass !== "") {
+          const existing = hProps.class?.split(" ") ?? [];
+          const filtered = existing.filter((c) => !c.startsWith("align-"));
+          hProps.class = [...filtered, alignClass].join(" ");
+        }
+        if (prev && prev.type === "text" && prev.value.endsWith("-")) {
+          prev.value = prev.value.replace(/-+$/, "");
+          if (prev.value === "") children.splice(i - 1, 1);
+          i--;
+        }
+        if (next2 && next2.type === "text" && next2.value.startsWith("-")) {
+          next2.value = next2.value.replace(/^-+/, "");
+          if (next2.value === "") children.splice(i + 1, 1);
+        }
+        const nextAfter = children[i + 1];
+        if (nextAfter && nextAfter.type === "text") {
+          const parsed = parseAttrBlock(nextAfter.value);
+          if (parsed) {
+            for (const [k, v] of Object.entries(parsed.attrs)) {
+              hProps[k] = v;
+            }
+            const remainder = nextAfter.value.slice(parsed.length);
+            if (remainder.length > 0) {
+              nextAfter.value = remainder;
+            } else {
+              children.splice(i + 1, 1);
+            }
+          }
+        }
+      }
+    });
+  };
+};
+var remarkImageAttrs_default = remarkImageAttrs;
+
 // src/process.ts
 var remark = (ctx) => {
   i18n.init(ctx.config.language || "en");
@@ -78380,6 +78475,7 @@ var remark = (ctx) => {
     dist_default,
     remarkDirectivePagelist_default(ctx),
     remarkLink_default(ctx),
+    remarkImageAttrs_default(ctx),
     remarkImage_default(ctx),
     remarkGfm,
     supersub,