@umami/shiso 0.34.0 → 0.36.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 +114 -103
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +137 -125
  4. package/dist/index.mjs +161 -149
  5. package/package.json +2 -1
  6. package/server/index.d.ts +1 -1
  7. package/server/index.js +12 -16
package/dist/index.css CHANGED
@@ -1,186 +1,197 @@
1
1
  /* virtual-css:css:e01d9571088b882a03b91eb2755da783 */
2
- .PageLinks_links__ZWUxN {
2
+ .PageLinks_links__M2M5N {
3
3
  position: sticky;
4
- top: 30px;
4
+ top: var(--spacing-8);
5
5
  height: max-content;
6
6
  min-width: 240px;
7
7
  }
8
- .PageLinks_links__ZWUxN a.PageLinks_link__MTJmN {
8
+ .PageLinks_links__M2M5N a.PageLinks_link__MmRhZ {
9
9
  display: block;
10
10
  color: var(--font-color-muted);
11
11
  font-size: var(--font-size);
12
12
  text-wrap: nowrap;
13
13
  text-decoration: none;
14
14
  }
15
- .PageLinks_links__ZWUxN a.PageLinks_link__MTJmN:hover {
15
+ .PageLinks_links__M2M5N a.PageLinks_link__MmRhZ:hover {
16
16
  color: var(--primary-color);
17
17
  text-decoration: none;
18
18
  }
19
- .PageLinks_indent-1__MGExM {
19
+ .PageLinks_indent-1__NmJiN {
20
20
  margin-left: 0;
21
21
  }
22
- .PageLinks_indent-2__NDM3O {
22
+ .PageLinks_indent-2__ZjE5M {
23
23
  margin-left: 0;
24
24
  }
25
- .PageLinks_indent-3__YmJlN {
25
+ .PageLinks_indent-3__ODkyO {
26
26
  margin-left: 10px;
27
27
  }
28
- .PageLinks_indent-4__OTNjM {
28
+ .PageLinks_indent-4__MGRkZ {
29
29
  margin-left: 20px;
30
30
  }
31
- .PageLinks_indent-5__YTIwM {
31
+ .PageLinks_indent-5__NDgyZ {
32
32
  margin-left: 30px;
33
33
  }
34
- .PageLinks_indent-6__MjQwY {
34
+ .PageLinks_indent-6__ZDkyN {
35
35
  margin-left: 40px;
36
36
  }
37
- .PageLinks_links__ZWUxN a.PageLinks_selected__NDA0Y {
37
+ .PageLinks_links__M2M5N a.PageLinks_selected__N2RkZ {
38
38
  color: var(--primary-color);
39
39
  }
40
40
 
41
- /* virtual-css:css:4d0931c84adfae5533b067ea199724f8 */
42
- .Markdown_content__ZDlhO {
43
- font-size: 16px;
44
- margin-bottom: 60px;
45
- }
46
- .Markdown_content__ZDlhO > p {
47
- color: var(--font-color);
48
- line-height: 1.8;
49
- }
50
- .Markdown_content__ZDlhO a {
51
- color: var(--font-color);
52
- font-weight: 600;
53
- text-decoration: underline var(--border-color);
54
- text-underline-offset: 4px;
55
- }
56
- .Markdown_content__ZDlhO a:hover {
57
- color: var(--font-color);
58
- text-decoration: underline var(--primary-color);
59
- }
60
- .Markdown_content__ZDlhO h1 {
61
- font-size: var(--font-size-8);
62
- letter-spacing: var(--letter-spacing-1);
63
- margin: 0 0 var(--spacing-4) 0;
64
- }
65
- .Markdown_content__ZDlhO h2 {
66
- font-size: var(--font-size-6);
67
- letter-spacing: var(--letter-spacing-1);
68
- margin: var(--spacing-8) 0 var(--spacing-4) 0;
69
- }
70
- .Markdown_content__ZDlhO h3 {
71
- font-size: var(--font-size-5);
72
- letter-spacing: var(--letter-spacing-1);
73
- margin: var(--spacing-7) 0 var(--spacing-4) 0;
74
- }
75
- .Markdown_content__ZDlhO *[id] {
76
- scroll-margin-top: var(--spacing-4);
41
+ /* virtual-css:css:2dd9c1a25bf05a14c9a7ab7ce1da6aef */
42
+ .CodeBlock_container__ZTkxY {
43
+ position: relative;
44
+ background: var(--base-color-900);
45
+ padding: var(--spacing-5);
46
+ border-radius: 6px;
47
+ white-space: pre-wrap;
48
+ word-wrap: break-word;
77
49
  }
78
- .Markdown_content__ZDlhO ul {
79
- list-style: disc;
50
+ pre.CodeBlock_container__ZTkxY code {
51
+ font-family: var(--font-family-code);
52
+ color: var(--base-color-300);
53
+ padding: 0;
54
+ border: 0;
55
+ background: transparent;
80
56
  }
81
- .Markdown_content__ZDlhO ol {
82
- list-style: decimal;
57
+ .CodeBlock_button__MmZkO {
58
+ border: 0;
59
+ position: absolute;
60
+ right: var(--spacing-5);
61
+ top: var(--spacing-5);
62
+ cursor: pointer;
63
+ background: transparent;
83
64
  }
84
- .Markdown_content__ZDlhO pre {
85
- margin: var(--spacing-5) 0;
65
+ .CodeBlock_copy__M2I0N {
66
+ color: var(--base-color-300);
86
67
  }
87
- .Markdown_content__ZDlhO code {
88
- font-size: 14px;
68
+ .CodeBlock_copy__M2I0N:hover {
69
+ color: var(--base-color-50);
89
70
  }
90
- .Markdown_content__ZDlhO code:not([class]) {
91
- font-family: var(--font-family-code);
92
- color: var(--font-color);
93
- padding: var(--spacing-1);
94
- border-radius: var(--border-radius);
95
- background: var(--base-color-50);
96
- font-weight: var(--font-weight-bold);
71
+ .CodeBlock_check__MjkzY {
72
+ color: var(--success-color);
97
73
  }
98
74
 
99
75
  /* virtual-css:css:62c31e195181c97259fa56b13d20ea6d */
100
- .SideNav_nav__MzhiO {
76
+ .SideNav_nav__ZjMzZ {
101
77
  overflow-y: auto;
102
78
  min-width: 240px;
103
79
  }
104
- .SideNav_nav__MzhiO::-webkit-scrollbar {
80
+ .SideNav_nav__ZjMzZ::-webkit-scrollbar {
105
81
  width: 15px;
106
82
  background: transparent;
107
83
  display: none;
108
84
  }
109
- .SideNav_nav__MzhiO:hover::-webkit-scrollbar {
85
+ .SideNav_nav__ZjMzZ:hover::-webkit-scrollbar {
110
86
  display: block;
111
87
  }
112
- .SideNav_nav__MzhiO::-webkit-scrollbar-track {
88
+ .SideNav_nav__ZjMzZ::-webkit-scrollbar-track {
113
89
  border: 7px solid rgba(0, 0, 0, 0);
114
90
  background-color: var(--border-color);
115
91
  background-clip: padding-box;
116
92
  }
117
- .SideNav_nav__MzhiO::-webkit-scrollbar-thumb {
93
+ .SideNav_nav__ZjMzZ::-webkit-scrollbar-thumb {
118
94
  border: 7px solid rgba(0, 0, 0, 0);
119
95
  background-color: var(--primary-color);
120
96
  background-clip: padding-box;
121
97
  }
122
- .SideNav_nav__MzhiO::-webkit-scrollbar-thumb:hover {
98
+ .SideNav_nav__ZjMzZ::-webkit-scrollbar-thumb:hover {
123
99
  border: 5px solid rgba(0, 0, 0, 0);
124
100
  background-color: var(--primary-color);
125
101
  background-clip: padding-box;
126
102
  }
127
- .SideNav_nav__MzhiO.SideNav_sticky__ZjEyN {
103
+ .SideNav_nav__ZjMzZ.SideNav_sticky__MWMxZ {
128
104
  position: sticky;
129
- top: 30px;
105
+ top: var(--spacing-8);
130
106
  }
131
- .SideNav_nav__MzhiO .SideNav_item__ZWEzN {
107
+ .SideNav_nav__ZjMzZ .SideNav_item__ZGQ0M {
132
108
  color: var(--font-color-muted);
133
109
  padding: 0;
134
110
  border-radius: 0;
135
- border-left: var(--border-size-1) solid var(--border-color);
136
111
  }
137
- .SideNav_nav__MzhiO .SideNav_item__ZWEzN a {
112
+ .SideNav_nav__ZjMzZ .SideNav_item__ZGQ0M a {
138
113
  color: currentColor;
139
114
  width: 100%;
140
115
  padding: var(--padding-y) var(--padding-x);
141
116
  text-decoration: none;
142
117
  }
143
- .SideNav_nav__MzhiO .SideNav_item__ZWEzN a:hover {
118
+ .SideNav_nav__ZjMzZ .SideNav_item__ZGQ0M a:hover {
144
119
  color: var(--primary-color);
145
120
  }
146
- .SideNav_nav__MzhiO .SideNav_item__ZWEzN.SideNav_selected__M2Q0Y {
121
+ .SideNav_nav__ZjMzZ .SideNav_item__ZGQ0M.SideNav_selected__ZTI4Y {
147
122
  color: var(--font-color);
123
+ font-weight: 600;
148
124
  border-color: var(--primary-color);
125
+ background-color: var(--highlight-color);
126
+ }
127
+ .SideNav_items__ZWU5O {
128
+ display: grid;
129
+ gap: var(--spacing-1);
149
130
  }
150
- .SideNav_items__YjAxZ header {
131
+ .SideNav_items__ZWU5O header {
151
132
  padding: var(--padding-y) 0;
152
133
  }
153
134
 
154
- /* virtual-css:css:2dd9c1a25bf05a14c9a7ab7ce1da6aef */
155
- .CodeBlock_container__ZTkxY {
156
- position: relative;
157
- background: var(--base-color-900);
158
- padding: var(--spacing-5);
159
- border-radius: 6px;
160
- white-space: pre-wrap;
161
- word-wrap: break-word;
135
+ /* virtual-css:css:4d0931c84adfae5533b067ea199724f8 */
136
+ .Markdown_content__NmE1Z {
137
+ font-size: 16px;
138
+ margin-bottom: 60px;
162
139
  }
163
- pre.CodeBlock_container__ZTkxY code {
164
- font-family: var(--font-family-code);
165
- color: var(--base-color-300);
166
- padding: 0;
167
- border: 0;
168
- background: transparent;
140
+ .Markdown_content__NmE1Z > p {
141
+ color: var(--font-color);
142
+ line-height: 1.8;
169
143
  }
170
- .CodeBlock_button__MmZkO {
171
- border: 0;
172
- position: absolute;
173
- right: var(--spacing-5);
174
- top: var(--spacing-5);
175
- cursor: pointer;
176
- background: transparent;
144
+ .Markdown_content__NmE1Z a {
145
+ color: var(--font-color);
146
+ font-weight: 600;
147
+ text-decoration: underline var(--border-color);
148
+ text-underline-offset: 4px;
177
149
  }
178
- .CodeBlock_copy__M2I0N {
179
- color: var(--base-color-300);
150
+ .Markdown_content__NmE1Z a:hover {
151
+ color: var(--font-color);
152
+ text-decoration: underline var(--primary-color);
180
153
  }
181
- .CodeBlock_copy__M2I0N:hover {
182
- color: var(--base-color-50);
154
+ .Markdown_content__NmE1Z img {
155
+ display: block;
156
+ max-width: 100%;
157
+ margin: 4rem auto;
158
+ box-shadow: 2px 2px 16px rgba(0, 0, 0, .1);
183
159
  }
184
- .CodeBlock_check__MjkzY {
185
- color: var(--success-color);
160
+ .Markdown_content__NmE1Z h1 {
161
+ font-size: var(--font-size-8);
162
+ letter-spacing: var(--letter-spacing-1);
163
+ margin: 0 0 var(--spacing-4) 0;
164
+ }
165
+ .Markdown_content__NmE1Z h2 {
166
+ font-size: var(--font-size-6);
167
+ letter-spacing: var(--letter-spacing-1);
168
+ margin: var(--spacing-8) 0 var(--spacing-4) 0;
169
+ }
170
+ .Markdown_content__NmE1Z h3 {
171
+ font-size: var(--font-size-5);
172
+ letter-spacing: var(--letter-spacing-1);
173
+ margin: var(--spacing-7) 0 var(--spacing-4) 0;
174
+ }
175
+ .Markdown_content__NmE1Z *[id] {
176
+ scroll-margin-top: var(--spacing-4);
177
+ }
178
+ .Markdown_content__NmE1Z ul {
179
+ list-style: disc;
180
+ }
181
+ .Markdown_content__NmE1Z ol {
182
+ list-style: decimal;
183
+ }
184
+ .Markdown_content__NmE1Z pre {
185
+ margin: var(--spacing-5) 0;
186
+ }
187
+ .Markdown_content__NmE1Z code {
188
+ font-size: 14px;
189
+ }
190
+ .Markdown_content__NmE1Z code:not([class]) {
191
+ font-family: var(--font-family-code);
192
+ color: var(--font-color);
193
+ padding: var(--spacing-1);
194
+ border-radius: var(--border-radius);
195
+ background: var(--base-color-50);
196
+ font-weight: var(--font-weight-bold);
186
197
  }
package/dist/index.d.ts CHANGED
@@ -22,7 +22,7 @@ declare module '@umami/shiso/Blog' {
22
22
  image?: string;
23
23
  anchors?: any[];
24
24
  }
25
- export function Blog({ title, description, code, author, date, image, anchors }: BlogProps): import("react").JSX.Element;
25
+ export function Blog({ title, code, author, date, image, anchors }: BlogProps): import("react").JSX.Element;
26
26
  }
27
27
 
28
28
  declare module '@umami/shiso/Docs' {
package/dist/index.js CHANGED
@@ -40,8 +40,8 @@ var import_styles = require("@umami/react-zen/styles.css");
40
40
  var import_github_dark = require("highlight.js/styles/github-dark.css");
41
41
 
42
42
  // src/components/Blog.tsx
43
- var import_react_zen3 = require("@umami/react-zen");
44
- var import_date_fns = require("date-fns");
43
+ var import_react_zen11 = require("@umami/react-zen");
44
+ var import_date_fns2 = require("date-fns");
45
45
 
46
46
  // src/components/PageLinks.tsx
47
47
  var import_react = require("react");
@@ -49,7 +49,7 @@ var import_react_zen = require("@umami/react-zen");
49
49
  var import_classnames = __toESM(require("classnames"));
50
50
 
51
51
  // css-modules:E:\dev\umami-shiso\src\components\PageLinks.module.css
52
- var PageLinks_default = { "links": "PageLinks_links__ZWUxN", "link": "PageLinks_link__MTJmN", "indent-1": "PageLinks_indent-1__MGExM", "indent-2": "PageLinks_indent-2__NDM3O", "indent-3": "PageLinks_indent-3__YmJlN", "indent-4": "PageLinks_indent-4__OTNjM", "indent-5": "PageLinks_indent-5__YTIwM", "indent-6": "PageLinks_indent-6__MjQwY", "selected": "PageLinks_selected__NDA0Y" };
52
+ var PageLinks_default = { "links": "PageLinks_links__M2M5N", "link": "PageLinks_link__MmRhZ", "indent-1": "PageLinks_indent-1__NmJiN", "indent-2": "PageLinks_indent-2__ZjE5M", "indent-3": "PageLinks_indent-3__ODkyO", "indent-4": "PageLinks_indent-4__MGRkZ", "indent-5": "PageLinks_indent-5__NDgyZ", "indent-6": "PageLinks_indent-6__ZDkyN", "selected": "PageLinks_selected__N2RkZ" };
53
53
 
54
54
  // src/components/PageLinks.tsx
55
55
  var import_jsx_runtime = require("react/jsx-runtime");
@@ -89,66 +89,36 @@ function PageLinks({ items = [], className, ...props }) {
89
89
  ] }) });
90
90
  }
91
91
 
92
- // src/components/Markdown.tsx
92
+ // src/components/hooks/useShiso.ts
93
+ var import_react7 = require("react");
94
+
95
+ // src/components/Shiso.tsx
96
+ var import_react5 = require("react");
97
+ var import_react6 = require("@mdx-js/react");
98
+ var import_react_zen10 = require("@umami/react-zen");
99
+
100
+ // src/components/CodeBlock.tsx
101
+ var import_react2 = require("react");
93
102
  var import_react_zen2 = require("@umami/react-zen");
94
- var import_mdx = require("@mdx-js/mdx");
95
- var import_react2 = require("@mdx-js/react");
96
- var runtime = __toESM(require("react/jsx-runtime"));
97
103
 
98
- // css-modules:E:\dev\umami-shiso\src\components\Markdown.module.css
99
- var Markdown_default = { "content": "Markdown_content__ZDlhO" };
104
+ // css-modules:E:\dev\umami-shiso\src\components\CodeBlock.module.css
105
+ var CodeBlock_default = { "container": "CodeBlock_container__ZTkxY", "button": "CodeBlock_button__MmZkO", "copy": "CodeBlock_copy__M2I0N", "check": "CodeBlock_check__MjkzY" };
100
106
 
101
- // src/components/Markdown.tsx
107
+ // src/components/CodeBlock.tsx
102
108
  var import_jsx_runtime2 = require("react/jsx-runtime");
103
- var import_meta = {};
104
- var parseMdx = (code) => {
105
- try {
106
- const result = (0, import_mdx.runSync)(code, {
107
- ...runtime,
108
- baseUrl: import_meta.url
109
- });
110
- return { Component: result.default };
111
- } catch (err) {
112
- return { error: err.message };
113
- }
114
- };
115
- function Markdown({ code }) {
116
- const components = (0, import_react2.useMDXComponents)();
117
- const { Component, error } = parseMdx(code);
118
- if (error) {
119
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("h1", { children: [
120
- "Error rendering MDX: ",
121
- error
122
- ] });
123
- }
124
- if (!Component) {
125
- return null;
126
- }
127
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_zen2.Box, { className: Markdown_default.content, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { components }) });
128
- }
129
-
130
- // src/components/Blog.tsx
131
- var import_jsx_runtime3 = require("react/jsx-runtime");
132
- function Blog({ title, description, code, author, date, image, anchors }) {
133
- const linksDisplay = {
134
- default: "none",
135
- xs: "none",
136
- sm: "none",
137
- md: "none",
138
- lg: "block",
139
- xl: "block"
109
+ function CodeBlock(props) {
110
+ const textInput = (0, import_react2.useRef)(null);
111
+ const [copied, setCopied] = (0, import_react2.useState)(false);
112
+ const handleCopy = () => {
113
+ setCopied(true);
114
+ navigator?.clipboard?.writeText(textInput?.current?.textContent);
115
+ setTimeout(() => {
116
+ setCopied(false);
117
+ }, 1e3);
140
118
  };
141
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_zen3.Column, { gap: "8", maxWidth: "900px", style: { margin: "0 auto" }, children: [
142
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_zen3.Box, { flexGrow: 1, children: title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_zen3.Heading, { size: "1", as: "h1", align: "center", children: title }) }),
143
- image && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_zen3.Box, { height: "480px", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_zen3.Image, { src: image, alt: title, objectFit: "cover", borderRadius: "3" }) }),
144
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_zen3.Row, { justifyContent: "space-between", children: [
145
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_zen3.Text, { children: author }),
146
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_zen3.Text, { children: date && (0, import_date_fns.format)(new Date(date), "PP") })
147
- ] }),
148
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_zen3.Row, { gap: "6", children: [
149
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Markdown, { code }),
150
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PageLinks, { display: linksDisplay, items: anchors })
151
- ] })
119
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("pre", { ref: textInput, className: CodeBlock_default.container, children: [
120
+ props.children,
121
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_zen2.Icon, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_zen2.Icons.Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_zen2.Icons.Copy, {}) }) })
152
122
  ] });
153
123
  }
154
124
 
@@ -157,16 +127,16 @@ var import_react_zen7 = require("@umami/react-zen");
157
127
 
158
128
  // src/components/SideNav.tsx
159
129
  var import_react3 = require("react");
160
- var import_react_zen4 = require("@umami/react-zen");
130
+ var import_react_zen3 = require("@umami/react-zen");
161
131
  var import_classnames2 = __toESM(require("classnames"));
162
132
  var import_navigation = require("next/navigation");
163
133
  var import_link = __toESM(require("next/link"));
164
134
 
165
135
  // css-modules:E:\dev\umami-shiso\src\components\SideNav.module.css
166
- var SideNav_default = { "nav": "SideNav_nav__MzhiO", "sticky": "SideNav_sticky__ZjEyN", "item": "SideNav_item__ZWEzN", "selected": "SideNav_selected__M2Q0Y", "items": "SideNav_items__YjAxZ" };
136
+ var SideNav_default = { "nav": "SideNav_nav__ZjMzZ", "sticky": "SideNav_sticky__MWMxZ", "item": "SideNav_item__ZGQ0M", "selected": "SideNav_selected__ZTI4Y", "items": "SideNav_items__ZWU5O" };
167
137
 
168
138
  // src/components/SideNav.tsx
169
- var import_jsx_runtime4 = require("react/jsx-runtime");
139
+ var import_jsx_runtime3 = require("react/jsx-runtime");
170
140
  function SideNav({
171
141
  tabs,
172
142
  navigation,
@@ -188,22 +158,22 @@ function SideNav({
188
158
  }
189
159
  }
190
160
  }, [autoHeight]);
191
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
192
- import_react_zen4.Box,
161
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
162
+ import_react_zen3.Box,
193
163
  {
194
164
  ...props,
195
165
  id: "shiso_docs_sidenav",
196
166
  className: (0, import_classnames2.default)(SideNav_default.nav, isSticky && SideNav_default.sticky, className),
197
167
  style: { ...style, height },
198
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
199
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
200
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
201
- import_react_zen4.ListItem,
168
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_zen3.List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
169
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_zen3.ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
170
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
171
+ import_react_zen3.ListItem,
202
172
  {
203
173
  className: (0, import_classnames2.default)(SideNav_default.item, {
204
174
  [SideNav_default.selected]: url === pathname
205
175
  }),
206
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_link.default, { href: url, prefetch: false, children: text })
176
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_link.default, { href: url, prefetch: false, children: text })
207
177
  },
208
178
  index
209
179
  );
@@ -216,20 +186,60 @@ function SideNav({
216
186
  // src/components/TopNav.tsx
217
187
  var import_link2 = __toESM(require("next/link"));
218
188
  var import_navigation2 = require("next/navigation");
219
- var import_react_zen5 = require("@umami/react-zen");
220
- var import_jsx_runtime5 = require("react/jsx-runtime");
189
+ var import_react_zen4 = require("@umami/react-zen");
190
+ var import_jsx_runtime4 = require("react/jsx-runtime");
221
191
  function TopNav({ tabs }) {
222
192
  const pathname = (0, import_navigation2.usePathname)();
223
193
  const tab = tabs?.find(({ id, url }) => id !== "docs" ? pathname.startsWith(url) : false);
224
194
  const selected = tab?.id || "docs";
225
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_zen5.Tabs, { selectedKey: selected, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_zen5.TabList, { items: tabs, children: ({ id, label, url }) => {
226
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_zen5.Tab, { id, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_link2.default, { href: url, children: label }) });
195
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.Tabs, { selectedKey: selected, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.TabList, { items: tabs, children: ({ id, label, url }) => {
196
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen4.Tab, { id, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_link2.default, { href: url, children: label }) });
227
197
  } }) });
228
198
  }
229
199
 
230
200
  // src/components/DocContent.tsx
231
201
  var import_react_zen6 = require("@umami/react-zen");
232
202
  var import_link3 = __toESM(require("next/link"));
203
+
204
+ // src/components/Markdown.tsx
205
+ var import_react_zen5 = require("@umami/react-zen");
206
+ var import_mdx = require("@mdx-js/mdx");
207
+ var import_react4 = require("@mdx-js/react");
208
+ var runtime = __toESM(require("react/jsx-runtime"));
209
+
210
+ // css-modules:E:\dev\umami-shiso\src\components\Markdown.module.css
211
+ var Markdown_default = { "content": "Markdown_content__NmE1Z" };
212
+
213
+ // src/components/Markdown.tsx
214
+ var import_jsx_runtime5 = require("react/jsx-runtime");
215
+ var import_meta = {};
216
+ var parseMdx = (code) => {
217
+ try {
218
+ const result = (0, import_mdx.runSync)(code, {
219
+ ...runtime,
220
+ baseUrl: import_meta.url
221
+ });
222
+ return { Component: result.default };
223
+ } catch (err) {
224
+ return { error: err.message };
225
+ }
226
+ };
227
+ function Markdown({ code }) {
228
+ const components = (0, import_react4.useMDXComponents)();
229
+ const { Component, error } = parseMdx(code);
230
+ if (error) {
231
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h1", { children: [
232
+ "Error rendering MDX: ",
233
+ error
234
+ ] });
235
+ }
236
+ if (!Component) {
237
+ return null;
238
+ }
239
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_zen5.Box, { className: Markdown_default.content, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, { components }) });
240
+ }
241
+
242
+ // src/components/DocContent.tsx
233
243
  var import_jsx_runtime6 = require("react/jsx-runtime");
234
244
  function DocContent({ section, title, description, code, next, prev }) {
235
245
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_zen6.Box, { flexGrow: 1, children: [
@@ -269,7 +279,7 @@ function parseContent(content, config = {}) {
269
279
  const groups = navigation[key];
270
280
  found = groups?.find((group, groupIndex) => {
271
281
  return group.pages.find((page, pageIndex) => {
272
- const match = content.path.replace(/(\/index)?\.mdx$/, "").endsWith(page.url);
282
+ const match = page.url.endsWith(content.slug);
273
283
  if (match) {
274
284
  const prevGroup = groups[groupIndex - 1];
275
285
  const nextGroup = groups[groupIndex + 1];
@@ -292,7 +302,6 @@ function Docs({ content, config }) {
292
302
  content,
293
303
  config?.docs
294
304
  );
295
- console.log({ tabs, navigation, code, meta, section, next, prev, anchors });
296
305
  const { top } = config?.docs || {};
297
306
  const navDisplay = {
298
307
  default: "none",
@@ -357,75 +366,45 @@ function Docs({ content, config }) {
357
366
  ] });
358
367
  }
359
368
 
360
- // src/components/Shiso.tsx
361
- var import_react5 = require("react");
362
- var import_react6 = require("@mdx-js/react");
363
- var import_react_zen11 = require("@umami/react-zen");
364
-
365
- // src/components/CodeBlock.tsx
366
- var import_react4 = require("react");
367
- var import_react_zen8 = require("@umami/react-zen");
368
-
369
- // css-modules:E:\dev\umami-shiso\src\components\CodeBlock.module.css
370
- var CodeBlock_default = { "container": "CodeBlock_container__ZTkxY", "button": "CodeBlock_button__MmZkO", "copy": "CodeBlock_copy__M2I0N", "check": "CodeBlock_check__MjkzY" };
371
-
372
- // src/components/CodeBlock.tsx
373
- var import_jsx_runtime8 = require("react/jsx-runtime");
374
- function CodeBlock(props) {
375
- const textInput = (0, import_react4.useRef)(null);
376
- const [copied, setCopied] = (0, import_react4.useState)(false);
377
- const handleCopy = () => {
378
- setCopied(true);
379
- navigator?.clipboard?.writeText(textInput?.current?.textContent);
380
- setTimeout(() => {
381
- setCopied(false);
382
- }, 1e3);
383
- };
384
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("pre", { ref: textInput, className: CodeBlock_default.container, children: [
385
- props.children,
386
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Icon, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Icons.Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Icons.Copy, {}) }) })
387
- ] });
388
- }
389
-
390
369
  // src/components/Blogs.tsx
391
- var import_react_zen10 = require("@umami/react-zen");
370
+ var import_react_zen9 = require("@umami/react-zen");
392
371
 
393
372
  // src/components/Card.tsx
394
- var import_react_zen9 = require("@umami/react-zen");
373
+ var import_react_zen8 = require("@umami/react-zen");
395
374
  var import_link4 = __toESM(require("next/link"));
396
- var import_date_fns2 = require("date-fns");
397
- var import_jsx_runtime9 = require("react/jsx-runtime");
375
+ var import_date_fns = require("date-fns");
376
+ var import_jsx_runtime8 = require("react/jsx-runtime");
398
377
  function Card({ title, description, date, author, url, image }) {
399
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_zen9.Column, { borderSize: "1", borderRadius: "3", overflow: "hidden", children: [
400
- image && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen9.Box, { height: "240px", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen9.Image, { src: image, alt: title, objectFit: "cover" }) }),
401
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_zen9.Column, { padding: "6", gap: "4", children: [
402
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen9.Heading, { size: "4", as: "header", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_link4.default, { href: url, children: title }) }),
403
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_zen9.Row, { justifyContent: "space-between", children: [
404
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen9.Text, { color: "muted", children: date && (0, import_date_fns2.format)(new Date(date), "PP") }),
405
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen9.Text, { color: "muted", children: author })
378
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen8.Column, { borderSize: "1", borderRadius: "3", overflow: "hidden", children: [
379
+ image && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Box, { height: "240px", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Image, { src: image, alt: title, objectFit: "cover" }) }),
380
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen8.Column, { padding: "6", gap: "4", children: [
381
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Heading, { size: "4", as: "header", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_link4.default, { href: url, children: title }) }),
382
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen8.Row, { justifyContent: "space-between", children: [
383
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Text, { color: "muted", children: date && (0, import_date_fns.format)(new Date(date), "PP") }),
384
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Text, { color: "muted", children: author })
406
385
  ] }),
407
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen9.Box, { marginY: "5", as: "p", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen9.Text, { size: "3", children: description }) }),
408
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen9.Button, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_link4.default, { href: url, children: [
409
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen9.Text, { children: "Read more" }),
410
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen9.Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen9.Icons.Arrow, {}) })
386
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Box, { marginY: "5", as: "p", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Text, { size: "3", children: description }) }),
387
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Button, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_link4.default, { href: url, children: [
388
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Text, { children: "Read more" }),
389
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Icons.Arrow, {}) })
411
390
  ] }) })
412
391
  ] })
413
392
  ] });
414
393
  }
415
394
 
416
395
  // src/components/Blogs.tsx
417
- var import_jsx_runtime10 = require("react/jsx-runtime");
396
+ var import_jsx_runtime9 = require("react/jsx-runtime");
418
397
  function Blogs({ content, config }) {
419
398
  if (!Array.isArray(content)) {
420
399
  const { meta, code, anchors, slug } = content;
421
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Blog, { ...meta, code, anchors });
400
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Blog, { ...meta, code, anchors });
422
401
  }
423
402
  console.log({ content });
424
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen10.Grid, { gap: "5", columns: "repeat(auto-fit, minmax(400px, 1fr)", children: content?.sort((a, b) => new Date(b.meta.date).getTime() - new Date(a.meta.date).getTime()).map(({ meta, slug }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Card, { url: `/blog/${slug}`, ...meta }, slug)) });
403
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen9.Grid, { gap: "5", columns: "repeat(auto-fit, minmax(400px, 1fr)", children: content?.sort((a, b) => new Date(b.meta.date).getTime() - new Date(a.meta.date).getTime()).map(({ meta, slug }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Card, { url: `/blog/${slug}`, ...meta }, slug)) });
425
404
  }
426
405
 
427
406
  // src/components/Shiso.tsx
428
- var import_jsx_runtime11 = require("react/jsx-runtime");
407
+ var import_jsx_runtime10 = require("react/jsx-runtime");
429
408
  var defaultTemplates = {
430
409
  docs: Docs,
431
410
  blog: Blogs
@@ -434,9 +413,42 @@ var ShisoContext = (0, import_react5.createContext)(null);
434
413
  function Shiso({ type, config, content, components, templates }) {
435
414
  const Component = { ...defaultTemplates, ...templates }[type];
436
415
  if (!Component) {
437
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { children: `Component not found for type: ${type}` });
416
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { children: `Component not found for type: ${type}` });
438
417
  }
439
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShisoContext.Provider, { value: { type, config, content, components, templates }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react6.MDXProvider, { components: { ...components, pre: CodeBlock, code: import_react_zen11.Code }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Component, { config, content }) }) });
418
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShisoContext.Provider, { value: { type, config, content, components, templates }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react6.MDXProvider, { components: { ...components, pre: CodeBlock, code: import_react_zen10.Code }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, { config, content }) }) });
419
+ }
420
+
421
+ // src/components/hooks/useShiso.ts
422
+ function useShiso() {
423
+ const { content, config } = (0, import_react7.useContext)(ShisoContext);
424
+ return { content, config };
425
+ }
426
+
427
+ // src/components/Blog.tsx
428
+ var import_jsx_runtime11 = require("react/jsx-runtime");
429
+ function Blog({ title, code, author, date, image, anchors }) {
430
+ const { config } = useShiso();
431
+ const { top } = config?.blog || {};
432
+ const linksDisplay = {
433
+ default: "none",
434
+ xs: "none",
435
+ sm: "none",
436
+ md: "none",
437
+ lg: "block",
438
+ xl: "block"
439
+ };
440
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_zen11.Column, { gap: "8", maxWidth: "900px", style: { margin: "0 auto" }, children: [
441
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Box, { flexGrow: 1, children: title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Heading, { size: "1", as: "h1", align: "center", children: title }) }),
442
+ image && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Box, { height: "480px", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Image, { src: image, alt: title, objectFit: "cover", borderRadius: "3" }) }),
443
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_zen11.Row, { justifyContent: "space-between", children: [
444
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Text, { children: author }),
445
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Text, { children: date && (0, import_date_fns2.format)(new Date(date), "PP") })
446
+ ] }),
447
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_zen11.Row, { gap: "6", children: [
448
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Markdown, { code }),
449
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PageLinks, { display: linksDisplay, items: anchors, style: { top } })
450
+ ] })
451
+ ] });
440
452
  }
441
453
  // Annotate the CommonJS export names for ESM import in node:
442
454
  0 && (module.exports = {
package/dist/index.mjs CHANGED
@@ -5,8 +5,8 @@ import "@umami/react-zen/styles.css";
5
5
  import "highlight.js/styles/github-dark.css";
6
6
 
7
7
  // src/components/Blog.tsx
8
- import { Heading, Box as Box3, Text as Text2, Row, Column as Column2, Image } from "@umami/react-zen";
9
- import { format } from "date-fns";
8
+ import { Heading as Heading5, Box as Box8, Text as Text5, Row as Row5, Column as Column4, Image as Image2 } from "@umami/react-zen";
9
+ import { format as format2 } from "date-fns";
10
10
 
11
11
  // src/components/PageLinks.tsx
12
12
  import { useEffect, useState } from "react";
@@ -14,7 +14,7 @@ import { Column, Text, Box } from "@umami/react-zen";
14
14
  import classNames from "classnames";
15
15
 
16
16
  // css-modules:E:\dev\umami-shiso\src\components\PageLinks.module.css
17
- var PageLinks_default = { "links": "PageLinks_links__ZWUxN", "link": "PageLinks_link__MTJmN", "indent-1": "PageLinks_indent-1__MGExM", "indent-2": "PageLinks_indent-2__NDM3O", "indent-3": "PageLinks_indent-3__YmJlN", "indent-4": "PageLinks_indent-4__OTNjM", "indent-5": "PageLinks_indent-5__YTIwM", "indent-6": "PageLinks_indent-6__MjQwY", "selected": "PageLinks_selected__NDA0Y" };
17
+ var PageLinks_default = { "links": "PageLinks_links__M2M5N", "link": "PageLinks_link__MmRhZ", "indent-1": "PageLinks_indent-1__NmJiN", "indent-2": "PageLinks_indent-2__ZjE5M", "indent-3": "PageLinks_indent-3__ODkyO", "indent-4": "PageLinks_indent-4__MGRkZ", "indent-5": "PageLinks_indent-5__NDgyZ", "indent-6": "PageLinks_indent-6__ZDkyN", "selected": "PageLinks_selected__N2RkZ" };
18
18
 
19
19
  // src/components/PageLinks.tsx
20
20
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -54,94 +54,65 @@ function PageLinks({ items = [], className, ...props }) {
54
54
  ] }) });
55
55
  }
56
56
 
57
- // src/components/Markdown.tsx
58
- import { Box as Box2 } from "@umami/react-zen";
59
- import { runSync } from "@mdx-js/mdx";
60
- import { useMDXComponents } from "@mdx-js/react";
61
- import * as runtime from "react/jsx-runtime";
57
+ // src/components/hooks/useShiso.ts
58
+ import { useContext } from "react";
62
59
 
63
- // css-modules:E:\dev\umami-shiso\src\components\Markdown.module.css
64
- var Markdown_default = { "content": "Markdown_content__ZDlhO" };
60
+ // src/components/Shiso.tsx
61
+ import { createContext } from "react";
62
+ import { MDXProvider } from "@mdx-js/react";
63
+ import { Code } from "@umami/react-zen";
65
64
 
66
- // src/components/Markdown.tsx
67
- import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
68
- var parseMdx = (code) => {
69
- try {
70
- const result = runSync(code, {
71
- ...runtime,
72
- baseUrl: import.meta.url
73
- });
74
- return { Component: result.default };
75
- } catch (err) {
76
- return { error: err.message };
77
- }
78
- };
79
- function Markdown({ code }) {
80
- const components = useMDXComponents();
81
- const { Component, error } = parseMdx(code);
82
- if (error) {
83
- return /* @__PURE__ */ jsxs2("h1", { children: [
84
- "Error rendering MDX: ",
85
- error
86
- ] });
87
- }
88
- if (!Component) {
89
- return null;
90
- }
91
- return /* @__PURE__ */ jsx2(Box2, { className: Markdown_default.content, children: /* @__PURE__ */ jsx2(Component, { components }) });
92
- }
65
+ // src/components/CodeBlock.tsx
66
+ import { useState as useState2, useRef } from "react";
67
+ import { Icon, Icons } from "@umami/react-zen";
93
68
 
94
- // src/components/Blog.tsx
95
- import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
96
- function Blog({ title, description, code, author, date, image, anchors }) {
97
- const linksDisplay = {
98
- default: "none",
99
- xs: "none",
100
- sm: "none",
101
- md: "none",
102
- lg: "block",
103
- xl: "block"
69
+ // css-modules:E:\dev\umami-shiso\src\components\CodeBlock.module.css
70
+ var CodeBlock_default = { "container": "CodeBlock_container__ZTkxY", "button": "CodeBlock_button__MmZkO", "copy": "CodeBlock_copy__M2I0N", "check": "CodeBlock_check__MjkzY" };
71
+
72
+ // src/components/CodeBlock.tsx
73
+ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
74
+ function CodeBlock(props) {
75
+ const textInput = useRef(null);
76
+ const [copied, setCopied] = useState2(false);
77
+ const handleCopy = () => {
78
+ setCopied(true);
79
+ navigator?.clipboard?.writeText(textInput?.current?.textContent);
80
+ setTimeout(() => {
81
+ setCopied(false);
82
+ }, 1e3);
104
83
  };
105
- return /* @__PURE__ */ jsxs3(Column2, { gap: "8", maxWidth: "900px", style: { margin: "0 auto" }, children: [
106
- /* @__PURE__ */ jsx3(Box3, { flexGrow: 1, children: title && /* @__PURE__ */ jsx3(Heading, { size: "1", as: "h1", align: "center", children: title }) }),
107
- image && /* @__PURE__ */ jsx3(Box3, { height: "480px", children: /* @__PURE__ */ jsx3(Image, { src: image, alt: title, objectFit: "cover", borderRadius: "3" }) }),
108
- /* @__PURE__ */ jsxs3(Row, { justifyContent: "space-between", children: [
109
- /* @__PURE__ */ jsx3(Text2, { children: author }),
110
- /* @__PURE__ */ jsx3(Text2, { children: date && format(new Date(date), "PP") })
111
- ] }),
112
- /* @__PURE__ */ jsxs3(Row, { gap: "6", children: [
113
- /* @__PURE__ */ jsx3(Markdown, { code }),
114
- /* @__PURE__ */ jsx3(PageLinks, { display: linksDisplay, items: anchors })
115
- ] })
84
+ return /* @__PURE__ */ jsxs2("pre", { ref: textInput, className: CodeBlock_default.container, children: [
85
+ props.children,
86
+ /* @__PURE__ */ jsx2("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ jsx2(Icon, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ jsx2(Icons.Check, {}) : /* @__PURE__ */ jsx2(Icons.Copy, {}) }) })
116
87
  ] });
117
88
  }
118
89
 
119
90
  // src/components/Docs.tsx
120
91
  import {
121
- Box as Box6,
122
- Heading as Heading3,
92
+ Box as Box5,
93
+ Heading as Heading2,
123
94
  Button,
124
- Icon as Icon2,
125
- Icons as Icons2,
126
- Row as Row3,
95
+ Icon as Icon3,
96
+ Icons as Icons3,
97
+ Row as Row2,
127
98
  Modal,
128
99
  DialogTrigger,
129
100
  Dialog,
130
- Text as Text4
101
+ Text as Text3
131
102
  } from "@umami/react-zen";
132
103
 
133
104
  // src/components/SideNav.tsx
134
- import { useEffect as useEffect2, useState as useState2 } from "react";
135
- import { Box as Box4, List, ListItem, ListSection } from "@umami/react-zen";
105
+ import { useEffect as useEffect2, useState as useState3 } from "react";
106
+ import { Box as Box2, List, ListItem, ListSection } from "@umami/react-zen";
136
107
  import classNames2 from "classnames";
137
108
  import { usePathname } from "next/navigation";
138
109
  import Link from "next/link";
139
110
 
140
111
  // css-modules:E:\dev\umami-shiso\src\components\SideNav.module.css
141
- var SideNav_default = { "nav": "SideNav_nav__MzhiO", "sticky": "SideNav_sticky__ZjEyN", "item": "SideNav_item__ZWEzN", "selected": "SideNav_selected__M2Q0Y", "items": "SideNav_items__YjAxZ" };
112
+ var SideNav_default = { "nav": "SideNav_nav__ZjMzZ", "sticky": "SideNav_sticky__MWMxZ", "item": "SideNav_item__ZGQ0M", "selected": "SideNav_selected__ZTI4Y", "items": "SideNav_items__ZWU5O" };
142
113
 
143
114
  // src/components/SideNav.tsx
144
- import { jsx as jsx4 } from "react/jsx-runtime";
115
+ import { jsx as jsx3 } from "react/jsx-runtime";
145
116
  function SideNav({
146
117
  tabs,
147
118
  navigation,
@@ -154,7 +125,7 @@ function SideNav({
154
125
  const pathname = usePathname();
155
126
  const tab = tabs?.find(({ url, id }) => id !== "docs" ? pathname.startsWith(url) : false);
156
127
  const menu = navigation[tab?.id || "docs"];
157
- const [height, setHeight] = useState2();
128
+ const [height, setHeight] = useState3();
158
129
  useEffect2(() => {
159
130
  if (autoHeight) {
160
131
  const rect = document.getElementById("shiso_docs_sidenav")?.getBoundingClientRect();
@@ -163,22 +134,22 @@ function SideNav({
163
134
  }
164
135
  }
165
136
  }, [autoHeight]);
166
- return /* @__PURE__ */ jsx4(
167
- Box4,
137
+ return /* @__PURE__ */ jsx3(
138
+ Box2,
168
139
  {
169
140
  ...props,
170
141
  id: "shiso_docs_sidenav",
171
142
  className: classNames2(SideNav_default.nav, isSticky && SideNav_default.sticky, className),
172
143
  style: { ...style, height },
173
- children: /* @__PURE__ */ jsx4(List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
174
- return /* @__PURE__ */ jsx4(ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
175
- return /* @__PURE__ */ jsx4(
144
+ children: /* @__PURE__ */ jsx3(List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
145
+ return /* @__PURE__ */ jsx3(ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
146
+ return /* @__PURE__ */ jsx3(
176
147
  ListItem,
177
148
  {
178
149
  className: classNames2(SideNav_default.item, {
179
150
  [SideNav_default.selected]: url === pathname
180
151
  }),
181
- children: /* @__PURE__ */ jsx4(Link, { href: url, prefetch: false, children: text })
152
+ children: /* @__PURE__ */ jsx3(Link, { href: url, prefetch: false, children: text })
182
153
  },
183
154
  index
184
155
  );
@@ -192,27 +163,66 @@ function SideNav({
192
163
  import Link2 from "next/link";
193
164
  import { usePathname as usePathname2 } from "next/navigation";
194
165
  import { Tabs, TabList, Tab } from "@umami/react-zen";
195
- import { jsx as jsx5 } from "react/jsx-runtime";
166
+ import { jsx as jsx4 } from "react/jsx-runtime";
196
167
  function TopNav({ tabs }) {
197
168
  const pathname = usePathname2();
198
169
  const tab = tabs?.find(({ id, url }) => id !== "docs" ? pathname.startsWith(url) : false);
199
170
  const selected = tab?.id || "docs";
200
- return /* @__PURE__ */ jsx5(Tabs, { selectedKey: selected, children: /* @__PURE__ */ jsx5(TabList, { items: tabs, children: ({ id, label, url }) => {
201
- return /* @__PURE__ */ jsx5(Tab, { id, children: /* @__PURE__ */ jsx5(Link2, { href: url, children: label }) });
171
+ return /* @__PURE__ */ jsx4(Tabs, { selectedKey: selected, children: /* @__PURE__ */ jsx4(TabList, { items: tabs, children: ({ id, label, url }) => {
172
+ return /* @__PURE__ */ jsx4(Tab, { id, children: /* @__PURE__ */ jsx4(Link2, { href: url, children: label }) });
202
173
  } }) });
203
174
  }
204
175
 
205
176
  // src/components/DocContent.tsx
206
- import { Heading as Heading2, Box as Box5, Text as Text3, Row as Row2, Icon, Icons } from "@umami/react-zen";
177
+ import { Heading, Box as Box4, Text as Text2, Row, Icon as Icon2, Icons as Icons2 } from "@umami/react-zen";
207
178
  import Link3 from "next/link";
179
+
180
+ // src/components/Markdown.tsx
181
+ import { Box as Box3 } from "@umami/react-zen";
182
+ import { runSync } from "@mdx-js/mdx";
183
+ import { useMDXComponents } from "@mdx-js/react";
184
+ import * as runtime from "react/jsx-runtime";
185
+
186
+ // css-modules:E:\dev\umami-shiso\src\components\Markdown.module.css
187
+ var Markdown_default = { "content": "Markdown_content__NmE1Z" };
188
+
189
+ // src/components/Markdown.tsx
190
+ import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
191
+ var parseMdx = (code) => {
192
+ try {
193
+ const result = runSync(code, {
194
+ ...runtime,
195
+ baseUrl: import.meta.url
196
+ });
197
+ return { Component: result.default };
198
+ } catch (err) {
199
+ return { error: err.message };
200
+ }
201
+ };
202
+ function Markdown({ code }) {
203
+ const components = useMDXComponents();
204
+ const { Component, error } = parseMdx(code);
205
+ if (error) {
206
+ return /* @__PURE__ */ jsxs3("h1", { children: [
207
+ "Error rendering MDX: ",
208
+ error
209
+ ] });
210
+ }
211
+ if (!Component) {
212
+ return null;
213
+ }
214
+ return /* @__PURE__ */ jsx5(Box3, { className: Markdown_default.content, children: /* @__PURE__ */ jsx5(Component, { components }) });
215
+ }
216
+
217
+ // src/components/DocContent.tsx
208
218
  import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
209
219
  function DocContent({ section, title, description, code, next, prev }) {
210
- return /* @__PURE__ */ jsxs4(Box5, { flexGrow: 1, children: [
211
- section && /* @__PURE__ */ jsx6(Text3, { color: "primary", weight: "bold", children: section }),
212
- title && /* @__PURE__ */ jsx6(Heading2, { size: "2", as: "h1", marginY: "3", children: title }),
213
- description && /* @__PURE__ */ jsx6(Text3, { color: "muted", size: "3", children: description }),
220
+ return /* @__PURE__ */ jsxs4(Box4, { flexGrow: 1, children: [
221
+ section && /* @__PURE__ */ jsx6(Text2, { color: "primary", weight: "bold", children: section }),
222
+ title && /* @__PURE__ */ jsx6(Heading, { size: "2", as: "h1", marginY: "3", children: title }),
223
+ description && /* @__PURE__ */ jsx6(Text2, { color: "muted", size: "3", children: description }),
214
224
  /* @__PURE__ */ jsx6(Markdown, { code }),
215
- /* @__PURE__ */ jsxs4(Row2, { justifyContent: "space-between", children: [
225
+ /* @__PURE__ */ jsxs4(Row, { justifyContent: "space-between", children: [
216
226
  /* @__PURE__ */ jsx6(NavigationButton, { ...prev, isPrev: true }),
217
227
  /* @__PURE__ */ jsx6(NavigationButton, { ...next })
218
228
  ] })
@@ -224,12 +234,12 @@ var NavigationButton = ({
224
234
  isPrev
225
235
  }) => {
226
236
  if (!url || !label) {
227
- return /* @__PURE__ */ jsx6(Box5, {});
237
+ return /* @__PURE__ */ jsx6(Box4, {});
228
238
  }
229
- return /* @__PURE__ */ jsx6(Link3, { href: url, children: /* @__PURE__ */ jsxs4(Row2, { alignItems: "center", gap: "3", marginY: "3", children: [
230
- isPrev && /* @__PURE__ */ jsx6(Icon, { size: "sm", rotate: 180, children: /* @__PURE__ */ jsx6(Icons.Chevron, {}) }),
231
- /* @__PURE__ */ jsx6(Text3, { size: "3", weight: "bold", children: label }),
232
- !isPrev && /* @__PURE__ */ jsx6(Icon, { size: "sm", children: /* @__PURE__ */ jsx6(Icons.Chevron, {}) })
239
+ return /* @__PURE__ */ jsx6(Link3, { href: url, children: /* @__PURE__ */ jsxs4(Row, { alignItems: "center", gap: "3", marginY: "3", children: [
240
+ isPrev && /* @__PURE__ */ jsx6(Icon2, { size: "sm", rotate: 180, children: /* @__PURE__ */ jsx6(Icons2.Chevron, {}) }),
241
+ /* @__PURE__ */ jsx6(Text2, { size: "3", weight: "bold", children: label }),
242
+ !isPrev && /* @__PURE__ */ jsx6(Icon2, { size: "sm", children: /* @__PURE__ */ jsx6(Icons2.Chevron, {}) })
233
243
  ] }) });
234
244
  };
235
245
 
@@ -244,7 +254,7 @@ function parseContent(content, config = {}) {
244
254
  const groups = navigation[key];
245
255
  found = groups?.find((group, groupIndex) => {
246
256
  return group.pages.find((page, pageIndex) => {
247
- const match = content.path.replace(/(\/index)?\.mdx$/, "").endsWith(page.url);
257
+ const match = page.url.endsWith(content.slug);
248
258
  if (match) {
249
259
  const prevGroup = groups[groupIndex - 1];
250
260
  const nextGroup = groups[groupIndex + 1];
@@ -261,13 +271,12 @@ function parseContent(content, config = {}) {
261
271
  }
262
272
  function Docs({ content, config }) {
263
273
  if (!content) {
264
- return /* @__PURE__ */ jsx7(Heading3, { children: "Page not found" });
274
+ return /* @__PURE__ */ jsx7(Heading2, { children: "Page not found" });
265
275
  }
266
276
  const { tabs, navigation, code, meta, section, next, prev, anchors } = parseContent(
267
277
  content,
268
278
  config?.docs
269
279
  );
270
- console.log({ tabs, navigation, code, meta, section, next, prev, anchors });
271
280
  const { top } = config?.docs || {};
272
281
  const navDisplay = {
273
282
  default: "none",
@@ -291,20 +300,20 @@ function Docs({ content, config }) {
291
300
  };
292
301
  const MobileMenuButton = () => /* @__PURE__ */ jsxs5(DialogTrigger, { children: [
293
302
  /* @__PURE__ */ jsxs5(Button, { children: [
294
- /* @__PURE__ */ jsx7(Icon2, { children: /* @__PURE__ */ jsx7(Icons2.Menu, {}) }),
295
- /* @__PURE__ */ jsx7(Text4, { children: "Menu" })
303
+ /* @__PURE__ */ jsx7(Icon3, { children: /* @__PURE__ */ jsx7(Icons3.Menu, {}) }),
304
+ /* @__PURE__ */ jsx7(Text3, { children: "Menu" })
296
305
  ] }),
297
306
  /* @__PURE__ */ jsx7(Modal, { position: "bottom", offset: "40px", children: /* @__PURE__ */ jsx7(Dialog, { variant: "sheet", children: ({ close }) => {
298
307
  return /* @__PURE__ */ jsxs5(Fragment, { children: [
299
- /* @__PURE__ */ jsx7(Row3, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx7(Button, { onPress: () => close(), variant: "quiet", children: /* @__PURE__ */ jsx7(Icon2, { size: "sm", children: /* @__PURE__ */ jsx7(Icons2.Close, {}) }) }) }),
300
- /* @__PURE__ */ jsx7(Box6, { height: "100%", overflow: "auto", children: /* @__PURE__ */ jsx7(SideNav, { tabs, navigation }) })
308
+ /* @__PURE__ */ jsx7(Row2, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx7(Button, { onPress: () => close(), variant: "quiet", children: /* @__PURE__ */ jsx7(Icon3, { size: "sm", children: /* @__PURE__ */ jsx7(Icons3.Close, {}) }) }) }),
309
+ /* @__PURE__ */ jsx7(Box5, { height: "100%", overflow: "auto", children: /* @__PURE__ */ jsx7(SideNav, { tabs, navigation }) })
301
310
  ] });
302
311
  } }) })
303
312
  ] });
304
- return /* @__PURE__ */ jsxs5(Box6, { flexGrow: "1", children: [
305
- /* @__PURE__ */ jsx7(Row3, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ jsx7(MobileMenuButton, {}) }),
313
+ return /* @__PURE__ */ jsxs5(Box5, { flexGrow: "1", children: [
314
+ /* @__PURE__ */ jsx7(Row2, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ jsx7(MobileMenuButton, {}) }),
306
315
  tabs && /* @__PURE__ */ jsx7(TopNav, { tabs }),
307
- /* @__PURE__ */ jsxs5(Row3, { gap: "6", children: [
316
+ /* @__PURE__ */ jsxs5(Row2, { gap: "6", children: [
308
317
  /* @__PURE__ */ jsx7(
309
318
  SideNav,
310
319
  {
@@ -332,75 +341,45 @@ function Docs({ content, config }) {
332
341
  ] });
333
342
  }
334
343
 
335
- // src/components/Shiso.tsx
336
- import { createContext } from "react";
337
- import { MDXProvider } from "@mdx-js/react";
338
- import { Code } from "@umami/react-zen";
339
-
340
- // src/components/CodeBlock.tsx
341
- import { useState as useState3, useRef } from "react";
342
- import { Icon as Icon3, Icons as Icons3 } from "@umami/react-zen";
343
-
344
- // css-modules:E:\dev\umami-shiso\src\components\CodeBlock.module.css
345
- var CodeBlock_default = { "container": "CodeBlock_container__ZTkxY", "button": "CodeBlock_button__MmZkO", "copy": "CodeBlock_copy__M2I0N", "check": "CodeBlock_check__MjkzY" };
346
-
347
- // src/components/CodeBlock.tsx
348
- import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
349
- function CodeBlock(props) {
350
- const textInput = useRef(null);
351
- const [copied, setCopied] = useState3(false);
352
- const handleCopy = () => {
353
- setCopied(true);
354
- navigator?.clipboard?.writeText(textInput?.current?.textContent);
355
- setTimeout(() => {
356
- setCopied(false);
357
- }, 1e3);
358
- };
359
- return /* @__PURE__ */ jsxs6("pre", { ref: textInput, className: CodeBlock_default.container, children: [
360
- props.children,
361
- /* @__PURE__ */ jsx8("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ jsx8(Icon3, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ jsx8(Icons3.Check, {}) : /* @__PURE__ */ jsx8(Icons3.Copy, {}) }) })
362
- ] });
363
- }
364
-
365
344
  // src/components/Blogs.tsx
366
345
  import { Grid } from "@umami/react-zen";
367
346
 
368
347
  // src/components/Card.tsx
369
- import { Box as Box7, Image as Image2, Column as Column3, Row as Row4, Heading as Heading4, Text as Text5, Button as Button2, Icon as Icon4, Icons as Icons4 } from "@umami/react-zen";
348
+ import { Box as Box6, Image, Column as Column2, Row as Row3, Heading as Heading3, Text as Text4, Button as Button2, Icon as Icon4, Icons as Icons4 } from "@umami/react-zen";
370
349
  import Link4 from "next/link";
371
- import { format as format2 } from "date-fns";
372
- import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
350
+ import { format } from "date-fns";
351
+ import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
373
352
  function Card({ title, description, date, author, url, image }) {
374
- return /* @__PURE__ */ jsxs7(Column3, { borderSize: "1", borderRadius: "3", overflow: "hidden", children: [
375
- image && /* @__PURE__ */ jsx9(Box7, { height: "240px", children: /* @__PURE__ */ jsx9(Image2, { src: image, alt: title, objectFit: "cover" }) }),
376
- /* @__PURE__ */ jsxs7(Column3, { padding: "6", gap: "4", children: [
377
- /* @__PURE__ */ jsx9(Heading4, { size: "4", as: "header", children: /* @__PURE__ */ jsx9(Link4, { href: url, children: title }) }),
378
- /* @__PURE__ */ jsxs7(Row4, { justifyContent: "space-between", children: [
379
- /* @__PURE__ */ jsx9(Text5, { color: "muted", children: date && format2(new Date(date), "PP") }),
380
- /* @__PURE__ */ jsx9(Text5, { color: "muted", children: author })
353
+ return /* @__PURE__ */ jsxs6(Column2, { borderSize: "1", borderRadius: "3", overflow: "hidden", children: [
354
+ image && /* @__PURE__ */ jsx8(Box6, { height: "240px", children: /* @__PURE__ */ jsx8(Image, { src: image, alt: title, objectFit: "cover" }) }),
355
+ /* @__PURE__ */ jsxs6(Column2, { padding: "6", gap: "4", children: [
356
+ /* @__PURE__ */ jsx8(Heading3, { size: "4", as: "header", children: /* @__PURE__ */ jsx8(Link4, { href: url, children: title }) }),
357
+ /* @__PURE__ */ jsxs6(Row3, { justifyContent: "space-between", children: [
358
+ /* @__PURE__ */ jsx8(Text4, { color: "muted", children: date && format(new Date(date), "PP") }),
359
+ /* @__PURE__ */ jsx8(Text4, { color: "muted", children: author })
381
360
  ] }),
382
- /* @__PURE__ */ jsx9(Box7, { marginY: "5", as: "p", children: /* @__PURE__ */ jsx9(Text5, { size: "3", children: description }) }),
383
- /* @__PURE__ */ jsx9(Button2, { asChild: true, children: /* @__PURE__ */ jsxs7(Link4, { href: url, children: [
384
- /* @__PURE__ */ jsx9(Text5, { children: "Read more" }),
385
- /* @__PURE__ */ jsx9(Icon4, { children: /* @__PURE__ */ jsx9(Icons4.Arrow, {}) })
361
+ /* @__PURE__ */ jsx8(Box6, { marginY: "5", as: "p", children: /* @__PURE__ */ jsx8(Text4, { size: "3", children: description }) }),
362
+ /* @__PURE__ */ jsx8(Button2, { asChild: true, children: /* @__PURE__ */ jsxs6(Link4, { href: url, children: [
363
+ /* @__PURE__ */ jsx8(Text4, { children: "Read more" }),
364
+ /* @__PURE__ */ jsx8(Icon4, { children: /* @__PURE__ */ jsx8(Icons4.Arrow, {}) })
386
365
  ] }) })
387
366
  ] })
388
367
  ] });
389
368
  }
390
369
 
391
370
  // src/components/Blogs.tsx
392
- import { jsx as jsx10 } from "react/jsx-runtime";
371
+ import { jsx as jsx9 } from "react/jsx-runtime";
393
372
  function Blogs({ content, config }) {
394
373
  if (!Array.isArray(content)) {
395
374
  const { meta, code, anchors, slug } = content;
396
- return /* @__PURE__ */ jsx10(Blog, { ...meta, code, anchors });
375
+ return /* @__PURE__ */ jsx9(Blog, { ...meta, code, anchors });
397
376
  }
398
377
  console.log({ content });
399
- return /* @__PURE__ */ jsx10(Grid, { gap: "5", columns: "repeat(auto-fit, minmax(400px, 1fr)", children: content?.sort((a, b) => new Date(b.meta.date).getTime() - new Date(a.meta.date).getTime()).map(({ meta, slug }) => /* @__PURE__ */ jsx10(Card, { url: `/blog/${slug}`, ...meta }, slug)) });
378
+ return /* @__PURE__ */ jsx9(Grid, { gap: "5", columns: "repeat(auto-fit, minmax(400px, 1fr)", children: content?.sort((a, b) => new Date(b.meta.date).getTime() - new Date(a.meta.date).getTime()).map(({ meta, slug }) => /* @__PURE__ */ jsx9(Card, { url: `/blog/${slug}`, ...meta }, slug)) });
400
379
  }
401
380
 
402
381
  // src/components/Shiso.tsx
403
- import { jsx as jsx11 } from "react/jsx-runtime";
382
+ import { jsx as jsx10 } from "react/jsx-runtime";
404
383
  var defaultTemplates = {
405
384
  docs: Docs,
406
385
  blog: Blogs
@@ -409,9 +388,42 @@ var ShisoContext = createContext(null);
409
388
  function Shiso({ type, config, content, components, templates }) {
410
389
  const Component = { ...defaultTemplates, ...templates }[type];
411
390
  if (!Component) {
412
- return /* @__PURE__ */ jsx11("h1", { children: `Component not found for type: ${type}` });
391
+ return /* @__PURE__ */ jsx10("h1", { children: `Component not found for type: ${type}` });
413
392
  }
414
- return /* @__PURE__ */ jsx11(ShisoContext.Provider, { value: { type, config, content, components, templates }, children: /* @__PURE__ */ jsx11(MDXProvider, { components: { ...components, pre: CodeBlock, code: Code }, children: /* @__PURE__ */ jsx11(Component, { config, content }) }) });
393
+ return /* @__PURE__ */ jsx10(ShisoContext.Provider, { value: { type, config, content, components, templates }, children: /* @__PURE__ */ jsx10(MDXProvider, { components: { ...components, pre: CodeBlock, code: Code }, children: /* @__PURE__ */ jsx10(Component, { config, content }) }) });
394
+ }
395
+
396
+ // src/components/hooks/useShiso.ts
397
+ function useShiso() {
398
+ const { content, config } = useContext(ShisoContext);
399
+ return { content, config };
400
+ }
401
+
402
+ // src/components/Blog.tsx
403
+ import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
404
+ function Blog({ title, code, author, date, image, anchors }) {
405
+ const { config } = useShiso();
406
+ const { top } = config?.blog || {};
407
+ const linksDisplay = {
408
+ default: "none",
409
+ xs: "none",
410
+ sm: "none",
411
+ md: "none",
412
+ lg: "block",
413
+ xl: "block"
414
+ };
415
+ return /* @__PURE__ */ jsxs7(Column4, { gap: "8", maxWidth: "900px", style: { margin: "0 auto" }, children: [
416
+ /* @__PURE__ */ jsx11(Box8, { flexGrow: 1, children: title && /* @__PURE__ */ jsx11(Heading5, { size: "1", as: "h1", align: "center", children: title }) }),
417
+ image && /* @__PURE__ */ jsx11(Box8, { height: "480px", children: /* @__PURE__ */ jsx11(Image2, { src: image, alt: title, objectFit: "cover", borderRadius: "3" }) }),
418
+ /* @__PURE__ */ jsxs7(Row5, { justifyContent: "space-between", children: [
419
+ /* @__PURE__ */ jsx11(Text5, { children: author }),
420
+ /* @__PURE__ */ jsx11(Text5, { children: date && format2(new Date(date), "PP") })
421
+ ] }),
422
+ /* @__PURE__ */ jsxs7(Row5, { gap: "6", children: [
423
+ /* @__PURE__ */ jsx11(Markdown, { code }),
424
+ /* @__PURE__ */ jsx11(PageLinks, { display: linksDisplay, items: anchors, style: { top } })
425
+ ] })
426
+ ] });
415
427
  }
416
428
  export {
417
429
  Blog,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umami/shiso",
3
- "version": "0.34.0",
3
+ "version": "0.36.0",
4
4
  "description": "A content layer for Next.js",
5
5
  "homepage": "https://umami.is/shiso",
6
6
  "repository": {
@@ -58,6 +58,7 @@
58
58
  "react-dom": "^19.0.0",
59
59
  "recursive-readdir": "^2.2.3",
60
60
  "rehype-highlight": "^7.0.1",
61
+ "rehype-slug": "^6.0.0",
61
62
  "remark-gfm": "^4.0.0",
62
63
  "thenby": "^1.3.4"
63
64
  },
package/server/index.d.ts CHANGED
@@ -14,7 +14,7 @@ declare module '@umami/shiso/server' {
14
14
  }>;
15
15
  }) => Promise<{
16
16
  title: {
17
- absolute: string;
17
+ absolute: any;
18
18
  default: any;
19
19
  };
20
20
  }>;
package/server/index.js CHANGED
@@ -37,13 +37,14 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
37
37
  import { cache } from 'react';
38
38
  import { compile } from '@mdx-js/mdx';
39
39
  import remarkGfm from 'remark-gfm';
40
+ import rehypeSlug from 'rehype-slug';
40
41
  import rehypeHighlight from 'rehype-highlight';
41
42
  import matter from 'gray-matter';
42
43
  import recursive from 'recursive-readdir';
43
44
  import fs from 'node:fs/promises';
44
45
  import path from 'node:path';
45
46
  export var parseFile = cache(function (file) { return __awaiter(void 0, void 0, void 0, function () {
46
- var postContent, _a, frontmatter, mdxContent, anchors_1, modifiedContent, code, _b, _c;
47
+ var postContent, _a, frontmatter, mdxContent, anchors_1, code, _b, _c;
47
48
  return __generator(this, function (_d) {
48
49
  switch (_d.label) {
49
50
  case 0:
@@ -53,25 +54,20 @@ export var parseFile = cache(function (file) { return __awaiter(void 0, void 0,
53
54
  postContent = _d.sent();
54
55
  _a = matter(postContent), frontmatter = _a.data, mdxContent = _a.content;
55
56
  anchors_1 = [];
56
- modifiedContent = mdxContent
57
- .split('\n')
58
- .map(function (line) {
57
+ mdxContent.split('\n').forEach(function (line) {
59
58
  var match = line.match(/^(#+)\s+(.*)/);
60
59
  if (match) {
61
60
  var num = match[1], name_1 = match[2];
62
61
  var id = name_1.toLowerCase().replace(/\s+/g, '-');
63
62
  var size = num.length;
64
63
  anchors_1.push({ name: name_1, id: id, size: size });
65
- return "<h".concat(size, " id=\"").concat(id, "\">").concat(name_1.replace(/\{|\}/g, ''), "</h").concat(size, ">");
66
64
  }
67
- return line;
68
- })
69
- .join('\n');
65
+ });
70
66
  _b = String;
71
- return [4 /*yield*/, compile(modifiedContent, {
67
+ return [4 /*yield*/, compile(mdxContent, {
72
68
  outputFormat: 'function-body',
73
69
  remarkPlugins: [remarkGfm],
74
- rehypePlugins: [rehypeHighlight],
70
+ rehypePlugins: [rehypeHighlight, rehypeSlug],
75
71
  })];
76
72
  case 2:
77
73
  code = _b.apply(void 0, [_d.sent()]);
@@ -110,20 +106,20 @@ export function next(type, config) {
110
106
  function generateMetadata(_a) {
111
107
  return __awaiter(this, arguments, void 0, function (_b) {
112
108
  var name, file, content;
113
- var _c, _d, _e;
109
+ var _c, _d, _e, _f;
114
110
  var params = _b.params;
115
- return __generator(this, function (_f) {
116
- switch (_f.label) {
111
+ return __generator(this, function (_g) {
112
+ switch (_g.label) {
117
113
  case 0: return [4 /*yield*/, params];
118
114
  case 1:
119
- name = ((_d = (_c = (_f.sent())) === null || _c === void 0 ? void 0 : _c.slug) === null || _d === void 0 ? void 0 : _d.join('/')) || 'index';
115
+ name = ((_d = (_c = (_g.sent())) === null || _c === void 0 ? void 0 : _c.slug) === null || _d === void 0 ? void 0 : _d.join('/')) || 'index';
120
116
  file = path.join(dir, "".concat(name, ".mdx"));
121
117
  return [4 /*yield*/, getContent(file)];
122
118
  case 2:
123
- content = _f.sent();
119
+ content = _g.sent();
124
120
  return [2 /*return*/, {
125
121
  title: {
126
- absolute: "".concat((_e = content === null || content === void 0 ? void 0 : content.meta) === null || _e === void 0 ? void 0 : _e.title, " \u2013 ").concat(title),
122
+ absolute: ((_e = content === null || content === void 0 ? void 0 : content.meta) === null || _e === void 0 ? void 0 : _e.title) ? "".concat((_f = content === null || content === void 0 ? void 0 : content.meta) === null || _f === void 0 ? void 0 : _f.title, " \u2013 ").concat(title) : title,
127
123
  default: title,
128
124
  },
129
125
  }];