@umami/shiso 0.24.0 → 0.26.0

package/dist/index.css

@@ -77,34 +77,32 @@ pre.CodeBlock_container__YmFmN code {
 }
 
 /* virtual-css:css:72ce2cfbba7b635b2ff1a5f4f5eeabf3 */
-.SideNav_nav__YTUyY {
-  height: max-content;
+.SideNav_nav__MDQ3Z {
   overflow-y: auto;
 }
-.SideNav_nav__YTUyY.SideNav_sticky__NGNiY {
+.SideNav_nav__MDQ3Z.SideNav_sticky__ZjQ5Y {
   position: sticky;
-  top: 30px;
 }
-.SideNav_nav__YTUyY .SideNav_item__ZjUyN {
+.SideNav_nav__MDQ3Z .SideNav_item__ZWU3Z {
   color: var(--font-color-muted);
   padding: 0;
   border-radius: 0;
   border-left: var(--border-size-1) solid var(--border-color);
 }
-.SideNav_nav__YTUyY .SideNav_item__ZjUyN a {
+.SideNav_nav__MDQ3Z .SideNav_item__ZWU3Z a {
   color: currentColor;
   width: 100%;
   padding: var(--padding-y) var(--padding-x);
   text-decoration: none;
 }
-.SideNav_nav__YTUyY .SideNav_item__ZjUyN a:hover {
+.SideNav_nav__MDQ3Z .SideNav_item__ZWU3Z a:hover {
   color: var(--primary-color);
 }
-.SideNav_nav__YTUyY .SideNav_item__ZjUyN.SideNav_selected__OWI5N {
+.SideNav_nav__MDQ3Z .SideNav_item__ZWU3Z.SideNav_selected__NDgxN {
   color: var(--font-color);
   border-color: var(--primary-color);
 }
-.SideNav_items__OThkZ header {
+.SideNav_items__MzBhY header {
   padding: var(--padding-y) 0;
 }
 

package/dist/index.js

@@ -182,7 +182,7 @@ function PageLinks({ items = [], className, ...props }) {
   if (!items?.length) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_zen5.Column, { ...props, gap: "3", minWidth: "240px", className: (0, import_classnames.default)(PageLinks_default.links, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen5.Box, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_zen5.Column, { gap: "3", minWidth: "240px", className: (0, import_classnames.default)(PageLinks_default.links, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen5.Text, { size: "2", weight: "bold", children: "On this page" }),
     items.map(({ name, id, size }) => {
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -197,38 +197,55 @@ function PageLinks({ items = [], className, ...props }) {
         id
       );
     })
-  ] });
+  ] }) });
 }
 
 // src/components/SideNav.tsx
+var import_react7 = require("react");
 var import_react_zen6 = require("@umami/react-zen");
 var import_classnames2 = __toESM(require("classnames"));
 var import_navigation = require("next/navigation");
 var import_link = __toESM(require("next/link"));
 
 // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/SideNav.module.css
-var SideNav_default = { "nav": "SideNav_nav__YTUyY", "sticky": "SideNav_sticky__NGNiY", "item": "SideNav_item__ZjUyN", "selected": "SideNav_selected__OWI5N", "items": "SideNav_items__OThkZ" };
+var SideNav_default = { "nav": "SideNav_nav__MDQ3Z", "sticky": "SideNav_sticky__ZjQ5Y", "item": "SideNav_item__ZWU3Z", "selected": "SideNav_selected__NDgxN", "items": "SideNav_items__MzBhY" };
 
 // src/components/SideNav.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function SideNav({ tabs, navigation, isSticky, className, ...props }) {
+function SideNav({ tabs, navigation, isSticky, 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"];
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen6.Box, { ...props, className: (0, import_classnames2.default)(SideNav_default.nav, isSticky && SideNav_default.sticky, className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen6.List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen6.ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_react_zen6.ListItem,
-        {
-          className: (0, import_classnames2.default)(SideNav_default.item, {
-            [SideNav_default.selected]: url === pathname
-          }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_link.default, { href: url, prefetch: false, children: text })
-        },
-        index
-      );
-    }) }, section);
-  }) }) });
+  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`);
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react_zen6.Box,
+    {
+      ...props,
+      id: "shiso_docs_sidenav",
+      className: (0, import_classnames2.default)(SideNav_default.nav, isSticky && SideNav_default.sticky, className),
+      style: { ...style, height },
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen6.List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen6.ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_react_zen6.ListItem,
+            {
+              className: (0, import_classnames2.default)(SideNav_default.item, {
+                [SideNav_default.selected]: url === pathname
+              }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_link.default, { href: url, prefetch: false, children: text })
+            },
+            index
+          );
+        }) }, section);
+      }) })
+    }
+  );
 }
 
 // src/components/TopNav.tsx
@@ -310,7 +327,7 @@ function parseContent(content, config = {}) {
 function Docs() {
   const { content, config } = useShiso();
   if (!content) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Heading, { size: "6", children: "Page not found" });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Heading, { children: "Page not found" });
   }
   const { tabs, navigation, code, meta, section, next, prev, anchors } = parseContent(
     content,
@@ -326,7 +343,7 @@ function Docs() {
     xl: "block"
   };
   const menuDisplay = {
-    default: "flex",
+    default: "block",
     lg: "none",
     xl: "none"
   };
@@ -339,7 +356,16 @@ function Docs() {
         gap: "6",
         columns: { xs: "1fr", sm: "1fr", md: "1fr", lg: "240px 1fr 240px", xl: "240px 1fr 240px" },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SideNav, { display: navDisplay, tabs, navigation, isSticky: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            SideNav,
+            {
+              display: navDisplay,
+              tabs,
+              navigation,
+              style: { top },
+              isSticky: true
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             ContentArea,
             {

package/dist/index.mjs

@@ -64,7 +64,7 @@ function Blog({ content }) {
 // src/components/Docs.tsx
 import {
   Grid,
-  Box as Box3,
+  Box as Box4,
   Heading as Heading2,
   Row as Row2,
   MobileMenuButton
@@ -126,7 +126,7 @@ function useShiso() {
 
 // src/components/PageLinks.tsx
 import { useEffect, useState as useState2 } from "react";
-import { Column as Column3, Text } from "@umami/react-zen";
+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
@@ -152,7 +152,7 @@ function PageLinks({ items = [], className, ...props }) {
   if (!items?.length) {
     return null;
   }
-  return /* @__PURE__ */ jsxs4(Column3, { ...props, gap: "3", minWidth: "240px", className: classNames(PageLinks_default.links, className), children: [
+  return /* @__PURE__ */ jsx6(Box, { ...props, children: /* @__PURE__ */ jsxs4(Column3, { gap: "3", minWidth: "240px", className: classNames(PageLinks_default.links, className), children: [
     /* @__PURE__ */ jsx6(Text, { size: "2", weight: "bold", children: "On this page" }),
     items.map(({ name, id, size }) => {
       return /* @__PURE__ */ jsx6(
@@ -167,38 +167,55 @@ function PageLinks({ items = [], className, ...props }) {
         id
       );
     })
-  ] });
+  ] }) });
 }
 
 // src/components/SideNav.tsx
-import { Box, List, ListItem, ListSection } from "@umami/react-zen";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { Box as Box2, List, ListItem, ListSection } from "@umami/react-zen";
 import classNames2 from "classnames";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 
 // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/SideNav.module.css
-var SideNav_default = { "nav": "SideNav_nav__YTUyY", "sticky": "SideNav_sticky__NGNiY", "item": "SideNav_item__ZjUyN", "selected": "SideNav_selected__OWI5N", "items": "SideNav_items__OThkZ" };
+var SideNav_default = { "nav": "SideNav_nav__MDQ3Z", "sticky": "SideNav_sticky__ZjQ5Y", "item": "SideNav_item__ZWU3Z", "selected": "SideNav_selected__NDgxN", "items": "SideNav_items__MzBhY" };
 
 // src/components/SideNav.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
-function SideNav({ tabs, navigation, isSticky, className, ...props }) {
+function SideNav({ tabs, navigation, isSticky, className, style, ...props }) {
   const pathname = usePathname();
   const tab = tabs?.find(({ url, id }) => id !== "docs" ? pathname.startsWith(url) : false);
   const menu = navigation[tab?.id || "docs"];
-  return /* @__PURE__ */ jsx7(Box, { ...props, className: classNames2(SideNav_default.nav, isSticky && SideNav_default.sticky, className), 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(
-        ListItem,
-        {
-          className: classNames2(SideNav_default.item, {
-            [SideNav_default.selected]: url === pathname
-          }),
-          children: /* @__PURE__ */ jsx7(Link, { href: url, prefetch: false, children: text })
-        },
-        index
-      );
-    }) }, section);
-  }) }) });
+  const [height, setHeight] = useState3();
+  useEffect2(() => {
+    const rect = document.getElementById("shiso_docs_sidenav")?.getBoundingClientRect();
+    if (rect) {
+      setHeight(`${window.innerHeight - rect.top - 10}px`);
+    }
+  }, []);
+  return /* @__PURE__ */ jsx7(
+    Box2,
+    {
+      ...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(
+            ListItem,
+            {
+              className: classNames2(SideNav_default.item, {
+                [SideNav_default.selected]: url === pathname
+              }),
+              children: /* @__PURE__ */ jsx7(Link, { href: url, prefetch: false, children: text })
+            },
+            index
+          );
+        }) }, section);
+      }) })
+    }
+  );
 }
 
 // src/components/TopNav.tsx
@@ -216,7 +233,7 @@ function TopNav({ tabs }) {
 }
 
 // src/components/ContentArea.tsx
-import { Heading, Box as Box2, Text as Text2, Row, Icon as Icon2, Icons as Icons2 } from "@umami/react-zen";
+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" };
@@ -225,11 +242,11 @@ var ContentArea_default = { "content": "ContentArea_content__NDVhM" };
 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(Box2, { flexGrow: 1, children: [
+  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 }),
-    /* @__PURE__ */ jsx9(Box2, { className: ContentArea_default.content, children: /* @__PURE__ */ jsx9(Markdown, { code }) }),
+    /* @__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 })
@@ -242,7 +259,7 @@ var NavigationButton = ({
   isPrev
 }) => {
   if (!url || !label) {
-    return /* @__PURE__ */ jsx9(Box2, {});
+    return /* @__PURE__ */ jsx9(Box3, {});
   }
   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, {}) }),
@@ -280,7 +297,7 @@ function parseContent(content, config = {}) {
 function Docs() {
   const { content, config } = useShiso();
   if (!content) {
-    return /* @__PURE__ */ jsx10(Heading2, { size: "6", children: "Page not found" });
+    return /* @__PURE__ */ jsx10(Heading2, { children: "Page not found" });
   }
   const { tabs, navigation, code, meta, section, next, prev, anchors } = parseContent(
     content,
@@ -296,11 +313,11 @@ function Docs() {
     xl: "block"
   };
   const menuDisplay = {
-    default: "flex",
+    default: "block",
     lg: "none",
     xl: "none"
   };
-  return /* @__PURE__ */ jsxs6(Box3, { flexGrow: "1", children: [
+  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 }) }) }),
     tabs && /* @__PURE__ */ jsx10(TopNav, { tabs }),
     /* @__PURE__ */ jsxs6(
@@ -309,7 +326,16 @@ function Docs() {
         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, isSticky: true }),
+          /* @__PURE__ */ jsx10(
+            SideNav,
+            {
+              display: navDisplay,
+              tabs,
+              navigation,
+              style: { top },
+              isSticky: true
+            }
+          ),
           /* @__PURE__ */ jsx10(
             ContentArea,
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/shiso",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "description": "A content layer for Next.js",
   "homepage": "https://umami.is/shiso",
   "repository": {