@umami/shiso 0.26.0 → 0.28.0

package/dist/index.css

@@ -34,45 +34,41 @@ pre.CodeBlock_container__YmFmN code {
 }
 
 /* virtual-css:css:0ed498f49b21d225f1b5a4e1685cf2e5 */
-.PageLinks_title__ZGY1Y {
-  position: sticky;
-  top: 0;
-}
-.PageLinks_links__ODM4N {
+.PageLinks_links__MjgyM {
   position: sticky;
   top: 30px;
   height: max-content;
 }
-.PageLinks_links__ODM4N a.PageLinks_link__ZDE4O {
+.PageLinks_links__MjgyM a.PageLinks_link__YWRjO {
   display: block;
   color: var(--font-color-muted);
   font-size: var(--font-size);
   text-wrap: nowrap;
   text-decoration: none;
 }
-.PageLinks_links__ODM4N a.PageLinks_link__ZDE4O:hover {
+.PageLinks_links__MjgyM a.PageLinks_link__YWRjO:hover {
   color: var(--primary-color);
   text-decoration: none;
 }
-.PageLinks_indent-1__NGU3M {
+.PageLinks_indent-1__MDcyM {
   margin-left: 0;
 }
-.PageLinks_indent-2__YjFlN {
+.PageLinks_indent-2__OWYxZ {
   margin-left: 0;
 }
-.PageLinks_indent-3__NzQxY {
+.PageLinks_indent-3__ZmYwM {
   margin-left: 10px;
 }
-.PageLinks_indent-4__NzRjN {
+.PageLinks_indent-4__NzU2Y {
   margin-left: 20px;
 }
-.PageLinks_indent-5__ZmRhN {
+.PageLinks_indent-5__NmVkY {
   margin-left: 30px;
 }
-.PageLinks_indent-6__YzQ3N {
+.PageLinks_indent-6__NzQ4N {
   margin-left: 40px;
 }
-.PageLinks_links__ODM4N a.PageLinks_selected__NTViM {
+.PageLinks_links__MjgyM a.PageLinks_selected__YmZhY {
   color: var(--primary-color);
 }
 
@@ -107,55 +103,55 @@ pre.CodeBlock_container__YmFmN code {
 }
 
 /* virtual-css:css:7938c95522eda3e1f8244364ad70b38c */
-.ContentArea_content__NDVhM {
+.ContentArea_content__NGFkN {
   font-size: 16px;
   margin-bottom: 60px;
 }
-.ContentArea_content__NDVhM > p {
-  color: var(--font-color-muted);
+.ContentArea_content__NGFkN > p {
+  color: var(--font-color);
   line-height: 1.8;
 }
-.ContentArea_content__NDVhM a {
+.ContentArea_content__NGFkN a {
   color: var(--font-color);
   font-weight: 600;
   text-decoration: underline var(--border-color);
   text-underline-offset: 4px;
 }
-.ContentArea_content__NDVhM a:hover {
+.ContentArea_content__NGFkN a:hover {
   color: var(--font-color);
   text-decoration: underline var(--primary-color);
 }
-.ContentArea_content__NDVhM h1 {
+.ContentArea_content__NGFkN h1 {
   font-size: var(--font-size-8);
   letter-spacing: var(--letter-spacing-1);
   margin: 0 0 var(--spacing-4) 0;
 }
-.ContentArea_content__NDVhM h2 {
+.ContentArea_content__NGFkN h2 {
   font-size: var(--font-size-6);
   letter-spacing: var(--letter-spacing-1);
   margin: var(--spacing-8) 0 var(--spacing-4) 0;
 }
-.ContentArea_content__NDVhM h3 {
+.ContentArea_content__NGFkN h3 {
   font-size: var(--font-size-5);
   letter-spacing: var(--letter-spacing-1);
   margin: var(--spacing-7) 0 var(--spacing-4) 0;
 }
-.ContentArea_content__NDVhM *[id] {
+.ContentArea_content__NGFkN *[id] {
   scroll-margin-top: var(--spacing-4);
 }
-.ContentArea_content__NDVhM ul {
+.ContentArea_content__NGFkN ul {
   list-style: disc;
 }
-.ContentArea_content__NDVhM ol {
+.ContentArea_content__NGFkN ol {
   list-style: decimal;
 }
-.ContentArea_content__NDVhM pre {
+.ContentArea_content__NGFkN pre {
   margin: var(--spacing-5) 0;
 }
-.ContentArea_content__NDVhM code {
+.ContentArea_content__NGFkN code {
   font-size: 14px;
 }
-.ContentArea_content__NDVhM code:not([class]) {
+.ContentArea_content__NGFkN code:not([class]) {
   font-family: var(--font-family-code);
   color: var(--font-color);
   padding: var(--spacing-1);

package/dist/index.js

@@ -160,7 +160,7 @@ var import_react_zen5 = require("@umami/react-zen");
 var import_classnames = __toESM(require("classnames"));
 
 // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/PageLinks.module.css
-var PageLinks_default = { "title": "PageLinks_title__ZGY1Y", "links": "PageLinks_links__ODM4N", "link": "PageLinks_link__ZDE4O", "indent-1": "PageLinks_indent-1__NGU3M", "indent-2": "PageLinks_indent-2__YjFlN", "indent-3": "PageLinks_indent-3__NzQxY", "indent-4": "PageLinks_indent-4__NzRjN", "indent-5": "PageLinks_indent-5__ZmRhN", "indent-6": "PageLinks_indent-6__YzQ3N", "selected": "PageLinks_selected__NTViM" };
+var PageLinks_default = { "links": "PageLinks_links__MjgyM", "link": "PageLinks_link__YWRjO", "indent-1": "PageLinks_indent-1__MDcyM", "indent-2": "PageLinks_indent-2__OWYxZ", "indent-3": "PageLinks_indent-3__ZmYwM", "indent-4": "PageLinks_indent-4__NzU2Y", "indent-5": "PageLinks_indent-5__NmVkY", "indent-6": "PageLinks_indent-6__NzQ4N", "selected": "PageLinks_selected__YmZhY" };
 
 // src/components/PageLinks.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -212,17 +212,27 @@ var SideNav_default = { "nav": "SideNav_nav__MDQ3Z", "sticky": "SideNav_sticky__
 
 // src/components/SideNav.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function SideNav({ tabs, navigation, isSticky, className, style, ...props }) {
+function SideNav({
+  tabs,
+  navigation,
+  isSticky,
+  autoHeight,
+  className,
+  style,
+  ...props
+}) {
   const pathname = (0, import_navigation.usePathname)();
   const tab = tabs?.find(({ url, id }) => id !== "docs" ? pathname.startsWith(url) : false);
   const menu = navigation[tab?.id || "docs"];
   const [height, setHeight] = (0, import_react7.useState)();
   (0, import_react7.useEffect)(() => {
-    const rect = document.getElementById("shiso_docs_sidenav")?.getBoundingClientRect();
-    if (rect) {
-      setHeight(`${window.innerHeight - rect.top - 10}px`);
+    if (autoHeight) {
+      const rect = document.getElementById("shiso_docs_sidenav")?.getBoundingClientRect();
+      if (rect) {
+        setHeight(`${window.innerHeight - rect.top - 10}px`);
+      }
     }
-  }, []);
+  }, [autoHeight]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_react_zen6.Box,
     {
@@ -266,7 +276,7 @@ function TopNav({ tabs }) {
 var import_react_zen8 = require("@umami/react-zen");
 
 // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/ContentArea.module.css
-var ContentArea_default = { "content": "ContentArea_content__NDVhM" };
+var ContentArea_default = { "content": "ContentArea_content__NGFkN" };
 
 // src/components/ContentArea.tsx
 var import_link3 = __toESM(require("next/link"));
@@ -274,8 +284,8 @@ var import_jsx_runtime9 = require("react/jsx-runtime");
 function ContentArea({ section, title, description, code, next, prev }) {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_zen8.Box, { flexGrow: 1, children: [
     section && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen8.Text, { color: "primary", weight: "bold", children: section }),
-    title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen8.Heading, { size: "2", as: "h1", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen8.Text, { color: "muted", children: description }),
+    title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen8.Heading, { size: "2", as: "h1", marginY: "3", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen8.Text, { color: "muted", size: "3", children: description }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen8.Box, { className: ContentArea_default.content, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Markdown, { code }) }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_zen8.Row, { justifyContent: "space-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NavigationButton, { ...prev, isPrev: true }),
@@ -347,8 +357,20 @@ function Docs() {
     lg: "none",
     xl: "none"
   };
+  const MobileMenuButton = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_zen9.DialogTrigger, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_zen9.Button, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Icons.Menu, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Text, { children: "Menu" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Modal, { position: "bottom", offset: "40px", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Dialog, { variant: "sheet", children: ({ close }) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Row, { justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Button, { onPress: () => close(), variant: "quiet", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Icons.Close, {}) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Box, { height: "100%", overflow: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SideNav, { tabs, navigation }) })
+      ] });
+    } }) })
+  ] });
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_zen9.Box, { flexGrow: "1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Row, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.MobileMenuButton, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SideNav, { tabs, navigation }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Row, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MobileMenuButton, {}) }),
     tabs && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TopNav, { tabs }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       import_react_zen9.Grid,
@@ -363,7 +385,8 @@ function Docs() {
               tabs,
               navigation,
               style: { top },
-              isSticky: true
+              isSticky: true,
+              autoHeight: true
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(

package/dist/index.mjs

@@ -66,8 +66,14 @@ import {
   Grid,
   Box as Box4,
   Heading as Heading2,
+  Button,
+  Icon as Icon3,
+  Icons as Icons3,
   Row as Row2,
-  MobileMenuButton
+  Modal,
+  DialogTrigger,
+  Dialog,
+  Text as Text3
 } from "@umami/react-zen";
 
 // src/components/hooks/useShiso.ts
@@ -130,7 +136,7 @@ import { Column as Column3, Text, Box } from "@umami/react-zen";
 import classNames from "classnames";
 
 // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/PageLinks.module.css
-var PageLinks_default = { "title": "PageLinks_title__ZGY1Y", "links": "PageLinks_links__ODM4N", "link": "PageLinks_link__ZDE4O", "indent-1": "PageLinks_indent-1__NGU3M", "indent-2": "PageLinks_indent-2__YjFlN", "indent-3": "PageLinks_indent-3__NzQxY", "indent-4": "PageLinks_indent-4__NzRjN", "indent-5": "PageLinks_indent-5__ZmRhN", "indent-6": "PageLinks_indent-6__YzQ3N", "selected": "PageLinks_selected__NTViM" };
+var PageLinks_default = { "links": "PageLinks_links__MjgyM", "link": "PageLinks_link__YWRjO", "indent-1": "PageLinks_indent-1__MDcyM", "indent-2": "PageLinks_indent-2__OWYxZ", "indent-3": "PageLinks_indent-3__ZmYwM", "indent-4": "PageLinks_indent-4__NzU2Y", "indent-5": "PageLinks_indent-5__NmVkY", "indent-6": "PageLinks_indent-6__NzQ4N", "selected": "PageLinks_selected__YmZhY" };
 
 // src/components/PageLinks.tsx
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -182,17 +188,27 @@ var SideNav_default = { "nav": "SideNav_nav__MDQ3Z", "sticky": "SideNav_sticky__
 
 // src/components/SideNav.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
-function SideNav({ tabs, navigation, isSticky, className, style, ...props }) {
+function SideNav({
+  tabs,
+  navigation,
+  isSticky,
+  autoHeight,
+  className,
+  style,
+  ...props
+}) {
   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();
   useEffect2(() => {
-    const rect = document.getElementById("shiso_docs_sidenav")?.getBoundingClientRect();
-    if (rect) {
-      setHeight(`${window.innerHeight - rect.top - 10}px`);
+    if (autoHeight) {
+      const rect = document.getElementById("shiso_docs_sidenav")?.getBoundingClientRect();
+      if (rect) {
+        setHeight(`${window.innerHeight - rect.top - 10}px`);
+      }
     }
-  }, []);
+  }, [autoHeight]);
   return /* @__PURE__ */ jsx7(
     Box2,
     {
@@ -236,7 +252,7 @@ function TopNav({ tabs }) {
 import { Heading, Box as Box3, Text as Text2, Row, Icon as Icon2, Icons as Icons2 } from "@umami/react-zen";
 
 // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/ContentArea.module.css
-var ContentArea_default = { "content": "ContentArea_content__NDVhM" };
+var ContentArea_default = { "content": "ContentArea_content__NGFkN" };
 
 // src/components/ContentArea.tsx
 import Link3 from "next/link";
@@ -244,8 +260,8 @@ 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", children: title }),
-    description && /* @__PURE__ */ jsx9(Text2, { color: "muted", children: description }),
+    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 }),
@@ -269,7 +285,7 @@ var NavigationButton = ({
 };
 
 // src/components/Docs.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function parseContent(content, config = {}) {
   const { tabs, navigation } = config;
   const keys = Object.keys(navigation);
@@ -317,8 +333,20 @@ 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" })
+    ] }),
+    /* @__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 }) })
+      ] });
+    } }) })
+  ] });
   return /* @__PURE__ */ jsxs6(Box4, { flexGrow: "1", children: [
-    /* @__PURE__ */ jsx10(Row2, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ jsx10(MobileMenuButton, { children: /* @__PURE__ */ jsx10(SideNav, { tabs, navigation }) }) }),
+    /* @__PURE__ */ jsx10(Row2, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ jsx10(MobileMenuButton, {}) }),
     tabs && /* @__PURE__ */ jsx10(TopNav, { tabs }),
     /* @__PURE__ */ jsxs6(
       Grid,
@@ -333,7 +361,8 @@ function Docs() {
               tabs,
               navigation,
               style: { top },
-              isSticky: true
+              isSticky: true,
+              autoHeight: true
             }
           ),
           /* @__PURE__ */ jsx10(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/shiso",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "description": "A content layer for Next.js",
   "homepage": "https://umami.is/shiso",
   "repository": {
@@ -46,12 +46,12 @@
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.0.0",
-    "@umami/react-zen": "^0.39.0",
+    "@umami/react-zen": "^0.41.0",
     "classnames": "^2.5.1",
     "glob": "^10.3.10",
     "gray-matter": "^4.0.3",
-    "highlight.js": "^11.11.0",
-    "next": "15.1.2",
+    "highlight.js": "^11.11.1",
+    "next": "15.1.3",
     "next-mdx-remote": "^5.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -65,7 +65,7 @@
     "@svgr/webpack": "^8.1.0",
     "@types/css-modules": "^1.0.5",
     "@types/mdx": "^2.0.11",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.10.4",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "@umami/esbuild-plugin-css-modules": "^0.4.0",
@@ -73,13 +73,13 @@
     "esbuild": "^0.24.2",
     "esbuild-plugin-css-modules": "^0.3.0",
     "eslint": "^8",
-    "eslint-config-next": "15.0.2",
+    "eslint-config-next": "15.1.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
     "husky": "^9.1.1",
-    "lint-staged": "^15.2.7",
+    "lint-staged": "^15.3.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
     "remark-frontmatter": "^5.0.0",