@hyperbook/markdown 0.24.6 → 0.24.8

package/dist/assets/client.js

@@ -6,9 +6,16 @@ var hyperbook = (function () {
   const initCollapsibles = (root) => {
     const collapsibleEls = root.getElementsByClassName("collapsible");
     for (let collapsible of collapsibleEls) {
+      const id = collapsible.parentElement.getAttribute("data-id");
+
+      if (id.startsWith("_nav:") && !collapsible.classList.contains("empty")) {
+        const link = collapsible.querySelector("a");
+        link?.addEventListener("click", (event) => {
+          event.stopPropagation();
+        });
+      }
       collapsible.addEventListener("click", () => {
         collapsible.classList.toggle("expanded");
-        const id = collapsible.parentElement.getAttribute("data-id");
         if (id) {
           store.collapsibles.get(id).then((result) => {
             if (!result) {
@@ -28,7 +35,7 @@ var hyperbook = (function () {
   };
 
   /**
-   * @param {HTMLElement} root 
+   * @param {HTMLElement} root
    */
   const updateCollapsibles = (root) => {
     store.collapsibles.toArray().then((collapsibles) => {

package/dist/assets/directive-p5/client.js

@@ -4,7 +4,7 @@ hyperbook.p5 = (function () {
     codeInput.templates.prism(window.Prism, [
       new codeInput.plugins.AutoCloseBrackets(),
       new codeInput.plugins.Indent(true, 2),
-    ])
+    ]),
   );
 
   const elems = document.getElementsByClassName("directive-p5");
@@ -32,6 +32,13 @@ hyperbook.p5 = (function () {
     const resetEl = elem.getElementsByClassName("reset")[0];
     const downloadEl = elem.getElementsByClassName("download")[0];
 
+    if (frame) {
+      frame.srcdoc = frame.srcdoc.replaceAll(
+        "###ORIGIN###",
+        window.location.origin,
+      );
+    }
+
     copyEl?.addEventListener("click", async () => {
       try {
         await navigator.clipboard.writeText(editor.value);
@@ -61,6 +68,7 @@ hyperbook.p5 = (function () {
           const code = result.sketch;
           frame.srcdoc = template
             .replace("###SLOT###", wrapSketch(code))
+            .replaceAll("###ORIGIN###", window.location.origin)
             .replace(/\u00A0/g, " ");
         }
 
@@ -71,7 +79,9 @@ hyperbook.p5 = (function () {
 
       update?.addEventListener("click", () => {
         const code = editor.value;
-        frame.srcdoc = template.replace("###SLOT###", wrapSketch(code));
+        frame.srcdoc = template
+          .replace("###SLOT###", wrapSketch(code))
+          .replaceAll("###ORIGIN###", window.location.origin);
       });
     });
   }

package/dist/assets/shell.css

@@ -37,27 +37,27 @@ side-drawer {
   border-right-color: var(--color-nav-border);
 }
 
-.sidebar > .author,
-.nav-drawer-content > .author {
+.sidebar>.author,
+.nav-drawer-content>.author {
   color: var(--color-author-color);
   background: var(--color-author-background);
 }
 
-.sidebar > .author:hover,
-.nav-drawer-content > .author:hover {
+.sidebar>.author:hover,
+.nav-drawer-content>.author:hover {
   color: var(--color-brand);
 }
 
 /* Three bars for burger menu */
-.toggle > .bar1,
-.toggle > .bar2,
-.toggle > .bar3 {
+.toggle>.bar1,
+.toggle>.bar2,
+.toggle>.bar3 {
   background-color: var(--color-brand-text);
 }
 
-.inverted .toggle > .bar1,
-.inverted .toggle > .bar2,
-.inverted .toggle > .bar3 {
+.inverted .toggle>.bar1,
+.inverted .toggle>.bar2,
+.inverted .toggle>.bar3 {
   background-color: var(--color-brand);
 }
 
@@ -78,11 +78,11 @@ header.inverted {
   color: var(--color-brand-text);
 }
 
-header.inverted > .branding {
+header.inverted>.branding {
   color: var(--color-brand);
 }
 
-header.inverted > .branding:hover {
+header.inverted>.branding:hover {
   color: var(--color-brand);
 }
 
@@ -90,17 +90,17 @@ header.inverted > .branding:hover {
   border-top-color: var(--color-spacer);
 }
 
-.section > .name {
+.section>.name {
   color: var(--color-text);
   border-color: var(--color-spacer);
 }
 
-.section > .name > .label {
+.section>.name>.label {
   color: var(--color-text);
 }
 
-.section > .name.active > .label {
-  color: var(--color-text);
+.section>.name.active>.label {
+  color: var(--color-brand);
 }
 
 .section .name.empty {
@@ -109,15 +109,15 @@ header.inverted > .branding:hover {
   font-style: italic;
 }
 
-.section > .name:hover {
+.section>.name:hover {
   background: var(--color-spacer);
 }
 
-.section > .name.empty:hover {
+.section>.name.empty:hover {
   background: none;
 }
 
-.section > .name.active {
+.section>.name.active {
   background: var(--color-background);
   color: var(--color-brand);
 }
@@ -136,7 +136,7 @@ header.inverted > .branding:hover {
   color: var(--color-brand);
 }
 
-.section > .links {
+.section>.links {
   border-left-color: var(--color-spacer);
 }
 
@@ -234,21 +234,21 @@ a.jump.previous::before {
   border-right-color: var(--color-nav-border);
 }
 
-.sidebar > nav,
-.nav-drawer-content > nav {
+.sidebar>nav,
+.nav-drawer-content>nav {
   padding: 20px;
   flex: 1;
 }
 
-.sidebar > .author,
-.nav-drawer-content > .author {
+.sidebar>.author,
+.nav-drawer-content>.author {
   text-align: center;
   text-decoration: none;
   padding: 20px;
 }
 
-.sidebar > .author,
-.nav-drawer-content > .author > b {
+.sidebar>.author,
+.nav-drawer-content>.author>b {
   font-weight: bold;
 }
 
@@ -268,9 +268,9 @@ a.jump.previous::before {
   cursor: pointer;
 }
 
-.toggle > .bar1,
-.toggle > .bar2,
-.toggle > .bar3 {
+.toggle>.bar1,
+.toggle>.bar2,
+.toggle>.bar3 {
   width: 35px;
   height: 5px;
   margin: 6px 0;
@@ -386,7 +386,7 @@ header {
   margin-right: 8px;
 }
 
-#custom-links-footer > .links-item {
+#custom-links-footer>.links-item {
   border-radius: 8px;
   padding: 8px;
   border: 1px solid var(--color-nav-border);
@@ -565,13 +565,13 @@ header {
 
 .section ul,
 .virtual-section ul,
-nav > ul {
+nav>ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-nav li + li {
+nav li+li {
   margin-top: 0px;
 }
 
@@ -585,7 +585,7 @@ nav li + li {
   margin-top: 8px;
 }
 
-.section > .name {
+.section>.name {
   display: flex;
   text-decoration: none;
   padding: 10px;
@@ -595,12 +595,12 @@ nav li + li {
   user-select: none;
 }
 
-.section > .name > .label {
+.section>.name>.label {
   flex: 1;
   text-decoration: none;
 }
 
-.section > .name > .toggle {
+.section>.name>.toggle {
   text-align: right;
   background: none;
   border: none;
@@ -613,8 +613,10 @@ nav li + li {
 
 .collapsible:after {
   content: "\002B";
+  width: 1.2rem;
   color: var(--color-text);
   font-weight: bold;
+  text-align: right;
   float: right;
   margin-left: 5px;
 }
@@ -628,7 +630,7 @@ nav li + li {
   opacity: 0;
 }
 
-.collapsible.expanded + .collapsible-content {
+.collapsible.expanded+.collapsible-content {
   display: block;
   opacity: 1;
 }
@@ -644,7 +646,7 @@ nav li + li {
   text-decoration: none;
 }
 
-.section > .links {
+.section>.links {
   border-left-width: 1px;
   border-left-style: solid;
 }
@@ -676,12 +678,12 @@ nav.toc li {
   margin-bottom: 8px;
 }
 
-nav.toc li > a {
+nav.toc li>a {
   color: var(--color-text);
   text-decoration: none;
 }
 
-nav.toc li > a:hover {
+nav.toc li>a:hover {
   color: var(--color-brand);
 }
 
@@ -735,4 +737,4 @@ nav.toc li.level-3 {
   mask-repeat: no-repeat;
   cursor: pointer;
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVwbG9hZCI+PHBhdGggZD0iTTIxIDE1djRhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ2LTQiLz48cG9seWxpbmUgcG9pbnRzPSIxNyA4IDEyIDMgNyA4Ii8+PGxpbmUgeDE9IjEyIiB4Mj0iMTIiIHkxPSIzIiB5Mj0iMTUiLz48L3N2Zz4=");
-}
+}

package/dist/index.js

@@ -73286,6 +73286,7 @@ var rehypeDirectiveP5_default = (ctx) => () => {
     return sketchCode;
   };
   const makeWrapInMarkupTemplate = (code4) => `<!DOCTYPE html>
+<head>
 <meta charset="utf8" />
 <base href="${ctx.makeUrl("", "public")}" />
 <style type='text/css'>
@@ -73300,6 +73301,7 @@ canvas {
 }
 </style>
 ${(code4.scripts ? [cdnLibraryUrl, ...code4.scripts] : []).map((src) => `<script type="text/javascript" src="${src}"></script>`).join("\n")}
+</head>
 <body></body>
 <script id="code" type="text/javascript">###SLOT###</script>
 `;
@@ -73329,10 +73331,12 @@ ${(code4.scripts ? [cdnLibraryUrl, ...code4.scripts] : []).map((src) => `<script
         }
         const template = makeWrapInMarkupTemplate({
           scripts: [
+            /**
             ctx.makeUrl(
-              path4.posix.join("directive-p5", "p5.sound.min.js"),
-              "assets"
-            )
+              path.posix.join("directive-p5", "p5.sound.min.js"),
+              "assets",
+            ),
+            */
           ]
         });
         const srcdoc = template.replace("###SLOT###", wrapSketch(srcFile)).replace(/\u00A0/g, " ");