@hyperbook/markdown 0.11.2 → 0.12.0

package/dist/assets/client.js

@@ -33,6 +33,17 @@ var hyperbook = (function () {
     const tocDrawerEl = document.getElementById("toc-drawer");
     tocDrawerEl.open = !tocDrawerEl.open;
   }
+
+  function qrcodeOpen() {
+    const qrCodeDialog = document.getElementById("qrcode-dialog");
+    qrCodeDialog.showModal();
+  }
+
+  function qrcodeClose() {
+    const qrCodeDialog = document.getElementById("qrcode-dialog");
+    qrCodeDialog.close();
+  }
+
   function navToggle() {
     const navDrawerEl = document.getElementById("nav-drawer");
     navDrawerEl.open = !navDrawerEl.open;
@@ -83,5 +94,7 @@ var hyperbook = (function () {
     toggleBookmark,
     navToggle,
     tocToggle,
+    qrcodeOpen,
+    qrcodeClose,
   };
 })();

package/dist/assets/content.css

@@ -370,7 +370,8 @@ figure {
   background-color: var(--color-text);
 }
 
-.hyperbook-markdown #toc-toggle {
+.hyperbook-markdown #toc-toggle,
+.hyperbook-markdown #qrcode-open {
   background: var(--color-background);
   border-color: var(--color-nav-border);
   cursor: pointer;
@@ -399,7 +400,84 @@ figure {
   text-decoration: underline;
 }
 
-.hyperbook-markdown #toc-toggle {
+.hyperbook-markdown #qrcode-dialog {
+  background: var(--color-background);
+  border: 1px solid var(--color-brand);
+  width: 100%;
+  height: 100%;
+}
+
+#qrcode-dialog .container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+#qrcode-dialog .name {
+  color: var(--color-text);
+  text-align: center;
+  font-size: 2rem;
+}
+
+#qrcode-dialog .url {
+  color: var(--color-text);
+  text-align: center;
+  font-size: 1.25rem;
+}
+
+#qrcode-dialog .close {
+  background: none;
+  border: none;
+  font-size: 2rem;
+  color: var(--color-text);
+  cursor: pointer;
+  position: absolute;
+  font: monospace;
+  top: 0px;
+  right: 0px;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--color-background);
+  border-radius: 8px;
+}
+
+#qrcode-dialog .close:hover .close-icon {
+  background-color: var(--color-brand);
+}
+
+.hyperbook-markdown #qrcode-dialog svg {
+  width: 100%;
+  max-width: 512px;
+  margin: 0 auto;
+}
+
+.hyperbook-markdown .close-icon {
+  background-color: var(--color-text);
+  width: 32px;
+  height: 32px;
+  mask-image: url('data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="%230F1729"/></svg>');
+}
+
+.hyperbook-markdown .qrcode-icon {
+  background-color: var(--color-text);
+  width: 32px;
+  height: 32px;
+  mask-image: url('data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 9h6V3H3zm1-5h4v4H4zm1 1h2v2H5zm10 4h6V3h-6zm1-5h4v4h-4zm1 1h2v2h-2zM3 21h6v-6H3zm1-5h4v4H4zm1 1h2v2H5zm15 2h1v2h-2v-3h1zm0-3h1v1h-1zm0-1v1h-1v-1zm-10 2h1v4h-1v-4zm-4-7v2H4v-1H3v-1h3zm4-3h1v1h-1zm3-3v2h-1V3h2v1zm-3 0h1v1h-1zm10 8h1v2h-2v-1h1zm-1-2v1h-2v2h-2v-1h1v-2h3zm-7 4h-1v-1h-1v-1h2v2zm6 2h1v1h-1zm2-5v1h-1v-1zm-9 3v1h-1v-1zm6 5h1v2h-2v-2zm-3 0h1v1h-1v1h-2v-1h1v-1zm0-1v-1h2v1zm0-5h1v3h-1v1h-1v1h-1v-2h-1v-1h3v-1h-1v-1zm-9 0v1H4v-1zm12 4h-1v-1h1zm1-2h-2v-1h2zM8 10h1v1H8v1h1v2H8v-1H7v1H6v-2h1v-2zm3 0V8h3v3h-2v-1h1V9h-1v1zm0-4h1v1h-1zm-1 4h1v1h-1zm3-3V6h1v1z"/><path fill="none" d="M0 0h24v24H0z"/></svg>');
+}
+
+.hyperbook-markdown #toc-toggle,
+.hyperbook-markdown #qrcode-open {
   position: fixed;
   padding: 4px;
   top: 90px;
@@ -413,7 +491,12 @@ figure {
   z-index: 1000;
 }
 
-.hyperbook-markdown #toc-toggle:hover {
+.hyperbook-markdown #qrcode-open {
+  top: 140px;
+}
+
+.hyperbook-markdown #toc-toggle:hover,
+.hyperbook-markdown #qrcode-toggle:hover {
   opacity: 1;
 }
 

package/dist/index.js

@@ -5186,7 +5186,7 @@ var require_qrcode = __commonJS({
       this.length++;
     } };
     var QRCodeLimitLength = [[17, 14, 11, 7], [32, 26, 20, 14], [53, 42, 32, 24], [78, 62, 46, 34], [106, 84, 60, 44], [134, 106, 74, 58], [154, 122, 86, 64], [192, 152, 108, 84], [230, 180, 130, 98], [271, 213, 151, 119], [321, 251, 177, 137], [367, 287, 203, 155], [425, 331, 241, 177], [458, 362, 258, 194], [520, 412, 292, 220], [586, 450, 322, 250], [644, 504, 364, 280], [718, 560, 394, 310], [792, 624, 442, 338], [858, 666, 482, 382], [929, 711, 509, 403], [1003, 779, 565, 439], [1091, 857, 611, 461], [1171, 911, 661, 511], [1273, 997, 715, 535], [1367, 1059, 751, 593], [1465, 1125, 805, 625], [1528, 1190, 868, 658], [1628, 1264, 908, 698], [1732, 1370, 982, 742], [1840, 1452, 1030, 790], [1952, 1538, 1112, 842], [2068, 1628, 1168, 898], [2188, 1722, 1228, 958], [2303, 1809, 1283, 983], [2431, 1911, 1351, 1051], [2563, 1989, 1423, 1093], [2699, 2099, 1499, 1139], [2809, 2213, 1579, 1219], [2953, 2331, 1663, 1273]];
-    function QRCode2(options) {
+    function QRCode3(options) {
       var instance = this;
       this.options = {
         padding: 4,
@@ -5279,7 +5279,7 @@ var require_qrcode = __commonJS({
       this.qrcode.addData(content5);
       this.qrcode.make();
     }
-    QRCode2.prototype.svg = function(opt) {
+    QRCode3.prototype.svg = function(opt) {
       var options = this.options || {};
       var modules = this.qrcode.modules;
       if (typeof opt == "undefined") {
@@ -5360,7 +5360,7 @@ var require_qrcode = __commonJS({
       }
       return svg5;
     };
-    QRCode2.prototype.save = function(file, callback) {
+    QRCode3.prototype.save = function(file, callback) {
       var data = this.svg();
       if (typeof callback != "function") {
         callback = function(error, result) {
@@ -5374,7 +5374,7 @@ var require_qrcode = __commonJS({
       }
     };
     if (typeof module != "undefined") {
-      module.exports = QRCode2;
+      module.exports = QRCode3;
     }
   }
 });
@@ -63433,6 +63433,9 @@ var rehypeTableOfContents_default = (ctx) => () => {
   return (tree, file) => {
     const headings = file.data.headings || [];
     const originalChildren = tree.children;
+    if (!showToc) {
+      return;
+    }
     const tocSidebar = [
       {
         type: "element",
@@ -72049,6 +72052,119 @@ var remarkDirectivePagelist_default = (ctx) => () => {
   };
 };
 
+// src/rehypeQrCode.ts
+var import_qrcode_svg2 = __toESM(require_qrcode(), 1);
+var rehypeQrCode_default = (ctx) => () => {
+  const qrcode = ctx.config.qrcode || ctx.navigation.current?.qrcode || true;
+  return (tree, file) => {
+    const originalChildren = tree.children;
+    if (!qrcode || !ctx.navigation.current?.href) {
+      return;
+    }
+    const qr = new import_qrcode_svg2.default({
+      content: ctx.navigation.current.href,
+      padding: 0,
+      width: 512,
+      height: 512,
+      color: "var(--color-text)",
+      container: "svg-viewbox",
+      background: "var(--color-background)",
+      ecl: "M"
+    }).svg();
+    const qrcodeDialog = [
+      {
+        type: "element",
+        tagName: "button",
+        properties: {
+          id: "qrcode-open",
+          onclick: "hyperbook.qrcodeOpen()",
+          title: "QR-Code"
+        },
+        children: [
+          {
+            type: "element",
+            tagName: "div",
+            properties: {
+              class: "qrcode-icon"
+            },
+            children: []
+          }
+        ]
+      },
+      {
+        type: "element",
+        tagName: "dialog",
+        properties: {
+          id: "qrcode-dialog"
+        },
+        children: [
+          {
+            type: "element",
+            tagName: "div",
+            properties: {
+              class: "container"
+            },
+            children: [
+              {
+                type: "element",
+                tagName: "div",
+                properties: {
+                  class: "name"
+                },
+                children: [
+                  {
+                    type: "text",
+                    value: ctx.navigation.current.name || ctx.config.name
+                  }
+                ]
+              },
+              ...fromHtml(qr).children,
+              {
+                type: "element",
+                tagName: "div",
+                properties: {
+                  class: "url"
+                },
+                children: [
+                  {
+                    type: "text",
+                    value: `${ctx.makeUrl(
+                      ctx.navigation.current?.href || "",
+                      "public"
+                    )}`
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            type: "element",
+            tagName: "button",
+            properties: {
+              class: "close",
+              onclick: "hyperbook.qrcodeClose()"
+            },
+            children: [
+              {
+                type: "element",
+                tagName: "div",
+                properties: {
+                  class: "close-icon"
+                },
+                children: []
+              }
+            ]
+          }
+        ]
+      }
+    ];
+    if (originalChildren[0].type === "element" && originalChildren[0].tagName === "div") {
+      originalChildren[0].children.push(...qrcodeDialog);
+    }
+    tree.children = originalChildren;
+  };
+};
+
 // src/process.ts
 var remark = (ctx) => {
   const remarkPlugins = [
@@ -72091,6 +72207,7 @@ var remark = (ctx) => {
   ];
   const rehypePlugins = [
     rehypeTableOfContents_default(ctx),
+    rehypeQrCode_default(ctx),
     rehypeKatex,
     [
       src_default,