@hyperbook/markdown 0.43.5 → 0.44.1

package/dist/assets/directive-multievent/multievent.js

@@ -964,6 +964,8 @@ var multievent = {
     }
 
     SK[clNr].style.display = "block";
+    SK[clNr].style.visibility = "visible";
+    SK[clNr].style.opacity = "1";
     
     // Add event listeners to save state on changes
     var allInputs = SK[clNr].getElementsByTagName("input");

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

@@ -8,6 +8,7 @@
 }
 
 .directive-multievent {
+  transition: opacity 0.2s ease-in;
 
   .MECheckbox:not(first-child),
   .MERadio:not(first-child) {

package/dist/index.js

@@ -61475,6 +61475,12 @@ var en_default = {
   "slideshow-next": "Next",
   "slideshow-jump-to": "Jump to {{index}}",
   "toggle-bookmark": "Toggle Bookmark",
+  "shell-share": "Share",
+  "share-dialog-title": "Create Shareable URL",
+  "share-dialog-standalone": "Standalone Mode",
+  "share-dialog-select-sections": "Select Sections",
+  "share-dialog-copy-url": "Copy Shareable URL",
+  "share-dialog-url-copied": "URL copied to clipboard!",
   "webide-code-preview": "Code Preview",
   "webide-html": "HTML",
   "webide-css": "CSS",
@@ -61528,6 +61534,12 @@ var de_default = {
   "slideshow-next": "Weiter",
   "slideshow-jump-to": "Springe zu {{index}}",
   "toggle-bookmark": "Lesezeichen umschalten",
+  "shell-share": "Teilen",
+  "share-dialog-title": "Teilbare URL erstellen",
+  "share-dialog-standalone": "Standalone-Modus",
+  "share-dialog-select-sections": "Abschnitte ausw\xE4hlen",
+  "share-dialog-copy-url": "Teilbare URL kopieren",
+  "share-dialog-url-copied": "URL in Zwischenablage kopiert!",
   "webide-code-preview": "Code-Vorschau",
   "webide-html": "HTML",
   "webide-css": "CSS",
@@ -61690,105 +61702,115 @@ var rehypeTableOfContents_default = (ctx) => () => {
   return (tree, file) => {
     const headings = file.data.headings || [];
     const originalChildren = tree.children;
-    const tocSidebar = [
-      {
-        type: "element",
-        tagName: "button",
-        properties: {
-          id: "toc-toggle",
-          onclick: "hyperbook.tocToggle()",
-          title: i18n.get("table-of-contents")
+    const tocButton = {
+      type: "element",
+      tagName: "button",
+      properties: {
+        id: "toc-toggle",
+        onclick: "hyperbook.tocToggle()",
+        title: i18n.get("table-of-contents")
+      },
+      children: [
+        {
+          type: "element",
+          tagName: "div",
+          properties: {
+            class: "bar1"
+          },
+          children: []
         },
-        children: [
-          {
-            type: "element",
-            tagName: "div",
-            properties: {
-              class: "bar1"
-            },
-            children: []
+        {
+          type: "element",
+          tagName: "div",
+          properties: {
+            class: "bar2"
           },
-          {
-            type: "element",
-            tagName: "div",
-            properties: {
-              class: "bar2"
-            },
-            children: []
+          children: []
+        },
+        {
+          type: "element",
+          tagName: "div",
+          properties: {
+            class: "bar3"
           },
-          {
-            type: "element",
-            tagName: "div",
-            properties: {
-              class: "bar3"
-            },
-            children: []
+          children: []
+        },
+        {
+          type: "element",
+          tagName: "div",
+          properties: {
+            class: "bar4"
           },
-          {
-            type: "element",
-            tagName: "div",
-            properties: {
-              class: "bar4"
-            },
-            children: []
-          }
-        ]
+          children: []
+        }
+      ]
+    };
+    const tocDrawer = {
+      type: "element",
+      tagName: "side-drawer",
+      properties: {
+        id: "toc-drawer",
+        right: true
       },
+      children: [
+        {
+          type: "element",
+          tagName: "div",
+          properties: {
+            class: "toc-drawer-content"
+          },
+          children: [
+            {
+              type: "element",
+              tagName: "nav",
+              properties: {
+                class: "toc"
+              },
+              children: [
+                {
+                  type: "element",
+                  tagName: "ul",
+                  properties: {},
+                  children: headings.map((heading3) => ({
+                    type: "element",
+                    tagName: "li",
+                    properties: {
+                      class: `level-${heading3.level}`
+                    },
+                    children: [
+                      {
+                        type: "element",
+                        tagName: "a",
+                        properties: {
+                          href: `#${heading3.anchor}`
+                        },
+                        children: [
+                          {
+                            type: "text",
+                            value: heading3.label
+                          }
+                        ]
+                      }
+                    ]
+                  }))
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    };
+    const tocSidebar = [
       {
         type: "element",
-        tagName: "side-drawer",
+        tagName: "div",
         properties: {
-          id: "toc-drawer",
-          right: true
+          class: "floating-buttons-container",
+          id: "floating-buttons-container"
         },
-        children: [
-          {
-            type: "element",
-            tagName: "div",
-            properties: {
-              class: "toc-drawer-content"
-            },
-            children: [
-              {
-                type: "element",
-                tagName: "nav",
-                properties: {
-                  class: "toc"
-                },
-                children: [
-                  {
-                    type: "element",
-                    tagName: "ul",
-                    properties: {},
-                    children: headings.map((heading3) => ({
-                      type: "element",
-                      tagName: "li",
-                      properties: {
-                        class: `level-${heading3.level}`
-                      },
-                      children: [
-                        {
-                          type: "element",
-                          tagName: "a",
-                          properties: {
-                            href: `#${heading3.anchor}`
-                          },
-                          children: [
-                            {
-                              type: "text",
-                              value: heading3.label
-                            }
-                          ]
-                        }
-                      ]
-                    }))
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
+        children: [tocButton]
+      },
+      tocDrawer
     ];
     tree.children = [
       {
@@ -62403,11 +62425,13 @@ body::-webkit-scrollbar {
   font-family: hyperbook-heading;
   src: url(${makeUrl(parseFont(font)[0], "public")});
   size-adjust: ${parseFont(font)[1]};
+  font-display: swap;
 }
 @font-face {
   font-family: hyperbook-body;
   src: url(${makeUrl(parseFont(font)[0], "public")});
   size-adjust: ${parseFont(font)[1]};
+  font-display: swap;
 }
 `;
   }
@@ -62417,6 +62441,7 @@ body::-webkit-scrollbar {
   font-family: hyperbook-body;
   src: url(${makeUrl(parseFont(fonts.body)[0], "public")});
   size-adjust: ${parseFont(fonts.body)[1]};
+  font-display: swap;
 }
 `;
   }
@@ -62426,6 +62451,7 @@ body::-webkit-scrollbar {
   font-family: hyperbook-heading;
   src: url(${makeUrl(parseFont(fonts.heading)[0], "public")});
   size-adjust: ${parseFont(fonts.heading)[1]};
+  font-display: swap;
 }
 `;
   }
@@ -62435,6 +62461,7 @@ body::-webkit-scrollbar {
   font-family: hyperbook-code;
   src: url(${makeUrl(parseFont(fonts.code)[0], "public")});
   size-adjust: ${parseFont(fonts.code)[1]};
+  font-display: swap;
 }
 `;
   }
@@ -62646,7 +62673,8 @@ var rehypeHtmlStructure_default = (ctx) => () => {
                 type: "element",
                 tagName: "script",
                 properties: {
-                  src: makeUrl(["i18n.js"], "assets")
+                  src: makeUrl(["i18n.js"], "assets"),
+                  defer: true
                 },
                 children: []
               },
@@ -62654,7 +62682,8 @@ var rehypeHtmlStructure_default = (ctx) => () => {
                 type: "element",
                 tagName: "script",
                 properties: {
-                  src: makeUrl(["dexie.min.js"], "assets")
+                  src: makeUrl(["dexie.min.js"], "assets"),
+                  defer: true
                 },
                 children: []
               },
@@ -62662,7 +62691,8 @@ var rehypeHtmlStructure_default = (ctx) => () => {
                 type: "element",
                 tagName: "script",
                 properties: {
-                  src: makeUrl(["dexie-export-import.js"], "assets")
+                  src: makeUrl(["dexie-export-import.js"], "assets"),
+                  defer: true
                 },
                 children: []
               },
@@ -62670,7 +62700,8 @@ var rehypeHtmlStructure_default = (ctx) => () => {
                 type: "element",
                 tagName: "script",
                 properties: {
-                  src: makeUrl(["store.js"], "assets")
+                  src: makeUrl(["store.js"], "assets"),
+                  defer: true
                 },
                 children: []
               },
@@ -62691,7 +62722,8 @@ window.Prism.manual = true;`
                 type: "element",
                 tagName: "script",
                 properties: {
-                  src: makeUrl(["prism", "prism.js"], "assets")
+                  src: makeUrl(["prism", "prism.js"], "assets"),
+                  defer: true
                 },
                 children: []
               },
@@ -63351,7 +63383,8 @@ var makeHeaderElements = (ctx) => {
           tagName: "img",
           properties: {
             alt: "logo",
-            src: ctx.makeUrl(ctx.config.logo, "public")
+            src: ctx.makeUrl(ctx.config.logo, "public"),
+            height: "40"
           },
           children: []
         }
@@ -63591,6 +63624,26 @@ var makeHeaderElements = (ctx) => {
       ]
     });
   }
+  elements.push({
+    type: "element",
+    tagName: "button",
+    properties: {
+      id: "share-button",
+      class: "icon-button",
+      title: i18n.get("shell-share"),
+      onclick: "hyperbook.shareOpen()"
+    },
+    children: [
+      {
+        type: "element",
+        tagName: "div",
+        properties: {
+          class: "share-icon"
+        },
+        children: []
+      }
+    ]
+  });
   elements.push({
     type: "element",
     tagName: "dark-mode-toggle",
@@ -70898,10 +70951,178 @@ var rehypeQrCode_default = (ctx) => () => {
         ]
       }
     ];
+    const qrcodeButton = qrcodeDialog[0];
+    const qrcodeDialogElement = qrcodeDialog[1];
     if (originalChildren[0].type === "element" && originalChildren[0].tagName === "div") {
-      originalChildren[0].children.push(...qrcodeDialog);
+      const floatingContainer = originalChildren[0].children.find(
+        (child) => child.type === "element" && child.properties?.id === "floating-buttons-container"
+      );
+      if (floatingContainer && floatingContainer.type === "element") {
+        floatingContainer.children.push(qrcodeButton);
+      } else {
+        originalChildren[0].children.push(qrcodeButton);
+      }
+    }
+    tree.children = [...originalChildren, qrcodeDialogElement];
+  };
+};
+
+// src/rehypeShareDialog.ts
+var rehypeShareDialog_default = (ctx) => () => {
+  return (tree, file) => {
+    const originalChildren = tree.children;
+    const headings = file.data.headings || [];
+    if (!ctx.navigation.current?.href) {
+      return;
     }
-    tree.children = originalChildren;
+    const headingCheckboxes = headings.map((heading3) => ({
+      type: "element",
+      tagName: "label",
+      properties: {
+        class: `heading-item level-${heading3.level}`
+      },
+      children: [
+        {
+          type: "element",
+          tagName: "input",
+          properties: {
+            type: "checkbox",
+            value: heading3.anchor,
+            "data-anchor": heading3.anchor,
+            onchange: "hyperbook.shareUpdatePreview()"
+          },
+          children: []
+        },
+        {
+          type: "text",
+          value: ` ${heading3.label}`
+        }
+      ]
+    }));
+    const shareDialog = [
+      {
+        type: "element",
+        tagName: "dialog",
+        properties: {
+          id: "share-dialog"
+        },
+        children: [
+          {
+            type: "element",
+            tagName: "div",
+            properties: {
+              class: "container"
+            },
+            children: [
+              {
+                type: "element",
+                tagName: "h2",
+                properties: {
+                  class: "title"
+                },
+                children: [
+                  {
+                    type: "text",
+                    value: i18n.get("share-dialog-title")
+                  }
+                ]
+              },
+              {
+                type: "element",
+                tagName: "label",
+                properties: {
+                  class: "standalone-option"
+                },
+                children: [
+                  {
+                    type: "element",
+                    tagName: "input",
+                    properties: {
+                      type: "checkbox",
+                      id: "share-standalone-checkbox",
+                      onchange: "hyperbook.shareUpdatePreview()"
+                    },
+                    children: []
+                  },
+                  {
+                    type: "text",
+                    value: ` ${i18n.get("share-dialog-standalone")}`
+                  }
+                ]
+              },
+              {
+                type: "element",
+                tagName: "h3",
+                properties: {
+                  class: "sections-title"
+                },
+                children: [
+                  {
+                    type: "text",
+                    value: i18n.get("share-dialog-select-sections")
+                  }
+                ]
+              },
+              {
+                type: "element",
+                tagName: "div",
+                properties: {
+                  class: "sections-list"
+                },
+                children: headingCheckboxes
+              },
+              {
+                type: "element",
+                tagName: "div",
+                properties: {
+                  class: "url-preview",
+                  id: "share-url-preview"
+                },
+                children: [
+                  {
+                    type: "text",
+                    value: ""
+                  }
+                ]
+              },
+              {
+                type: "element",
+                tagName: "button",
+                properties: {
+                  class: "copy-button",
+                  onclick: "hyperbook.shareCopyUrl()"
+                },
+                children: [
+                  {
+                    type: "text",
+                    value: i18n.get("share-dialog-copy-url")
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            type: "element",
+            tagName: "button",
+            properties: {
+              class: "close",
+              onclick: "hyperbook.shareClose()"
+            },
+            children: [
+              {
+                type: "element",
+                tagName: "div",
+                properties: {
+                  class: "close-icon"
+                },
+                children: []
+              }
+            ]
+          }
+        ]
+      }
+    ];
+    tree.children = [...originalChildren, ...shareDialog];
   };
 };
 
@@ -72009,7 +72230,8 @@ var remarkDirectiveMultievent_default = (ctx) => () => {
         registerDirective(file, name, ["multievent.js"], ["style.css"], []);
         data.hName = "div";
         data.hProperties = {
-          class: "directive-multievent multievent"
+          class: "directive-multievent multievent",
+          style: "visibility: hidden; opacity: 0;"
         };
       }
     });
@@ -78772,6 +78994,7 @@ var process2 = (md, ctx) => {
     rehypeUnwrapImages,
     rehypeTableOfContents_default(ctx),
     rehypeQrCode_default(ctx),
+    rehypeShareDialog_default(ctx),
     rehypeKatex,
     rehypeDirectiveP5_default(ctx),
     [