@btst/stack 1.0.1 → 1.1.1

package/dist/plugins/blog/client/components/shared/markdown-content-styles.css

@@ -0,0 +1,328 @@
+.milkdown-custom .milkdown .milkdown-content {
+	font-family: var(--crepe-font-default);
+	color: var(--crepe-color-on-background);
+	background: var(--crepe-color-background);
+	padding: 0px;
+}
+
+.milkdown-custom .milkdown .milkdown-content img {
+	vertical-align: bottom;
+	max-width: 100%;
+}
+
+.milkdown-custom .milkdown .milkdown-content .markdown-image-wrapper {
+	display: block;
+	position: relative;
+	width: 100%;
+	aspect-ratio: 16 / 9;
+	min-height: 200px;
+}
+
+.milkdown-custom .milkdown .milkdown-content .markdown-image-wrapper > div {
+	width: 100%;
+	height: 100%;
+}
+
+.milkdown-custom .milkdown .milkdown-content .markdown-image-wrapper img {
+	object-fit: contain;
+}
+
+.milkdown-custom .milkdown .milkdown-content h1,
+.milkdown-custom .milkdown .milkdown-content h2,
+.milkdown-custom .milkdown .milkdown-content h3,
+.milkdown-custom .milkdown .milkdown-content h4,
+.milkdown-custom .milkdown .milkdown-content h5,
+.milkdown-custom .milkdown .milkdown-content h6 {
+	font-family: var(--crepe-font-title);
+	font-weight: 400;
+	padding: 2px 0;
+	scroll-margin-top: 56px;
+}
+
+.milkdown-custom .milkdown .milkdown-content h1 .heading-anchor,
+.milkdown-custom .milkdown .milkdown-content h2 .heading-anchor,
+.milkdown-custom .milkdown .milkdown-content h3 .heading-anchor,
+.milkdown-custom .milkdown .milkdown-content h4 .heading-anchor,
+.milkdown-custom .milkdown .milkdown-content h5 .heading-anchor,
+.milkdown-custom .milkdown .milkdown-content h6 .heading-anchor {
+	opacity: 0;
+	margin-left: 8px;
+	color: var(--crepe-color-on-surface-variant);
+	text-decoration: none;
+	transition: opacity 0.15s ease-in-out;
+}
+
+.milkdown-custom .milkdown .milkdown-content h1:hover .heading-anchor,
+.milkdown-custom .milkdown .milkdown-content h2:hover .heading-anchor,
+.milkdown-custom .milkdown .milkdown-content h3:hover .heading-anchor,
+.milkdown-custom .milkdown .milkdown-content h4:hover .heading-anchor,
+.milkdown-custom .milkdown .milkdown-content h5:hover .heading-anchor,
+.milkdown-custom .milkdown .milkdown-content h6:hover .heading-anchor {
+	opacity: 1;
+}
+
+.milkdown-custom .milkdown .milkdown-content h1 {
+	font-size: 42px;
+	line-height: 50px;
+	margin-top: 32px;
+}
+
+.milkdown-custom .milkdown .milkdown-content h2 {
+	font-size: 36px;
+	line-height: 44px;
+	margin-top: 28px;
+}
+
+.milkdown-custom .milkdown .milkdown-content h3 {
+	font-size: 32px;
+	line-height: 40px;
+	margin-top: 24px;
+}
+
+.milkdown-custom .milkdown .milkdown-content h4 {
+	font-size: 28px;
+	line-height: 36px;
+	margin-top: 20px;
+}
+
+.milkdown-custom .milkdown .milkdown-content h5 {
+	font-size: 24px;
+	line-height: 32px;
+	margin-top: 16px;
+}
+
+.milkdown-custom .milkdown .milkdown-content h6 {
+	font-size: 18px;
+	font-weight: 700;
+	line-height: 28px;
+	margin-top: 16px;
+}
+
+.milkdown-custom .milkdown .milkdown-content p {
+	font-size: 16px;
+	line-height: 24px;
+	padding: 4px 0;
+}
+
+.milkdown-custom .milkdown .milkdown-content a {
+	color: var(--crepe-color-primary);
+	text-decoration: underline;
+}
+
+.milkdown-custom .milkdown .milkdown-content code {
+	color: var(--crepe-color-inline-code);
+	background: color-mix(
+		in srgb,
+		var(--crepe-color-inline-area),
+		transparent 40%
+	);
+	font-family: var(--crepe-font-code);
+	padding: 0 2px;
+	border-radius: 4px;
+	font-size: 87.5%;
+	display: inline-block;
+	line-height: 1.4286;
+}
+
+.milkdown-custom .milkdown .milkdown-content pre {
+	background: color-mix(
+		in srgb,
+		var(--crepe-color-inline-area),
+		transparent 40%
+	);
+	padding: 10px;
+	border-radius: 4px;
+	overflow-x: auto;
+}
+
+.milkdown-custom .milkdown .milkdown-content pre code {
+	padding: 0;
+	background: transparent;
+}
+
+/* Ensure highlight.js themes color tokens inside our containers */
+.milkdown-custom .milkdown .milkdown-content pre code.hljs,
+.milkdown-custom .milkdown .milkdown-content code.hljs {
+	display: block;
+	overflow-x: auto;
+}
+
+.milkdown-custom .milkdown .milkdown-code-block {
+	display: block;
+	position: relative;
+	padding: 40px 8px 20px 20px;
+	margin: 4px 0;
+}
+
+.milkdown-custom .milkdown .milkdown-code-block pre {
+	background: transparent;
+	padding: 0;
+	border-radius: 0;
+}
+
+/* Layout wrapper to host gutter and code content side-by-side */
+.milkdown-custom .milkdown .milkdown-code-block .code-content {
+	display: grid;
+	grid-template-columns: var(--code-gutter-width, 3ch) 1fr;
+	gap: 0.35rem;
+	align-items: stretch;
+}
+
+/* Gutter line numbers */
+.milkdown-custom .milkdown .milkdown-code-block .line-numbers {
+	list-style: none;
+	margin: 0;
+	user-select: none;
+	color: var(--crepe-color-on-surface-variant);
+	text-align: end;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: center;
+	height: 100%;
+}
+
+.milkdown-custom .milkdown .milkdown-code-block .line-numbers li {
+	font-family: var(--crepe-font-code);
+	font-size: 12px;
+}
+
+.milkdown-custom .milkdown .milkdown-code-block .code-toolbar {
+	position: absolute;
+	top: 8px;
+	left: 18px;
+	right: 18px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity 0.15s ease-in-out;
+}
+
+.milkdown-custom .milkdown .milkdown-code-block:hover .code-toolbar {
+	opacity: 1;
+}
+
+/* Also reveal toolbar when focused via keyboard for accessibility */
+.milkdown-custom .milkdown .milkdown-code-block:focus-within .code-toolbar {
+	opacity: 1;
+}
+
+.milkdown-custom .milkdown .milkdown-code-block .language-label {
+	pointer-events: auto;
+	font-family: var(--crepe-font-default);
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 16px;
+	color: var(--crepe-color-on-surface-variant);
+	background: var(--crepe-color-surface-low);
+	padding: 2px 8px;
+	border-radius: 4px;
+}
+
+.milkdown-custom .milkdown .milkdown-code-block .copy-button {
+	pointer-events: auto;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--crepe-color-surface-low);
+	color: var(--crepe-color-on-surface-variant);
+	border-radius: 4px;
+	padding: 4px 8px;
+	height: 26px;
+	width: 32px;
+	cursor: pointer;
+	transition: background-color 0.2s ease-in-out;
+}
+
+.milkdown-custom .milkdown .milkdown-code-block .copy-button:hover {
+	background: var(--crepe-color-hover);
+}
+
+.milkdown-custom .milkdown .milkdown-content blockquote {
+	position: relative;
+	padding-left: 40px;
+	padding-top: 0;
+	padding-bottom: 0;
+	box-sizing: content-box;
+	margin: 4px 0;
+}
+
+.milkdown-custom .milkdown .milkdown-content blockquote::before {
+	content: "";
+	width: 4px;
+	left: 0;
+	top: 4px;
+	bottom: 4px;
+	position: absolute;
+	background: var(--crepe-color-selected);
+	border-radius: 100px;
+}
+
+.milkdown-custom .milkdown .milkdown-content hr {
+	border: none;
+	background-color: color-mix(
+		in srgb,
+		var(--crepe-color-outline),
+		transparent 80%
+	);
+	background-clip: content-box;
+	padding: 6px 0;
+	height: 13px;
+	position: relative;
+}
+
+.milkdown-custom .milkdown .milkdown-content ul:not(.contains-task-list) {
+	padding: 0;
+	list-style-type: disc;
+	margin-left: 26px;
+}
+
+.milkdown-custom
+	.milkdown
+	.milkdown-content
+	ul:not(.contains-task-list)
+	li::marker {
+	color: var(--crepe-color-outline);
+	font-size: 1.2em;
+}
+
+.milkdown-custom .milkdown .milkdown-content ol {
+	padding: 0;
+	list-style-type: decimal;
+	margin-left: 20px;
+}
+
+.milkdown-custom .milkdown .milkdown-content li.task-list-item {
+	position: relative;
+	list-style: none;
+	padding-left: 28px;
+}
+
+.milkdown-custom
+	.milkdown
+	.milkdown-content
+	li.task-list-item
+	input[type="checkbox"] {
+	width: 20px;
+	height: 20px;
+	position: absolute;
+	left: 0;
+	margin: 0;
+}
+
+.milkdown-custom .milkdown .milkdown-content table {
+	border-collapse: collapse;
+	table-layout: fixed;
+	width: 100%;
+	margin: 4px 0;
+}
+
+.milkdown-custom .milkdown .milkdown-content th,
+.milkdown-custom .milkdown .milkdown-content td {
+	border: 1px solid
+		color-mix(in srgb, var(--crepe-color-outline), transparent 80%);
+	padding: 4px 16px;
+	overflow-wrap: anywhere;
+}

package/dist/plugins/blog/client/components/shared/markdown-content.cjs

@@ -0,0 +1,324 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils = require('../../../utils.cjs');
+const React = require('react');
+const ReactMarkdown = require('react-markdown');
+const rehypeHighlight = require('rehype-highlight');
+const rehypeRaw = require('rehype-raw');
+const remarkGfm = require('remark-gfm');
+require('highlight.js/styles/panda-syntax-light.css');
+const lucideReact = require('lucide-react');
+const context = require('@btst/stack/context');
+const defaults = require('./defaults.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const ReactMarkdown__default = /*#__PURE__*/_interopDefaultCompat(ReactMarkdown);
+const rehypeHighlight__default = /*#__PURE__*/_interopDefaultCompat(rehypeHighlight);
+const rehypeRaw__default = /*#__PURE__*/_interopDefaultCompat(rehypeRaw);
+const remarkGfm__default = /*#__PURE__*/_interopDefaultCompat(remarkGfm);
+
+function containsMath(markdown) {
+  return /\$\$[\s\S]+?\$\$/.test(markdown) || // Display math
+  /(?<!\$)\$(?!\$)[^\$\n]+?\$(?!\$)/.test(markdown) || // Inline math (not $$)
+  /\\begin\{(equation|align|gather|math)\}/.test(markdown);
+}
+function getNodeText(node) {
+  if (node == null) return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(getNodeText).join("");
+  if (React.isValidElement(node)) {
+    const props = node.props;
+    return getNodeText(props.children);
+  }
+  return "";
+}
+function simpleHash(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash).toString(36).slice(0, 6);
+}
+function isCheckboxElement(node) {
+  return React.isValidElement(node) && node.type === "input" && node.props.type === "checkbox";
+}
+function createTaskListItemRenderer() {
+  return function LiRenderer(props) {
+    const { className, children, ...rest } = props;
+    const isTaskItem = (className ?? "").split(" ").includes("task-list-item");
+    if (!isTaskItem) {
+      return /* @__PURE__ */ jsxRuntime.jsx("li", { className, ...rest, children });
+    }
+    const childArray = Array.isArray(children) ? children : [children];
+    const checkboxNode = childArray.find(isCheckboxElement);
+    const nonCheckboxChildren = childArray.filter((c) => !isCheckboxElement(c));
+    const labelText = getNodeText(nonCheckboxChildren);
+    const baseId = utils.slugify(labelText || "task-item");
+    const hashSuffix = simpleHash(labelText || "task-item");
+    const uniqueId = `${baseId}-${hashSuffix}`;
+    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className, ...rest, children: [
+      checkboxNode ? React.createElement(checkboxNode.type, {
+        ...checkboxNode.props,
+        id: uniqueId,
+        "aria-label": labelText || "Task item"
+      }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: uniqueId, children: nonCheckboxChildren })
+    ] });
+  };
+}
+function createHeadingRenderer(tag) {
+  return function HeadingRenderer(props) {
+    const { children, ...rest } = props;
+    const text = getNodeText(children);
+    const id = utils.slugify(text);
+    return React.createElement(
+      tag,
+      { id, ...rest },
+      children,
+      text ? /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          className: "heading-anchor",
+          href: `#${id}`,
+          "aria-label": "Link to heading",
+          children: "#"
+        }
+      ) : null
+    );
+  };
+}
+function AnchorRenderer(props) {
+  const { Link } = context.usePluginOverrides("blog", {
+    Link: defaults.DefaultLink
+  });
+  const { href = "", children, className: anchorClassName, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(Link, { href, className: anchorClassName, ...rest, children });
+}
+function ImgRenderer(props) {
+  const { Image } = context.usePluginOverrides("blog", {
+    Image: defaults.DefaultImage
+  });
+  const {
+    src = "",
+    alt = "",
+    className: imgClassName,
+    width,
+    height,
+    style,
+    ...rest
+  } = props;
+  const imageProps = {
+    src,
+    alt,
+    className: imgClassName,
+    style,
+    ...rest
+  };
+  if (width != null && height != null) {
+    imageProps.width = width;
+    imageProps.height = height;
+  } else {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "markdown-image-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(Image, { ...imageProps }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Image, { ...imageProps });
+}
+function CodeRenderer({ inline, className, children, ...rest }) {
+  const hasLanguage = /language-([a-z0-9-]+)/i.test(className ?? "");
+  const isInline = inline ?? !hasLanguage;
+  if (isInline) {
+    return /* @__PURE__ */ jsxRuntime.jsx("code", { className, ...rest, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("code", { className, ...rest, children });
+}
+function PreRenderer(props) {
+  const { children, ...rest } = props;
+  const child = Array.isArray(children) ? children[0] : children;
+  let language;
+  if (React.isValidElement(child)) {
+    const className = child.props.className;
+    const match = /language-([a-z0-9-]+)/i.exec(className ?? "");
+    language = match?.[1];
+  }
+  const label = (language ?? "text").toUpperCase();
+  const preRef = React.useRef(null);
+  const [copied, setCopied] = React.useState(false);
+  const resetTimerRef = React.useRef(null);
+  let codeText = "";
+  if (React.isValidElement(child)) {
+    const childProps = child.props;
+    codeText = getNodeText(childProps.children);
+  }
+  const normalized = codeText.endsWith("\n") ? codeText.slice(0, -1) : codeText;
+  const lineCount = Math.max(1, normalized.split("\n").length);
+  const digitCount = String(lineCount).length;
+  const onCopy = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      const text = preRef.current?.textContent ?? "";
+      if (text && typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        if (resetTimerRef.current) window.clearTimeout(resetTimerRef.current);
+        resetTimerRef.current = window.setTimeout(() => {
+          setCopied(false);
+          resetTimerRef.current = null;
+        }, 2e3);
+      }
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "milkdown-code-block",
+      style: {
+        ["--code-gutter-width"]: `${digitCount + 1}ch`
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "code-toolbar", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "language-label", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "copy-button",
+              onClick: onCopy,
+              "aria-label": copied ? "Copied" : "Copy code",
+              children: copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, { size: 16 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "code-content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "line-numbers", "aria-hidden": true, children: Array.from({ length: lineCount }).map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: idx + 1 }, idx + 1)) }),
+          /* @__PURE__ */ jsxRuntime.jsx("pre", { ref: preRef, ...rest, children })
+        ] })
+      ]
+    }
+  );
+}
+function MarkdownContent({ markdown, className }) {
+  const [mathPlugins, setMathPlugins] = React.useState(null);
+  const [isLoadingMath, setIsLoadingMath] = React.useState(false);
+  const hasMath = React.useMemo(() => containsMath(markdown), [markdown]);
+  React.useEffect(() => {
+    if (!hasMath || mathPlugins || isLoadingMath) return;
+    setIsLoadingMath(true);
+    const katexCSSId = "katex-css";
+    if (!document.getElementById(katexCSSId)) {
+      const link = document.createElement("link");
+      link.id = katexCSSId;
+      link.rel = "stylesheet";
+      link.href = "https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css";
+      link.integrity = "sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+";
+      link.crossOrigin = "anonymous";
+      document.head.appendChild(link);
+      const fontDisplayStyleId = "katex-font-display-override";
+      if (!document.getElementById(fontDisplayStyleId)) {
+        const style = document.createElement("style");
+        style.id = fontDisplayStyleId;
+        style.textContent = `
+					/* Override KaTeX font-face declarations to add font-display: swap */
+					@font-face {
+						font-family: 'KaTeX_Main';
+						font-style: normal;
+						font-weight: normal;
+						font-display: swap;
+						src: url('https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/fonts/KaTeX_Main-Regular.woff2') format('woff2');
+					}
+					@font-face {
+						font-family: 'KaTeX_Math';
+						font-style: italic;
+						font-weight: normal;
+						font-display: swap;
+						src: url('https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/fonts/KaTeX_Math-Italic.woff2') format('woff2');
+					}
+					@font-face {
+						font-family: 'KaTeX_Size1';
+						font-style: normal;
+						font-weight: normal;
+						font-display: swap;
+						src: url('https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/fonts/KaTeX_Size1-Regular.woff2') format('woff2');
+					}
+					@font-face {
+						font-family: 'KaTeX_Size2';
+						font-style: normal;
+						font-weight: normal;
+						font-display: swap;
+						src: url('https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/fonts/KaTeX_Size2-Regular.woff2') format('woff2');
+					}
+					@font-face {
+						font-family: 'KaTeX_Size3';
+						font-style: normal;
+						font-weight: normal;
+						font-display: swap;
+						src: url('https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/fonts/KaTeX_Size3-Regular.woff2') format('woff2');
+					}
+					@font-face {
+						font-family: 'KaTeX_Size4';
+						font-style: normal;
+						font-weight: normal;
+						font-display: swap;
+						src: url('https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/fonts/KaTeX_Size4-Regular.woff2') format('woff2');
+					}
+				`;
+        document.head.appendChild(style);
+      }
+    }
+    Promise.all([import('remark-math'), import('rehype-katex')]).then(([remarkMathModule, rehypeKatexModule]) => {
+      setMathPlugins({
+        remarkMath: remarkMathModule.default,
+        rehypeKatex: rehypeKatexModule.default
+      });
+    }).catch((error) => {
+      console.error("Failed to load math plugins:", error);
+    }).finally(() => {
+      setIsLoadingMath(false);
+    });
+  }, [hasMath, mathPlugins, isLoadingMath]);
+  const components = React.useMemo(() => {
+    return {
+      a: AnchorRenderer,
+      img: ImgRenderer,
+      code: CodeRenderer,
+      pre: PreRenderer,
+      h1: createHeadingRenderer("h1"),
+      h2: createHeadingRenderer("h2"),
+      h3: createHeadingRenderer("h3"),
+      h4: createHeadingRenderer("h4"),
+      h5: createHeadingRenderer("h5"),
+      h6: createHeadingRenderer("h6"),
+      li: createTaskListItemRenderer()
+    };
+  }, []);
+  const remarkPlugins = React.useMemo(() => {
+    const plugins = [remarkGfm__default];
+    if (hasMath && mathPlugins?.remarkMath) {
+      plugins.push(mathPlugins.remarkMath);
+    }
+    return plugins;
+  }, [hasMath, mathPlugins]);
+  const rehypePlugins = React.useMemo(() => {
+    const plugins = [rehypeRaw__default, rehypeHighlight__default];
+    if (hasMath && mathPlugins?.rehypeKatex) {
+      plugins.push(mathPlugins.rehypeKatex);
+    }
+    return plugins;
+  }, [hasMath, mathPlugins]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("milkdown-custom", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "milkdown", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "milkdown-content", children: /* @__PURE__ */ jsxRuntime.jsx(
+    ReactMarkdown__default,
+    {
+      remarkPlugins,
+      rehypePlugins,
+      components,
+      children: markdown
+    }
+  ) }) }) });
+}
+
+exports.MarkdownContent = MarkdownContent;