@umami/shiso 0.48.0 → 0.50.0

package/README.md

@@ -20,7 +20,7 @@ In your `app` folder, create a folder for the content section you wish to add. I
 src
 ├── app
 │   └── docs
-│       └── [[...id]]
+│       └── [[...slug]]
 │           └── page.jsx
 ```
 

package/dist/index.css

@@ -38,22 +38,23 @@
 }
 
 /* virtual-css:css:2dd9c1a25bf05a14c9a7ab7ce1da6aef */
-.CodeBlock_container__NjNhN {
+.CodeBlock_container__YzkwN {
   position: relative;
-  background: var(--base-color-12);
+  background: var(--background-color);
+  border: 1px solid var(--base-color-1);
   padding: var(--spacing-5);
   border-radius: 6px;
   white-space: pre-wrap;
   word-wrap: break-word;
 }
-pre.CodeBlock_container__NjNhN code {
+pre.CodeBlock_container__YzkwN code {
   font-family: var(--font-family-code);
-  color: var(--base-color-4);
+  color: var(--font-color);
   padding: 0;
   border: 0;
   background: transparent;
 }
-.CodeBlock_button__YzMzM {
+.CodeBlock_button__ZjNjN {
   border: 0;
   position: absolute;
   right: var(--spacing-5);
@@ -61,13 +62,13 @@ pre.CodeBlock_container__NjNhN code {
   cursor: pointer;
   background: transparent;
 }
-.CodeBlock_copy__MjRhM {
+.CodeBlock_copy__Y2UyM {
   color: var(--base-color-4);
 }
-.CodeBlock_copy__MjRhM:hover {
+.CodeBlock_copy__Y2UyM:hover {
   color: var(--base-color-1);
 }
-.CodeBlock_check__YTc2M {
+.CodeBlock_check__ODM5Z {
   color: var(--success-color);
 }
 

package/dist/index.d.ts

@@ -21,8 +21,9 @@ declare module '@umami/shiso/Blog' {
         date?: string;
         image?: string;
         anchors?: any[];
+        backUrl?: string;
     }
-    export function Blog({ title, code, author, date, image, anchors }: BlogProps): import("react").JSX.Element;
+    export function Blog({ title, code, author, date, image, anchors, backUrl }: BlogProps): import("react").JSX.Element;
 }
 
 declare module '@umami/shiso/Docs' {

package/dist/index.js

@@ -100,9 +100,10 @@ var import_react2 = require("react");
 var import_react_zen2 = require("@umami/react-zen");
 
 // css-modules:E:\dev\umami-shiso\src\components\CodeBlock.module.css
-var CodeBlock_default = { "container": "CodeBlock_container__NjNhN", "button": "CodeBlock_button__YzMzM", "copy": "CodeBlock_copy__MjRhM", "check": "CodeBlock_check__YTc2M" };
+var CodeBlock_default = { "container": "CodeBlock_container__YzkwN", "button": "CodeBlock_button__ZjNjN", "copy": "CodeBlock_copy__Y2UyM", "check": "CodeBlock_check__ODM5Z" };
 
 // src/components/CodeBlock.tsx
+var import_classnames2 = __toESM(require("classnames"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function CodeBlock(props) {
   const textInput = (0, import_react2.useRef)(null);
@@ -114,7 +115,7 @@ function CodeBlock(props) {
       setCopied(false);
     }, 1e3);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("pre", { ref: textInput, className: CodeBlock_default.container, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("pre", { ref: textInput, className: (0, import_classnames2.default)(CodeBlock_default.container, "dark-theme"), children: [
     props.children,
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_zen2.Icon, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_zen2.Icons.Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_zen2.Icons.Copy, {}) }) })
   ] });
@@ -126,7 +127,7 @@ var import_react_zen7 = require("@umami/react-zen");
 // src/components/SideNav.tsx
 var import_react3 = require("react");
 var import_react_zen3 = require("@umami/react-zen");
-var import_classnames2 = __toESM(require("classnames"));
+var import_classnames3 = __toESM(require("classnames"));
 var import_navigation = require("next/navigation");
 var import_link = __toESM(require("next/link"));
 
@@ -161,7 +162,7 @@ function SideNav({
     {
       ...props,
       id: "shiso_docs_sidenav",
-      className: (0, import_classnames2.default)(SideNav_default.nav, isSticky && SideNav_default.sticky, className),
+      className: (0, import_classnames3.default)(SideNav_default.nav, isSticky && SideNav_default.sticky, className),
       style: { ...style, height },
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_zen3.Column, { "aria-label": "nav", gap: "6", children: menu.map(({ section, pages }) => {
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_zen3.Column, { title: section, className: SideNav_default.items, children: [
@@ -170,7 +171,7 @@ function SideNav({
             return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               import_link.default,
               {
-                className: (0, import_classnames2.default)(SideNav_default.item, {
+                className: (0, import_classnames3.default)(SideNav_default.item, {
                   [SideNav_default.selected]: url === pathname
                 }),
                 href: url,
@@ -401,12 +402,15 @@ function Card({ title, description, date, author, url, image }) {
 
 // src/components/Blogs.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-function Blogs({ content, config }) {
+function Blogs({ content, config, ...props }) {
   if (!Array.isArray(content)) {
     const { meta, code, anchors, slug } = content;
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Blog, { ...meta, code, anchors });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Blog, { ...props, ...meta, slug, code, anchors, backUrl: "/blog" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen9.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__ */ (0, import_jsx_runtime9.jsx)(Card, { url: `/blog/${slug}`, ...meta }, slug)) });
+  const items = content.sort(
+    (a, b) => new Date(b?.meta?.date).getTime() - new Date(a?.meta?.date).getTime()
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen9.Grid, { gap: "5", columns: "repeat(auto-fit, minmax(400px, 1fr)", children: items?.map(({ meta, slug }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Card, { url: `/blog/${slug}`, ...meta }, slug)) });
 }
 
 // src/components/Shiso.tsx
@@ -435,8 +439,9 @@ function useShiso() {
 }
 
 // src/components/Blog.tsx
+var import_link5 = __toESM(require("next/link"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function Blog({ title, code, author, date, image, anchors }) {
+function Blog({ title, code, author, date, image, anchors, backUrl }) {
   const { config } = useShiso();
   const { top } = config?.blog || {};
   const linksDisplay = {
@@ -460,7 +465,11 @@ function Blog({ title, code, author, date, image, anchors }) {
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_zen11.Row, { gap: "6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Markdown, { code }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PageLinks, { display: linksDisplay, items: anchors, style: { top } })
-    ] })
+    ] }),
+    backUrl && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Row, { justifyContent: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Button, { style: { width: "auto" }, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_link5.default, { href: backUrl, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Icon, { rotate: 180, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Icons.Arrow, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Text, { children: "Back" })
+    ] }) }) })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/Blog.tsx
-import { Heading as Heading5, Box as Box7, Text as Text6, Row as Row5, Column as Column5, Image as Image2 } from "@umami/react-zen";
+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 { format as format2 } from "date-fns";
 
 // src/components/PageLinks.tsx
@@ -63,9 +63,10 @@ import { useState as useState2, 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__NjNhN", "button": "CodeBlock_button__YzMzM", "copy": "CodeBlock_copy__MjRhM", "check": "CodeBlock_check__YTc2M" };
+var CodeBlock_default = { "container": "CodeBlock_container__YzkwN", "button": "CodeBlock_button__ZjNjN", "copy": "CodeBlock_copy__Y2UyM", "check": "CodeBlock_check__ODM5Z" };
 
 // src/components/CodeBlock.tsx
+import classNames2 from "classnames";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function CodeBlock(props) {
   const textInput = useRef(null);
@@ -77,7 +78,7 @@ function CodeBlock(props) {
       setCopied(false);
     }, 1e3);
   };
-  return /* @__PURE__ */ jsxs2("pre", { ref: textInput, className: CodeBlock_default.container, children: [
+  return /* @__PURE__ */ jsxs2("pre", { ref: textInput, className: classNames2(CodeBlock_default.container, "dark-theme"), children: [
     props.children,
     /* @__PURE__ */ jsx2("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ jsx2(Icon, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ jsx2(Icons.Check, {}) : /* @__PURE__ */ jsx2(Icons.Copy, {}) }) })
   ] });
@@ -100,7 +101,7 @@ import {
 // src/components/SideNav.tsx
 import { useEffect as useEffect2, useState as useState3 } from "react";
 import { Text as Text2, Column as Column2 } from "@umami/react-zen";
-import classNames2 from "classnames";
+import classNames3 from "classnames";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 
@@ -135,7 +136,7 @@ function SideNav({
     {
       ...props,
       id: "shiso_docs_sidenav",
-      className: classNames2(SideNav_default.nav, isSticky && SideNav_default.sticky, className),
+      className: classNames3(SideNav_default.nav, isSticky && SideNav_default.sticky, className),
       style: { ...style, height },
       children: /* @__PURE__ */ jsx3(Column2, { "aria-label": "nav", gap: "6", children: menu.map(({ section, pages }) => {
         return /* @__PURE__ */ jsxs3(Column2, { title: section, className: SideNav_default.items, children: [
@@ -144,7 +145,7 @@ function SideNav({
             return /* @__PURE__ */ jsx3(
               Link,
               {
-                className: classNames2(SideNav_default.item, {
+                className: classNames3(SideNav_default.item, {
                   [SideNav_default.selected]: url === pathname
                 }),
                 href: url,
@@ -374,12 +375,15 @@ function Card({ title, description, date, author, url, image }) {
 
 // src/components/Blogs.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
-function Blogs({ content, config }) {
+function Blogs({ content, config, ...props }) {
   if (!Array.isArray(content)) {
     const { meta, code, anchors, slug } = content;
-    return /* @__PURE__ */ jsx9(Blog, { ...meta, code, anchors });
+    return /* @__PURE__ */ jsx9(Blog, { ...props, ...meta, slug, code, anchors, backUrl: "/blog" });
   }
-  return /* @__PURE__ */ jsx9(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__ */ jsx9(Card, { url: `/blog/${slug}`, ...meta }, slug)) });
+  const items = content.sort(
+    (a, b) => new Date(b?.meta?.date).getTime() - new Date(a?.meta?.date).getTime()
+  );
+  return /* @__PURE__ */ jsx9(Grid, { gap: "5", columns: "repeat(auto-fit, minmax(400px, 1fr)", children: items?.map(({ meta, slug }) => /* @__PURE__ */ jsx9(Card, { url: `/blog/${slug}`, ...meta }, slug)) });
 }
 
 // src/components/Shiso.tsx
@@ -408,8 +412,9 @@ function useShiso() {
 }
 
 // src/components/Blog.tsx
+import Link5 from "next/link";
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-function Blog({ title, code, author, date, image, anchors }) {
+function Blog({ title, code, author, date, image, anchors, backUrl }) {
   const { config } = useShiso();
   const { top } = config?.blog || {};
   const linksDisplay = {
@@ -420,20 +425,24 @@ function Blog({ title, code, author, date, image, anchors }) {
     lg: "block",
     xl: "block"
   };
-  return /* @__PURE__ */ jsxs8(Column5, { gap: "8", maxWidth: "960px", style: { margin: "0 auto" }, children: [
-    /* @__PURE__ */ jsx11(Box7, { flexGrow: "1", paddingY: "6", children: title && /* @__PURE__ */ jsx11(Heading5, { size: "1", as: "h1", align: "center", children: title }) }),
-    /* @__PURE__ */ jsxs8(Row5, { justifyContent: "space-between", children: [
+  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__ */ jsxs8(Row4, { justifyContent: "space-between", children: [
       /* @__PURE__ */ jsx11(Text6, { color: "muted", children: date && format2(new Date(date), "PPP") }),
       /* @__PURE__ */ jsxs8(Text6, { color: "muted", children: [
         "Posted by ",
         author
       ] })
     ] }),
-    image && /* @__PURE__ */ jsx11(Box7, { height: "480px", children: /* @__PURE__ */ jsx11(Image2, { src: image, alt: title, objectFit: "cover", borderRadius: "3" }) }),
-    /* @__PURE__ */ jsxs8(Row5, { gap: "6", children: [
+    image && /* @__PURE__ */ jsx11(Box6, { 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 } })
-    ] })
+    ] }),
+    backUrl && /* @__PURE__ */ jsx11(Row4, { justifyContent: "flex-start", children: /* @__PURE__ */ jsx11(Button3, { style: { width: "auto" }, asChild: true, children: /* @__PURE__ */ jsxs8(Link5, { href: backUrl, children: [
+      /* @__PURE__ */ jsx11(Icon5, { rotate: 180, children: /* @__PURE__ */ jsx11(Icons5.Arrow, {}) }),
+      /* @__PURE__ */ jsx11(Text6, { children: "Back" })
+    ] }) }) })
   ] });
 }
 export {

package/package.json

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

package/styles.css

@@ -4363,22 +4363,23 @@ body a.Button_button__NmQ1Z {
 }
 
 /* virtual-css:css:2dd9c1a25bf05a14c9a7ab7ce1da6aef */
-.CodeBlock_container__NjNhN {
+.CodeBlock_container__YzkwN {
   position: relative;
-  background: var(--base-color-12);
+  background: var(--background-color);
+  border: 1px solid var(--base-color-1);
   padding: var(--spacing-5);
   border-radius: 6px;
   white-space: pre-wrap;
   word-wrap: break-word;
 }
-pre.CodeBlock_container__NjNhN code {
+pre.CodeBlock_container__YzkwN code {
   font-family: var(--font-family-code);
-  color: var(--base-color-4);
+  color: var(--font-color);
   padding: 0;
   border: 0;
   background: transparent;
 }
-.CodeBlock_button__YzMzM {
+.CodeBlock_button__ZjNjN {
   border: 0;
   position: absolute;
   right: var(--spacing-5);
@@ -4386,13 +4387,13 @@ pre.CodeBlock_container__NjNhN code {
   cursor: pointer;
   background: transparent;
 }
-.CodeBlock_copy__MjRhM {
+.CodeBlock_copy__Y2UyM {
   color: var(--base-color-4);
 }
-.CodeBlock_copy__MjRhM:hover {
+.CodeBlock_copy__Y2UyM:hover {
   color: var(--base-color-1);
 }
-.CodeBlock_check__YTc2M {
+.CodeBlock_check__ODM5Z {
   color: var(--success-color);
 }