@umami/shiso 0.10.0 → 0.11.0

package/README.md

@@ -1,6 +1,54 @@
 # Shiso
 
-A content layer for [Next.js](https://nextjs.org/). 
+A content layer for [Next.js](https://nextjs.org/).
+
+[Learn more](https://shiso.umami.is)
+
+## Usage
+
+### 1. Install the package
+
+```shell
+npm install @umami/shiso
+```
+
+### 2. Create page
+
+In your `app` folder, create a folder for the content section you wish to add. In this case we are creating a section for `docs`.
+
+```text
+src
+├── app
+│   └── docs
+│       └── [[...id]]
+│           └── page.jsx
+```
+
+In the `page.jsx` file, add the following code:
+
+```javascript
+import { Shiso } from '@umami/shiso';
+import { getContent, getContentIds } from '@@umami/shiso/server';
+import config from 'path/to/shiso.config.json';
+
+export async function generateStaticParams() {
+  const ids = await getContentIds('./src/content/docs');
+
+  return ids.map((id: string) => ({
+    id: id.split('/')
+  }));
+}
+
+export default async function Page({ params }: { params: Promise<{ id: string[] }> }) {
+  const content = await getContent(await params, './src/content/docs');
+
+  return <Shiso type="docs" content={content} config={config} />;
+}
+```
+
+### 3. Write content
+
+In the folder you specified, start adding `.mdx` files.
 
 ## License
 

package/dist/index.css

@@ -34,121 +34,121 @@ pre.CodeBlock_container__YmFmN code {
 }
 
 /* virtual-css:css:0ed498f49b21d225f1b5a4e1685cf2e5 */
-.PageLinks_title__ZjdiN {
+.PageLinks_title__ZWYzZ {
   position: sticky;
   top: 0;
 }
-.PageLinks_links__ZDkyY {
+.PageLinks_links__MjU2M {
   position: sticky;
   top: 30px;
   height: max-content;
 }
-.PageLinks_links__ZDkyY a {
+.PageLinks_links__MjU2M a {
   display: block;
-  color: var(--font-muted-color);
+  color: var(--font-color-muted);
   text-wrap: nowrap;
   text-decoration: none;
 }
-.PageLinks_links__ZDkyY a:hover {
+.PageLinks_links__MjU2M a:hover {
   color: var(--primary-color);
 }
-.PageLinks_indent-1__ZDkwN {
+.PageLinks_indent-1__MmYwN {
   margin-left: 0;
 }
-.PageLinks_indent-2__ZmY5M {
+.PageLinks_indent-2__ODBkZ {
   margin-left: 0;
 }
-.PageLinks_indent-3__NjBhN {
+.PageLinks_indent-3__ZTc4Y {
   margin-left: 10px;
 }
-.PageLinks_indent-4__YzBiZ {
+.PageLinks_indent-4__ZjNlO {
   margin-left: 20px;
 }
-.PageLinks_indent-5__YmEzY {
+.PageLinks_indent-5__NmE5N {
   margin-left: 30px;
 }
-.PageLinks_indent-6__ZDUzZ {
+.PageLinks_indent-6__YWUwN {
   margin-left: 40px;
 }
-a.PageLinks_selected__MGE5N {
+a.PageLinks_selected__Y2YxY {
   color: var(--primary-color);
 }
 
 /* virtual-css:css:72ce2cfbba7b635b2ff1a5f4f5eeabf3 */
-.SideNav_nav__YzJiZ {
+.SideNav_nav__YTMyM {
   position: sticky;
   top: 30px;
   height: max-content;
 }
-.SideNav_nav__YzJiZ .SideNav_item__ZTcyN {
-  color: var(--font-muted-color);
+.SideNav_nav__YTMyM .SideNav_item__NzY4M {
+  color: var(--font-color-muted);
   padding: 0;
   border-radius: 0;
   border-left: var(--border-size-1) solid var(--border-color);
 }
-.SideNav_nav__YzJiZ .SideNav_item__ZTcyN a {
+.SideNav_nav__YTMyM .SideNav_item__NzY4M a {
   color: currentColor;
   width: 100%;
   padding: var(--padding-y) var(--padding-x);
   text-decoration: none;
 }
-.SideNav_nav__YzJiZ .SideNav_item__ZTcyN a:hover {
+.SideNav_nav__YTMyM .SideNav_item__NzY4M a:hover {
   color: var(--primary-color);
 }
-.SideNav_nav__YzJiZ .SideNav_item__ZTcyN.SideNav_selected__ZGM5M {
+.SideNav_nav__YTMyM .SideNav_item__NzY4M.SideNav_selected__OGVhN {
   color: var(--font-color);
   border-color: var(--primary-color);
 }
-.SideNav_items__ODg2Y header {
+.SideNav_items__N2Q4M header {
   padding: var(--padding-y) 0;
 }
 
 /* virtual-css:css:7938c95522eda3e1f8244364ad70b38c */
-.ContentArea_content__Y2RmY {
+.ContentArea_content__ZDM2M {
   font-size: 16px;
   margin-bottom: 60px;
 }
-.ContentArea_content__Y2RmY > p {
-  color: var(--font-muted-color);
+.ContentArea_content__ZDM2M > p {
+  color: var(--font-color-muted);
   line-height: 1.8;
 }
-.ContentArea_content__Y2RmY a {
+.ContentArea_content__ZDM2M a {
   color: var(--font-color);
   font-weight: 600;
-  text-decoration: underline var(--font-faded-color);
+  text-decoration: underline var(--font-color-muted);
   text-underline-offset: 4px;
 }
-.ContentArea_content__Y2RmY a:hover {
+.ContentArea_content__ZDM2M a:hover {
   text-decoration: underline var(--font-color);
 }
-.ContentArea_content__Y2RmY h1 {
+.ContentArea_content__ZDM2M h1 {
   font-size: var(--font-size-8);
   letter-spacing: var(--letter-spacing-1);
   margin: 0 0 var(--spacing-4) 0;
 }
-.ContentArea_content__Y2RmY h2 {
+.ContentArea_content__ZDM2M h2 {
   font-size: var(--font-size-6);
   letter-spacing: var(--letter-spacing-1);
   margin: var(--spacing-8) 0 var(--spacing-4) 0;
 }
-.ContentArea_content__Y2RmY h3 {
+.ContentArea_content__ZDM2M h3 {
   font-size: var(--font-size-5);
   letter-spacing: var(--letter-spacing-1);
   margin: var(--spacing-7) 0 var(--spacing-4) 0;
 }
-.ContentArea_content__Y2RmY ul {
+.ContentArea_content__ZDM2M ul {
   list-style: disc;
 }
-.ContentArea_content__Y2RmY ol {
+.ContentArea_content__ZDM2M ol {
   list-style: decimal;
 }
-.ContentArea_content__Y2RmY pre {
+.ContentArea_content__ZDM2M pre {
   margin: var(--spacing-5) 0;
 }
-.ContentArea_content__Y2RmY code {
+.ContentArea_content__ZDM2M code {
   font-size: 14px;
 }
-.ContentArea_content__Y2RmY code:not([class]) {
+.ContentArea_content__ZDM2M code:not([class]) {
   font-family: var(--font-family-code);
   color: var(--font-color);
   padding: var(--spacing-1);

package/dist/index.js

@@ -145,7 +145,7 @@ var import_react_zen2 = 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__ZjdiN", "links": "PageLinks_links__ZDkyY", "indent-1": "PageLinks_indent-1__ZDkwN", "indent-2": "PageLinks_indent-2__ZmY5M", "indent-3": "PageLinks_indent-3__NjBhN", "indent-4": "PageLinks_indent-4__YzBiZ", "indent-5": "PageLinks_indent-5__YmEzY", "indent-6": "PageLinks_indent-6__ZDUzZ", "selected": "PageLinks_selected__MGE5N" };
+var PageLinks_default = { "title": "PageLinks_title__ZWYzZ", "links": "PageLinks_links__MjU2M", "indent-1": "PageLinks_indent-1__MmYwN", "indent-2": "PageLinks_indent-2__ODBkZ", "indent-3": "PageLinks_indent-3__ZTc4Y", "indent-4": "PageLinks_indent-4__ZjNlO", "indent-5": "PageLinks_indent-5__NmE5N", "indent-6": "PageLinks_indent-6__YWUwN", "selected": "PageLinks_selected__Y2YxY" };
 
 // src/components/PageLinks.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -190,7 +190,7 @@ 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__YzJiZ", "item": "SideNav_item__ZTcyN", "selected": "SideNav_selected__ZGM5M", "items": "SideNav_items__ODg2Y" };
+var SideNav_default = { "nav": "SideNav_nav__YTMyM", "item": "SideNav_item__NzY4M", "selected": "SideNav_selected__OGVhN", "items": "SideNav_items__N2Q4M" };
 
 // src/components/SideNav.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -232,7 +232,7 @@ function TopNav({ tabs }) {
 var import_react_zen5 = require("@umami/react-zen");
 
 // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/ContentArea.module.css
-var ContentArea_default = { "content": "ContentArea_content__Y2RmY" };
+var ContentArea_default = { "content": "ContentArea_content__ZDM2M" };
 
 // src/components/ContentArea.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -240,7 +240,7 @@ function ContentArea({ content }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen5.Box, { flexGrow: 1, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen5.Text, { color: "primary", weight: "bold", children: content.group }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen5.Heading, { size: "8", as: "h1", children: content?.meta?.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen5.Text, { type: "muted", children: content?.meta?.description }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen5.Text, { color: "muted", children: content?.meta?.description }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen5.Box, { className: ContentArea_default.content, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Markdown, { content }) })
   ] });
 }

package/dist/index.mjs

@@ -109,7 +109,7 @@ import { Column, Text } 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__ZjdiN", "links": "PageLinks_links__ZDkyY", "indent-1": "PageLinks_indent-1__ZDkwN", "indent-2": "PageLinks_indent-2__ZmY5M", "indent-3": "PageLinks_indent-3__NjBhN", "indent-4": "PageLinks_indent-4__YzBiZ", "indent-5": "PageLinks_indent-5__YmEzY", "indent-6": "PageLinks_indent-6__ZDUzZ", "selected": "PageLinks_selected__MGE5N" };
+var PageLinks_default = { "title": "PageLinks_title__ZWYzZ", "links": "PageLinks_links__MjU2M", "indent-1": "PageLinks_indent-1__MmYwN", "indent-2": "PageLinks_indent-2__ODBkZ", "indent-3": "PageLinks_indent-3__ZTc4Y", "indent-4": "PageLinks_indent-4__ZjNlO", "indent-5": "PageLinks_indent-5__NmE5N", "indent-6": "PageLinks_indent-6__YWUwN", "selected": "PageLinks_selected__Y2YxY" };
 
 // src/components/PageLinks.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -154,7 +154,7 @@ 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__YzJiZ", "item": "SideNav_item__ZTcyN", "selected": "SideNav_selected__ZGM5M", "items": "SideNav_items__ODg2Y" };
+var SideNav_default = { "nav": "SideNav_nav__YTMyM", "item": "SideNav_item__NzY4M", "selected": "SideNav_selected__OGVhN", "items": "SideNav_items__N2Q4M" };
 
 // src/components/SideNav.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
@@ -196,7 +196,7 @@ function TopNav({ tabs }) {
 import { Heading, Box as Box2, Text as Text2 } from "@umami/react-zen";
 
 // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/ContentArea.module.css
-var ContentArea_default = { "content": "ContentArea_content__Y2RmY" };
+var ContentArea_default = { "content": "ContentArea_content__ZDM2M" };
 
 // src/components/ContentArea.tsx
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -204,7 +204,7 @@ function ContentArea({ content }) {
   return /* @__PURE__ */ jsxs5(Box2, { flexGrow: 1, children: [
     /* @__PURE__ */ jsx8(Text2, { color: "primary", weight: "bold", children: content.group }),
     /* @__PURE__ */ jsx8(Heading, { size: "8", as: "h1", children: content?.meta?.title }),
-    /* @__PURE__ */ jsx8(Text2, { type: "muted", children: content?.meta?.description }),
+    /* @__PURE__ */ jsx8(Text2, { color: "muted", children: content?.meta?.description }),
     /* @__PURE__ */ jsx8(Box2, { className: ContentArea_default.content, children: /* @__PURE__ */ jsx8(Markdown, { content }) })
   ] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/shiso",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "A content layer for Next.js",
   "homepage": "https://umami.is/shiso",
   "repository": {
@@ -49,12 +49,11 @@
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.0.0",
-    "@umami/react-zen": "^0.27.0",
+    "@umami/react-zen": "^0.28.0",
     "classnames": "^2.5.1",
     "glob": "^10.3.10",
     "gray-matter": "^4.0.3",
     "highlight.js": "^11.11.0",
-    "mdx-bundler": "^10.0.3",
     "next": "15.1.2",
     "next-mdx-remote": "^5.0.0",
     "react": "^19.0.0",

package/server/index.d.ts

@@ -1,5 +1,2 @@
-export declare const parseMdx: (file: string) => Promise<any>;
-export declare function getContentIds(folder: string): Promise<any>;
-export declare function getContent(params: {
-    id: string[];
-}, folder: string): Promise<any>;
+export declare const getContent: (name: string | undefined, folder: string) => Promise<any>;
+export declare const getContentIds: (folder: string) => Promise<any>;

package/server/index.js

@@ -34,6 +34,15 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { cache } from 'react';
 import { compile } from '@mdx-js/mdx';
 import remarkGfm from 'remark-gfm';
@@ -42,72 +51,72 @@ import matter from 'gray-matter';
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import recursive from 'recursive-readdir';
-export var parseMdx = cache(function (file) { return __awaiter(void 0, void 0, void 0, function () {
-    var postContent, _a, frontmatter, mdxContent, id, anchors, modifiedContent, code, _b;
-    return __generator(this, function (_c) {
-        switch (_c.label) {
-            case 0: return [4 /*yield*/, fs.readFile(file, 'utf8')];
-            case 1:
-                postContent = _c.sent();
-                _a = matter(postContent), frontmatter = _a.data, mdxContent = _a.content;
-                id = file.replace('.mdx', '').replace(/\\/g, '/').replace(/^\//, '');
-                anchors = [];
-                modifiedContent = mdxContent
-                    .split('\n')
-                    .map(function (line) {
-                    var match = line.match(/^(#+)\s+(.*)/);
-                    if (match) {
-                        var num = match[1], name_1 = match[2];
-                        var id_1 = name_1.toLowerCase().replace(/\s+/g, '-');
-                        var size = num.length;
-                        anchors.push({ name: name_1, id: id_1, size: size });
-                        return "<h".concat(size, " id=\"").concat(id_1, "\">").concat(name_1.replace(/\{|\}/g, ''), "</h").concat(size, ">");
-                    }
-                    return line;
-                })
-                    .join('\n');
-                _b = String;
-                return [4 /*yield*/, compile(modifiedContent, {
-                        outputFormat: 'function-body',
-                        remarkPlugins: [remarkGfm],
-                        rehypePlugins: [rehypeHighlight],
-                    })];
-            case 2:
-                code = _b.apply(void 0, [_c.sent()]);
-                return [2 /*return*/, {
-                        id: id,
-                        meta: frontmatter,
-                        content: postContent,
-                        code: code,
-                        anchors: anchors,
-                    }];
-        }
-    });
-}); });
-export function getContentIds(folder) {
-    return __awaiter(this, void 0, void 0, function () {
-        var dir, files;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+function getId(name, folder) {
+    return name.replace('.mdx', '').replace(folder, '').replace(/\\/g, '/').replace(/^\//, '');
+}
+export var getContent = cache(function () {
+    var args_1 = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args_1[_i] = arguments[_i];
+    }
+    return __awaiter(void 0, __spreadArray([], args_1, true), void 0, function (name, folder) {
+        var file, postContent, _a, frontmatter, mdxContent, id, anchors, modifiedContent, code, _b;
+        if (name === void 0) { name = 'index'; }
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
-                    dir = path.resolve(folder);
-                    return [4 /*yield*/, recursive(dir)];
+                    file = path.join(folder, "".concat(name, ".mdx"));
+                    return [4 /*yield*/, fs.readFile(file, 'utf8')];
                 case 1:
-                    files = _a.sent();
-                    return [2 /*return*/, files.map(function (file) {
-                            return file.replace('.mdx', '').replace(dir, '').replace(/\\/g, '/').replace(/^\//, '');
+                    postContent = _c.sent();
+                    _a = matter(postContent), frontmatter = _a.data, mdxContent = _a.content;
+                    id = getId(name, folder);
+                    anchors = [];
+                    modifiedContent = mdxContent
+                        .split('\n')
+                        .map(function (line) {
+                        var match = line.match(/^(#+)\s+(.*)/);
+                        if (match) {
+                            var num = match[1], name_1 = match[2];
+                            var id_1 = name_1.toLowerCase().replace(/\s+/g, '-');
+                            var size = num.length;
+                            anchors.push({ name: name_1, id: id_1, size: size });
+                            return "<h".concat(size, " id=\"").concat(id_1, "\">").concat(name_1.replace(/\{|\}/g, ''), "</h").concat(size, ">");
+                        }
+                        return line;
+                    })
+                        .join('\n');
+                    _b = String;
+                    return [4 /*yield*/, compile(modifiedContent, {
+                            outputFormat: 'function-body',
+                            remarkPlugins: [remarkGfm],
+                            rehypePlugins: [rehypeHighlight],
                         })];
+                case 2:
+                    code = _b.apply(void 0, [_c.sent()]);
+                    return [2 /*return*/, {
+                            id: id,
+                            meta: frontmatter,
+                            content: postContent,
+                            code: code,
+                            anchors: anchors,
+                        }];
             }
         });
     });
-}
-export function getContent(params, folder) {
-    return __awaiter(this, void 0, void 0, function () {
-        var _a, id, name;
-        return __generator(this, function (_b) {
-            _a = params.id, id = _a === void 0 ? [] : _a;
-            name = (id === null || id === void 0 ? void 0 : id.length) ? id.join('/') : 'index';
-            return [2 /*return*/, parseMdx(path.resolve(folder, "".concat(name, ".mdx")))];
-        });
+});
+export var getContentIds = cache(function (folder) { return __awaiter(void 0, void 0, void 0, function () {
+    var dir, files;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                dir = path.resolve(folder);
+                return [4 /*yield*/, recursive(dir)];
+            case 1:
+                files = _a.sent();
+                return [2 /*return*/, files.map(function (file) {
+                        return getId(file, dir);
+                    })];
+        }
     });
-}
+}); });