@elmethis/qwik 0.0.1

package/lib/elmethis.js

@@ -0,0 +1,56 @@
+import { ElmCodeBlock } from "./elmethis2.js";
+import { ElmKatex } from "./elmethis3.js";
+import { ElmShikiHighlighter } from "./elmethis4.js";
+import { ElmToggle } from "./elmethis5.js";
+import { ElmBlockFallback } from "./elmethis6.js";
+import { ElmRectangleWave } from "./elmethis7.js";
+import { ElmDotLoadingIcon } from "./elmethis8.js";
+import { ElmInlineIcon } from "./elmethis9.js";
+import { ElmLanguageIcon } from "./elmethis10.js";
+import { ElmMdiIcon } from "./elmethis11.js";
+import { ElmBlockImage } from "./elmethis12.js";
+import { ElmFile } from "./elmethis13.js";
+import { ElmBookmark } from "./elmethis14.js";
+import { ElmBlockQuote } from "./elmethis15.js";
+import { ElmCallout } from "./elmethis16.js";
+import { ElmDivider } from "./elmethis17.js";
+import { ElmFragmentIdentifier } from "./elmethis18.js";
+import { ElmHeading } from "./elmethis19.js";
+import { ElmInlineText } from "./elmethis20.js";
+import { ElmList } from "./elmethis21.js";
+import { ElmParagraph } from "./elmethis22.js";
+import { ElmTable } from "./elmethis23.js";
+import { ElmTableHeader } from "./elmethis24.js";
+import { ElmTableBody } from "./elmethis25.js";
+import { ElmTableRow } from "./elmethis26.js";
+import { ElmTableCell } from "./elmethis27.js";
+import { ElmJarkup } from "./elmethis28.js";
+export {
+  ElmBlockFallback,
+  ElmBlockImage,
+  ElmBlockQuote,
+  ElmBookmark,
+  ElmCallout,
+  ElmCodeBlock,
+  ElmDivider,
+  ElmDotLoadingIcon,
+  ElmFile,
+  ElmFragmentIdentifier,
+  ElmHeading,
+  ElmInlineIcon,
+  ElmInlineText,
+  ElmJarkup,
+  ElmKatex,
+  ElmLanguageIcon,
+  ElmList,
+  ElmMdiIcon,
+  ElmParagraph,
+  ElmRectangleWave,
+  ElmShikiHighlighter,
+  ElmTable,
+  ElmTableBody,
+  ElmTableCell,
+  ElmTableHeader,
+  ElmTableRow,
+  ElmToggle
+};

package/lib/elmethis10.js

@@ -0,0 +1,108 @@
+import { jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$ } from "@builder.io/qwik";
+import { Rust } from "./elmethis38.js";
+import { Javascript } from "./elmethis39.js";
+import { Typescript } from "./elmethis40.js";
+import { Bash } from "./elmethis41.js";
+import { Terraform } from "./elmethis42.js";
+import { Html } from "./elmethis43.js";
+import { Css } from "./elmethis44.js";
+import { Npm } from "./elmethis45.js";
+import { Java } from "./elmethis46.js";
+import { Kotlin } from "./elmethis47.js";
+import { Go } from "./elmethis48.js";
+import { Python } from "./elmethis49.js";
+import { Sql } from "./elmethis50.js";
+import { Json } from "./elmethis51.js";
+import { Lua } from "./elmethis52.js";
+import { Csharp } from "./elmethis53.js";
+import { Cplusplus } from "./elmethis54.js";
+import { C } from "./elmethis55.js";
+const normalizeLanguage = (language) => {
+  switch (language) {
+    case "rust":
+    case "rs":
+      return "rust";
+    case "javascript":
+    case "js":
+      return "javascript";
+    case "typescript":
+    case "ts":
+      return "typescript";
+    case "bash":
+    case "sh":
+    case "shell":
+      return "shell";
+    case "tf":
+    case "terraform":
+    case "hcl":
+      return "terraform";
+    case "html":
+    case "html5":
+      return "html";
+    case "css":
+    case "css3":
+      return "css";
+    case "npm":
+      return "npm";
+    case "java":
+      return "java";
+    case "kotlin":
+    case "kt":
+      return "kotlin";
+    case "go":
+    case "golang":
+      return "go";
+    case "python":
+    case "py":
+      return "python";
+    case "sql":
+      return "sql";
+    case "json":
+      return "json";
+    case "lua":
+      return "lua";
+    case "cs":
+    case "c#":
+    case "csharp":
+      return "csharp";
+    case "cpp":
+    case "c++":
+      return "cpp";
+    case "c":
+    case "clang":
+      return "c";
+    default:
+      return "file";
+  }
+};
+const renderMap = {
+  rust: Rust,
+  javascript: Javascript,
+  typescript: Typescript,
+  shell: Bash,
+  terraform: Terraform,
+  html: Html,
+  css: Css,
+  npm: Npm,
+  java: Java,
+  kotlin: Kotlin,
+  go: Go,
+  python: Python,
+  sql: Sql,
+  json: Json,
+  lua: Lua,
+  csharp: Csharp,
+  cpp: Cplusplus,
+  c: C,
+  file: () => null
+};
+const ElmLanguageIcon = component$(({ size = 24, language }) => {
+  const Component2 = renderMap[normalizeLanguage(language)];
+  return /* @__PURE__ */ jsx(Component2, {
+    size
+  });
+});
+export {
+  ElmLanguageIcon
+};

package/lib/elmethis11.js

@@ -0,0 +1,25 @@
+import { jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$ } from "@builder.io/qwik";
+import styles from "./elmethis56.js";
+const ElmMdiIcon = component$(({ d, size = "1em", color, lightColor, darkColor }) => {
+  return /* @__PURE__ */ jsx("svg", {
+    class: styles.icon,
+    style: {
+      "--color": lightColor ?? color,
+      "--dark-color": darkColor ?? color
+    },
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg",
+    focusable: "false",
+    role: "img",
+    children: /* @__PURE__ */ jsx("path", {
+      d
+    })
+  });
+});
+export {
+  ElmMdiIcon
+};

package/lib/elmethis12.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
+import { component$, useSignal, $ } from "@builder.io/qwik";
+import styles from "./elmethis57.js";
+import { ElmInlineText } from "./elmethis20.js";
+import { ElmMdiIcon } from "./elmethis11.js";
+import { ElmRectangleWave } from "./elmethis7.js";
+import { mdiMessageImageOutline } from "@mdi/js";
+const ElmBlockImage = component$(({ src, alt, caption, width, height, enableModal = true }) => {
+  const isLoading = useSignal(true);
+  const isShowModal = useSignal(false);
+  const handleImageLoad = $(() => {
+    isLoading.value = false;
+  });
+  const handleToggleModal = $(() => {
+    if (enableModal) {
+      isShowModal.value = !isShowModal.value;
+    }
+  });
+  const ImageComponent = /* @__PURE__ */ jsx("img", {
+    class: [
+      styles.image
+    ],
+    src,
+    alt: alt ?? caption ?? "Image",
+    width,
+    height,
+    onLoad$: handleImageLoad,
+    style: {
+      "--opacity": isLoading.value ? 0 : 1,
+      "--cursor": enableModal ? isShowModal.value ? "zoom-out" : "zoom-in" : "default"
+    }
+  });
+  const Modal = /* @__PURE__ */ jsx("div", {
+    class: styles["modal-container"],
+    style: {
+      pointerEvents: isShowModal.value ? "auto" : "none",
+      "--opacity": isShowModal.value ? 1 : 0
+    },
+    onClick$: handleToggleModal,
+    children: ImageComponent
+  });
+  return /* @__PURE__ */ jsxs("figure", {
+    class: styles["block-image"],
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        class: styles["image-container"],
+        style: {
+          "--opacity": isLoading.value ? 1 : 0
+        },
+        onClick$: handleToggleModal,
+        children: [
+          ImageComponent,
+          /* @__PURE__ */ jsx("div", {
+            class: styles["fallback"],
+            children: /* @__PURE__ */ jsx(ElmRectangleWave, {})
+          })
+        ]
+      }),
+      caption && /* @__PURE__ */ jsxs("figcaption", {
+        class: styles["caption-box"],
+        style: {
+          "--opacity": isLoading.value ? 0 : 1
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            style: {
+              flex: "1"
+            },
+            children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+              d: mdiMessageImageOutline,
+              color: "#cdb57b",
+              size: "1.25rem"
+            })
+          }),
+          /* @__PURE__ */ jsx(ElmInlineText, {
+            size: "1rem",
+            children: caption
+          })
+        ]
+      }),
+      Modal
+    ]
+  });
+});
+export {
+  ElmBlockImage
+};

package/lib/elmethis13.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$, $ } from "@builder.io/qwik";
+import styles from "./elmethis58.js";
+import { ElmMdiIcon } from "./elmethis11.js";
+import { mdiFile, mdiDownload } from "@mdi/js";
+import { ElmInlineText } from "./elmethis20.js";
+function getLastPathSegmentWithoutQueryOrHash(urlString) {
+  const cleanedUrl = urlString.split(/[?#]/)[0];
+  const pathSegments = cleanedUrl.split("/").filter(Boolean);
+  return pathSegments.length > 0 ? pathSegments[pathSegments.length - 1] : null;
+}
+const ElmFile = component$(({ name, src, filesize }) => {
+  const downloadFile = $(async () => {
+    let link;
+    try {
+      const response = await fetch(src);
+      if (!response.ok) throw new Error("Failed to download file");
+      const blob = await response.blob();
+      link = document.createElement("a");
+      link.href = URL.createObjectURL(blob);
+      link.download = name ?? getLastPathSegmentWithoutQueryOrHash(src) ?? "file";
+      link.click();
+    } catch (error) {
+      console.error("ERROR:", error);
+    } finally {
+      if (link) URL.revokeObjectURL(link.href);
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    class: styles.file,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+          d: mdiFile,
+          size: "1.25rem"
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        children: /* @__PURE__ */ jsx(ElmInlineText, {
+          children: name ?? getLastPathSegmentWithoutQueryOrHash(src)
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: styles["file-size"],
+        children: /* @__PURE__ */ jsx(ElmInlineText, {
+          children: filesize
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: styles["download-icon"],
+        onClick$: downloadFile,
+        children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+          d: mdiDownload,
+          size: "1.25rem"
+        })
+      })
+    ]
+  });
+});
+export {
+  ElmFile
+};

package/lib/elmethis14.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
+import { component$ } from "@builder.io/qwik";
+import styles from "./elmethis59.js";
+import { ElmInlineText } from "./elmethis20.js";
+import { mdiLinkVariant } from "@mdi/js";
+import { ElmMdiIcon } from "./elmethis11.js";
+import { ElmInlineIcon } from "./elmethis9.js";
+const ElmBookmark = component$(({ url, image, title, description, favicon }) => {
+  return /* @__PURE__ */ jsx("div", {
+    class: styles.bookmark,
+    children: /* @__PURE__ */ jsxs("a", {
+      class: styles.container,
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: [
+        /* @__PURE__ */ jsx("img", {
+          class: styles.image,
+          src: image,
+          alt: "OGP Image"
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          class: styles.content,
+          children: [
+            /* @__PURE__ */ jsx("div", {
+              class: styles.title,
+              children: /* @__PURE__ */ jsx(ElmInlineText, {
+                bold: true,
+                children: title
+              })
+            }),
+            /* @__PURE__ */ jsx("div", {
+              class: styles.description,
+              children: /* @__PURE__ */ jsx(ElmInlineText, {
+                size: "0.75rem",
+                children: description
+              })
+            }),
+            /* @__PURE__ */ jsxs("div", {
+              class: styles.link,
+              children: [
+                favicon ? /* @__PURE__ */ jsx(ElmInlineIcon, {
+                  src: favicon
+                }) : /* @__PURE__ */ jsx(ElmMdiIcon, {
+                  d: mdiLinkVariant,
+                  color: "#6987b8"
+                }),
+                /* @__PURE__ */ jsx(ElmInlineText, {
+                  size: "0.75rem",
+                  children: url
+                })
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
+});
+export {
+  ElmBookmark
+};

package/lib/elmethis15.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$, Slot } from "@builder.io/qwik";
+import styles from "./elmethis60.js";
+import textStyles from "./elmethis30.js";
+import { ElmMdiIcon } from "./elmethis11.js";
+import { mdiFormatQuoteOpen, mdiFormatQuoteClose } from "@mdi/js";
+const ElmBlockQuote = component$(({ cite }) => {
+  return /* @__PURE__ */ jsxs("blockquote", {
+    class: [
+      styles.blockquote,
+      textStyles.text
+    ],
+    cite,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        class: styles.icon,
+        style: {
+          "--inset": "0.25rem auto auto 0.5rem"
+        },
+        children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+          d: mdiFormatQuoteOpen
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: [
+          styles.body
+        ],
+        children: /* @__PURE__ */ jsx(Slot, {})
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: styles.icon,
+        style: {
+          "--inset": "auto 0.25rem 0.25rem auto"
+        },
+        children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+          d: mdiFormatQuoteClose
+        })
+      })
+    ]
+  });
+});
+export {
+  ElmBlockQuote
+};

package/lib/elmethis16.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$, Slot } from "@builder.io/qwik";
+import styles from "./elmethis61.js";
+import { mdiAlertOctagram, mdiAlert, mdiShieldAlert, mdiLightbulbOn, mdiInformation } from "@mdi/js";
+import { ElmMdiIcon } from "./elmethis11.js";
+import { ElmInlineText } from "./elmethis20.js";
+const COLOR_MAP = Object.freeze({
+  note: {
+    code: "#6987b8",
+    icon: mdiInformation
+  },
+  tip: {
+    code: "#59b57c",
+    icon: mdiLightbulbOn
+  },
+  important: {
+    code: "#9771bd",
+    icon: mdiShieldAlert
+  },
+  warning: {
+    code: "#b8a36e",
+    icon: mdiAlert
+  },
+  caution: {
+    code: "#b36472",
+    icon: mdiAlertOctagram
+  }
+});
+const ElmCallout = component$(({ type = "note" }) => {
+  return /* @__PURE__ */ jsxs("aside", {
+    class: styles.callout,
+    style: {
+      "--callout-color": COLOR_MAP[type].code
+    },
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        class: styles.header,
+        children: [
+          /* @__PURE__ */ jsx(ElmMdiIcon, {
+            d: COLOR_MAP[type].icon,
+            color: COLOR_MAP[type].code,
+            size: "1.25rem"
+          }),
+          /* @__PURE__ */ jsx(ElmInlineText, {
+            children: type.toLocaleUpperCase()
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: styles.content,
+        children: /* @__PURE__ */ jsx(Slot, {})
+      })
+    ]
+  });
+});
+export {
+  ElmCallout
+};

package/lib/elmethis17.js

@@ -0,0 +1,14 @@
+import { jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$ } from "@builder.io/qwik";
+import styles from "./elmethis62.js";
+const ElmDivider = component$(({ margin }) => {
+  return /* @__PURE__ */ jsx("hr", {
+    class: styles.hr,
+    style: {
+      marginBlock: margin
+    }
+  });
+});
+export {
+  ElmDivider
+};

package/lib/elmethis18.js

@@ -0,0 +1,24 @@
+import { jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$, $ } from "@builder.io/qwik";
+import styles from "./elmethis63.js";
+const ElmFragmentIdentifier = component$(({ id }) => {
+  const handleHashClick = $((id2) => {
+    const url = new URL(window.location.href);
+    url.hash = id2;
+    window.history.replaceState(null, "", url.toString());
+    const target = document.getElementById(id2);
+    if (target != null) {
+      target.scrollIntoView({
+        behavior: "smooth"
+      });
+    }
+  });
+  return /* @__PURE__ */ jsx("span", {
+    class: styles.fragment,
+    onClick$: () => handleHashClick(id),
+    children: "#"
+  });
+});
+export {
+  ElmFragmentIdentifier
+};

package/lib/elmethis19.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$, Slot } from "@builder.io/qwik";
+import styles from "./elmethis64.js";
+import textStyles from "./elmethis30.js";
+import { ElmFragmentIdentifier } from "./elmethis18.js";
+const SIZE_MAP = Object.freeze({
+  1: 1.5,
+  2: 1.4,
+  3: 1.3,
+  4: 1.2,
+  5: 1.15,
+  6: 1.1
+});
+const ElmHeading = component$(({ level, text, id }) => {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsxs(Tag, {
+    class: [
+      styles["heading-common"],
+      textStyles.text,
+      styles[`h${level}`]
+    ],
+    style: {
+      "--font-size": `${SIZE_MAP[level]}em`
+    },
+    children: [
+      text,
+      /* @__PURE__ */ jsx(Slot, {}),
+      id && /* @__PURE__ */ jsx("span", {
+        style: {
+          padding: "0.5rem"
+        },
+        children: /* @__PURE__ */ jsx(ElmFragmentIdentifier, {
+          id
+        })
+      })
+    ]
+  });
+});
+export {
+  ElmHeading
+};

package/lib/elmethis2.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$, useSignal, $, Slot } from "@builder.io/qwik";
+import styles from "./elmethis29.js";
+import { ElmLanguageIcon } from "./elmethis10.js";
+import { ElmInlineText } from "./elmethis20.js";
+import { ElmShikiHighlighter } from "./elmethis4.js";
+import { mdiClipboardCheckMultipleOutline, mdiClipboardMultipleOutline } from "@mdi/js";
+import { ElmMdiIcon } from "./elmethis11.js";
+const ElmCodeBlock = component$(({ code, language = "txt", caption, margin }) => {
+  const timerId = useSignal(null);
+  const copyToClipboard = $(async () => {
+    if (timerId.value !== null) {
+      window.clearTimeout(timerId.value);
+      timerId.value = null;
+    }
+    try {
+      await navigator.clipboard.writeText(code);
+      timerId.value = window.setTimeout(() => timerId.value = null, 1500);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  });
+  return /* @__PURE__ */ jsxs("figure", {
+    class: styles["code-block"],
+    style: {
+      margin
+    },
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        class: styles["language-icon"],
+        children: /* @__PURE__ */ jsx(ElmLanguageIcon, {
+          language
+        })
+      }),
+      /* @__PURE__ */ jsx("span", {
+        class: styles["caption"],
+        children: /* @__PURE__ */ jsxs(ElmInlineText, {
+          children: [
+            caption || language,
+            /* @__PURE__ */ jsx(Slot, {})
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: styles["copy-icon"],
+        onClick$: copyToClipboard,
+        children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+          size: "1.25rem",
+          d: timerId.value !== null ? mdiClipboardCheckMultipleOutline : mdiClipboardMultipleOutline,
+          color: timerId.value !== null ? "#59b57c" : void 0
+        })
+      }),
+      /* @__PURE__ */ jsx("hr", {
+        class: styles["divider"]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: styles["code"],
+        children: /* @__PURE__ */ jsx(ElmShikiHighlighter, {
+          code,
+          language
+        })
+      })
+    ]
+  });
+});
+export {
+  ElmCodeBlock
+};