@hyperbook/markdown 0.16.0 → 0.17.0

package/dist/assets/dark.css

@@ -0,0 +1,65 @@
+:root {
+  --color-background: #1e1e1e;
+  --color-text: #f5f5f5;
+  --color-text-deactivated: #d6d6d6;
+  --color-nav: #222222;
+  --color-nav-border: #464646;
+  --color-author-background: #2c2c2c;
+  --color-author-color: #d6d6d6;
+  --color-spacer: #3c3c3c;
+  --color-brand: var(--color-brand-dark);
+}
+
+header {
+  background: var(--color-nav) !important;
+}
+
+.branding {
+  color: var(--color-brand) !important;
+}
+
+.toggle .bar1,
+.toggle .bar2,
+.toggle .bar3 {
+  background-color: var(--color-brand) !important;
+}
+
+figure[data-rehype-pretty-code-figure] pre,
+code[data-theme*=" "],
+code[data-theme*=" "] span {
+color: var(--shiki-dark);
+background-color: var(--shiki-dark-bg);
+}
+
+[data-highlighted-chars] {
+background-color: var(--color-spacer) !important;
+}
+
+[data-rehype-pretty-code-title] {
+color: var(--color-text);
+background-color: var(--color-spacer);
+border-color: var(--color-spacer);
+}
+
+[data-highlighted-line] {
+background: var(--color-spacer) !important;
+}
+
+[data-char-id] {
+background-color: var(--color-spacer);
+}
+
+[data-chars-id="r"] {
+background-color: #9f123980 !important;
+color: rgb(249, 168, 212) !important;
+}
+
+[data-chars-id="y"] {
+background-color: #854d0e80 !important;
+color: rgb(253, 224, 71) !important;
+}
+
+[data-chars-id="l"] {
+background-color: #6b21a880 !important;
+color: rgb(233, 213, 255) !important;
+}

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

@@ -20,7 +20,6 @@ hyperbook.mermaid = (function () {
               .replace(/"/g, """)
               .replace(/'/g, "'");
             element.innerHTML = escapedData;
-            console.log(element.innerHTML);
           }
           count--;
           if (count == 0) {
@@ -34,24 +33,20 @@ hyperbook.mermaid = (function () {
   };
 
   const init = () => {
-    const colorSchemeQueryList = window.matchMedia(
-      "(prefers-color-scheme: dark)",
-    );
+    const toggle = document.querySelector("dark-mode-toggle");
+    if (toggle?.mode == "dark") {
+      resetProcessed().then(loadMermaid("dark")).catch(console.error);
+    } else {
+      resetProcessed().then(loadMermaid("default")).catch(console.error);
+    }
 
-    const setColorScheme = (e) => {
-      if (e.matches) {
+    document.addEventListener("colorschemechange", (e) => {
+      if (e.detail.colorScheme === "dark") {
         resetProcessed().then(loadMermaid("dark")).catch(console.error);
       } else {
         resetProcessed().then(loadMermaid("default")).catch(console.error);
       }
-    };
-
-    if (colorSchemeQueryList.matches) {
-      resetProcessed().then(loadMermaid("dark")).catch(console.error);
-    } else {
-      resetProcessed().then(loadMermaid("default")).catch(console.error);
-    }
-    colorSchemeQueryList.addEventListener("change", setColorScheme);
+    });
   };
 
   init();

package/dist/assets/light.css

@@ -0,0 +1,47 @@
+:root {
+  --color-background: white;
+  --color-text: black;
+  --color-text-deactivated: #242428;
+  --color-nav: #f5f5f5;
+  --color-nav-border: #3c3c3c;
+  --color-author-background: #d6d6d6;
+  --color-author-color: #3c3c3c;
+  --color-spacer: #a4a4a4;
+}
+
+figure[data-rehype-pretty-code-figure] pre,
+code[data-theme*=" "],
+code[data-theme*=" "] span {
+  color: var(--shiki-light);
+  background-color: var(--shiki-light-bg);
+}
+
+[data-rehype-pretty-code-title] {
+  color: var(--color-text);
+  background-color: var(--color-nav);
+  border-color: var(--color-spacer);
+}
+
+[data-highlighted-line] {
+  background: var(--color-nav) !important;
+}
+
+[data-rehype-pretty-code-title] {
+  border-color: var(--color-spacer);
+  color: var(--color-text);
+}
+
+[data-chars-id="r"] {
+  color: #9f123980 !important;
+  background-color: rgb(249, 168, 212) !important;
+}
+
+[data-chars-id="y"] {
+  color: #854d0e80 !important;
+  background-color: rgb(253, 224, 71) !important;
+}
+
+[data-chars-id="l"] {
+  color: #6b21a880 !important;
+  background-color: rgb(233, 213, 255) !important;
+}

package/dist/assets/shell.css

@@ -1,6 +1,5 @@
 :root {
   --internal-color-error: #d26466;
-  --app-height: 100dvh;
 }
 
 .main-grid * {
@@ -17,6 +16,11 @@ a {
   color: var(--color-brand);
 }
 
+#dark-mode-toggle {
+  margin-right: 16px;
+  line-height: 1;
+}
+
 ul,
 ol,
 li {
@@ -190,8 +194,11 @@ a.jump.previous::before {
 .main-grid {
   font-family: hyperbook-body, sans-serif;
   display: grid;
-  height: var(--app-height);
-  width: 100dvw;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
   grid-template-columns: 300px 1fr;
   grid-template-rows: 80px 1fr;
   grid-template-areas:
@@ -202,8 +209,8 @@ a.jump.previous::before {
 .nav-drawer-content {
   display: flex;
   flex-direction: column;
+  height: 100%;
   grid-area: nav;
-  height: calc(var(--app-height));
   overflow-y: auto;
 }
 
@@ -211,7 +218,6 @@ a.jump.previous::before {
   display: flex;
   flex-direction: column;
   grid-area: nav;
-  height: calc(var(--app-height) - 80px);
   overflow-y: auto;
   border-right-style: solid;
   border-right-width: 1px;

package/dist/index.js

@@ -64183,45 +64183,6 @@ body::-webkit-scrollbar {
 `;
   }
   rootCss += `
-:root {
-  --color-background: white;
-  --color-text: black;
-  --color-text-deactivated: #242428;
-  --color-nav: #f5f5f5;
-  --color-nav-border: #3c3c3c;
-  --color-author-background: #d6d6d6;
-  --color-author-color: #3c3c3c;
-  --color-spacer: #a4a4a4;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: #1e1e1e;
-    --color-text: #f5f5f5;
-    --color-text-deactivated: #d6d6d6;
-    --color-nav: #222222;
-    --color-nav-border: #464646;
-    --color-author-background: #2c2c2c;
-    --color-author-color: #d6d6d6;
-    --color-spacer: #3c3c3c;
-    --color-brand: var(--color-brand-dark);
-  }
-
-  header {
-    background: var(--color-nav)!important;
-  }
-
-  .branding {
-    color: var(--color-brand)!important;
-  }
-
-  .toggle .bar1,
-  .toggle .bar2,
-  .toggle .bar3 {
-    background-color: var(--color-brand)!important;
-  }
-}
-
 body {
   overscroll-behavior-x: none;
   background-color: transparent;
@@ -64346,6 +64307,52 @@ var rehypeHtmlStructure_default = (ctx) => () => {
                 children: []
               },
               makeRootCssElement(ctx),
+              {
+                type: "element",
+                tagName: "noscript",
+                properties: {
+                  id: "dark-mode-toggle-stylesheets"
+                },
+                children: [
+                  {
+                    type: "element",
+                    tagName: "link",
+                    properties: {
+                      rel: "stylesheet",
+                      href: makeUrl(["light.css"], "assets"),
+                      media: "(prefers-color-scheme: light)"
+                    },
+                    children: []
+                  },
+                  {
+                    type: "element",
+                    tagName: "link",
+                    properties: {
+                      rel: "stylesheet",
+                      href: makeUrl(["dark.css"], "assets"),
+                      media: "(prefers-color-scheme: dark)"
+                    },
+                    children: []
+                  }
+                ]
+              },
+              {
+                type: "element",
+                tagName: "script",
+                properties: {
+                  src: makeUrl(["dark-mode-toggle-stylesheets-loader.js"], "assets")
+                },
+                children: []
+              },
+              {
+                type: "element",
+                tagName: "script",
+                properties: {
+                  type: "module",
+                  src: makeUrl(["dark-mode-toggle.mjs"], "assets")
+                },
+                children: []
+              },
               {
                 type: "element",
                 tagName: "link",
@@ -65126,6 +65133,16 @@ var makeHeaderElements = (ctx) => {
       ]
     });
   }
+  elements.push({
+    type: "element",
+    tagName: "dark-mode-toggle",
+    properties: {
+      id: "dark-mode-toggle",
+      appearence: "switch",
+      permanent: true
+    },
+    children: []
+  });
   return [
     {
       type: "element",