@umami/shiso 0.50.0 → 0.51.0

package/dist/index.js

@@ -195,9 +195,9 @@ function TopNav({ tabs }) {
   const pathname = (0, import_navigation2.usePathname)();
   const tab = tabs?.find(({ id, url }) => id !== "docs" ? pathname.startsWith(url) : false);
   const selected = tab?.id || "docs";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.Tabs, { selectedKey: selected, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.TabList, { items: tabs, children: ({ id, label, url }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.Box, { marginBottom: "6", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.Tabs, { selectedKey: selected, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.TabList, { items: tabs, children: ({ id, label, url }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.Tab, { id, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_link2.default, { href: url, children: label }) });
-  } }) });
+  } }) }) });
 }
 
 // src/components/DocContent.tsx
@@ -247,7 +247,7 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 function DocContent({ section, title, description, code, next, prev }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_zen6.Box, { flexGrow: "1", children: [
     section && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen6.Text, { color: "primary", weight: "bold", children: section }),
-    title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen6.Heading, { size: "2", as: "h1", marginY: "3", children: title }),
+    title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen6.Heading, { size: "5", as: "h1", marginY: "3", children: title }),
     description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen6.Text, { color: "muted", size: "3", children: description }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Markdown, { code }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_zen6.Row, { justifyContent: "space-between", children: [
@@ -378,7 +378,7 @@ var import_link4 = __toESM(require("next/link"));
 var import_date_fns = require("date-fns");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function Card({ title, description, date, author, url, image }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen8.Column, { borderSize: "1", borderRadius: "3", overflow: "hidden", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen8.Column, { border: true, borderRadius: "3", overflow: "hidden", children: [
     image && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Box, { height: "240px", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Image, { src: image, alt: title, objectFit: "cover" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen8.Column, { padding: "6", gap: "4", flexGrow: "1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen8.Row, { justifyContent: "space-between", children: [
@@ -389,7 +389,7 @@ function Card({ title, description, date, author, url, image }) {
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen8.Column, { gap: "4", flexGrow: "1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Heading, { size: "4", as: "header", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_link4.default, { href: url, children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Heading, { size: "3", as: "header", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_link4.default, { href: url, children: title }) }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Box, { marginY: "5", as: "p", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Text, { color: "muted", size: "3", children: description }) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Button, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_link4.default, { href: url, children: [
@@ -453,7 +453,7 @@ function Blog({ title, code, author, date, image, anchors, backUrl }) {
     xl: "block"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_zen11.Column, { gap: "8", maxWidth: "960px", style: { margin: "0 auto" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Box, { flexGrow: "1", paddingY: "6", children: title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Heading, { size: "1", as: "h1", align: "center", children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Box, { flexGrow: "1", paddingY: "6", children: title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Heading, { size: "6", as: "h1", align: "center", children: title }) }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_zen11.Row, { justifyContent: "space-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Text, { color: "muted", children: date && (0, import_date_fns2.format)(new Date(date), "PPP") }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_zen11.Text, { color: "muted", children: [

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/Blog.tsx
-import { Heading as Heading4, Box as Box6, Text as Text6, Row as Row4, Column as Column4, Image as Image2, Icon as Icon5, Icons as Icons5, Button as Button3 } from "@umami/react-zen";
+import { Heading as Heading4, Box as Box7, Text as Text6, Row as Row4, Column as Column4, Image as Image2, Icon as Icon5, Icons as Icons5, Button as Button3 } from "@umami/react-zen";
 import { format as format2 } from "date-fns";
 
 // src/components/PageLinks.tsx
@@ -86,7 +86,7 @@ function CodeBlock(props) {
 
 // src/components/Docs.tsx
 import {
-  Box as Box4,
+  Box as Box5,
   Heading as Heading2,
   Button,
   Icon as Icon3,
@@ -162,24 +162,24 @@ function SideNav({
 
 // src/components/TopNav.tsx
 import { usePathname as usePathname2 } from "next/navigation";
-import { Tabs, TabList, Tab } from "@umami/react-zen";
+import { Box as Box2, Tabs, TabList, Tab } from "@umami/react-zen";
 import Link2 from "next/link";
 import { jsx as jsx4 } 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__ */ jsx4(Tabs, { selectedKey: selected, children: /* @__PURE__ */ jsx4(TabList, { items: tabs, children: ({ id, label, url }) => {
+  return /* @__PURE__ */ jsx4(Box2, { marginBottom: "6", children: /* @__PURE__ */ jsx4(Tabs, { selectedKey: selected, children: /* @__PURE__ */ jsx4(TabList, { items: tabs, children: ({ id, label, url }) => {
     return /* @__PURE__ */ jsx4(Tab, { id, children: /* @__PURE__ */ jsx4(Link2, { href: url, children: label }) });
-  } }) });
+  } }) }) });
 }
 
 // src/components/DocContent.tsx
-import { Heading, Box as Box3, Text as Text3, Row, Icon as Icon2, Icons as Icons2 } from "@umami/react-zen";
+import { Heading, Box as Box4, Text as Text3, Row, Icon as Icon2, Icons as Icons2 } from "@umami/react-zen";
 import Link3 from "next/link";
 
 // src/components/Markdown.tsx
-import { Box as Box2 } from "@umami/react-zen";
+import { Box as Box3 } from "@umami/react-zen";
 import { runSync } from "@mdx-js/mdx";
 import { useMDXComponents } from "@mdx-js/react";
 import * as runtime from "react/jsx-runtime";
@@ -212,15 +212,15 @@ function Markdown({ code }) {
   if (!Component) {
     return null;
   }
-  return /* @__PURE__ */ jsx5(Box2, { className: Markdown_default.content, children: /* @__PURE__ */ jsx5(Component, { components }) });
+  return /* @__PURE__ */ jsx5(Box3, { className: Markdown_default.content, children: /* @__PURE__ */ jsx5(Component, { components }) });
 }
 
 // src/components/DocContent.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function DocContent({ section, title, description, code, next, prev }) {
-  return /* @__PURE__ */ jsxs5(Box3, { flexGrow: "1", children: [
+  return /* @__PURE__ */ jsxs5(Box4, { flexGrow: "1", children: [
     section && /* @__PURE__ */ jsx6(Text3, { color: "primary", weight: "bold", children: section }),
-    title && /* @__PURE__ */ jsx6(Heading, { size: "2", as: "h1", marginY: "3", children: title }),
+    title && /* @__PURE__ */ jsx6(Heading, { size: "5", as: "h1", marginY: "3", children: title }),
     description && /* @__PURE__ */ jsx6(Text3, { color: "muted", size: "3", children: description }),
     /* @__PURE__ */ jsx6(Markdown, { code }),
     /* @__PURE__ */ jsxs5(Row, { justifyContent: "space-between", children: [
@@ -235,7 +235,7 @@ var NavigationButton = ({
   isPrev
 }) => {
   if (!url || !label) {
-    return /* @__PURE__ */ jsx6(Box3, {});
+    return /* @__PURE__ */ jsx6(Box4, {});
   }
   return /* @__PURE__ */ jsx6(Link3, { href: url, children: /* @__PURE__ */ jsxs5(Row, { alignItems: "center", gap: "3", marginY: "3", children: [
     isPrev && /* @__PURE__ */ jsx6(Icon2, { size: "sm", rotate: 180, children: /* @__PURE__ */ jsx6(Icons2.Chevron, {}) }),
@@ -307,11 +307,11 @@ function Docs({ content, config }) {
     /* @__PURE__ */ jsx7(Modal, { position: "bottom", offset: "40px", children: /* @__PURE__ */ jsx7(Dialog, { variant: "sheet", children: ({ close }) => {
       return /* @__PURE__ */ jsxs6(Fragment, { children: [
         /* @__PURE__ */ jsx7(Row2, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx7(Button, { onPress: () => close(), variant: "quiet", children: /* @__PURE__ */ jsx7(Icon3, { size: "sm", children: /* @__PURE__ */ jsx7(Icons3.Close, {}) }) }) }),
-        /* @__PURE__ */ jsx7(Box4, { height: "100%", overflow: "auto", children: /* @__PURE__ */ jsx7(SideNav, { tabs, navigation }) })
+        /* @__PURE__ */ jsx7(Box5, { height: "100%", overflow: "auto", children: /* @__PURE__ */ jsx7(SideNav, { tabs, navigation }) })
       ] });
     } }) })
   ] });
-  return /* @__PURE__ */ jsxs6(Box4, { flexGrow: "1", children: [
+  return /* @__PURE__ */ jsxs6(Box5, { flexGrow: "1", children: [
     /* @__PURE__ */ jsx7(Row2, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ jsx7(MobileMenuButton, {}) }),
     tabs && /* @__PURE__ */ jsx7(TopNav, { tabs }),
     /* @__PURE__ */ jsxs6(Row2, { gap: "6", children: [
@@ -346,13 +346,13 @@ function Docs({ content, config }) {
 import { Grid } from "@umami/react-zen";
 
 // src/components/Card.tsx
-import { Box as Box5, Image, Column as Column3, Row as Row3, Heading as Heading3, Text as Text5, Button as Button2, Icon as Icon4, Icons as Icons4 } from "@umami/react-zen";
+import { Box as Box6, Image, Column as Column3, Row as Row3, Heading as Heading3, Text as Text5, Button as Button2, Icon as Icon4, Icons as Icons4 } from "@umami/react-zen";
 import Link4 from "next/link";
 import { format } from "date-fns";
 import { jsx as jsx8, 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__ */ jsx8(Box5, { height: "240px", children: /* @__PURE__ */ jsx8(Image, { src: image, alt: title, objectFit: "cover" }) }),
+  return /* @__PURE__ */ jsxs7(Column3, { border: true, borderRadius: "3", overflow: "hidden", children: [
+    image && /* @__PURE__ */ jsx8(Box6, { height: "240px", children: /* @__PURE__ */ jsx8(Image, { src: image, alt: title, objectFit: "cover" }) }),
     /* @__PURE__ */ jsxs7(Column3, { padding: "6", gap: "4", flexGrow: "1", children: [
       /* @__PURE__ */ jsxs7(Row3, { justifyContent: "space-between", children: [
         /* @__PURE__ */ jsx8(Text5, { color: "muted", children: date && format(new Date(date), "PP") }),
@@ -362,8 +362,8 @@ function Card({ title, description, date, author, url, image }) {
         ] })
       ] }),
       /* @__PURE__ */ jsxs7(Column3, { gap: "4", flexGrow: "1", children: [
-        /* @__PURE__ */ jsx8(Heading3, { size: "4", as: "header", children: /* @__PURE__ */ jsx8(Link4, { href: url, children: title }) }),
-        /* @__PURE__ */ jsx8(Box5, { marginY: "5", as: "p", children: /* @__PURE__ */ jsx8(Text5, { color: "muted", size: "3", children: description }) })
+        /* @__PURE__ */ jsx8(Heading3, { size: "3", as: "header", children: /* @__PURE__ */ jsx8(Link4, { href: url, children: title }) }),
+        /* @__PURE__ */ jsx8(Box6, { marginY: "5", as: "p", children: /* @__PURE__ */ jsx8(Text5, { color: "muted", size: "3", children: description }) })
       ] }),
       /* @__PURE__ */ jsx8(Button2, { asChild: true, children: /* @__PURE__ */ jsxs7(Link4, { href: url, children: [
         /* @__PURE__ */ jsx8(Text5, { children: "Read more" }),
@@ -426,7 +426,7 @@ function Blog({ title, code, author, date, image, anchors, backUrl }) {
     xl: "block"
   };
   return /* @__PURE__ */ jsxs8(Column4, { gap: "8", maxWidth: "960px", style: { margin: "0 auto" }, children: [
-    /* @__PURE__ */ jsx11(Box6, { flexGrow: "1", paddingY: "6", children: title && /* @__PURE__ */ jsx11(Heading4, { size: "1", as: "h1", align: "center", children: title }) }),
+    /* @__PURE__ */ jsx11(Box7, { flexGrow: "1", paddingY: "6", children: title && /* @__PURE__ */ jsx11(Heading4, { size: "6", as: "h1", align: "center", children: title }) }),
     /* @__PURE__ */ jsxs8(Row4, { justifyContent: "space-between", children: [
       /* @__PURE__ */ jsx11(Text6, { color: "muted", children: date && format2(new Date(date), "PPP") }),
       /* @__PURE__ */ jsxs8(Text6, { color: "muted", children: [
@@ -434,7 +434,7 @@ function Blog({ title, code, author, date, image, anchors, backUrl }) {
         author
       ] })
     ] }),
-    image && /* @__PURE__ */ jsx11(Box6, { height: "480px", children: /* @__PURE__ */ jsx11(Image2, { src: image, alt: title, objectFit: "cover", borderRadius: "3" }) }),
+    image && /* @__PURE__ */ jsx11(Box7, { height: "480px", children: /* @__PURE__ */ jsx11(Image2, { src: image, alt: title, objectFit: "cover", borderRadius: "3" }) }),
     /* @__PURE__ */ jsxs8(Row4, { gap: "6", children: [
       /* @__PURE__ */ jsx11(Markdown, { code }),
       /* @__PURE__ */ jsx11(PageLinks, { display: linksDisplay, items: anchors, style: { top } })

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@umami/shiso",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "description": "A content layer for Next.js",
-  "homepage": "https://umami.is/shiso",
+  "homepage": "https://shiso.umami.is",
   "repository": {
     "type": "git",
     "url": "https://github.com/umami-software/shiso.git"
@@ -19,11 +19,11 @@
     "access": "public"
   },
   "scripts": {
-    "dev": "next dev --port 3100 --turbo",
+    "dev": "next dev --port 8001 --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "icons": "svgr ./src/assets --out-dir ./src/components/icons --typescript",
+    "icons": "svgr ./src/assets --out-dir src/components/svg --typescript",
     "components": "tsc -p tsconfig.components.json",
     "server": "tsc -p tsconfig.server.json",
     "esbuild": "node esbuild.mjs",
@@ -48,7 +48,7 @@
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.0.0",
-    "@umami/react-zen": "^0.63.0",
+    "@umami/react-zen": "^0.88.0",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "glob": "^10.3.10",