@elmethis/qwik 0.0.19 → 0.0.21

package/lib/index.qwik.cjs

@@ -6,10 +6,11 @@ const js = require("@mdi/js");
 const shiki = require("shiki");
 const katex = require("katex");
 const lodashEs = require("lodash-es");
+const marked = require("marked");
 const caption$1 = "_caption_1j0ec_27";
 const divider = "_divider_1j0ec_50";
 const code$2 = "_code_1j0ec_1";
-const styles$s = {
+const styles$t = {
   "code-block": "_code-block_1j0ec_1",
   "language-icon": "_language-icon_1j0ec_22",
   caption: caption$1,
@@ -69,7 +70,7 @@ const Typescript = qwik.component$(({ size = 24, ...props }) => {
   });
 });
 const path = "_path_1ccs2_1";
-const styles$r = {
+const styles$s = {
   path
 };
 const Bash = qwik.component$(({ size = 24, ...props }) => {
@@ -85,7 +86,7 @@ const Bash = qwik.component$(({ size = 24, ...props }) => {
         d: "M4.24 4.24h119.53v119.53H4.24z"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("path", {
-        class: styles$r.path,
+        class: styles$s.path,
         d: "M109.01 28.64L71.28 6.24c-2.25-1.33-4.77-2-7.28-2s-5.03.67-7.28 2.01l-37.74 22.4c-4.5 2.67-7.28 7.61-7.28 12.96v44.8c0 5.35 2.77 10.29 7.28 12.96l37.73 22.4c2.25 1.34 4.76 2 7.28 2c2.51 0 5.03-.67 7.28-2l37.74-22.4c4.5-2.67 7.28-7.62 7.28-12.96V41.6c0-5.34-2.77-10.29-7.28-12.96M79.79 98.59l.06 3.22c0 .39-.25.83-.55.99l-1.91 1.1c-.3.15-.56-.03-.56-.42l-.03-3.17c-1.63.68-3.29.84-4.34.42c-.2-.08-.29-.37-.21-.71l.69-2.91c.06-.23.18-.46.34-.6c.06-.06.12-.1.18-.13c.11-.06.22-.07.31-.03c1.14.38 2.59.2 3.99-.5c1.78-.9 2.97-2.72 2.95-4.52c-.02-1.64-.9-2.31-3.05-2.33c-2.74.01-5.3-.53-5.34-4.57c-.03-3.32 1.69-6.78 4.43-8.96l-.03-3.25c0-.4.24-.84.55-1l1.85-1.18c.3-.15.56.04.56.43l.03 3.25c1.36-.54 2.54-.69 3.61-.44c.23.06.34.38.24.75l-.72 2.88c-.06.22-.18.44-.33.58a.8.8 0 0 1-.19.14c-.1.05-.19.06-.28.05c-.49-.11-1.65-.36-3.48.56c-1.92.97-2.59 2.64-2.58 3.88c.02 1.48.77 1.93 3.39 1.97c3.49.06 4.99 1.58 5.03 5.09c.05 3.44-1.79 7.15-4.61 9.41m26.34-60.5l-35.7 22.05c-4.45 2.6-7.73 5.52-7.74 10.89v43.99c0 3.21 1.3 5.29 3.29 5.9c-.65.11-1.32.19-1.98.19c-2.09 0-4.15-.57-5.96-1.64l-37.73-22.4c-3.69-2.19-5.98-6.28-5.98-10.67V41.6c0-4.39 2.29-8.48 5.98-10.67l37.74-22.4c1.81-1.07 3.87-1.64 5.96-1.64s4.15.57 5.96 1.64l37.74 22.4c3.11 1.85 5.21 5.04 5.8 8.63c-1.27-2.67-4.09-3.39-7.38-1.47"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("path", {
@@ -526,12 +527,12 @@ const C = qwik.component$(({ size = 24, ...props }) => {
   });
 });
 const icon$3 = "_icon_1gvln_1";
-const styles$q = {
+const styles$r = {
   icon: icon$3
 };
 const ElmMdiIcon = qwik.component$(({ d, size = "1em", color, lightColor, darkColor }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", {
-    class: styles$q.icon,
+    class: styles$r.icon,
     style: {
       "--color": lightColor ?? color,
       "--dark-color": darkColor ?? color
@@ -640,7 +641,7 @@ const text$3 = "_text_1gswr_1";
 const code$1 = "_code_1gswr_12";
 const kbd = "_kbd_1gswr_21";
 const link$1 = "_link_1gswr_47";
-const styles$p = {
+const styles$q = {
   text: text$3,
   code: code$1,
   kbd,
@@ -651,16 +652,16 @@ const textStyles = {
   text: text$2
 };
 const icon$2 = "_icon_19g82_1";
-const styles$o = {
+const styles$p = {
   icon: icon$2
 };
 const ElmInlineIcon = qwik.component$(({ src, alt }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("span", {
-    class: styles$o.icon,
+    class: styles$p.icon,
     children: /* @__PURE__ */ jsxRuntime.jsx("img", {
       src,
       alt,
-      class: styles$o.icon
+      class: styles$p.icon
     })
   });
 });
@@ -671,7 +672,7 @@ const ElmInlineText = qwik.component$((props) => {
   }) : /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {});
   if (props.kbd) {
     vnode = /* @__PURE__ */ jsxRuntime.jsx("kbd", {
-      class: styles$p.kbd,
+      class: styles$q.kbd,
       children: vnode
     });
   }
@@ -697,13 +698,13 @@ const ElmInlineText = qwik.component$((props) => {
   }
   if (code2) {
     vnode = /* @__PURE__ */ jsxRuntime.jsx("code", {
-      class: styles$p.code,
+      class: styles$q.code,
       children: vnode
     });
   }
   if (props.ruby) {
     vnode = /* @__PURE__ */ jsxRuntime.jsxs("ruby", {
-      class: styles$p.text,
+      class: styles$q.text,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", {
           children: vnode
@@ -716,7 +717,7 @@ const ElmInlineText = qwik.component$((props) => {
   }
   const wrappedVnode = /* @__PURE__ */ jsxRuntime.jsx("span", {
     class: [
-      styles$p.text,
+      styles$q.text,
       textStyles.text
     ],
     style: {
@@ -728,7 +729,7 @@ const ElmInlineText = qwik.component$((props) => {
   });
   if (props.href) {
     return /* @__PURE__ */ jsxRuntime.jsxs("a", {
-      class: styles$p.link,
+      class: styles$q.link,
       href: props.href,
       style: {
         "--font-size": size
@@ -746,7 +747,7 @@ const ElmInlineText = qwik.component$((props) => {
   return wrappedVnode;
 });
 const code = "_code_1sw1e_1";
-const styles$n = {
+const styles$o = {
   code
 };
 const ElmShikiHighlighter = qwik.component$(({ code: code2, language = "txt" }) => {
@@ -771,7 +772,7 @@ const ElmShikiHighlighter = qwik.component$(({ code: code2, language = "txt" })
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx("pre", {
-    class: styles$n.code,
+    class: styles$o.code,
     dangerouslySetInnerHTML: rawHtml.value
   });
 });
@@ -790,19 +791,19 @@ const ElmCodeBlock = qwik.component$(({ code: code2, language = "txt", caption:
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("figure", {
-    class: styles$s["code-block"],
+    class: styles$t["code-block"],
     style: {
       margin
     },
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", {
-        class: styles$s["language-icon"],
+        class: styles$t["language-icon"],
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmLanguageIcon, {
           language
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("span", {
-        class: styles$s.caption,
+        class: styles$t.caption,
         children: /* @__PURE__ */ jsxRuntime.jsxs(ElmInlineText, {
           children: [
             caption2 || language,
@@ -811,7 +812,7 @@ const ElmCodeBlock = qwik.component$(({ code: code2, language = "txt", caption:
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$s["copy-icon"],
+        class: styles$t["copy-icon"],
         onClick$: copyToClipboard,
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
           size: "1.25rem",
@@ -820,10 +821,10 @@ const ElmCodeBlock = qwik.component$(({ code: code2, language = "txt", caption:
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("hr", {
-        class: styles$s.divider
+        class: styles$t.divider
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$s.code,
+        class: styles$t.code,
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmShikiHighlighter, {
           code: code2,
           language
@@ -843,7 +844,7 @@ const ElmKatex = qwik.component$(({ expression, block = false }) => {
   });
 });
 const parallax = "_parallax_1kb0k_1";
-const styles$m = {
+const styles$n = {
   "parallax-watcher": "_parallax-watcher_1kb0k_1",
   parallax
 };
@@ -852,13 +853,13 @@ const ElmParallax = qwik.component$(({ images }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$m["parallax-watcher"],
+        class: styles$n["parallax-watcher"],
         "window:onScroll$": () => {
           y.value = window.scrollY;
         }
       }),
       images.map((image2, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$m.parallax,
+        class: styles$n.parallax,
         style: {
           backgroundImage: `url(${image2})`,
           transform: `scale(1.2) translateY(${y.value / (1e3 * (index + 1))}%)`,
@@ -872,7 +873,7 @@ const toggle = "_toggle_1nxqa_1";
 const summary = "_summary_1nxqa_14";
 const content$2 = "_content_1nxqa_60";
 const footer = "_footer_1nxqa_80";
-const styles$l = {
+const styles$m = {
   toggle,
   "toggle-closed": "_toggle-closed_1nxqa_7",
   "toggle-open": "_toggle-open_1nxqa_10",
@@ -900,29 +901,29 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: [
-      styles$l.toggle,
+      styles$m.toggle,
       {
-        [styles$l["toggle-open"]]: isOpen.value,
-        [styles$l["toggle-closed"]]: !isOpen.value
+        [styles$m["toggle-open"]]: isOpen.value,
+        [styles$m["toggle-closed"]]: !isOpen.value
       }
     ],
     children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", {
         class: [
-          styles$l.summary,
+          styles$m.summary,
           {
-            [styles$l["summary-open"]]: isOpen.value,
-            [styles$l["summary-closed"]]: !isOpen.value
+            [styles$m["summary-open"]]: isOpen.value,
+            [styles$m["summary-closed"]]: !isOpen.value
           }
         ],
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", {
             class: [
-              styles$l["chevron-icon"],
+              styles$m["chevron-icon"],
               {
-                [styles$l["chevron-icon-open"]]: isOpen.value,
-                [styles$l["chevron-icon-closed"]]: !isOpen.value
+                [styles$m["chevron-icon-open"]]: isOpen.value,
+                [styles$m["chevron-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
@@ -930,17 +931,17 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
             })
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$l["summary-text"],
+            class: styles$m["summary-text"],
             children: summary2 ? summary2 : /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
               name: "summary"
             })
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
             class: [
-              styles$l["plus-icon"],
+              styles$m["plus-icon"],
               {
-                [styles$l["plus-icon-open"]]: isOpen.value,
-                [styles$l["plus-icon-closed"]]: !isOpen.value
+                [styles$m["plus-icon-open"]]: isOpen.value,
+                [styles$m["plus-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
@@ -953,30 +954,30 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
         class: [
-          styles$l.content,
+          styles$m.content,
           {
-            [styles$l["content-open"]]: isOpen.value,
-            [styles$l["content-closed"]]: !isOpen.value
+            [styles$m["content-open"]]: isOpen.value,
+            [styles$m["content-closed"]]: !isOpen.value
           }
         ],
         children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
       }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        class: styles$l.footer,
+        class: styles$m.footer,
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$l["footer-chevron-icon"],
+            class: styles$m["footer-chevron-icon"],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
               d: js.mdiChevronRight,
               color: "gray"
             })
           }),
           /* @__PURE__ */ jsxRuntime.jsx("hr", {
-            class: styles$l["footer-line"]
+            class: styles$m["footer-line"]
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$l["footer-cross-icon"],
+            class: styles$m["footer-cross-icon"],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
               d: js.mdiPlus,
               color: "#c56565"
@@ -986,17 +987,17 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
             children: "CLOSE"
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$l["footer-cross-icon"],
+            class: styles$m["footer-cross-icon"],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
               d: js.mdiPlus,
               color: "#c56565"
             })
           }),
           /* @__PURE__ */ jsxRuntime.jsx("hr", {
-            class: styles$l["footer-line"]
+            class: styles$m["footer-line"]
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$l["footer-chevron-icon"],
+            class: styles$m["footer-chevron-icon"],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
               d: js.mdiChevronRight,
               color: "gray"
@@ -1007,50 +1008,50 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
     ]
   });
 });
-const styles$k = {
+const styles$l = {
   "block-fallback": "_block-fallback_rt986_1"
 };
 const wrapper$1 = "_wrapper_1yktj_12";
 const dot = "_dot_1yktj_22";
-const styles$j = {
+const styles$k = {
   wrapper: wrapper$1,
   dot
 };
 const ElmDotLoadingIcon = qwik.component$(({ size = "4em", color = "#606875" }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: styles$j.wrapper,
+    class: styles$k.wrapper,
     style: {
       "--size": size,
       "--color": color
     },
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$j.dot,
+        class: styles$k.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$j.dot,
+        class: styles$k.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$j.dot,
+        class: styles$k.dot,
         "aria-hidden": "true"
       })
     ]
   });
 });
-const styles$i = {
+const styles$j = {
   "rectangle-wave": "_rectangle-wave_hej9g_17"
 };
 const ElmRectangleWave = qwik.component$(() => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     "aria-hidden": "true",
-    class: styles$i["rectangle-wave"]
+    class: styles$j["rectangle-wave"]
   });
 });
 const ElmBlockFallback = qwik.component$(({ height = "16rem" }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: styles$k["block-fallback"],
+    class: styles$l["block-fallback"],
     style: {
       "--height": height
     },
@@ -1084,13 +1085,18 @@ function useElmethisTheme() {
     }
   }));
   qwik.useVisibleTask$(() => {
-    const currentTheme = document.documentElement.getAttribute("data-theme");
-    if (currentTheme != null) {
-      isDarkTheme.value = currentTheme === "dark";
+    const localStorageTheme = localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (localStorageTheme != null) {
+      isDarkTheme.value = localStorageTheme === "dark";
+      document.documentElement.setAttribute("data-theme", localStorageTheme);
+      const body2 = document.querySelector("body");
+      if (body2 != null) {
+        body2.style.colorScheme = localStorageTheme;
+      }
     } else {
-      const localStorageTheme = localStorage.getItem(LOCAL_STORAGE_KEY);
-      if (localStorageTheme != null) {
-        isDarkTheme.value = localStorageTheme === "dark";
+      const currentTheme = document.documentElement.getAttribute("data-theme");
+      if (currentTheme != null) {
+        isDarkTheme.value = currentTheme === "dark";
       }
     }
   }, {
@@ -1102,7 +1108,7 @@ function useElmethisTheme() {
   };
 }
 const icon$1 = "_icon_1husg_1";
-const styles$h = {
+const styles$i = {
   icon: icon$1
 };
 const ElmToggleTheme = qwik.component$(({ size = "2rem" }) => {
@@ -1113,7 +1119,7 @@ const ElmToggleTheme = qwik.component$(({ size = "2rem" }) => {
       width: size,
       height: size,
       viewBox: "0 0 24 24",
-      class: styles$h.icon,
+      class: styles$i.icon,
       onClick$: toggleTheme,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("g", {
@@ -1321,7 +1327,7 @@ const ElmToggleTheme = qwik.component$(({ size = "2rem" }) => {
       width: size,
       height: size,
       viewBox: "0 0 24 24",
-      class: styles$h.icon,
+      class: styles$i.icon,
       onClick$: toggleTheme,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("path", {
@@ -1569,7 +1575,7 @@ const ElmToggleTheme = qwik.component$(({ size = "2rem" }) => {
 });
 const image$1 = "_image_5s2ag_11";
 const fallback = "_fallback_5s2ag_33";
-const styles$g = {
+const styles$h = {
   "block-image": "_block-image_5s2ag_1",
   "image-container": "_image-container_5s2ag_11",
   image: image$1,
@@ -1589,7 +1595,7 @@ const ElmBlockImage = qwik.component$(({ src, alt, caption: caption2, width, hei
     }
   });
   const ImageComponent = /* @__PURE__ */ jsxRuntime.jsx("img", {
-    class: styles$g.image,
+    class: styles$h.image,
     src,
     alt: alt ?? caption2 ?? "Image",
     width,
@@ -1602,7 +1608,7 @@ const ElmBlockImage = qwik.component$(({ src, alt, caption: caption2, width, hei
     }
   });
   const Modal = /* @__PURE__ */ jsxRuntime.jsx("div", {
-    class: styles$g["modal-container"],
+    class: styles$h["modal-container"],
     style: {
       pointerEvents: isShowModal.value ? "auto" : "none",
       "--opacity": isShowModal.value ? 1 : 0
@@ -1611,10 +1617,10 @@ const ElmBlockImage = qwik.component$(({ src, alt, caption: caption2, width, hei
     children: ImageComponent
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("figure", {
-    class: styles$g["block-image"],
+    class: styles$h["block-image"],
     children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        class: styles$g["image-container"],
+        class: styles$h["image-container"],
         style: {
           "--opacity": isLoading.value ? 1 : 0
         },
@@ -1622,13 +1628,13 @@ const ElmBlockImage = qwik.component$(({ src, alt, caption: caption2, width, hei
         children: [
           ImageComponent,
           /* @__PURE__ */ jsxRuntime.jsx("div", {
-            class: styles$g.fallback,
+            class: styles$h.fallback,
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmRectangleWave, {})
           })
         ]
       }),
       caption2 && /* @__PURE__ */ jsxRuntime.jsxs("figcaption", {
-        class: styles$g["caption-box"],
+        class: styles$h["caption-box"],
         style: {
           "--opacity": isLoading.value ? 0 : 1
         },
@@ -1654,7 +1660,7 @@ const ElmBlockImage = qwik.component$(({ src, alt, caption: caption2, width, hei
   });
 });
 const file = "_file_14a0w_1";
-const styles$f = {
+const styles$g = {
   file,
   "file-size": "_file-size_14a0w_16",
   "download-icon": "_download-icon_14a0w_21"
@@ -1682,7 +1688,7 @@ const ElmFile = qwik.component$(({ name, src, filesize }) => {
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: styles$f.file,
+    class: styles$g.file,
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", {
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
@@ -1696,13 +1702,13 @@ const ElmFile = qwik.component$(({ name, src, filesize }) => {
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$f["file-size"],
+        class: styles$g["file-size"],
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
           children: filesize
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$f["download-icon"],
+        class: styles$g["download-icon"],
         onClick$: downloadFile,
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
           d: js.mdiDownload,
@@ -1719,7 +1725,7 @@ const content$1 = "_content_rgq1s_53";
 const title = "_title_rgq1s_73";
 const description = "_description_rgq1s_76";
 const link = "_link_rgq1s_80";
-const styles$e = {
+const styles$f = {
   bookmark,
   container: container$1,
   image,
@@ -1730,37 +1736,37 @@ const styles$e = {
 };
 const ElmBookmark = qwik.component$(({ url, image: image2, title: title2, description: description2, favicon }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    class: styles$e.bookmark,
+    class: styles$f.bookmark,
     children: /* @__PURE__ */ jsxRuntime.jsxs("a", {
-      class: styles$e.container,
+      class: styles$f.container,
       href: url,
       target: "_blank",
       rel: "noopener noreferrer",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("img", {
-          class: styles$e.image,
+          class: styles$f.image,
           src: image2,
           alt: "OGP Image"
         }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          class: styles$e.content,
+          class: styles$f.content,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", {
-              class: styles$e.title,
+              class: styles$f.title,
               children: /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
                 bold: true,
                 children: title2
               })
             }),
             /* @__PURE__ */ jsxRuntime.jsx("div", {
-              class: styles$e.description,
+              class: styles$f.description,
               children: /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
                 size: "0.75rem",
                 children: description2
               })
             }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", {
-              class: styles$e.link,
+              class: styles$f.link,
               children: [
                 favicon ? /* @__PURE__ */ jsxRuntime.jsx(ElmInlineIcon, {
                   src: favicon
@@ -1782,22 +1788,22 @@ const ElmBookmark = qwik.component$(({ url, image: image2, title: title2, descri
 });
 const container = "_container_xsa12_1";
 const text$1 = "_text_xsa12_30";
-const styles$d = {
+const styles$e = {
   container,
   "link-container": "_link-container_xsa12_10",
   text: text$1
 };
 const ElmBreadcrumb = qwik.component$(({ links }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("nav", {
-    class: styles$d.container,
+    class: styles$e.container,
     children: links.map((link2, index) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", {
-          class: styles$d["link-container"],
+          class: styles$e["link-container"],
           onClick$: link2.onClick$,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", {
-              class: styles$d.icon,
+              class: styles$e.icon,
               style: {
                 "--delay": `${index * 100}ms`
               },
@@ -1807,7 +1813,7 @@ const ElmBreadcrumb = qwik.component$(({ links }) => {
               })
             }),
             /* @__PURE__ */ jsxRuntime.jsx("span", {
-              class: styles$d.text,
+              class: styles$e.text,
               style: {
                 "--delay": `${index * 100 + 50}ms`
               },
@@ -1818,7 +1824,7 @@ const ElmBreadcrumb = qwik.component$(({ links }) => {
           ]
         }),
         links.length !== index + 1 && /* @__PURE__ */ jsxRuntime.jsx("span", {
-          class: styles$d.text,
+          class: styles$e.text,
           style: {
             "--delay": `${index * 100 + 100}ms`
           },
@@ -1835,7 +1841,7 @@ const ElmBreadcrumb = qwik.component$(({ links }) => {
 const wrapper = "_wrapper_nud26_1";
 const partial = "_partial_nud26_52";
 const text = "_text_nud26_85";
-const styles$c = {
+const styles$d = {
   wrapper,
   "wrapper--visible": "_wrapper--visible_nud26_20",
   partial,
@@ -1863,9 +1869,9 @@ const ElmPageTop = qwik.component$(({ position = "right" }) => {
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("nav", {
     class: [
-      styles$c.wrapper,
+      styles$d.wrapper,
       {
-        [styles$c["wrapper--visible"]]: isVisible.value
+        [styles$d["wrapper--visible"]]: isVisible.value
       }
     ],
     style: {
@@ -1877,18 +1883,18 @@ const ElmPageTop = qwik.component$(({ position = "right" }) => {
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", {
         "aria-hidden": "true",
-        class: styles$c.partial
+        class: styles$d.partial
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
         "aria-hidden": "true",
-        class: styles$c.partial
+        class: styles$d.partial
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
         "aria-hidden": "true",
-        class: styles$c.partial
+        class: styles$d.partial
       }),
       /* @__PURE__ */ jsxRuntime.jsx("span", {
-        class: styles$c.text,
+        class: styles$d.text,
         children: "Back to Top"
       })
     ]
@@ -1897,7 +1903,7 @@ const ElmPageTop = qwik.component$(({ position = "right" }) => {
 const blockquote = "_blockquote_b5jd8_1";
 const body = "_body_b5jd8_18";
 const icon = "_icon_b5jd8_23";
-const styles$b = {
+const styles$c = {
   blockquote,
   body,
   icon
@@ -1905,13 +1911,13 @@ const styles$b = {
 const ElmBlockQuote = qwik.component$(({ cite }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("blockquote", {
     class: [
-      styles$b.blockquote,
+      styles$c.blockquote,
       textStyles.text
     ],
     cite,
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$b.icon,
+        class: styles$c.icon,
         style: {
           "--inset": "0.25rem auto auto 0.5rem"
         },
@@ -1920,11 +1926,11 @@ const ElmBlockQuote = qwik.component$(({ cite }) => {
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$b.body,
+        class: styles$c.body,
         children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$b.icon,
+        class: styles$c.icon,
         style: {
           "--inset": "auto 0.25rem 0.25rem auto"
         },
@@ -1938,7 +1944,7 @@ const ElmBlockQuote = qwik.component$(({ cite }) => {
 const callout = "_callout_1d8l2_1";
 const header = "_header_1d8l2_25";
 const content = "_content_1d8l2_31";
-const styles$a = {
+const styles$b = {
   callout,
   header,
   content
@@ -1967,13 +1973,13 @@ const COLOR_MAP = Object.freeze({
 });
 const ElmCallout = qwik.component$(({ type = "note" }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("aside", {
-    class: styles$a.callout,
+    class: styles$b.callout,
     style: {
       "--callout-color": COLOR_MAP[type].code
     },
     children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        class: styles$a.header,
+        class: styles$b.header,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
             d: COLOR_MAP[type].icon,
@@ -1986,26 +1992,26 @@ const ElmCallout = qwik.component$(({ type = "note" }) => {
         ]
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$a.content,
+        class: styles$b.content,
         children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
       })
     ]
   });
 });
 const hr = "_hr_1g58p_1";
-const styles$9 = {
+const styles$a = {
   hr
 };
 const ElmDivider = qwik.component$(({ margin }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("hr", {
-    class: styles$9.hr,
+    class: styles$a.hr,
     style: {
       marginBlock: margin
     }
   });
 });
 const fragment = "_fragment_1kofp_1";
-const styles$8 = {
+const styles$9 = {
   fragment
 };
 const ElmFragmentIdentifier = qwik.component$(({ id }) => {
@@ -2021,7 +2027,7 @@ const ElmFragmentIdentifier = qwik.component$(({ id }) => {
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx("span", {
-    class: styles$8.fragment,
+    class: styles$9.fragment,
     onClick$: () => handleHashClick(id),
     children: "#"
   });
@@ -2033,7 +2039,7 @@ const h3 = "_h3_16jof_85";
 const h4 = "_h4_16jof_102";
 const h5 = "_h5_16jof_106";
 const h6 = "_h6_16jof_110";
-const styles$7 = {
+const styles$8 = {
   "heading-common": "_heading-common_16jof_1",
   h1,
   h2,
@@ -2055,9 +2061,9 @@ const ElmHeading = qwik.component$(({ level, text: text2, id }) => {
   const Tag = `h${level}`;
   return /* @__PURE__ */ jsxRuntime.jsxs(Tag, {
     class: [
-      styles$7["heading-common"],
+      styles$8["heading-common"],
       textStyles.text,
-      styles$7[`h${level}`]
+      styles$8[`h${level}`]
     ],
     style: {
       "--font-size": `${SIZE_MAP[level]}em`
@@ -2076,13 +2082,13 @@ const ElmHeading = qwik.component$(({ level, text: text2, id }) => {
         })
       }),
       level === 2 && /* @__PURE__ */ jsxRuntime.jsx("span", {
-        class: styles$7["h2__underline"],
+        class: styles$8["h2__underline"],
         "aria-hidden": "true"
       })
     ]
   });
 });
-const styles$6 = {
+const styles$7 = {
   "elmethis-list-common": "_elmethis-list-common_14epx_1",
   "elmethis-bulleted-list": "_elmethis-bulleted-list_14epx_9",
   "elmethis-numbered-list": "_elmethis-numbered-list_14epx_24"
@@ -2092,8 +2098,8 @@ const ElmList = qwik.component$(({ listStyle = "unordered" }) => {
     return /* @__PURE__ */ jsxRuntime.jsx("ol", {
       class: [
         textStyles.text,
-        styles$6["elmethis-list-common"],
-        styles$6["elmethis-numbered-list"]
+        styles$7["elmethis-list-common"],
+        styles$7["elmethis-numbered-list"]
       ],
       children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
     });
@@ -2101,15 +2107,15 @@ const ElmList = qwik.component$(({ listStyle = "unordered" }) => {
     return /* @__PURE__ */ jsxRuntime.jsx("ul", {
       class: [
         textStyles.text,
-        styles$6["elmethis-list-common"],
-        styles$6["elmethis-bulleted-list"]
+        styles$7["elmethis-list-common"],
+        styles$7["elmethis-bulleted-list"]
       ],
       children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
     });
   }
 });
 const paragraph = "_paragraph_jz10s_1";
-const styles$5 = {
+const styles$6 = {
   paragraph
 };
 const useInView = (props) => {
@@ -2136,7 +2142,7 @@ const ElmParagraph = qwik.component$(({ color, backgroundColor }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("p", {
     ref,
     class: [
-      styles$5.paragraph,
+      styles$6.paragraph,
       textStyles.text
     ],
     style: {
@@ -2150,7 +2156,7 @@ const ElmParagraph = qwik.component$(({ color, backgroundColor }) => {
 const table = "_table_x2nyq_1";
 const caption = "_caption_x2nyq_8";
 const spacing = "_spacing_x2nyq_25";
-const styles$4 = {
+const styles$5 = {
   table,
   caption,
   "caption-inner": "_caption-inner_x2nyq_18",
@@ -2163,7 +2169,7 @@ const ElmTable = qwik.component$((props) => {
   qwik.useContextProvider(HasRowHeaderContext, hasRowHeaderComputed);
   return /* @__PURE__ */ jsxRuntime.jsxs("table", {
     class: [
-      styles$4.table,
+      styles$5.table,
       textStyles.text
     ],
     style: {
@@ -2172,13 +2178,13 @@ const ElmTable = qwik.component$((props) => {
     children: [
       caption2 && /* @__PURE__ */ jsxRuntime.jsx("caption", {
         children: /* @__PURE__ */ jsxRuntime.jsxs("span", {
-          class: styles$4.caption,
+          class: styles$5.caption,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", {
-              class: styles$4.spacing
+              class: styles$5.spacing
             }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", {
-              class: styles$4["caption-inner"],
+              class: styles$5["caption-inner"],
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("svg", {
                   viewBox: "0 0 24 24",
@@ -2195,7 +2201,7 @@ const ElmTable = qwik.component$((props) => {
               ]
             }),
             /* @__PURE__ */ jsxRuntime.jsx("span", {
-              class: styles$4.spacing
+              class: styles$5.spacing
             })
           ]
         })
@@ -2205,14 +2211,14 @@ const ElmTable = qwik.component$((props) => {
   });
 });
 const thead = "_thead_1brzu_1";
-const styles$3 = {
+const styles$4 = {
   thead
 };
 const HasHeaderContext = qwik.createContextId("HasHeaderContext");
 const ElmTableHeader = qwik.component$(() => {
   qwik.useContextProvider(HasHeaderContext, true);
   return /* @__PURE__ */ jsxRuntime.jsx("thead", {
-    class: styles$3.thead,
+    class: styles$4.thead,
     children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
   });
 });
@@ -2223,7 +2229,7 @@ const ElmTableBody = qwik.component$(() => {
   });
 });
 const tr = "_tr_2ogbz_1";
-const styles$2 = {
+const styles$3 = {
   tr,
   "has-row-header": "_has-row-header_2ogbz_20"
 };
@@ -2231,8 +2237,8 @@ const ElmTableRow = qwik.component$(() => {
   const hasRowHeader = qwik.useContext(HasRowHeaderContext);
   return /* @__PURE__ */ jsxRuntime.jsx("tr", {
     class: [
-      styles$2.tr,
-      hasRowHeader.value && styles$2["has-row-header"]
+      styles$3.tr,
+      hasRowHeader.value && styles$3["has-row-header"]
     ],
     children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
   });
@@ -2240,7 +2246,7 @@ const ElmTableRow = qwik.component$(() => {
 const common = "_common_1puhv_1";
 const td = "_td_1puhv_24";
 const th = "_th_1puhv_31";
-const styles$1 = {
+const styles$2 = {
   common,
   td,
   th
@@ -2252,21 +2258,21 @@ const ElmTableCell = qwik.component$((props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: isHeader ? /* @__PURE__ */ jsxRuntime.jsx("th", {
       class: [
-        styles$1.common,
-        styles$1.th
+        styles$2.common,
+        styles$2.th
       ],
       children: text2 ? text2 : /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
     }) : /* @__PURE__ */ jsxRuntime.jsx("td", {
       class: [
-        styles$1.common,
-        styles$1.td
+        styles$2.common,
+        styles$2.td
       ],
       children: text2 ? text2 : /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
     })
   });
 });
 const column = "_column_1l2bp_7";
-const styles = {
+const styles$1 = {
   "jarkup-body": "_jarkup-body_1l2bp_1",
   "column-list": "_column-list_1l2bp_7",
   column
@@ -2407,12 +2413,12 @@ const ElmJarkup = qwik.component$((props) => {
           }, key);
         case "ColumnList":
           return /* @__PURE__ */ jsxRuntime.jsx("div", {
-            class: styles["column-list"],
+            class: styles$1["column-list"],
             children: render(component.slots.default)
           }, key);
         case "Column":
           return /* @__PURE__ */ jsxRuntime.jsx("div", {
-            class: styles.column,
+            class: styles$1.column,
             style: {
               "--width-ratio": component.props?.widthRatio || 1,
               width: component.props?.widthRatio ? `${component.props.widthRatio * 100}%` : void 0
@@ -2434,10 +2440,175 @@ const ElmJarkup = qwik.component$((props) => {
     });
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    class: styles["jarkup-body"],
+    class: styles$1["jarkup-body"],
     children: render(props.jsonComponents)
   });
 });
+const styles = {
+  "markdown-body": "_markdown-body_11s6o_1"
+};
+const renderByToken = (tokens) => {
+  const results = [];
+  for (const token of tokens) {
+    switch (token.type) {
+      case "blockquote":
+        if (token.tokens && token.tokens.length !== 0) {
+          results.push(/* @__PURE__ */ jsxRuntime.jsx(ElmBlockQuote, {
+            children: renderByToken(token.tokens)
+          }));
+        }
+        break;
+      case "br":
+        results.push(/* @__PURE__ */ jsxRuntime.jsx("br", {}));
+        break;
+      case "code":
+        results.push(/* @__PURE__ */ jsxRuntime.jsx(ElmCodeBlock, {
+          code: token.text.trim(),
+          language: token.lang
+        }));
+        break;
+      case "codespan":
+        results.push(/* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
+          text: token.text,
+          code: true
+        }));
+        break;
+      case "def":
+        break;
+      case "del":
+        results.push(token.tokens && token.tokens.length !== 0 ? /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
+          strikethrough: true,
+          children: renderByToken(token.tokens)
+        }) : /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
+          text: token.text,
+          strikethrough: true
+        }));
+        break;
+      case "em":
+        results.push(token.tokens && token.tokens.length !== 0 ? /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
+          italic: true,
+          children: renderByToken(token.tokens)
+        }) : /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
+          text: token.text,
+          italic: true
+        }));
+        break;
+      case "escape":
+        break;
+      case "heading": {
+        const level = token.depth;
+        if (token.tokens && token.tokens.length !== 0) {
+          results.push(/* @__PURE__ */ jsxRuntime.jsx(ElmHeading, {
+            level,
+            children: renderByToken(token.tokens)
+          }));
+        } else {
+          results.push(/* @__PURE__ */ jsxRuntime.jsx(ElmHeading, {
+            level,
+            text: token.text
+          }));
+        }
+        break;
+      }
+      case "hr":
+        results.push(/* @__PURE__ */ jsxRuntime.jsx(ElmDivider, {}));
+        break;
+      case "html":
+        break;
+      case "image":
+        results.push(/* @__PURE__ */ jsxRuntime.jsx(ElmBlockImage, {
+          enableModal: true,
+          src: token.href,
+          alt: token.text
+        }));
+        break;
+      case "link":
+        results.push(token.tokens && token.tokens.length !== 0 ? /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
+          href: token.href,
+          children: renderByToken(token.tokens)
+        }) : /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
+          text: token.text,
+          href: token.href
+        }));
+        break;
+      case "list": {
+        const listItems = token.items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("li", {
+          children: renderByToken(item.tokens)
+        }, index));
+        results.push(/* @__PURE__ */ jsxRuntime.jsx(ElmList, {
+          listStyle: token.ordered ? "ordered" : "unordered",
+          children: listItems
+        }));
+        break;
+      }
+      case "list_item":
+        results.push(/* @__PURE__ */ jsxRuntime.jsx("li", {
+          children: token.tokens && token.tokens.length !== 0 ? renderByToken(token.tokens) : token.text
+        }));
+        break;
+      case "paragraph":
+        if (token.tokens && token.tokens.length !== 0) {
+          results.push(/* @__PURE__ */ jsxRuntime.jsx(ElmParagraph, {
+            children: renderByToken(token.tokens)
+          }));
+        }
+        break;
+      case "space":
+        break;
+      case "strong":
+        results.push(token.tokens && token.tokens.length !== 0 ? /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
+          bold: true,
+          children: renderByToken(token.tokens)
+        }) : /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
+          text: token.text,
+          bold: true
+        }));
+        break;
+      case "table": {
+        const renderTableCells = (cells) => cells.map((cell, index) => /* @__PURE__ */ jsxRuntime.jsx(ElmTableCell, {
+          children: renderByToken(cell.tokens)
+        }, index));
+        const headerRow = /* @__PURE__ */ jsxRuntime.jsx(ElmTableRow, {
+          children: renderTableCells(token.header)
+        });
+        const bodyRows = token.rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(ElmTableRow, {
+          children: renderTableCells(row)
+        }, index));
+        results.push(/* @__PURE__ */ jsxRuntime.jsxs(ElmTable, {
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ElmTableHeader, {
+              "q:slot": "header",
+              children: headerRow
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(ElmTableBody, {
+              "q:slot": "body",
+              children: bodyRows
+            })
+          ]
+        }));
+        break;
+      }
+      case "text":
+        results.push(token.tokens && token.tokens.length !== 0 ? /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
+          children: renderByToken(token.tokens)
+        }) : /* @__PURE__ */ jsxRuntime.jsx(qwik.Fragment, {
+          children: token.text
+        }));
+        break;
+    }
+  }
+  return results;
+};
+const ElmMarkdown = qwik.component$(({ markdown }) => {
+  const tokens = marked.marked.setOptions({
+    gfm: true
+  }).lexer(markdown);
+  const elements = renderByToken(tokens);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    class: styles["markdown-body"],
+    children: elements
+  });
+});
 exports.ElmBlockFallback = ElmBlockFallback;
 exports.ElmBlockImage = ElmBlockImage;
 exports.ElmBlockQuote = ElmBlockQuote;
@@ -2456,6 +2627,7 @@ exports.ElmJarkup = ElmJarkup;
 exports.ElmKatex = ElmKatex;
 exports.ElmLanguageIcon = ElmLanguageIcon;
 exports.ElmList = ElmList;
+exports.ElmMarkdown = ElmMarkdown;
 exports.ElmMdiIcon = ElmMdiIcon;
 exports.ElmPageTop = ElmPageTop;
 exports.ElmParagraph = ElmParagraph;