@btst/stack 1.0.1 → 1.1.1

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

@@ -0,0 +1,315 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn, slugify } from '../../../utils.mjs';
+import { useState, useMemo, useEffect, createElement, isValidElement, useRef } from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+import 'highlight.js/styles/panda-syntax-light.css';
+import { CheckIcon, CopyIcon } from 'lucide-react';
+import { usePluginOverrides } from '@btst/stack/context';
+import { DefaultImage, DefaultLink } from './defaults.mjs';
+
+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 (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 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__ */ 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 = slugify(labelText || "task-item");
+    const hashSuffix = simpleHash(labelText || "task-item");
+    const uniqueId = `${baseId}-${hashSuffix}`;
+    return /* @__PURE__ */ jsxs("li", { className, ...rest, children: [
+      checkboxNode ? createElement(checkboxNode.type, {
+        ...checkboxNode.props,
+        id: uniqueId,
+        "aria-label": labelText || "Task item"
+      }) : null,
+      /* @__PURE__ */ jsx("label", { htmlFor: uniqueId, children: nonCheckboxChildren })
+    ] });
+  };
+}
+function createHeadingRenderer(tag) {
+  return function HeadingRenderer(props) {
+    const { children, ...rest } = props;
+    const text = getNodeText(children);
+    const id = slugify(text);
+    return createElement(
+      tag,
+      { id, ...rest },
+      children,
+      text ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: "heading-anchor",
+          href: `#${id}`,
+          "aria-label": "Link to heading",
+          children: "#"
+        }
+      ) : null
+    );
+  };
+}
+function AnchorRenderer(props) {
+  const { Link } = usePluginOverrides("blog", {
+    Link: DefaultLink
+  });
+  const { href = "", children, className: anchorClassName, ...rest } = props;
+  return /* @__PURE__ */ jsx(Link, { href, className: anchorClassName, ...rest, children });
+}
+function ImgRenderer(props) {
+  const { Image } = usePluginOverrides("blog", {
+    Image: 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__ */ jsx("span", { className: "markdown-image-wrapper", children: /* @__PURE__ */ jsx(Image, { ...imageProps }) });
+  }
+  return /* @__PURE__ */ 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__ */ jsx("code", { className, ...rest, children });
+  }
+  return /* @__PURE__ */ jsx("code", { className, ...rest, children });
+}
+function PreRenderer(props) {
+  const { children, ...rest } = props;
+  const child = Array.isArray(children) ? children[0] : children;
+  let language;
+  if (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 = useRef(null);
+  const [copied, setCopied] = useState(false);
+  const resetTimerRef = useRef(null);
+  let codeText = "";
+  if (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__ */ jsxs(
+    "div",
+    {
+      className: "milkdown-code-block",
+      style: {
+        ["--code-gutter-width"]: `${digitCount + 1}ch`
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "code-toolbar", children: [
+          /* @__PURE__ */ jsx("span", { className: "language-label", children: label }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "copy-button",
+              onClick: onCopy,
+              "aria-label": copied ? "Copied" : "Copy code",
+              children: copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 16 }) : /* @__PURE__ */ jsx(CopyIcon, { size: 16 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "code-content", children: [
+          /* @__PURE__ */ jsx("ol", { className: "line-numbers", "aria-hidden": true, children: Array.from({ length: lineCount }).map((_, idx) => /* @__PURE__ */ jsx("li", { children: idx + 1 }, idx + 1)) }),
+          /* @__PURE__ */ jsx("pre", { ref: preRef, ...rest, children })
+        ] })
+      ]
+    }
+  );
+}
+function MarkdownContent({ markdown, className }) {
+  const [mathPlugins, setMathPlugins] = useState(null);
+  const [isLoadingMath, setIsLoadingMath] = useState(false);
+  const hasMath = useMemo(() => containsMath(markdown), [markdown]);
+  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 = 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 = useMemo(() => {
+    const plugins = [remarkGfm];
+    if (hasMath && mathPlugins?.remarkMath) {
+      plugins.push(mathPlugins.remarkMath);
+    }
+    return plugins;
+  }, [hasMath, mathPlugins]);
+  const rehypePlugins = useMemo(() => {
+    const plugins = [rehypeRaw, rehypeHighlight];
+    if (hasMath && mathPlugins?.rehypeKatex) {
+      plugins.push(mathPlugins.rehypeKatex);
+    }
+    return plugins;
+  }, [hasMath, mathPlugins]);
+  return /* @__PURE__ */ jsx("div", { className: cn("milkdown-custom", className), children: /* @__PURE__ */ jsx("div", { className: "milkdown", children: /* @__PURE__ */ jsx("div", { className: "milkdown-content", children: /* @__PURE__ */ jsx(
+    ReactMarkdown,
+    {
+      remarkPlugins,
+      rehypePlugins,
+      components,
+      children: markdown
+    }
+  ) }) }) });
+}
+
+export { MarkdownContent };

package/dist/plugins/blog/client/components/shared/on-this-page.cjs

@@ -0,0 +1,161 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const utils = require('../../../utils.cjs');
+const context = require('@btst/stack/context');
+const index = require('../../localization/index.cjs');
+const select = require('@workspace/ui/components/select');
+
+function OnThisPage({ markdown, className }) {
+  const { localization } = context.usePluginOverrides("blog", {
+    localization: index.BLOG_LOCALIZATION
+  });
+  const headings = React.useMemo(() => extractHeadings(markdown), [markdown]);
+  const activeId = useActiveHeading(headings);
+  if (headings.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils.cn(
+          "sticky top-20 z-30 ml-auto hidden xl:flex w-44",
+          className
+        )
+      }
+    );
+  }
+  const handleClick = (id) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      className: utils.cn(
+        "sticky top-20 z-30 ml-auto hidden xl:flex w-44 flex-col gap-2 overflow-hidden pb-8",
+        className
+      ),
+      "aria-label": "Table of contents",
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto px-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 p-4 pt-0 text-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-muted-foreground sticky top-0 h-6 text-xs", children: localization.BLOG_POST_ON_THIS_PAGE }),
+        headings.map(({ id, text, level }) => {
+          const paddingLeft = level === 1 ? "0" : level === 2 ? "0.5rem" : level === 3 ? "1rem" : level === 4 ? "1.5rem" : level === 5 ? "2rem" : level === 6 ? "2.5rem" : "0";
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: `#${id}`,
+              onClick: (e) => {
+                e.preventDefault();
+                handleClick(id);
+              },
+              style: { paddingLeft },
+              className: utils.cn(
+                "text-muted-foreground hover:text-foreground text-[0.8rem] no-underline transition-colors",
+                activeId === id && "text-foreground"
+              ),
+              "data-active": activeId === id,
+              "data-depth": level,
+              children: text
+            },
+            id
+          );
+        })
+      ] }) })
+    }
+  );
+}
+function OnThisPageSelect({ markdown, className }) {
+  const { localization } = context.usePluginOverrides("blog", {
+    localization: index.BLOG_LOCALIZATION
+  });
+  const headings = React.useMemo(() => extractHeadings(markdown), [markdown]);
+  const initialValue = React.useMemo(() => headings[0]?.id ?? "", [headings]);
+  const activeId = useActiveHeading(headings);
+  const value = activeId || initialValue;
+  if (headings.length === 0) {
+    return null;
+  }
+  const handleValueChange = (id) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn(
+        "sticky z-30 w-full self-stretch xl:hidden bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60",
+        className
+      ),
+      style: {
+        top: "var(--navbar-height, 16px)"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { value, onValueChange: handleValueChange, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { placeholder: localization.BLOG_POST_ON_THIS_PAGE }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: headings.map(({ id, text, level }) => {
+          const indent = level > 1 ? `${(level - 1) * 0.5}rem` : "0";
+          return /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: id, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { paddingLeft: indent }, children: text }) }, id);
+        }) })
+      ] })
+    }
+  );
+}
+function extractHeadings(markdown) {
+  const headings = [];
+  const lines = markdown.split("\n");
+  for (const line of lines) {
+    const match = line.match(/^(#{1,6})\s+(.+)$/);
+    if (match) {
+      const level = match[1]?.length ?? 0;
+      const text = match[2]?.trim() ?? "";
+      const cleanText = text.replace(/\s*#+\s*$/, "").trim();
+      const id = utils.slugify(cleanText);
+      if (id && cleanText) {
+        headings.push({ id, text: cleanText, level });
+      }
+    }
+  }
+  return headings;
+}
+function useActiveHeading(headings, onActiveChange) {
+  const [activeId, setActiveId] = React.useState("");
+  const onActiveChangeRef = React.useRef(onActiveChange);
+  React.useEffect(() => {
+    onActiveChangeRef.current = onActiveChange;
+  }, [onActiveChange]);
+  React.useEffect(() => {
+    if (headings.length === 0) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+            onActiveChangeRef.current?.(entry.target.id);
+            break;
+          }
+        }
+      },
+      {
+        rootMargin: "-80px 0px -80% 0px",
+        threshold: 0
+      }
+    );
+    headings.forEach(({ id }) => {
+      const element = document.getElementById(id);
+      if (element) {
+        observer.observe(element);
+      }
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [headings]);
+  return activeId;
+}
+
+exports.OnThisPage = OnThisPage;
+exports.OnThisPageSelect = OnThisPageSelect;

package/dist/plugins/blog/client/components/shared/on-this-page.mjs

@@ -0,0 +1,158 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo, useState, useRef, useEffect } from 'react';
+import { cn, slugify } from '../../../utils.mjs';
+import { usePluginOverrides } from '@btst/stack/context';
+import { BLOG_LOCALIZATION } from '../../localization/index.mjs';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@workspace/ui/components/select';
+
+function OnThisPage({ markdown, className }) {
+  const { localization } = usePluginOverrides("blog", {
+    localization: BLOG_LOCALIZATION
+  });
+  const headings = useMemo(() => extractHeadings(markdown), [markdown]);
+  const activeId = useActiveHeading(headings);
+  if (headings.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "sticky top-20 z-30 ml-auto hidden xl:flex w-44",
+          className
+        )
+      }
+    );
+  }
+  const handleClick = (id) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: cn(
+        "sticky top-20 z-30 ml-auto hidden xl:flex w-44 flex-col gap-2 overflow-hidden pb-8",
+        className
+      ),
+      "aria-label": "Table of contents",
+      children: /* @__PURE__ */ jsx("div", { className: "overflow-y-auto px-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-4 pt-0 text-sm", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-semibold text-muted-foreground sticky top-0 h-6 text-xs", children: localization.BLOG_POST_ON_THIS_PAGE }),
+        headings.map(({ id, text, level }) => {
+          const paddingLeft = level === 1 ? "0" : level === 2 ? "0.5rem" : level === 3 ? "1rem" : level === 4 ? "1.5rem" : level === 5 ? "2rem" : level === 6 ? "2.5rem" : "0";
+          return /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: `#${id}`,
+              onClick: (e) => {
+                e.preventDefault();
+                handleClick(id);
+              },
+              style: { paddingLeft },
+              className: cn(
+                "text-muted-foreground hover:text-foreground text-[0.8rem] no-underline transition-colors",
+                activeId === id && "text-foreground"
+              ),
+              "data-active": activeId === id,
+              "data-depth": level,
+              children: text
+            },
+            id
+          );
+        })
+      ] }) })
+    }
+  );
+}
+function OnThisPageSelect({ markdown, className }) {
+  const { localization } = usePluginOverrides("blog", {
+    localization: BLOG_LOCALIZATION
+  });
+  const headings = useMemo(() => extractHeadings(markdown), [markdown]);
+  const initialValue = useMemo(() => headings[0]?.id ?? "", [headings]);
+  const activeId = useActiveHeading(headings);
+  const value = activeId || initialValue;
+  if (headings.length === 0) {
+    return null;
+  }
+  const handleValueChange = (id) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "sticky z-30 w-full self-stretch xl:hidden bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60",
+        className
+      ),
+      style: {
+        top: "var(--navbar-height, 16px)"
+      },
+      children: /* @__PURE__ */ jsxs(Select, { value, onValueChange: handleValueChange, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: localization.BLOG_POST_ON_THIS_PAGE }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: headings.map(({ id, text, level }) => {
+          const indent = level > 1 ? `${(level - 1) * 0.5}rem` : "0";
+          return /* @__PURE__ */ jsx(SelectItem, { value: id, children: /* @__PURE__ */ jsx("span", { style: { paddingLeft: indent }, children: text }) }, id);
+        }) })
+      ] })
+    }
+  );
+}
+function extractHeadings(markdown) {
+  const headings = [];
+  const lines = markdown.split("\n");
+  for (const line of lines) {
+    const match = line.match(/^(#{1,6})\s+(.+)$/);
+    if (match) {
+      const level = match[1]?.length ?? 0;
+      const text = match[2]?.trim() ?? "";
+      const cleanText = text.replace(/\s*#+\s*$/, "").trim();
+      const id = slugify(cleanText);
+      if (id && cleanText) {
+        headings.push({ id, text: cleanText, level });
+      }
+    }
+  }
+  return headings;
+}
+function useActiveHeading(headings, onActiveChange) {
+  const [activeId, setActiveId] = useState("");
+  const onActiveChangeRef = useRef(onActiveChange);
+  useEffect(() => {
+    onActiveChangeRef.current = onActiveChange;
+  }, [onActiveChange]);
+  useEffect(() => {
+    if (headings.length === 0) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+            onActiveChangeRef.current?.(entry.target.id);
+            break;
+          }
+        }
+      },
+      {
+        rootMargin: "-80px 0px -80% 0px",
+        threshold: 0
+      }
+    );
+    headings.forEach(({ id }) => {
+      const element = document.getElementById(id);
+      if (element) {
+        observer.observe(element);
+      }
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [headings]);
+  return activeId;
+}
+
+export { OnThisPage, OnThisPageSelect };

package/dist/plugins/blog/client/components/shared/page-header.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+
+function PageHeader({
+  title,
+  description,
+  childrenTop,
+  childrenBottom
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex max-w-2xl flex-col items-center lg:gap-4 gap-2 text-center wrap-anywhere",
+      "data-testid": "page-header",
+      children: [
+        childrenTop,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: "font-medium font-sans lg:text-6xl text-4xl tracking-tight",
+            "data-testid": "page-title",
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: "text-muted-foreground wrap-anywhere",
+            "data-testid": "page-description",
+            children: description
+          }
+        ),
+        childrenBottom
+      ]
+    }
+  );
+}
+
+exports.PageHeader = PageHeader;