@umami/shiso 0.18.0 → 0.20.0

package/dist/index.d.ts

@@ -26,9 +26,9 @@ declare module '@umami/shiso/Docs' {
 
 declare module '@umami/shiso/Shiso' {
     import { JSX } from 'react';
-    import type { ShisoConfig } from '@/lib/types';
+    import type { ShisoConfig, ShisoContent } from '@/lib/types';
     export interface ShisoProps {
-        content: any;
+        content: ShisoContent;
         type: string;
         config: ShisoConfig;
         components?: {

package/dist/index.js

@@ -210,8 +210,8 @@ function SideNav({ tabs, navigation }) {
   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_zen3.Box, { className: SideNav_default.nav, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen3.List, { items: navigation, "aria-label": "nav", children: menu.map(({ group, pages }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen3.ListSection, { title: group, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen3.Box, { className: SideNav_default.nav, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen3.List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen3.ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         import_react_zen3.ListItem,
         {
@@ -222,7 +222,7 @@ function SideNav({ tabs, navigation }) {
         },
         index
       );
-    }) }, group);
+    }) }, section);
   }) }) });
 }
 
@@ -249,9 +249,9 @@ var ContentArea_default = { "content": "ContentArea_content__OTBiZ" };
 // src/components/ContentArea.tsx
 var import_link3 = __toESM(require("next/link"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
-function ContentArea({ group, title, description, code, next, prev }) {
+function ContentArea({ section, title, description, code, next, prev }) {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_zen5.Box, { flexGrow: 1, children: [
-    group && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen5.Text, { color: "primary", weight: "bold", children: group }),
+    section && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen5.Text, { color: "primary", weight: "bold", children: section }),
     title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen5.Heading, { size: "8", as: "h1", children: title }),
     description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen5.Text, { color: "muted", children: description }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen5.Box, { className: ContentArea_default.content, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Markdown, { code }) }),
@@ -280,31 +280,37 @@ var NavigationButton = ({
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function parseContent(content, config = {}) {
   const { tabs, navigation } = config;
-  let next, prev, group, prevKey, found = false;
-  for (const key in navigation) {
-    if (!group) {
-      group = navigation[key]?.find((section, sectionIndex) => {
-        return section.pages.find((page, pageIndex) => {
-          const found2 = content.path.replace(/(\/index)?\.mdx$/, "").endsWith(page.url);
-          if (found2) {
-            prev = section.pages[pageIndex - 1] || section[prevKey]?.pages?.[sectionIndex - 1];
-            next = section.pages[pageIndex + 1];
+  const keys = Object.keys(navigation);
+  let next, prev, section, found;
+  keys.forEach((key) => {
+    if (!found) {
+      const groups = navigation[key];
+      found = groups?.find((group, groupIndex) => {
+        return group.pages.find((page, pageIndex) => {
+          const match = content.path.replace(/(\/index)?\.mdx$/, "").endsWith(page.url);
+          if (match) {
+            const prevGroup = groups[groupIndex - 1];
+            const nextGroup = groups[groupIndex + 1];
+            prev = group.pages[pageIndex - 1] || prevGroup?.pages?.at(-1);
+            next = group.pages[pageIndex + 1] || nextGroup?.pages?.[0];
+            section = group.section;
           }
-          return found2;
+          return match;
         });
-      })?.group;
-      prevKey = key;
+      });
     }
-  }
-  return { ...content, tabs, navigation, group, next, prev };
+  });
+  return { ...content, tabs, navigation, section, next, prev };
 }
 function Docs() {
   const { content, config } = useShiso();
   if (!content) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen6.Heading, { size: "6", children: "Page not found" });
   }
-  const { tabs, navigation, group, next, prev } = parseContent(content, config?.docs);
-  console.log({ content, next, prev, group });
+  const { tabs, navigation, code, meta, section, next, prev, anchors } = parseContent(
+    content,
+    config?.docs
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_zen6.Box, { flexGrow: "1", children: [
     tabs && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TopNav, { tabs }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_zen6.Grid, { gap: "6", columns: "240px 1fr 240px", children: [
@@ -312,15 +318,15 @@ function Docs() {
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         ContentArea,
         {
-          group,
-          title: content.meta?.title,
-          description: content.meta?.description,
-          code: content.code,
+          section,
+          title: meta?.title,
+          description: meta?.description,
+          code,
           next,
           prev
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PageLinks, { items: content?.anchors, offset: 150 })
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PageLinks, { items: anchors, offset: 150 })
     ] })
   ] });
 }

package/dist/index.mjs

@@ -174,8 +174,8 @@ function SideNav({ tabs, navigation }) {
   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, { className: SideNav_default.nav, children: /* @__PURE__ */ jsx7(List, { items: navigation, "aria-label": "nav", children: menu.map(({ group, pages }) => {
-    return /* @__PURE__ */ jsx7(ListSection, { title: group, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
+  return /* @__PURE__ */ jsx7(Box, { className: SideNav_default.nav, 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,
         {
@@ -186,7 +186,7 @@ function SideNav({ tabs, navigation }) {
         },
         index
       );
-    }) }, group);
+    }) }, section);
   }) }) });
 }
 
@@ -213,9 +213,9 @@ var ContentArea_default = { "content": "ContentArea_content__OTBiZ" };
 // src/components/ContentArea.tsx
 import Link3 from "next/link";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-function ContentArea({ group, title, description, code, next, prev }) {
+function ContentArea({ section, title, description, code, next, prev }) {
   return /* @__PURE__ */ jsxs5(Box2, { flexGrow: 1, children: [
-    group && /* @__PURE__ */ jsx9(Text2, { color: "primary", weight: "bold", children: group }),
+    section && /* @__PURE__ */ jsx9(Text2, { color: "primary", weight: "bold", children: section }),
     title && /* @__PURE__ */ jsx9(Heading, { size: "8", as: "h1", children: title }),
     description && /* @__PURE__ */ jsx9(Text2, { color: "muted", children: description }),
     /* @__PURE__ */ jsx9(Box2, { className: ContentArea_default.content, children: /* @__PURE__ */ jsx9(Markdown, { code }) }),
@@ -244,31 +244,37 @@ var NavigationButton = ({
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function parseContent(content, config = {}) {
   const { tabs, navigation } = config;
-  let next, prev, group, prevKey, found = false;
-  for (const key in navigation) {
-    if (!group) {
-      group = navigation[key]?.find((section, sectionIndex) => {
-        return section.pages.find((page, pageIndex) => {
-          const found2 = content.path.replace(/(\/index)?\.mdx$/, "").endsWith(page.url);
-          if (found2) {
-            prev = section.pages[pageIndex - 1] || section[prevKey]?.pages?.[sectionIndex - 1];
-            next = section.pages[pageIndex + 1];
+  const keys = Object.keys(navigation);
+  let next, prev, section, found;
+  keys.forEach((key) => {
+    if (!found) {
+      const groups = navigation[key];
+      found = groups?.find((group, groupIndex) => {
+        return group.pages.find((page, pageIndex) => {
+          const match = content.path.replace(/(\/index)?\.mdx$/, "").endsWith(page.url);
+          if (match) {
+            const prevGroup = groups[groupIndex - 1];
+            const nextGroup = groups[groupIndex + 1];
+            prev = group.pages[pageIndex - 1] || prevGroup?.pages?.at(-1);
+            next = group.pages[pageIndex + 1] || nextGroup?.pages?.[0];
+            section = group.section;
           }
-          return found2;
+          return match;
         });
-      })?.group;
-      prevKey = key;
+      });
     }
-  }
-  return { ...content, tabs, navigation, group, next, prev };
+  });
+  return { ...content, tabs, navigation, section, next, prev };
 }
 function Docs() {
   const { content, config } = useShiso();
   if (!content) {
     return /* @__PURE__ */ jsx10(Heading2, { size: "6", children: "Page not found" });
   }
-  const { tabs, navigation, group, next, prev } = parseContent(content, config?.docs);
-  console.log({ content, next, prev, group });
+  const { tabs, navigation, code, meta, section, next, prev, anchors } = parseContent(
+    content,
+    config?.docs
+  );
   return /* @__PURE__ */ jsxs6(Box3, { flexGrow: "1", children: [
     tabs && /* @__PURE__ */ jsx10(TopNav, { tabs }),
     /* @__PURE__ */ jsxs6(Grid, { gap: "6", columns: "240px 1fr 240px", children: [
@@ -276,15 +282,15 @@ function Docs() {
       /* @__PURE__ */ jsx10(
         ContentArea,
         {
-          group,
-          title: content.meta?.title,
-          description: content.meta?.description,
-          code: content.code,
+          section,
+          title: meta?.title,
+          description: meta?.description,
+          code,
           next,
           prev
         }
       ),
-      /* @__PURE__ */ jsx10(PageLinks, { items: content?.anchors, offset: 150 })
+      /* @__PURE__ */ jsx10(PageLinks, { items: anchors, offset: 150 })
     ] })
   ] });
 }

package/package.json

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

package/server/index.d.ts

@@ -0,0 +1,45 @@
+// Generated by dts-bundle v0.7.3
+// Dependencies for this module:
+//   ../../react
+//   ../../@/lib/types
+
+declare module '@umami/shiso/server' {
+    import { ReactElement } from 'react';
+    import type { ShisoConfig } from '@/lib/types';
+    export const getContent: (file: string) => Promise<{
+        path: string;
+        meta: {
+            [key: string]: any;
+        };
+        content: string;
+        code: string;
+        anchors: {
+            name: string;
+            id: string;
+            size: number;
+        }[];
+    } | null>;
+    export function next(type: string, config: ShisoConfig): {
+        generateMetadata: ({ params }: {
+            params: Promise<{
+                slug: string[];
+            }>;
+        }) => Promise<{
+            title: {
+                absolute: string;
+                default: any;
+            };
+        }>;
+        generateStaticParams: () => Promise<any>;
+        renderPage: (render: ({ type, content, config, }: {
+            type: string;
+            content: any;
+            config: ShisoConfig;
+        }) => ReactElement) => ({ params }: {
+            params: Promise<{
+                slug: string[];
+            }>;
+        }) => Promise<ReactElement<unknown, string | import("react").JSXElementConstructor<any>>>;
+    };
+}
+

package/server/index.js

@@ -0,0 +1,159 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { cache } from 'react';
+import { compile } from '@mdx-js/mdx';
+import remarkGfm from 'remark-gfm';
+import rehypeHighlight from 'rehype-highlight';
+import matter from 'gray-matter';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import recursive from 'recursive-readdir';
+export var getContent = cache(function (file) { return __awaiter(void 0, void 0, void 0, function () {
+    var postContent, _a, frontmatter, mdxContent, anchors_1, modifiedContent, code, _b, _c;
+    return __generator(this, function (_d) {
+        switch (_d.label) {
+            case 0:
+                _d.trys.push([0, 3, , 4]);
+                return [4 /*yield*/, fs.readFile(file, 'utf8')];
+            case 1:
+                postContent = _d.sent();
+                _a = matter(postContent), frontmatter = _a.data, mdxContent = _a.content;
+                anchors_1 = [];
+                modifiedContent = mdxContent
+                    .split('\n')
+                    .map(function (line) {
+                    var match = line.match(/^(#+)\s+(.*)/);
+                    if (match) {
+                        var num = match[1], name_1 = match[2];
+                        var id = name_1.toLowerCase().replace(/\s+/g, '-');
+                        var size = num.length;
+                        anchors_1.push({ name: name_1, id: id, size: size });
+                        return "<h".concat(size, " id=\"").concat(id, "\">").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, [_d.sent()]);
+                return [2 /*return*/, {
+                        path: file,
+                        meta: frontmatter,
+                        content: postContent,
+                        code: code,
+                        anchors: anchors_1,
+                    }];
+            case 3:
+                _c = _d.sent();
+                return [2 /*return*/, null];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); });
+export function next(type, config) {
+    var dir = path.join(config.contentDir, type);
+    var _a = config[type].title, title = _a === void 0 ? 'Shiso' : _a;
+    function generateMetadata(_a) {
+        return __awaiter(this, arguments, void 0, function (_b) {
+            var name, file, content;
+            var _c, _d, _e;
+            var params = _b.params;
+            return __generator(this, function (_f) {
+                switch (_f.label) {
+                    case 0: return [4 /*yield*/, params];
+                    case 1:
+                        name = ((_d = (_c = (_f.sent())) === null || _c === void 0 ? void 0 : _c.slug) === null || _d === void 0 ? void 0 : _d.join('/')) || 'index';
+                        file = path.join(dir, "".concat(name, ".mdx"));
+                        return [4 /*yield*/, getContent(file)];
+                    case 2:
+                        content = _f.sent();
+                        return [2 /*return*/, {
+                                title: {
+                                    absolute: "".concat((_e = content === null || content === void 0 ? void 0 : content.meta) === null || _e === void 0 ? void 0 : _e.title, " \u2013 ").concat(title),
+                                    default: title,
+                                },
+                            }];
+                }
+            });
+        });
+    }
+    function generateStaticParams() {
+        return __awaiter(this, void 0, void 0, function () {
+            var files;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, recursive(dir)];
+                    case 1:
+                        files = _a.sent();
+                        return [2 /*return*/, files
+                                .map(function (file) {
+                                return file.replace('.mdx', '').replace(dir, '').replace(/\\/g, '/').replace(/^\//, '');
+                            })
+                                .map(function (id) { return ({
+                                id: id.split('/'),
+                            }); })];
+                }
+            });
+        });
+    }
+    function renderPage(render) {
+        var _this = this;
+        return function (_a) { return __awaiter(_this, [_a], void 0, function (_b) {
+            var name, file, content;
+            var _c, _d;
+            var params = _b.params;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0: return [4 /*yield*/, params];
+                    case 1:
+                        name = ((_d = (_c = (_e.sent())) === null || _c === void 0 ? void 0 : _c.slug) === null || _d === void 0 ? void 0 : _d.join('/')) || 'index';
+                        file = path.join(dir, "".concat(name, ".mdx"));
+                        return [4 /*yield*/, getContent(file)];
+                    case 2:
+                        content = _e.sent();
+                        return [2 /*return*/, render({ type: type, content: content, config: config })];
+                }
+            });
+        }); };
+    }
+    return { generateMetadata: generateMetadata, generateStaticParams: generateStaticParams, renderPage: renderPage };
+}