@umami/shiso 0.30.0 → 0.32.0

package/dist/index.mjs

@@ -5,16 +5,66 @@ import "@umami/react-zen/styles.css";
 import "highlight.js/styles/github-dark.css";
 
 // src/components/Blog.tsx
-import { Column as Column2 } from "@umami/react-zen";
+import { Heading, Box as Box3, Text as Text2, Row, Column as Column2, Image } from "@umami/react-zen";
+import { format } from "date-fns";
 
-// css-modules:E:\dev\umami-shiso\src\components\Blog.module.css
-var Blog_default = {};
+// src/components/PageLinks.tsx
+import { useEffect, useState } from "react";
+import { Column, Text, Box } from "@umami/react-zen";
+import classNames from "classnames";
+
+// css-modules:E:\dev\umami-shiso\src\components\PageLinks.module.css
+var PageLinks_default = { "links": "PageLinks_links__ZWUxN", "link": "PageLinks_link__MTJmN", "indent-1": "PageLinks_indent-1__MGExM", "indent-2": "PageLinks_indent-2__NDM3O", "indent-3": "PageLinks_indent-3__YmJlN", "indent-4": "PageLinks_indent-4__OTNjM", "indent-5": "PageLinks_indent-5__YTIwM", "indent-6": "PageLinks_indent-6__MjQwY", "selected": "PageLinks_selected__NDA0Y" };
+
+// src/components/PageLinks.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PageLinks({ items = [], className, ...props }) {
+  const [hash, setHash] = useState(items?.[0]?.id);
+  useEffect(() => {
+    const callback = () => {
+      const x = [...items].reverse().find(({ id }) => {
+        const rect = document.getElementById(id)?.getBoundingClientRect();
+        return rect && rect.top <= 0;
+      });
+      if (x) setHash(x.id);
+    };
+    window.addEventListener("scroll", callback, false);
+    return () => {
+      window.removeEventListener("scroll", callback, false);
+    };
+  }, []);
+  if (!items?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Box, { ...props, className: classNames(PageLinks_default.links, className), children: /* @__PURE__ */ jsxs(Column, { gap: "3", minWidth: "240px", children: [
+    /* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", children: "On this page" }),
+    items.map(({ name, id, size }) => {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: `#${id}`,
+          className: classNames(PageLinks_default.link, PageLinks_default[`indent-${size}`], {
+            [PageLinks_default.selected]: hash === id
+          }),
+          children: name
+        },
+        id
+      );
+    })
+  ] }) });
+}
 
 // src/components/Markdown.tsx
+import { Box as Box2 } from "@umami/react-zen";
 import { runSync } from "@mdx-js/mdx";
 import { useMDXComponents } from "@mdx-js/react";
 import * as runtime from "react/jsx-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
+
+// css-modules:E:\dev\umami-shiso\src\components\Markdown.module.css
+var Markdown_default = { "content": "Markdown_content__ZDlhO" };
+
+// src/components/Markdown.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var parseMdx = (code) => {
   try {
     const result = runSync(code, {
@@ -30,7 +80,7 @@ function Markdown({ code }) {
   const components = useMDXComponents();
   const { Component, error } = parseMdx(code);
   if (error) {
-    return /* @__PURE__ */ jsxs("h1", { children: [
+    return /* @__PURE__ */ jsxs2("h1", { children: [
       "Error rendering MDX: ",
       error
     ] });
@@ -38,156 +88,60 @@ function Markdown({ code }) {
   if (!Component) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Component, { components });
-}
-
-// src/components/Blogs.tsx
-import { Column } from "@umami/react-zen";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function Blogs() {
-  return /* @__PURE__ */ jsx2(Column, { flexGrow: 1, children: /* @__PURE__ */ jsx2("h1", { children: "All the blogs!" }) });
+  return /* @__PURE__ */ jsx2(Box2, { className: Markdown_default.content, children: /* @__PURE__ */ jsx2(Component, { components }) });
 }
 
 // src/components/Blog.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function Blog({ content }) {
-  if (!content) {
-    return /* @__PURE__ */ jsx3(Blogs, {});
-  }
-  return /* @__PURE__ */ jsx3(Column2, { className: Blog_default.blog, flexGrow: 1, children: /* @__PURE__ */ jsx3("div", { className: Blog_default.main, children: /* @__PURE__ */ jsxs2("div", { className: Blog_default.content, children: [
-    /* @__PURE__ */ jsx3("h1", { children: content?.meta?.title }),
-    /* @__PURE__ */ jsx3("p", { className: Blog_default.description, children: content?.meta?.description }),
-    /* @__PURE__ */ jsx3(Markdown, { code: content?.code })
-  ] }) }) });
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Blog({ title, description, code, author, date, image, anchors }) {
+  const linksDisplay = {
+    default: "none",
+    xs: "none",
+    sm: "none",
+    md: "none",
+    lg: "block",
+    xl: "block"
+  };
+  return /* @__PURE__ */ jsxs3(Column2, { gap: "8", maxWidth: "900px", style: { margin: "0 auto" }, children: [
+    /* @__PURE__ */ jsx3(Box3, { flexGrow: 1, children: title && /* @__PURE__ */ jsx3(Heading, { size: "1", as: "h1", align: "center", children: title }) }),
+    image && /* @__PURE__ */ jsx3(Box3, { height: "480px", children: /* @__PURE__ */ jsx3(Image, { src: image, alt: title, objectFit: "cover", borderRadius: "3" }) }),
+    /* @__PURE__ */ jsxs3(Row, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx3(Text2, { children: author }),
+      /* @__PURE__ */ jsx3(Text2, { children: date && format(new Date(date), "PP") })
+    ] }),
+    /* @__PURE__ */ jsxs3(Row, { gap: "6", children: [
+      /* @__PURE__ */ jsx3(Markdown, { code }),
+      /* @__PURE__ */ jsx3(PageLinks, { display: linksDisplay, items: anchors })
+    ] })
+  ] });
 }
 
 // src/components/Docs.tsx
 import {
-  Grid,
-  Box as Box4,
-  Heading as Heading2,
+  Box as Box6,
+  Heading as Heading3,
   Button,
-  Icon as Icon3,
-  Icons as Icons3,
-  Row as Row2,
+  Icon as Icon2,
+  Icons as Icons2,
+  Row as Row3,
   Modal,
   DialogTrigger,
   Dialog,
-  Text as Text3
+  Text as Text4
 } from "@umami/react-zen";
 
-// src/components/hooks/useShiso.ts
-import { useContext } from "react";
-
-// src/components/Shiso.tsx
-import { createContext } from "react";
-import { MDXProvider } from "@mdx-js/react";
-import { Code } from "@umami/react-zen";
-
-// src/components/CodeBlock.tsx
-import { useState, useRef } from "react";
-import { Icon, Icons } from "@umami/react-zen";
-
-// css-modules:E:\dev\umami-shiso\src\components\CodeBlock.module.css
-var CodeBlock_default = { "container": "CodeBlock_container__ZTkxY", "button": "CodeBlock_button__MmZkO", "copy": "CodeBlock_copy__M2I0N", "check": "CodeBlock_check__MjkzY" };
-
-// src/components/CodeBlock.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function CodeBlock(props) {
-  const textInput = useRef(null);
-  const [copied, setCopied] = useState(false);
-  const handleCopy = () => {
-    setCopied(true);
-    navigator?.clipboard?.writeText(textInput?.current?.textContent);
-    setTimeout(() => {
-      setCopied(false);
-    }, 1e3);
-  };
-  return /* @__PURE__ */ jsxs3("pre", { ref: textInput, className: CodeBlock_default.container, children: [
-    props.children,
-    /* @__PURE__ */ jsx4("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ jsx4(Icon, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ jsx4(Icons.Check, {}) : /* @__PURE__ */ jsx4(Icons.Copy, {}) }) })
-  ] });
-}
-
-// src/components/Shiso.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var defaultTemplates = {
-  docs: Docs,
-  blog: Blog
-};
-var ShisoContext = createContext(null);
-function Shiso({ content, type, config, components, templates }) {
-  const Component = { ...defaultTemplates, ...templates }[type];
-  if (!Component) {
-    return /* @__PURE__ */ jsx5("h1", { children: `Component not found for type: ${type}` });
-  }
-  return /* @__PURE__ */ jsx5(ShisoContext.Provider, { value: { content, type, config }, children: /* @__PURE__ */ jsx5(MDXProvider, { components: { ...components, pre: CodeBlock, code: Code }, children: /* @__PURE__ */ jsx5(Component, { content, config }) }) });
-}
-
-// src/components/hooks/useShiso.ts
-function useShiso() {
-  const { content, config } = useContext(ShisoContext);
-  return { content, config };
-}
-
-// src/components/PageLinks.tsx
-import { useEffect, useState as useState2 } from "react";
-import { Column as Column3, Text, Box } from "@umami/react-zen";
-import classNames from "classnames";
-
-// css-modules:E:\dev\umami-shiso\src\components\PageLinks.module.css
-var PageLinks_default = { "links": "PageLinks_links__YmMzM", "link": "PageLinks_link__MjIyN", "indent-1": "PageLinks_indent-1__MDg5M", "indent-2": "PageLinks_indent-2__YTU4M", "indent-3": "PageLinks_indent-3__NTYxY", "indent-4": "PageLinks_indent-4__NjhmY", "indent-5": "PageLinks_indent-5__ZmFiY", "indent-6": "PageLinks_indent-6__MmRkN", "selected": "PageLinks_selected__NDQxY" };
-
-// src/components/PageLinks.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function PageLinks({ items = [], className, ...props }) {
-  const [hash, setHash] = useState2(items?.[0]?.id);
-  useEffect(() => {
-    const callback = () => {
-      const x = [...items].reverse().find(({ id }) => {
-        const rect = document.getElementById(id)?.getBoundingClientRect();
-        return rect && rect.top <= 0;
-      });
-      if (x) setHash(x.id);
-    };
-    window.addEventListener("scroll", callback, false);
-    return () => {
-      window.removeEventListener("scroll", callback, false);
-    };
-  }, []);
-  if (!items?.length) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx6(Box, { ...props, className: classNames(PageLinks_default.links, className), children: /* @__PURE__ */ jsxs4(Column3, { gap: "3", minWidth: "240px", children: [
-    /* @__PURE__ */ jsx6(Text, { size: "2", weight: "bold", children: "On this page" }),
-    items.map(({ name, id, size }) => {
-      return /* @__PURE__ */ jsx6(
-        "a",
-        {
-          href: `#${id}`,
-          className: classNames(PageLinks_default.link, PageLinks_default[`indent-${size}`], {
-            [PageLinks_default.selected]: hash === id
-          }),
-          children: name
-        },
-        id
-      );
-    })
-  ] }) });
-}
-
 // src/components/SideNav.tsx
-import { useEffect as useEffect2, useState as useState3 } from "react";
-import { Box as Box2, List, ListItem, ListSection } from "@umami/react-zen";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { Box as Box4, List, ListItem, ListSection } from "@umami/react-zen";
 import classNames2 from "classnames";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 
 // css-modules:E:\dev\umami-shiso\src\components\SideNav.module.css
-var SideNav_default = { "nav": "SideNav_nav__YjU1O", "sticky": "SideNav_sticky__NjhmY", "item": "SideNav_item__ZGRlM", "selected": "SideNav_selected__NTMzY", "items": "SideNav_items__MWI3O" };
+var SideNav_default = { "nav": "SideNav_nav__ZDkzM", "sticky": "SideNav_sticky__YzM2M", "item": "SideNav_item__ZWQwY", "selected": "SideNav_selected__OGVhZ", "items": "SideNav_items__OWFkN" };
 
 // src/components/SideNav.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function SideNav({
   tabs,
   navigation,
@@ -200,7 +154,7 @@ function SideNav({
   const pathname = usePathname();
   const tab = tabs?.find(({ url, id }) => id !== "docs" ? pathname.startsWith(url) : false);
   const menu = navigation[tab?.id || "docs"];
-  const [height, setHeight] = useState3();
+  const [height, setHeight] = useState2();
   useEffect2(() => {
     if (autoHeight) {
       const rect = document.getElementById("shiso_docs_sidenav")?.getBoundingClientRect();
@@ -209,22 +163,22 @@ function SideNav({
       }
     }
   }, [autoHeight]);
-  return /* @__PURE__ */ jsx7(
-    Box2,
+  return /* @__PURE__ */ jsx4(
+    Box4,
     {
       ...props,
       id: "shiso_docs_sidenav",
       className: classNames2(SideNav_default.nav, isSticky && SideNav_default.sticky, className),
       style: { ...style, height },
-      children: /* @__PURE__ */ jsx7(List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
-        return /* @__PURE__ */ jsx7(ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
-          return /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx4(List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
+        return /* @__PURE__ */ jsx4(ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
+          return /* @__PURE__ */ jsx4(
             ListItem,
             {
               className: classNames2(SideNav_default.item, {
                 [SideNav_default.selected]: url === pathname
               }),
-              children: /* @__PURE__ */ jsx7(Link, { href: url, prefetch: false, children: text })
+              children: /* @__PURE__ */ jsx4(Link, { href: url, prefetch: false, children: text })
             },
             index
           );
@@ -238,34 +192,29 @@ function SideNav({
 import Link2 from "next/link";
 import { usePathname as usePathname2 } from "next/navigation";
 import { Tabs, TabList, Tab } from "@umami/react-zen";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function TopNav({ tabs }) {
   const pathname = usePathname2();
   const tab = tabs?.find(({ id, url }) => id !== "docs" ? pathname.startsWith(url) : false);
   const selected = tab?.id || "docs";
-  return /* @__PURE__ */ jsx8(Tabs, { selectedKey: selected, children: /* @__PURE__ */ jsx8(TabList, { items: tabs, children: ({ id, label, url }) => {
-    return /* @__PURE__ */ jsx8(Tab, { id, children: /* @__PURE__ */ jsx8(Link2, { href: url, children: label }) });
+  return /* @__PURE__ */ jsx5(Tabs, { selectedKey: selected, children: /* @__PURE__ */ jsx5(TabList, { items: tabs, children: ({ id, label, url }) => {
+    return /* @__PURE__ */ jsx5(Tab, { id, children: /* @__PURE__ */ jsx5(Link2, { href: url, children: label }) });
   } }) });
 }
 
-// src/components/ContentArea.tsx
-import { Heading, Box as Box3, Text as Text2, Row, Icon as Icon2, Icons as Icons2 } from "@umami/react-zen";
-
-// css-modules:E:\dev\umami-shiso\src\components\ContentArea.module.css
-var ContentArea_default = { "content": "ContentArea_content__MTM4Z" };
-
-// src/components/ContentArea.tsx
+// src/components/DocContent.tsx
+import { Heading as Heading2, Box as Box5, Text as Text3, Row as Row2, Icon, Icons } from "@umami/react-zen";
 import Link3 from "next/link";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-function ContentArea({ section, title, description, code, next, prev }) {
-  return /* @__PURE__ */ jsxs5(Box3, { flexGrow: 1, children: [
-    section && /* @__PURE__ */ jsx9(Text2, { color: "primary", weight: "bold", children: section }),
-    title && /* @__PURE__ */ jsx9(Heading, { size: "2", as: "h1", marginY: "3", children: title }),
-    description && /* @__PURE__ */ jsx9(Text2, { color: "muted", size: "3", children: description }),
-    /* @__PURE__ */ jsx9(Box3, { className: ContentArea_default.content, children: /* @__PURE__ */ jsx9(Markdown, { code }) }),
-    /* @__PURE__ */ jsxs5(Row, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsx9(NavigationButton, { ...prev, isPrev: true }),
-      /* @__PURE__ */ jsx9(NavigationButton, { ...next })
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function DocContent({ section, title, description, code, next, prev }) {
+  return /* @__PURE__ */ jsxs4(Box5, { flexGrow: 1, children: [
+    section && /* @__PURE__ */ jsx6(Text3, { color: "primary", weight: "bold", children: section }),
+    title && /* @__PURE__ */ jsx6(Heading2, { size: "2", as: "h1", marginY: "3", children: title }),
+    description && /* @__PURE__ */ jsx6(Text3, { color: "muted", size: "3", children: description }),
+    /* @__PURE__ */ jsx6(Markdown, { code }),
+    /* @__PURE__ */ jsxs4(Row2, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx6(NavigationButton, { ...prev, isPrev: true }),
+      /* @__PURE__ */ jsx6(NavigationButton, { ...next })
     ] })
   ] });
 }
@@ -275,17 +224,17 @@ var NavigationButton = ({
   isPrev
 }) => {
   if (!url || !label) {
-    return /* @__PURE__ */ jsx9(Box3, {});
+    return /* @__PURE__ */ jsx6(Box5, {});
   }
-  return /* @__PURE__ */ jsx9(Link3, { href: url, children: /* @__PURE__ */ jsxs5(Row, { alignItems: "center", gap: "3", marginY: "3", children: [
-    isPrev && /* @__PURE__ */ jsx9(Icon2, { size: "sm", rotate: 180, children: /* @__PURE__ */ jsx9(Icons2.Chevron, {}) }),
-    /* @__PURE__ */ jsx9(Text2, { size: "3", weight: "bold", children: label }),
-    !isPrev && /* @__PURE__ */ jsx9(Icon2, { size: "sm", children: /* @__PURE__ */ jsx9(Icons2.Chevron, {}) })
+  return /* @__PURE__ */ jsx6(Link3, { href: url, children: /* @__PURE__ */ jsxs4(Row2, { alignItems: "center", gap: "3", marginY: "3", children: [
+    isPrev && /* @__PURE__ */ jsx6(Icon, { size: "sm", rotate: 180, children: /* @__PURE__ */ jsx6(Icons.Chevron, {}) }),
+    /* @__PURE__ */ jsx6(Text3, { size: "3", weight: "bold", children: label }),
+    !isPrev && /* @__PURE__ */ jsx6(Icon, { size: "sm", children: /* @__PURE__ */ jsx6(Icons.Chevron, {}) })
   ] }) });
 };
 
 // src/components/Docs.tsx
-import { Fragment, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function parseContent(content, config = {}) {
   const { tabs, navigation } = config;
   const keys = Object.keys(navigation);
@@ -310,10 +259,9 @@ function parseContent(content, config = {}) {
   });
   return { ...content, tabs, navigation, section, next, prev };
 }
-function Docs() {
-  const { content, config } = useShiso();
+function Docs({ content, config }) {
   if (!content) {
-    return /* @__PURE__ */ jsx10(Heading2, { children: "Page not found" });
+    return /* @__PURE__ */ jsx7(Heading3, { children: "Page not found" });
   }
   const { tabs, navigation, code, meta, section, next, prev, anchors } = parseContent(
     content,
@@ -340,55 +288,130 @@ function Docs() {
     lg: "none",
     xl: "none"
   };
-  const MobileMenuButton = () => /* @__PURE__ */ jsxs6(DialogTrigger, { children: [
-    /* @__PURE__ */ jsxs6(Button, { children: [
-      /* @__PURE__ */ jsx10(Icon3, { children: /* @__PURE__ */ jsx10(Icons3.Menu, {}) }),
-      /* @__PURE__ */ jsx10(Text3, { children: "Menu" })
+  const MobileMenuButton = () => /* @__PURE__ */ jsxs5(DialogTrigger, { children: [
+    /* @__PURE__ */ jsxs5(Button, { children: [
+      /* @__PURE__ */ jsx7(Icon2, { children: /* @__PURE__ */ jsx7(Icons2.Menu, {}) }),
+      /* @__PURE__ */ jsx7(Text4, { children: "Menu" })
     ] }),
-    /* @__PURE__ */ jsx10(Modal, { position: "bottom", offset: "40px", children: /* @__PURE__ */ jsx10(Dialog, { variant: "sheet", children: ({ close }) => {
-      return /* @__PURE__ */ jsxs6(Fragment, { children: [
-        /* @__PURE__ */ jsx10(Row2, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx10(Button, { onPress: () => close(), variant: "quiet", children: /* @__PURE__ */ jsx10(Icon3, { size: "sm", children: /* @__PURE__ */ jsx10(Icons3.Close, {}) }) }) }),
-        /* @__PURE__ */ jsx10(Box4, { height: "100%", overflow: "auto", children: /* @__PURE__ */ jsx10(SideNav, { tabs, navigation }) })
+    /* @__PURE__ */ jsx7(Modal, { position: "bottom", offset: "40px", children: /* @__PURE__ */ jsx7(Dialog, { variant: "sheet", children: ({ close }) => {
+      return /* @__PURE__ */ jsxs5(Fragment, { children: [
+        /* @__PURE__ */ jsx7(Row3, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx7(Button, { onPress: () => close(), variant: "quiet", children: /* @__PURE__ */ jsx7(Icon2, { size: "sm", children: /* @__PURE__ */ jsx7(Icons2.Close, {}) }) }) }),
+        /* @__PURE__ */ jsx7(Box6, { height: "100%", overflow: "auto", children: /* @__PURE__ */ jsx7(SideNav, { tabs, navigation }) })
       ] });
     } }) })
   ] });
-  return /* @__PURE__ */ jsxs6(Box4, { flexGrow: "1", children: [
-    /* @__PURE__ */ jsx10(Row2, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ jsx10(MobileMenuButton, {}) }),
-    tabs && /* @__PURE__ */ jsx10(TopNav, { tabs }),
-    /* @__PURE__ */ jsxs6(
-      Grid,
-      {
-        gap: "6",
-        columns: { xs: "1fr", sm: "1fr", md: "1fr", lg: "240px 1fr 240px", xl: "240px 1fr 240px" },
-        children: [
-          /* @__PURE__ */ jsx10(
-            SideNav,
-            {
-              display: navDisplay,
-              tabs,
-              navigation,
-              style: { top },
-              isSticky: true,
-              autoHeight: true
-            }
-          ),
-          /* @__PURE__ */ jsx10(
-            ContentArea,
-            {
-              section,
-              title: meta?.title,
-              description: meta?.description,
-              code,
-              next,
-              prev
-            }
-          ),
-          /* @__PURE__ */ jsx10(PageLinks, { display: linksDisplay, items: anchors, style: { top } })
-        ]
-      }
-    )
+  return /* @__PURE__ */ jsxs5(Box6, { flexGrow: "1", children: [
+    /* @__PURE__ */ jsx7(Row3, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ jsx7(MobileMenuButton, {}) }),
+    tabs && /* @__PURE__ */ jsx7(TopNav, { tabs }),
+    /* @__PURE__ */ jsxs5(Row3, { gap: "6", children: [
+      /* @__PURE__ */ jsx7(
+        SideNav,
+        {
+          display: navDisplay,
+          tabs,
+          navigation,
+          style: { top },
+          isSticky: true,
+          autoHeight: true
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        DocContent,
+        {
+          section,
+          title: meta?.title,
+          description: meta?.description,
+          code,
+          next,
+          prev
+        }
+      ),
+      /* @__PURE__ */ jsx7(PageLinks, { display: linksDisplay, items: anchors, style: { top } })
+    ] })
   ] });
 }
+
+// src/components/Shiso.tsx
+import { createContext } from "react";
+import { MDXProvider } from "@mdx-js/react";
+import { Code } from "@umami/react-zen";
+
+// src/components/CodeBlock.tsx
+import { useState as useState3, useRef } from "react";
+import { Icon as Icon3, Icons as Icons3 } from "@umami/react-zen";
+
+// css-modules:E:\dev\umami-shiso\src\components\CodeBlock.module.css
+var CodeBlock_default = { "container": "CodeBlock_container__ZTkxY", "button": "CodeBlock_button__MmZkO", "copy": "CodeBlock_copy__M2I0N", "check": "CodeBlock_check__MjkzY" };
+
+// src/components/CodeBlock.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function CodeBlock(props) {
+  const textInput = useRef(null);
+  const [copied, setCopied] = useState3(false);
+  const handleCopy = () => {
+    setCopied(true);
+    navigator?.clipboard?.writeText(textInput?.current?.textContent);
+    setTimeout(() => {
+      setCopied(false);
+    }, 1e3);
+  };
+  return /* @__PURE__ */ jsxs6("pre", { ref: textInput, className: CodeBlock_default.container, children: [
+    props.children,
+    /* @__PURE__ */ jsx8("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ jsx8(Icon3, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ jsx8(Icons3.Check, {}) : /* @__PURE__ */ jsx8(Icons3.Copy, {}) }) })
+  ] });
+}
+
+// src/components/Blogs.tsx
+import { Grid } from "@umami/react-zen";
+
+// src/components/Card.tsx
+import { Box as Box7, Image as Image2, Column as Column3, Row as Row4, Heading as Heading4, Text as Text5, Button as Button2, Icon as Icon4, Icons as Icons4 } from "@umami/react-zen";
+import Link4 from "next/link";
+import { format as format2 } from "date-fns";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function Card({ title, description, date, author, url, image }) {
+  return /* @__PURE__ */ jsxs7(Column3, { borderSize: "1", borderRadius: "3", overflow: "hidden", children: [
+    image && /* @__PURE__ */ jsx9(Box7, { height: "240px", children: /* @__PURE__ */ jsx9(Image2, { src: image, alt: title, objectFit: "cover" }) }),
+    /* @__PURE__ */ jsxs7(Column3, { padding: "6", gap: "4", children: [
+      /* @__PURE__ */ jsx9(Heading4, { size: "4", as: "header", children: /* @__PURE__ */ jsx9(Link4, { href: url, children: title }) }),
+      /* @__PURE__ */ jsxs7(Row4, { justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx9(Text5, { color: "muted", children: date && format2(new Date(date), "PP") }),
+        /* @__PURE__ */ jsx9(Text5, { color: "muted", children: author })
+      ] }),
+      /* @__PURE__ */ jsx9(Box7, { marginY: "5", as: "p", children: /* @__PURE__ */ jsx9(Text5, { size: "3", children: description }) }),
+      /* @__PURE__ */ jsx9(Button2, { asChild: true, children: /* @__PURE__ */ jsxs7(Link4, { href: url, children: [
+        /* @__PURE__ */ jsx9(Text5, { children: "Read more" }),
+        /* @__PURE__ */ jsx9(Icon4, { children: /* @__PURE__ */ jsx9(Icons4.Arrow, {}) })
+      ] }) })
+    ] })
+  ] });
+}
+
+// src/components/Blogs.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Blogs({ content, config }) {
+  if (!Array.isArray(content)) {
+    const { meta, code, anchors, slug } = content;
+    return /* @__PURE__ */ jsx10(Blog, { ...meta, code, anchors });
+  }
+  console.log({ content });
+  return /* @__PURE__ */ jsx10(Grid, { gap: "5", columns: "repeat(auto-fit, minmax(400px, 1fr)", children: content?.sort((a, b) => new Date(b.meta.date).getTime() - new Date(a.meta.date).getTime()).map(({ meta, slug }) => /* @__PURE__ */ jsx10(Card, { url: `/blog/${slug}`, ...meta }, slug)) });
+}
+
+// src/components/Shiso.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var defaultTemplates = {
+  docs: Docs,
+  blog: Blogs
+};
+var ShisoContext = createContext(null);
+function Shiso({ type, config, content, components, templates }) {
+  const Component = { ...defaultTemplates, ...templates }[type];
+  if (!Component) {
+    return /* @__PURE__ */ jsx11("h1", { children: `Component not found for type: ${type}` });
+  }
+  return /* @__PURE__ */ jsx11(ShisoContext.Provider, { value: { type, config, content, components, templates }, children: /* @__PURE__ */ jsx11(MDXProvider, { components: { ...components, pre: CodeBlock, code: Code }, children: /* @__PURE__ */ jsx11(Component, { config, content }) }) });
+}
 export {
   Blog,
   Docs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/shiso",
-  "version": "0.30.0",
+  "version": "0.32.0",
   "description": "A content layer for Next.js",
   "homepage": "https://umami.is/shiso",
   "repository": {
@@ -46,8 +46,9 @@
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.0.0",
-    "@umami/react-zen": "^0.41.0",
+    "@umami/react-zen": "^0.42.0",
     "classnames": "^2.5.1",
+    "date-fns": "^4.1.0",
     "glob": "^10.3.10",
     "gray-matter": "^4.0.3",
     "highlight.js": "^11.11.1",

package/server/index.d.ts

@@ -5,20 +5,8 @@
 
 declare module '@umami/shiso/server' {
     import { ReactElement } from 'react';
-    import type { ShisoConfig } from '@/lib/types';
-    export const getContent: (file: string) => Promise<{
-        path: string;
-        meta: {
-            [key: string]: any;
-        };
-        content: string;
-        code: string;
-        anchors: {
-            name: string;
-            id: string;
-            size: number;
-        }[];
-    } | null>;
+    import type { ShisoConfig, ShisoRenderProps, ShisoContent } from '@/lib/types';
+    export const parseFile: (file: string) => Promise<ShisoContent | null>;
     export function next(type: string, config: ShisoConfig): {
         generateMetadata: ({ params }: {
             params: Promise<{
@@ -31,11 +19,7 @@ declare module '@umami/shiso/server' {
             };
         }>;
         generateStaticParams: () => Promise<any>;
-        renderPage: (render: ({ type, content, config, }: {
-            type: string;
-            content: any;
-            config: ShisoConfig;
-        }) => ReactElement) => ({ params }: {
+        renderPage: (render: (props: ShisoRenderProps) => ReactElement) => ({ params }: {
             params: Promise<{
                 slug: string[];
             }>;