@umami/shiso 0.7.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.css +40 -40
  2. package/dist/index.d.ts +54 -54
  3. package/dist/index.js +121 -78
  4. package/dist/index.mjs +114 -71
  5. package/package.json +6 -4
  6. package/server/index.d.ts +1 -2
  7. package/server/index.js +41 -70
package/dist/index.css CHANGED
@@ -1,6 +1,6 @@
1
- /* virtual-css:css:32abd77818c5161a011a843897f34903 */
2
- /* virtual-css:css:2dd9c1a25bf05a14c9a7ab7ce1da6aef */
3
- .CodeBlock_container__ZTkxY {
1
+ /* virtual-css:css:0292bafad22c4cab436655610801c589 */
2
+ /* virtual-css:css:85717ba9ea360d365e3f29144820b208 */
3
+ .CodeBlock_container__YmFmN {
4
4
  position: relative;
5
5
  background: var(--base-color-900);
6
6
  padding: var(--spacing-5);
@@ -8,14 +8,14 @@
8
8
  white-space: pre-wrap;
9
9
  word-wrap: break-word;
10
10
  }
11
- pre.CodeBlock_container__ZTkxY code {
11
+ pre.CodeBlock_container__YmFmN code {
12
12
  font-family: var(--font-family-code);
13
13
  color: var(--base-color-300);
14
14
  padding: 0;
15
15
  border: 0;
16
16
  background: transparent;
17
17
  }
18
- .CodeBlock_button__MmZkO {
18
+ .CodeBlock_button__NDg0Y {
19
19
  border: 0;
20
20
  position: absolute;
21
21
  right: var(--spacing-5);
@@ -23,132 +23,132 @@ pre.CodeBlock_container__ZTkxY code {
23
23
  cursor: pointer;
24
24
  background: transparent;
25
25
  }
26
- .CodeBlock_copy__M2I0N {
26
+ .CodeBlock_copy__MmQzM {
27
27
  color: var(--base-color-300);
28
28
  }
29
- .CodeBlock_copy__M2I0N:hover {
29
+ .CodeBlock_copy__MmQzM:hover {
30
30
  color: var(--base-color-50);
31
31
  }
32
- .CodeBlock_check__MjkzY {
32
+ .CodeBlock_check__YmI0Z {
33
33
  color: var(--success-color);
34
34
  }
35
35
 
36
- /* virtual-css:css:e01d9571088b882a03b91eb2755da783 */
37
- .PageLinks_title__NTM5N {
36
+ /* virtual-css:css:0ed498f49b21d225f1b5a4e1685cf2e5 */
37
+ .PageLinks_title__ZjdiN {
38
38
  position: sticky;
39
39
  top: 0;
40
40
  }
41
- .PageLinks_links__ODg1Z {
41
+ .PageLinks_links__ZDkyY {
42
42
  position: sticky;
43
43
  top: 30px;
44
44
  height: max-content;
45
45
  }
46
- .PageLinks_links__ODg1Z a {
46
+ .PageLinks_links__ZDkyY a {
47
47
  display: block;
48
48
  color: var(--font-muted-color);
49
49
  text-wrap: nowrap;
50
50
  text-decoration: none;
51
51
  }
52
- .PageLinks_links__ODg1Z a:hover {
52
+ .PageLinks_links__ZDkyY a:hover {
53
53
  color: var(--primary-color);
54
54
  }
55
- .PageLinks_indent-1__OGVmN {
55
+ .PageLinks_indent-1__ZDkwN {
56
56
  margin-left: 0;
57
57
  }
58
- .PageLinks_indent-2__YTFmN {
58
+ .PageLinks_indent-2__ZmY5M {
59
59
  margin-left: 0;
60
60
  }
61
- .PageLinks_indent-3__OTI0Y {
61
+ .PageLinks_indent-3__NjBhN {
62
62
  margin-left: 10px;
63
63
  }
64
- .PageLinks_indent-4__NzhkM {
64
+ .PageLinks_indent-4__YzBiZ {
65
65
  margin-left: 20px;
66
66
  }
67
- .PageLinks_indent-5__ZGViZ {
67
+ .PageLinks_indent-5__YmEzY {
68
68
  margin-left: 30px;
69
69
  }
70
- .PageLinks_indent-6__YjVkN {
70
+ .PageLinks_indent-6__ZDUzZ {
71
71
  margin-left: 40px;
72
72
  }
73
- a.PageLinks_selected__YzEyZ {
73
+ a.PageLinks_selected__MGE5N {
74
74
  color: var(--primary-color);
75
75
  }
76
76
 
77
- /* virtual-css:css:62c31e195181c97259fa56b13d20ea6d */
78
- .SideNav_nav__NmU4M {
77
+ /* virtual-css:css:72ce2cfbba7b635b2ff1a5f4f5eeabf3 */
78
+ .SideNav_nav__YzJiZ {
79
79
  position: sticky;
80
80
  top: 30px;
81
81
  height: max-content;
82
82
  }
83
- .SideNav_item__MGIzZ {
83
+ .SideNav_nav__YzJiZ .SideNav_item__ZTcyN {
84
84
  color: var(--font-muted-color);
85
85
  padding: 0;
86
86
  border-radius: 0;
87
87
  border-left: var(--border-size-1) solid var(--border-color);
88
88
  }
89
- .SideNav_item__MGIzZ a {
89
+ .SideNav_nav__YzJiZ .SideNav_item__ZTcyN a {
90
90
  color: currentColor;
91
91
  width: 100%;
92
92
  padding: var(--padding-y) var(--padding-x);
93
93
  text-decoration: none;
94
94
  }
95
- .SideNav_item__MGIzZ a:hover {
95
+ .SideNav_nav__YzJiZ .SideNav_item__ZTcyN a:hover {
96
96
  color: var(--primary-color);
97
97
  }
98
- .SideNav_item__MGIzZ.SideNav_selected__NDEwO {
98
+ .SideNav_nav__YzJiZ .SideNav_item__ZTcyN.SideNav_selected__ZGM5M {
99
99
  color: var(--font-color);
100
100
  border-color: var(--primary-color);
101
101
  }
102
- .SideNav_items__ZGVhM header {
102
+ .SideNav_items__ODg2Y header {
103
103
  padding: var(--padding-y) 0;
104
104
  }
105
105
 
106
- /* virtual-css:css:71a58b2dae0a60276640236977b24d42 */
107
- .ContentArea_content__MWQ1Z {
106
+ /* virtual-css:css:7938c95522eda3e1f8244364ad70b38c */
107
+ .ContentArea_content__Y2RmY {
108
108
  font-size: 16px;
109
109
  margin-bottom: 60px;
110
110
  }
111
- .ContentArea_content__MWQ1Z > p {
111
+ .ContentArea_content__Y2RmY > p {
112
112
  color: var(--font-muted-color);
113
113
  line-height: 1.8;
114
114
  }
115
- .ContentArea_content__MWQ1Z a {
115
+ .ContentArea_content__Y2RmY a {
116
116
  color: var(--font-color);
117
117
  font-weight: 600;
118
118
  text-decoration: underline var(--font-faded-color);
119
119
  text-underline-offset: 4px;
120
120
  }
121
- .ContentArea_content__MWQ1Z a:hover {
121
+ .ContentArea_content__Y2RmY a:hover {
122
122
  text-decoration: underline var(--font-color);
123
123
  }
124
- .ContentArea_content__MWQ1Z h1 {
124
+ .ContentArea_content__Y2RmY h1 {
125
125
  font-size: var(--font-size-8);
126
126
  letter-spacing: var(--letter-spacing-1);
127
127
  margin: 0 0 var(--spacing-4) 0;
128
128
  }
129
- .ContentArea_content__MWQ1Z h2 {
129
+ .ContentArea_content__Y2RmY h2 {
130
130
  font-size: var(--font-size-6);
131
131
  letter-spacing: var(--letter-spacing-1);
132
132
  margin: var(--spacing-8) 0 var(--spacing-4) 0;
133
133
  }
134
- .ContentArea_content__MWQ1Z h3 {
134
+ .ContentArea_content__Y2RmY h3 {
135
135
  font-size: var(--font-size-5);
136
136
  letter-spacing: var(--letter-spacing-1);
137
137
  margin: var(--spacing-7) 0 var(--spacing-4) 0;
138
138
  }
139
- .ContentArea_content__MWQ1Z ul {
139
+ .ContentArea_content__Y2RmY ul {
140
140
  list-style: disc;
141
141
  }
142
- .ContentArea_content__MWQ1Z ol {
142
+ .ContentArea_content__Y2RmY ol {
143
143
  list-style: decimal;
144
144
  }
145
- .ContentArea_content__MWQ1Z pre {
145
+ .ContentArea_content__Y2RmY pre {
146
146
  margin: var(--spacing-5) 0;
147
147
  }
148
- .ContentArea_content__MWQ1Z code {
148
+ .ContentArea_content__Y2RmY code {
149
149
  font-size: 14px;
150
150
  }
151
- .ContentArea_content__MWQ1Z code:not([class]) {
151
+ .ContentArea_content__Y2RmY code:not([class]) {
152
152
  font-family: var(--font-family-code);
153
153
  color: var(--font-color);
154
154
  padding: var(--spacing-1);
package/dist/index.d.ts CHANGED
@@ -1,54 +1,54 @@
1
- // Generated by dts-bundle v0.7.3
2
- // Dependencies for this module:
3
- // ../../react
4
-
5
- declare module '@umami/shiso' {
6
- import { Blog } from '@umami/shiso/Blog';
7
- import { Docs } from '@umami/shiso/Docs';
8
- export { Blog, Docs };
9
- }
10
-
11
- declare module '@umami/shiso/Blog' {
12
- export interface BlogProps {
13
- content: any;
14
- config: any;
15
- }
16
- export function Blog({ content }: BlogProps): import("react").JSX.Element;
17
- }
18
-
19
- declare module '@umami/shiso/Docs' {
20
- import { ShisoConfig } from '@umami/shiso/Shiso';
21
- export interface DocsProps {
22
- config: ShisoConfig;
23
- content: any;
24
- components?: {
25
- [key: string]: any;
26
- };
27
- }
28
- export function Docs({ content, config, components }: DocsProps): import("react").JSX.Element;
29
- }
30
-
31
- declare module '@umami/shiso/Shiso' {
32
- import { ReactNode } from 'react';
33
- export interface ShisoConfig {
34
- contentDir: string;
35
- docs?: {
36
- [key: string]: any;
37
- };
38
- blog?: {
39
- [key: string]: any;
40
- };
41
- }
42
- export interface ShisoProps {
43
- content: string;
44
- type: string;
45
- config: ShisoConfig;
46
- components?: {
47
- [key: string]: any;
48
- };
49
- children: ReactNode;
50
- }
51
- export const ShisoContext: import("react").Context<any>;
52
- export function Shiso({ content, type, config, components, children }: ShisoProps): import("react").JSX.Element;
53
- }
54
-
1
+ // Generated by dts-bundle v0.7.3
2
+ // Dependencies for this module:
3
+ // ../../react
4
+
5
+ declare module '@umami/shiso' {
6
+ import '@umami/react-zen/dist/styles.css';
7
+ import { Blog } from '@umami/shiso/Blog';
8
+ import { Docs } from '@umami/shiso/Docs';
9
+ import { Shiso } from '@umami/shiso/Shiso';
10
+ export { Blog, Docs, Shiso };
11
+ }
12
+
13
+ declare module '@umami/shiso/Blog' {
14
+ export interface BlogProps {
15
+ content: any;
16
+ config: any;
17
+ }
18
+ export function Blog({ content }: BlogProps): import("react").JSX.Element;
19
+ }
20
+
21
+ declare module '@umami/shiso/Docs' {
22
+ export function Docs(): import("react").JSX.Element;
23
+ }
24
+
25
+ declare module '@umami/shiso/Shiso' {
26
+ import { JSX } from 'react';
27
+ export interface ShisoConfig {
28
+ contentDir: string;
29
+ docs?: {
30
+ [key: string]: any;
31
+ };
32
+ blog?: {
33
+ [key: string]: any;
34
+ };
35
+ }
36
+ export interface ShisoProps {
37
+ content: any;
38
+ type: string;
39
+ config: ShisoConfig;
40
+ components?: {
41
+ [key: string]: any;
42
+ };
43
+ templates?: {
44
+ [key: string]: any;
45
+ };
46
+ }
47
+ export type ShisoTemplateComponent = ({ content, config, }: {
48
+ content: any;
49
+ config: ShisoConfig;
50
+ }) => JSX.Element;
51
+ export const ShisoContext: import("react").Context<any>;
52
+ export function Shiso({ content, type, config, components, templates }: ShisoProps): JSX.Element;
53
+ }
54
+
package/dist/index.js CHANGED
@@ -32,28 +32,79 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
32
32
  var index_exports = {};
33
33
  __export(index_exports, {
34
34
  Blog: () => Blog,
35
- Docs: () => Docs
35
+ Docs: () => Docs,
36
+ Shiso: () => Shiso
36
37
  });
37
38
  module.exports = __toCommonJS(index_exports);
39
+ var import_styles = require("@umami/react-zen/dist/styles.css");
38
40
 
39
- // css-modules:E:\dev\umami-shiso\src\components\Blog.module.css
41
+ // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/Blog.module.css
40
42
  var Blog_default = {};
41
43
 
42
44
  // src/components/Markdown.tsx
43
- var import_next_mdx_remote = require("next-mdx-remote");
45
+ var import_mdx = require("@mdx-js/mdx");
46
+ var import_react = require("@mdx-js/react");
47
+ var runtime = __toESM(require("react/jsx-runtime"));
48
+ var import_jsx_runtime = require("react/jsx-runtime");
49
+ var import_meta = {};
50
+ var parseMdx = (code) => {
51
+ try {
52
+ const result = (0, import_mdx.runSync)(code, {
53
+ ...runtime,
54
+ baseUrl: import_meta.url
55
+ });
56
+ return { Component: result.default };
57
+ } catch (err) {
58
+ return { error: err.message };
59
+ }
60
+ };
61
+ function Markdown({ content }) {
62
+ const components = (0, import_react.useMDXComponents)();
63
+ const { Component, error } = parseMdx(content.code);
64
+ if (error) {
65
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h1", { children: [
66
+ "Error rendering MDX: ",
67
+ error
68
+ ] });
69
+ }
70
+ if (!Component) {
71
+ return null;
72
+ }
73
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { components });
74
+ }
75
+
76
+ // src/components/Blog.tsx
77
+ var import_jsx_runtime2 = require("react/jsx-runtime");
78
+ function Blog({ content }) {
79
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: Blog_default.blog, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: Blog_default.main, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: Blog_default.content, children: [
80
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { children: content?.meta?.title }),
81
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: Blog_default.description, children: content?.meta?.description }),
82
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Markdown, { content })
83
+ ] }) }) });
84
+ }
85
+
86
+ // src/components/Docs.tsx
87
+ var import_react_zen6 = require("@umami/react-zen");
88
+
89
+ // src/components/hooks/useShiso.ts
90
+ var import_react5 = require("react");
91
+
92
+ // src/components/Shiso.tsx
93
+ var import_react3 = require("react");
94
+ var import_react4 = require("@mdx-js/react");
44
95
 
45
96
  // src/components/CodeBlock.tsx
46
- var import_react = require("react");
97
+ var import_react2 = require("react");
47
98
  var import_react_zen = require("@umami/react-zen");
48
99
 
49
- // css-modules:E:\dev\umami-shiso\src\components\CodeBlock.module.css
50
- var CodeBlock_default = { "container": "CodeBlock_container__ZTkxY", "button": "CodeBlock_button__MmZkO", "copy": "CodeBlock_copy__M2I0N", "check": "CodeBlock_check__MjkzY" };
100
+ // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/CodeBlock.module.css
101
+ var CodeBlock_default = { "container": "CodeBlock_container__YmFmN", "button": "CodeBlock_button__NDg0Y", "copy": "CodeBlock_copy__MmQzM", "check": "CodeBlock_check__YmI0Z" };
51
102
 
52
103
  // src/components/CodeBlock.tsx
53
- var import_jsx_runtime = require("react/jsx-runtime");
104
+ var import_jsx_runtime3 = require("react/jsx-runtime");
54
105
  function CodeBlock(props) {
55
- const textInput = (0, import_react.useRef)(null);
56
- const [copied, setCopied] = (0, import_react.useState)(false);
106
+ const textInput = (0, import_react2.useRef)(null);
107
+ const [copied, setCopied] = (0, import_react2.useState)(false);
57
108
  const handleCopy = () => {
58
109
  setCopied(true);
59
110
  navigator?.clipboard?.writeText(textInput?.current?.textContent);
@@ -61,56 +112,46 @@ function CodeBlock(props) {
61
112
  setCopied(false);
62
113
  }, 1e3);
63
114
  };
64
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("pre", { ref: textInput, className: CodeBlock_default.container, children: [
115
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("pre", { ref: textInput, className: CodeBlock_default.container, children: [
65
116
  props.children,
66
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_zen.Icon, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_zen.Icons.Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_zen.Icons.Copy, {}) }) })
117
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_zen.Icon, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_zen.Icons.Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_zen.Icons.Copy, {}) }) })
67
118
  ] });
68
119
  }
69
120
 
70
- // src/components/Markdown.tsx
71
- var import_jsx_runtime2 = require("react/jsx-runtime");
72
- function Markdown({
73
- content,
74
- components,
75
- scope
76
- }) {
77
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
78
- import_next_mdx_remote.MDXRemote,
79
- {
80
- compiledSource: content.code,
81
- frontmatter: content.frontmatter,
82
- scope,
83
- components: { ...components, pre: CodeBlock }
84
- }
85
- );
121
+ // src/components/Shiso.tsx
122
+ var import_jsx_runtime4 = require("react/jsx-runtime");
123
+ var defaultTemplates = {
124
+ docs: Docs,
125
+ blog: Blog
126
+ };
127
+ var ShisoContext = (0, import_react3.createContext)(null);
128
+ function Shiso({ content, type, config, components, templates }) {
129
+ const Component = { ...defaultTemplates, ...templates }[type];
130
+ if (!Component) {
131
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h1", { children: `Component not found for type: ${type}` });
132
+ }
133
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ShisoContext.Provider, { value: { content, type, config }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react4.MDXProvider, { components: { ...components, pre: CodeBlock }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { content, config }) }) });
86
134
  }
87
135
 
88
- // src/components/Blog.tsx
89
- var import_jsx_runtime3 = require("react/jsx-runtime");
90
- function Blog({ content }) {
91
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: Blog_default.blog, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: Blog_default.main, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: Blog_default.content, children: [
92
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { children: content?.meta?.title }),
93
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: Blog_default.description, children: content?.meta?.description }),
94
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Markdown, { content })
95
- ] }) }) });
136
+ // src/components/hooks/useShiso.ts
137
+ function useShiso() {
138
+ const { content, config } = (0, import_react5.useContext)(ShisoContext);
139
+ return { content, config };
96
140
  }
97
141
 
98
- // src/components/Docs.tsx
99
- var import_react_zen6 = require("@umami/react-zen");
100
-
101
142
  // src/components/PageLinks.tsx
102
- var import_react2 = require("react");
143
+ var import_react6 = require("react");
103
144
  var import_react_zen2 = require("@umami/react-zen");
104
145
  var import_classnames = __toESM(require("classnames"));
105
146
 
106
- // css-modules:E:\dev\umami-shiso\src\components\PageLinks.module.css
107
- var PageLinks_default = { "title": "PageLinks_title__NTM5N", "links": "PageLinks_links__ODg1Z", "indent-1": "PageLinks_indent-1__OGVmN", "indent-2": "PageLinks_indent-2__YTFmN", "indent-3": "PageLinks_indent-3__OTI0Y", "indent-4": "PageLinks_indent-4__NzhkM", "indent-5": "PageLinks_indent-5__ZGViZ", "indent-6": "PageLinks_indent-6__YjVkN", "selected": "PageLinks_selected__YzEyZ" };
147
+ // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/PageLinks.module.css
148
+ 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" };
108
149
 
109
150
  // src/components/PageLinks.tsx
110
- var import_jsx_runtime4 = require("react/jsx-runtime");
151
+ var import_jsx_runtime5 = require("react/jsx-runtime");
111
152
  function PageLinks({ items, offset = 0 }) {
112
- const [hash, setHash] = (0, import_react2.useState)(items?.[0]?.id);
113
- (0, import_react2.useEffect)(() => {
153
+ const [hash, setHash] = (0, import_react6.useState)(items?.[0]?.id);
154
+ (0, import_react6.useEffect)(() => {
114
155
  const callback = () => {
115
156
  const x = [...items].reverse().find(({ id }) => {
116
157
  const rect = document.getElementById(id)?.getBoundingClientRect();
@@ -126,10 +167,10 @@ function PageLinks({ items, offset = 0 }) {
126
167
  if (!items?.length) {
127
168
  return null;
128
169
  }
129
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_zen2.Column, { gap: "3", minWidth: "240px", className: PageLinks_default.links, children: [
130
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen2.Text, { size: "2", weight: "bold", children: "On this page" }),
170
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_zen2.Column, { gap: "3", minWidth: "240px", className: PageLinks_default.links, children: [
171
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_zen2.Text, { size: "2", weight: "bold", children: "On this page" }),
131
172
  items.map(({ name, id, size }) => {
132
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
173
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
133
174
  "a",
134
175
  {
135
176
  href: `#${id}`,
@@ -148,24 +189,24 @@ var import_classnames2 = __toESM(require("classnames"));
148
189
  var import_navigation = require("next/navigation");
149
190
  var import_link = __toESM(require("next/link"));
150
191
 
151
- // css-modules:E:\dev\umami-shiso\src\components\SideNav.module.css
152
- var SideNav_default = { "nav": "SideNav_nav__NmU4M", "item": "SideNav_item__MGIzZ", "selected": "SideNav_selected__NDEwO", "items": "SideNav_items__ZGVhM" };
192
+ // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/SideNav.module.css
193
+ var SideNav_default = { "nav": "SideNav_nav__YzJiZ", "item": "SideNav_item__ZTcyN", "selected": "SideNav_selected__ZGM5M", "items": "SideNav_items__ODg2Y" };
153
194
 
154
195
  // src/components/SideNav.tsx
155
- var import_jsx_runtime5 = require("react/jsx-runtime");
196
+ var import_jsx_runtime6 = require("react/jsx-runtime");
156
197
  function SideNav({ tabs, navigation }) {
157
198
  const pathname = (0, import_navigation.usePathname)();
158
- const tab = tabs.find(({ url, id }) => id !== "docs" ? pathname.startsWith(url) : false);
199
+ const tab = tabs?.find(({ url, id }) => id !== "docs" ? pathname.startsWith(url) : false);
159
200
  const menu = navigation[tab?.id || "docs"];
160
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_zen3.Box, { className: SideNav_default.nav, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_zen3.List, { items: navigation, children: menu.map(({ group, pages }) => {
161
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_zen3.ListSection, { title: group, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
162
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
201
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen3.Box, { className: SideNav_default.nav, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen3.List, { items: navigation, "aria-label": "nav", children: menu.map(({ group, pages }) => {
202
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen3.ListSection, { title: group, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
203
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
163
204
  import_react_zen3.ListItem,
164
205
  {
165
206
  className: (0, import_classnames2.default)(SideNav_default.item, {
166
207
  [SideNav_default.selected]: url === pathname
167
208
  }),
168
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_link.default, { href: url, prefetch: false, children: text })
209
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_link.default, { href: url, prefetch: false, children: text })
169
210
  },
170
211
  index
171
212
  );
@@ -177,38 +218,39 @@ function SideNav({ tabs, navigation }) {
177
218
  var import_link2 = __toESM(require("next/link"));
178
219
  var import_navigation2 = require("next/navigation");
179
220
  var import_react_zen4 = require("@umami/react-zen");
180
- var import_jsx_runtime6 = require("react/jsx-runtime");
221
+ var import_jsx_runtime7 = require("react/jsx-runtime");
181
222
  function TopNav({ tabs }) {
182
223
  const pathname = (0, import_navigation2.usePathname)();
183
- const tab = tabs.find(({ id, url }) => id !== "docs" ? pathname.startsWith(url) : false);
224
+ const tab = tabs?.find(({ id, url }) => id !== "docs" ? pathname.startsWith(url) : false);
184
225
  const selected = tab?.id || "docs";
185
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen4.Tabs, { selectedKey: selected, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen4.TabList, { items: tabs, children: ({ id, label, url }) => {
186
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen4.Tab, { id, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_link2.default, { href: url, children: label }) });
226
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen4.Tabs, { selectedKey: selected, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen4.TabList, { items: tabs, children: ({ id, label, url }) => {
227
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen4.Tab, { id, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_link2.default, { href: url, children: label }) });
187
228
  } }) });
188
229
  }
189
230
 
190
231
  // src/components/ContentArea.tsx
191
232
  var import_react_zen5 = require("@umami/react-zen");
192
233
 
193
- // css-modules:E:\dev\umami-shiso\src\components\ContentArea.module.css
194
- var ContentArea_default = { "content": "ContentArea_content__MWQ1Z" };
234
+ // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/ContentArea.module.css
235
+ var ContentArea_default = { "content": "ContentArea_content__Y2RmY" };
195
236
 
196
237
  // src/components/ContentArea.tsx
197
- var import_jsx_runtime7 = require("react/jsx-runtime");
198
- function ContentArea({ content, components }) {
199
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_zen5.Box, { flexGrow: 1, children: [
200
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen5.Text, { color: "primary", weight: "bold", children: content.group }),
201
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen5.Heading, { size: "8", as: "h1", children: content.meta.title }),
202
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen5.Text, { type: "muted", children: content.meta.description }),
203
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen5.Box, { className: ContentArea_default.content, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Markdown, { content, components }) })
238
+ var import_jsx_runtime8 = require("react/jsx-runtime");
239
+ function ContentArea({ content }) {
240
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen5.Box, { flexGrow: 1, children: [
241
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen5.Text, { color: "primary", weight: "bold", children: content.group }),
242
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen5.Heading, { size: "8", as: "h1", children: content?.meta?.title }),
243
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen5.Text, { type: "muted", children: content?.meta?.description }),
244
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen5.Box, { className: ContentArea_default.content, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Markdown, { content }) })
204
245
  ] });
205
246
  }
206
247
 
207
248
  // src/components/Docs.tsx
208
- var import_jsx_runtime8 = require("react/jsx-runtime");
209
- function Docs({ content, config, components }) {
249
+ var import_jsx_runtime9 = require("react/jsx-runtime");
250
+ function Docs() {
251
+ const { content, config } = useShiso();
210
252
  if (!content) {
211
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen6.Heading, { size: "6", children: "Page not found" });
253
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen6.Heading, { size: "6", children: "Page not found" });
212
254
  }
213
255
  const { tabs, navigation } = config?.docs || {};
214
256
  content.group = Object.keys(navigation).reduce((name, key) => {
@@ -221,17 +263,18 @@ function Docs({ content, config, components }) {
221
263
  }
222
264
  return name;
223
265
  }, null);
224
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen6.Box, { flexGrow: "1", children: [
225
- tabs && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TopNav, { tabs }),
226
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen6.Grid, { gap: "6", columns: "240px 1fr 240px", children: [
227
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SideNav, { tabs, navigation }),
228
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentArea, { content, components }),
229
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PageLinks, { items: content?.anchors, offset: 150 })
266
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_zen6.Box, { flexGrow: "1", children: [
267
+ tabs && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TopNav, { tabs }),
268
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_zen6.Grid, { gap: "6", columns: "240px 1fr 240px", children: [
269
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SideNav, { tabs, navigation }),
270
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ContentArea, { content }),
271
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PageLinks, { items: content?.anchors, offset: 150 })
230
272
  ] })
231
273
  ] });
232
274
  }
233
275
  // Annotate the CommonJS export names for ESM import in node:
234
276
  0 && (module.exports = {
235
277
  Blog,
236
- Docs
278
+ Docs,
279
+ Shiso
237
280
  });
package/dist/index.mjs CHANGED
@@ -1,20 +1,71 @@
1
1
  "use client";
2
2
 
3
- // css-modules:E:\dev\umami-shiso\src\components\Blog.module.css
3
+ // src/components/index.ts
4
+ import "@umami/react-zen/dist/styles.css";
5
+
6
+ // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/Blog.module.css
4
7
  var Blog_default = {};
5
8
 
6
9
  // src/components/Markdown.tsx
7
- import { MDXRemote } from "next-mdx-remote";
10
+ import { runSync } from "@mdx-js/mdx";
11
+ import { useMDXComponents } from "@mdx-js/react";
12
+ import * as runtime from "react/jsx-runtime";
13
+ import { jsx, jsxs } from "react/jsx-runtime";
14
+ var parseMdx = (code) => {
15
+ try {
16
+ const result = runSync(code, {
17
+ ...runtime,
18
+ baseUrl: import.meta.url
19
+ });
20
+ return { Component: result.default };
21
+ } catch (err) {
22
+ return { error: err.message };
23
+ }
24
+ };
25
+ function Markdown({ content }) {
26
+ const components = useMDXComponents();
27
+ const { Component, error } = parseMdx(content.code);
28
+ if (error) {
29
+ return /* @__PURE__ */ jsxs("h1", { children: [
30
+ "Error rendering MDX: ",
31
+ error
32
+ ] });
33
+ }
34
+ if (!Component) {
35
+ return null;
36
+ }
37
+ return /* @__PURE__ */ jsx(Component, { components });
38
+ }
39
+
40
+ // src/components/Blog.tsx
41
+ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
42
+ function Blog({ content }) {
43
+ return /* @__PURE__ */ jsx2("div", { className: Blog_default.blog, children: /* @__PURE__ */ jsx2("div", { className: Blog_default.main, children: /* @__PURE__ */ jsxs2("div", { className: Blog_default.content, children: [
44
+ /* @__PURE__ */ jsx2("h1", { children: content?.meta?.title }),
45
+ /* @__PURE__ */ jsx2("p", { className: Blog_default.description, children: content?.meta?.description }),
46
+ /* @__PURE__ */ jsx2(Markdown, { content })
47
+ ] }) }) });
48
+ }
49
+
50
+ // src/components/Docs.tsx
51
+ import { Grid, Box as Box3, Heading as Heading2 } from "@umami/react-zen";
52
+
53
+ // src/components/hooks/useShiso.ts
54
+ import { useContext } from "react";
55
+
56
+ // src/components/Shiso.tsx
57
+ import { createContext } from "react";
58
+ import { MDXProvider } from "@mdx-js/react";
8
59
 
9
60
  // src/components/CodeBlock.tsx
10
61
  import { useState, useRef } from "react";
11
62
  import { Icon, Icons } from "@umami/react-zen";
12
63
 
13
- // css-modules:E:\dev\umami-shiso\src\components\CodeBlock.module.css
14
- var CodeBlock_default = { "container": "CodeBlock_container__ZTkxY", "button": "CodeBlock_button__MmZkO", "copy": "CodeBlock_copy__M2I0N", "check": "CodeBlock_check__MjkzY" };
64
+ // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/CodeBlock.module.css
65
+ var CodeBlock_default = { "container": "CodeBlock_container__YmFmN", "button": "CodeBlock_button__NDg0Y", "copy": "CodeBlock_copy__MmQzM", "check": "CodeBlock_check__YmI0Z" };
15
66
 
16
67
  // src/components/CodeBlock.tsx
17
- import { jsx, jsxs } from "react/jsx-runtime";
68
+ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
18
69
  function CodeBlock(props) {
19
70
  const textInput = useRef(null);
20
71
  const [copied, setCopied] = useState(false);
@@ -25,53 +76,43 @@ function CodeBlock(props) {
25
76
  setCopied(false);
26
77
  }, 1e3);
27
78
  };
28
- return /* @__PURE__ */ jsxs("pre", { ref: textInput, className: CodeBlock_default.container, children: [
79
+ return /* @__PURE__ */ jsxs3("pre", { ref: textInput, className: CodeBlock_default.container, children: [
29
80
  props.children,
30
- /* @__PURE__ */ jsx("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ jsx(Icon, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ jsx(Icons.Check, {}) : /* @__PURE__ */ jsx(Icons.Copy, {}) }) })
81
+ /* @__PURE__ */ jsx3("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ jsx3(Icon, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ jsx3(Icons.Check, {}) : /* @__PURE__ */ jsx3(Icons.Copy, {}) }) })
31
82
  ] });
32
83
  }
33
84
 
34
- // src/components/Markdown.tsx
35
- import { jsx as jsx2 } from "react/jsx-runtime";
36
- function Markdown({
37
- content,
38
- components,
39
- scope
40
- }) {
41
- return /* @__PURE__ */ jsx2(
42
- MDXRemote,
43
- {
44
- compiledSource: content.code,
45
- frontmatter: content.frontmatter,
46
- scope,
47
- components: { ...components, pre: CodeBlock }
48
- }
49
- );
85
+ // src/components/Shiso.tsx
86
+ import { jsx as jsx4 } from "react/jsx-runtime";
87
+ var defaultTemplates = {
88
+ docs: Docs,
89
+ blog: Blog
90
+ };
91
+ var ShisoContext = createContext(null);
92
+ function Shiso({ content, type, config, components, templates }) {
93
+ const Component = { ...defaultTemplates, ...templates }[type];
94
+ if (!Component) {
95
+ return /* @__PURE__ */ jsx4("h1", { children: `Component not found for type: ${type}` });
96
+ }
97
+ return /* @__PURE__ */ jsx4(ShisoContext.Provider, { value: { content, type, config }, children: /* @__PURE__ */ jsx4(MDXProvider, { components: { ...components, pre: CodeBlock }, children: /* @__PURE__ */ jsx4(Component, { content, config }) }) });
50
98
  }
51
99
 
52
- // src/components/Blog.tsx
53
- import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
54
- function Blog({ content }) {
55
- return /* @__PURE__ */ jsx3("div", { className: Blog_default.blog, children: /* @__PURE__ */ jsx3("div", { className: Blog_default.main, children: /* @__PURE__ */ jsxs2("div", { className: Blog_default.content, children: [
56
- /* @__PURE__ */ jsx3("h1", { children: content?.meta?.title }),
57
- /* @__PURE__ */ jsx3("p", { className: Blog_default.description, children: content?.meta?.description }),
58
- /* @__PURE__ */ jsx3(Markdown, { content })
59
- ] }) }) });
100
+ // src/components/hooks/useShiso.ts
101
+ function useShiso() {
102
+ const { content, config } = useContext(ShisoContext);
103
+ return { content, config };
60
104
  }
61
105
 
62
- // src/components/Docs.tsx
63
- import { Grid, Box as Box3, Heading as Heading2 } from "@umami/react-zen";
64
-
65
106
  // src/components/PageLinks.tsx
66
107
  import { useEffect, useState as useState2 } from "react";
67
108
  import { Column, Text } from "@umami/react-zen";
68
109
  import classNames from "classnames";
69
110
 
70
- // css-modules:E:\dev\umami-shiso\src\components\PageLinks.module.css
71
- var PageLinks_default = { "title": "PageLinks_title__NTM5N", "links": "PageLinks_links__ODg1Z", "indent-1": "PageLinks_indent-1__OGVmN", "indent-2": "PageLinks_indent-2__YTFmN", "indent-3": "PageLinks_indent-3__OTI0Y", "indent-4": "PageLinks_indent-4__NzhkM", "indent-5": "PageLinks_indent-5__ZGViZ", "indent-6": "PageLinks_indent-6__YjVkN", "selected": "PageLinks_selected__YzEyZ" };
111
+ // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/PageLinks.module.css
112
+ 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" };
72
113
 
73
114
  // src/components/PageLinks.tsx
74
- import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
115
+ import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
75
116
  function PageLinks({ items, offset = 0 }) {
76
117
  const [hash, setHash] = useState2(items?.[0]?.id);
77
118
  useEffect(() => {
@@ -90,10 +131,10 @@ function PageLinks({ items, offset = 0 }) {
90
131
  if (!items?.length) {
91
132
  return null;
92
133
  }
93
- return /* @__PURE__ */ jsxs3(Column, { gap: "3", minWidth: "240px", className: PageLinks_default.links, children: [
94
- /* @__PURE__ */ jsx4(Text, { size: "2", weight: "bold", children: "On this page" }),
134
+ return /* @__PURE__ */ jsxs4(Column, { gap: "3", minWidth: "240px", className: PageLinks_default.links, children: [
135
+ /* @__PURE__ */ jsx5(Text, { size: "2", weight: "bold", children: "On this page" }),
95
136
  items.map(({ name, id, size }) => {
96
- return /* @__PURE__ */ jsx4(
137
+ return /* @__PURE__ */ jsx5(
97
138
  "a",
98
139
  {
99
140
  href: `#${id}`,
@@ -112,24 +153,24 @@ import classNames2 from "classnames";
112
153
  import { usePathname } from "next/navigation";
113
154
  import Link from "next/link";
114
155
 
115
- // css-modules:E:\dev\umami-shiso\src\components\SideNav.module.css
116
- var SideNav_default = { "nav": "SideNav_nav__NmU4M", "item": "SideNav_item__MGIzZ", "selected": "SideNav_selected__NDEwO", "items": "SideNav_items__ZGVhM" };
156
+ // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/SideNav.module.css
157
+ var SideNav_default = { "nav": "SideNav_nav__YzJiZ", "item": "SideNav_item__ZTcyN", "selected": "SideNav_selected__ZGM5M", "items": "SideNav_items__ODg2Y" };
117
158
 
118
159
  // src/components/SideNav.tsx
119
- import { jsx as jsx5 } from "react/jsx-runtime";
160
+ import { jsx as jsx6 } from "react/jsx-runtime";
120
161
  function SideNav({ tabs, navigation }) {
121
162
  const pathname = usePathname();
122
- const tab = tabs.find(({ url, id }) => id !== "docs" ? pathname.startsWith(url) : false);
163
+ const tab = tabs?.find(({ url, id }) => id !== "docs" ? pathname.startsWith(url) : false);
123
164
  const menu = navigation[tab?.id || "docs"];
124
- return /* @__PURE__ */ jsx5(Box, { className: SideNav_default.nav, children: /* @__PURE__ */ jsx5(List, { items: navigation, children: menu.map(({ group, pages }) => {
125
- return /* @__PURE__ */ jsx5(ListSection, { title: group, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
126
- return /* @__PURE__ */ jsx5(
165
+ return /* @__PURE__ */ jsx6(Box, { className: SideNav_default.nav, children: /* @__PURE__ */ jsx6(List, { items: navigation, "aria-label": "nav", children: menu.map(({ group, pages }) => {
166
+ return /* @__PURE__ */ jsx6(ListSection, { title: group, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
167
+ return /* @__PURE__ */ jsx6(
127
168
  ListItem,
128
169
  {
129
170
  className: classNames2(SideNav_default.item, {
130
171
  [SideNav_default.selected]: url === pathname
131
172
  }),
132
- children: /* @__PURE__ */ jsx5(Link, { href: url, prefetch: false, children: text })
173
+ children: /* @__PURE__ */ jsx6(Link, { href: url, prefetch: false, children: text })
133
174
  },
134
175
  index
135
176
  );
@@ -141,38 +182,39 @@ function SideNav({ tabs, navigation }) {
141
182
  import Link2 from "next/link";
142
183
  import { usePathname as usePathname2 } from "next/navigation";
143
184
  import { Tabs, TabList, Tab } from "@umami/react-zen";
144
- import { jsx as jsx6 } from "react/jsx-runtime";
185
+ import { jsx as jsx7 } from "react/jsx-runtime";
145
186
  function TopNav({ tabs }) {
146
187
  const pathname = usePathname2();
147
- const tab = tabs.find(({ id, url }) => id !== "docs" ? pathname.startsWith(url) : false);
188
+ const tab = tabs?.find(({ id, url }) => id !== "docs" ? pathname.startsWith(url) : false);
148
189
  const selected = tab?.id || "docs";
149
- return /* @__PURE__ */ jsx6(Tabs, { selectedKey: selected, children: /* @__PURE__ */ jsx6(TabList, { items: tabs, children: ({ id, label, url }) => {
150
- return /* @__PURE__ */ jsx6(Tab, { id, children: /* @__PURE__ */ jsx6(Link2, { href: url, children: label }) });
190
+ return /* @__PURE__ */ jsx7(Tabs, { selectedKey: selected, children: /* @__PURE__ */ jsx7(TabList, { items: tabs, children: ({ id, label, url }) => {
191
+ return /* @__PURE__ */ jsx7(Tab, { id, children: /* @__PURE__ */ jsx7(Link2, { href: url, children: label }) });
151
192
  } }) });
152
193
  }
153
194
 
154
195
  // src/components/ContentArea.tsx
155
196
  import { Heading, Box as Box2, Text as Text2 } from "@umami/react-zen";
156
197
 
157
- // css-modules:E:\dev\umami-shiso\src\components\ContentArea.module.css
158
- var ContentArea_default = { "content": "ContentArea_content__MWQ1Z" };
198
+ // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/ContentArea.module.css
199
+ var ContentArea_default = { "content": "ContentArea_content__Y2RmY" };
159
200
 
160
201
  // src/components/ContentArea.tsx
161
- import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
162
- function ContentArea({ content, components }) {
163
- return /* @__PURE__ */ jsxs4(Box2, { flexGrow: 1, children: [
164
- /* @__PURE__ */ jsx7(Text2, { color: "primary", weight: "bold", children: content.group }),
165
- /* @__PURE__ */ jsx7(Heading, { size: "8", as: "h1", children: content.meta.title }),
166
- /* @__PURE__ */ jsx7(Text2, { type: "muted", children: content.meta.description }),
167
- /* @__PURE__ */ jsx7(Box2, { className: ContentArea_default.content, children: /* @__PURE__ */ jsx7(Markdown, { content, components }) })
202
+ import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
203
+ function ContentArea({ content }) {
204
+ return /* @__PURE__ */ jsxs5(Box2, { flexGrow: 1, children: [
205
+ /* @__PURE__ */ jsx8(Text2, { color: "primary", weight: "bold", children: content.group }),
206
+ /* @__PURE__ */ jsx8(Heading, { size: "8", as: "h1", children: content?.meta?.title }),
207
+ /* @__PURE__ */ jsx8(Text2, { type: "muted", children: content?.meta?.description }),
208
+ /* @__PURE__ */ jsx8(Box2, { className: ContentArea_default.content, children: /* @__PURE__ */ jsx8(Markdown, { content }) })
168
209
  ] });
169
210
  }
170
211
 
171
212
  // src/components/Docs.tsx
172
- import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
173
- function Docs({ content, config, components }) {
213
+ import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
214
+ function Docs() {
215
+ const { content, config } = useShiso();
174
216
  if (!content) {
175
- return /* @__PURE__ */ jsx8(Heading2, { size: "6", children: "Page not found" });
217
+ return /* @__PURE__ */ jsx9(Heading2, { size: "6", children: "Page not found" });
176
218
  }
177
219
  const { tabs, navigation } = config?.docs || {};
178
220
  content.group = Object.keys(navigation).reduce((name, key) => {
@@ -185,16 +227,17 @@ function Docs({ content, config, components }) {
185
227
  }
186
228
  return name;
187
229
  }, null);
188
- return /* @__PURE__ */ jsxs5(Box3, { flexGrow: "1", children: [
189
- tabs && /* @__PURE__ */ jsx8(TopNav, { tabs }),
190
- /* @__PURE__ */ jsxs5(Grid, { gap: "6", columns: "240px 1fr 240px", children: [
191
- /* @__PURE__ */ jsx8(SideNav, { tabs, navigation }),
192
- /* @__PURE__ */ jsx8(ContentArea, { content, components }),
193
- /* @__PURE__ */ jsx8(PageLinks, { items: content?.anchors, offset: 150 })
230
+ return /* @__PURE__ */ jsxs6(Box3, { flexGrow: "1", children: [
231
+ tabs && /* @__PURE__ */ jsx9(TopNav, { tabs }),
232
+ /* @__PURE__ */ jsxs6(Grid, { gap: "6", columns: "240px 1fr 240px", children: [
233
+ /* @__PURE__ */ jsx9(SideNav, { tabs, navigation }),
234
+ /* @__PURE__ */ jsx9(ContentArea, { content }),
235
+ /* @__PURE__ */ jsx9(PageLinks, { items: content?.anchors, offset: 150 })
194
236
  ] })
195
237
  ] });
196
238
  }
197
239
  export {
198
240
  Blog,
199
- Docs
241
+ Docs,
242
+ Shiso
200
243
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umami/shiso",
3
- "version": "0.7.0",
3
+ "version": "0.9.0",
4
4
  "description": "A content layer for Next.js",
5
5
  "homepage": "https://umami.is/shiso",
6
6
  "repository": {
@@ -43,7 +43,7 @@
43
43
  ]
44
44
  },
45
45
  "peerDependencies": {
46
- "@umami/react-zen": "^0.27.0"
46
+ "@umami/react-zen": "^0.1.0"
47
47
  },
48
48
  "dependencies": {
49
49
  "@mdx-js/loader": "^3.0.0",
@@ -57,8 +57,8 @@
57
57
  "mdx-bundler": "^10.0.3",
58
58
  "next": "15.1.2",
59
59
  "next-mdx-remote": "^5.0.0",
60
- "react": "19.0.0",
61
- "react-dom": "19.0.0",
60
+ "react": "^19.0.0",
61
+ "react-dom": "^19.0.0",
62
62
  "recursive-readdir": "^2.2.3",
63
63
  "rehype-highlight": "^7.0.1",
64
64
  "remark-gfm": "^4.0.0",
@@ -85,6 +85,8 @@
85
85
  "lint-staged": "^15.2.7",
86
86
  "npm-run-all": "^4.1.5",
87
87
  "prettier": "^3.2.5",
88
+ "remark-frontmatter": "^5.0.0",
89
+ "remark-mdx-frontmatter": "^5.0.0",
88
90
  "stylelint": "^15.10.1",
89
91
  "stylelint-config-prettier": "^9.0.5",
90
92
  "stylelint-config-recommended": "^14.0.1",
package/server/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- export declare const getFiles: (folder: string) => Promise<any>;
2
- export declare function getFile(id: string, folder: string): Promise<any>;
1
+ export declare const parseMdx: (file: string) => Promise<any>;
3
2
  export declare function getContent(params: {
4
3
  id: string[];
5
4
  }, folder: string): Promise<any>;
package/server/index.js CHANGED
@@ -35,90 +35,61 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
35
35
  }
36
36
  };
37
37
  import { cache } from 'react';
38
- import recursive from 'recursive-readdir';
39
- import { firstBy } from 'thenby';
38
+ import { compile } from '@mdx-js/mdx';
40
39
  import remarkGfm from 'remark-gfm';
41
40
  import rehypeHighlight from 'rehype-highlight';
42
- import { serialize } from 'next-mdx-remote/serialize';
41
+ import matter from 'gray-matter';
43
42
  import fs from 'node:fs/promises';
44
43
  import path from 'node:path';
45
- var mdxOptions = {
46
- remarkPlugins: [remarkGfm],
47
- rehypePlugins: [rehypeHighlight],
48
- };
49
- export var getFiles = cache(function (folder) { return __awaiter(void 0, void 0, void 0, function () {
50
- var dir, files;
51
- return __generator(this, function (_a) {
52
- switch (_a.label) {
53
- case 0:
54
- dir = path.resolve(folder);
55
- return [4 /*yield*/, recursive(dir)];
44
+ export var parseMdx = cache(function (file) { return __awaiter(void 0, void 0, void 0, function () {
45
+ var postContent, _a, frontmatter, mdxContent, id, anchors, modifiedContent, code, _b;
46
+ return __generator(this, function (_c) {
47
+ switch (_c.label) {
48
+ case 0: return [4 /*yield*/, fs.readFile(file, 'utf8')];
56
49
  case 1:
57
- files = _a.sent();
58
- return [2 /*return*/, Promise.all(files
59
- .filter(function (file) { return path.extname(file) === '.mdx'; })
60
- .map(function (file) { return __awaiter(void 0, void 0, void 0, function () {
61
- var postContent, id, anchors, body, _a, compiledSource, frontmatter;
62
- return __generator(this, function (_b) {
63
- switch (_b.label) {
64
- case 0: return [4 /*yield*/, fs.readFile(file, 'utf8')];
65
- case 1:
66
- postContent = _b.sent();
67
- id = file.replace('.mdx', '').replace(dir, '').replace(/\\/g, '/').replace(/^\//, '');
68
- anchors = [];
69
- body = postContent
70
- .split('\n')
71
- .map(function (line) {
72
- var match = line.match(/^(#+)\s+(.*)/);
73
- if (match) {
74
- var num = match[1], name_1 = match[2];
75
- var id_1 = name_1.toLowerCase().replace(/\s+/g, '-');
76
- var size = num.length;
77
- anchors.push({ name: name_1, id: id_1, size: size });
78
- return "<h".concat(size, " id=\"").concat(id_1, "\">").concat(name_1.replace(/\{|\}/g, ''), "</h").concat(size, ">");
79
- }
80
- return line;
81
- })
82
- .join('\n');
83
- return [4 /*yield*/, serialize(body, {
84
- mdxOptions: mdxOptions,
85
- parseFrontmatter: true,
86
- })];
87
- case 2:
88
- _a = _b.sent(), compiledSource = _a.compiledSource, frontmatter = _a.frontmatter;
89
- return [2 /*return*/, {
90
- meta: frontmatter,
91
- id: id,
92
- content: postContent,
93
- code: compiledSource,
94
- anchors: anchors,
95
- }];
96
- }
97
- });
98
- }); })).then(function (posts) { return posts.sort(firstBy('date', 'desc')); })];
50
+ postContent = _c.sent();
51
+ _a = matter(postContent), frontmatter = _a.data, mdxContent = _a.content;
52
+ id = file.replace('.mdx', '').replace(/\\/g, '/').replace(/^\//, '');
53
+ anchors = [];
54
+ modifiedContent = mdxContent
55
+ .split('\n')
56
+ .map(function (line) {
57
+ var match = line.match(/^(#+)\s+(.*)/);
58
+ if (match) {
59
+ var num = match[1], name_1 = match[2];
60
+ var id_1 = name_1.toLowerCase().replace(/\s+/g, '-');
61
+ var size = num.length;
62
+ anchors.push({ name: name_1, id: id_1, size: size });
63
+ return "<h".concat(size, " id=\"").concat(id_1, "\">").concat(name_1.replace(/\{|\}/g, ''), "</h").concat(size, ">");
64
+ }
65
+ return line;
66
+ })
67
+ .join('\n');
68
+ _b = String;
69
+ return [4 /*yield*/, compile(modifiedContent, {
70
+ outputFormat: 'function-body',
71
+ remarkPlugins: [remarkGfm],
72
+ rehypePlugins: [rehypeHighlight],
73
+ })];
74
+ case 2:
75
+ code = _b.apply(void 0, [_c.sent()]);
76
+ return [2 /*return*/, {
77
+ id: id,
78
+ meta: frontmatter,
79
+ content: postContent,
80
+ code: code,
81
+ anchors: anchors,
82
+ }];
99
83
  }
100
84
  });
101
85
  }); });
102
- export function getFile(id, folder) {
103
- return __awaiter(this, void 0, void 0, function () {
104
- var files;
105
- return __generator(this, function (_a) {
106
- switch (_a.label) {
107
- case 0: return [4 /*yield*/, getFiles(folder)];
108
- case 1:
109
- files = _a.sent();
110
- return [2 /*return*/, files.find(function (file) { return (file === null || file === void 0 ? void 0 : file.id) === id; })];
111
- }
112
- });
113
- });
114
- }
115
86
  export function getContent(params, folder) {
116
87
  return __awaiter(this, void 0, void 0, function () {
117
88
  var _a, id, name;
118
89
  return __generator(this, function (_b) {
119
90
  _a = params.id, id = _a === void 0 ? [] : _a;
120
91
  name = (id === null || id === void 0 ? void 0 : id.length) ? id.join('/') : 'index';
121
- return [2 /*return*/, getFile(name, folder)];
92
+ return [2 /*return*/, parseMdx(path.resolve(folder, "".concat(name, ".mdx")))];
122
93
  });
123
94
  });
124
95
  }