@umami/shiso 0.34.0 → 0.35.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 (6) hide show
  1. package/dist/index.css +114 -103
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +138 -125
  4. package/dist/index.mjs +162 -149
  5. package/package.json +2 -1
  6. package/server/index.js +6 -10
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];
@@ -282,6 +292,7 @@ function parseContent(content, config = {}) {
282
292
  });
283
293
  }
284
294
  });
295
+ console.log({ content, tabs, navigation, section, next, prev });
285
296
  return { ...content, tabs, navigation, section, next, prev };
286
297
  }
287
298
  function Docs({ content, config }) {
@@ -292,7 +303,6 @@ function Docs({ content, config }) {
292
303
  content,
293
304
  config?.docs
294
305
  );
295
- console.log({ tabs, navigation, code, meta, section, next, prev, anchors });
296
306
  const { top } = config?.docs || {};
297
307
  const navDisplay = {
298
308
  default: "none",
@@ -357,75 +367,45 @@ function Docs({ content, config }) {
357
367
  ] });
358
368
  }
359
369
 
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
370
  // src/components/Blogs.tsx
391
- var import_react_zen10 = require("@umami/react-zen");
371
+ var import_react_zen9 = require("@umami/react-zen");
392
372
 
393
373
  // src/components/Card.tsx
394
- var import_react_zen9 = require("@umami/react-zen");
374
+ var import_react_zen8 = require("@umami/react-zen");
395
375
  var import_link4 = __toESM(require("next/link"));
396
- var import_date_fns2 = require("date-fns");
397
- var import_jsx_runtime9 = require("react/jsx-runtime");
376
+ var import_date_fns = require("date-fns");
377
+ var import_jsx_runtime8 = require("react/jsx-runtime");
398
378
  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 })
379
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen8.Column, { borderSize: "1", borderRadius: "3", overflow: "hidden", children: [
380
+ 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" }) }),
381
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen8.Column, { padding: "6", gap: "4", children: [
382
+ /* @__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 }) }),
383
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_zen8.Row, { justifyContent: "space-between", children: [
384
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Text, { color: "muted", children: date && (0, import_date_fns.format)(new Date(date), "PP") }),
385
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Text, { color: "muted", children: author })
406
386
  ] }),
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, {}) })
387
+ /* @__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 }) }),
388
+ /* @__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: [
389
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Text, { children: "Read more" }),
390
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen8.Icons.Arrow, {}) })
411
391
  ] }) })
412
392
  ] })
413
393
  ] });
414
394
  }
415
395
 
416
396
  // src/components/Blogs.tsx
417
- var import_jsx_runtime10 = require("react/jsx-runtime");
397
+ var import_jsx_runtime9 = require("react/jsx-runtime");
418
398
  function Blogs({ content, config }) {
419
399
  if (!Array.isArray(content)) {
420
400
  const { meta, code, anchors, slug } = content;
421
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Blog, { ...meta, code, anchors });
401
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Blog, { ...meta, code, anchors });
422
402
  }
423
403
  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)) });
404
+ 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
405
  }
426
406
 
427
407
  // src/components/Shiso.tsx
428
- var import_jsx_runtime11 = require("react/jsx-runtime");
408
+ var import_jsx_runtime10 = require("react/jsx-runtime");
429
409
  var defaultTemplates = {
430
410
  docs: Docs,
431
411
  blog: Blogs
@@ -434,9 +414,42 @@ var ShisoContext = (0, import_react5.createContext)(null);
434
414
  function Shiso({ type, config, content, components, templates }) {
435
415
  const Component = { ...defaultTemplates, ...templates }[type];
436
416
  if (!Component) {
437
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { children: `Component not found for type: ${type}` });
417
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { children: `Component not found for type: ${type}` });
438
418
  }
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 }) }) });
419
+ 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 }) }) });
420
+ }
421
+
422
+ // src/components/hooks/useShiso.ts
423
+ function useShiso() {
424
+ const { content, config } = (0, import_react7.useContext)(ShisoContext);
425
+ return { content, config };
426
+ }
427
+
428
+ // src/components/Blog.tsx
429
+ var import_jsx_runtime11 = require("react/jsx-runtime");
430
+ function Blog({ title, code, author, date, image, anchors }) {
431
+ const { config } = useShiso();
432
+ const { top } = config?.blog || {};
433
+ const linksDisplay = {
434
+ default: "none",
435
+ xs: "none",
436
+ sm: "none",
437
+ md: "none",
438
+ lg: "block",
439
+ xl: "block"
440
+ };
441
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_zen11.Column, { gap: "8", maxWidth: "900px", style: { margin: "0 auto" }, children: [
442
+ /* @__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 }) }),
443
+ 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" }) }),
444
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_zen11.Row, { justifyContent: "space-between", children: [
445
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Text, { children: author }),
446
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_zen11.Text, { children: date && (0, import_date_fns2.format)(new Date(date), "PP") })
447
+ ] }),
448
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_zen11.Row, { gap: "6", children: [
449
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Markdown, { code }),
450
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PageLinks, { display: linksDisplay, items: anchors, style: { top } })
451
+ ] })
452
+ ] });
440
453
  }
441
454
  // Annotate the CommonJS export names for ESM import in node:
442
455
  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];
@@ -257,17 +267,17 @@ function parseContent(content, config = {}) {
257
267
  });
258
268
  }
259
269
  });
270
+ console.log({ content, tabs, navigation, section, next, prev });
260
271
  return { ...content, tabs, navigation, section, next, prev };
261
272
  }
262
273
  function Docs({ content, config }) {
263
274
  if (!content) {
264
- return /* @__PURE__ */ jsx7(Heading3, { children: "Page not found" });
275
+ return /* @__PURE__ */ jsx7(Heading2, { children: "Page not found" });
265
276
  }
266
277
  const { tabs, navigation, code, meta, section, next, prev, anchors } = parseContent(
267
278
  content,
268
279
  config?.docs
269
280
  );
270
- console.log({ tabs, navigation, code, meta, section, next, prev, anchors });
271
281
  const { top } = config?.docs || {};
272
282
  const navDisplay = {
273
283
  default: "none",
@@ -291,20 +301,20 @@ function Docs({ content, config }) {
291
301
  };
292
302
  const MobileMenuButton = () => /* @__PURE__ */ jsxs5(DialogTrigger, { children: [
293
303
  /* @__PURE__ */ jsxs5(Button, { children: [
294
- /* @__PURE__ */ jsx7(Icon2, { children: /* @__PURE__ */ jsx7(Icons2.Menu, {}) }),
295
- /* @__PURE__ */ jsx7(Text4, { children: "Menu" })
304
+ /* @__PURE__ */ jsx7(Icon3, { children: /* @__PURE__ */ jsx7(Icons3.Menu, {}) }),
305
+ /* @__PURE__ */ jsx7(Text3, { children: "Menu" })
296
306
  ] }),
297
307
  /* @__PURE__ */ jsx7(Modal, { position: "bottom", offset: "40px", children: /* @__PURE__ */ jsx7(Dialog, { variant: "sheet", children: ({ close }) => {
298
308
  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 }) })
309
+ /* @__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, {}) }) }) }),
310
+ /* @__PURE__ */ jsx7(Box5, { height: "100%", overflow: "auto", children: /* @__PURE__ */ jsx7(SideNav, { tabs, navigation }) })
301
311
  ] });
302
312
  } }) })
303
313
  ] });
304
- return /* @__PURE__ */ jsxs5(Box6, { flexGrow: "1", children: [
305
- /* @__PURE__ */ jsx7(Row3, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ jsx7(MobileMenuButton, {}) }),
314
+ return /* @__PURE__ */ jsxs5(Box5, { flexGrow: "1", children: [
315
+ /* @__PURE__ */ jsx7(Row2, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ jsx7(MobileMenuButton, {}) }),
306
316
  tabs && /* @__PURE__ */ jsx7(TopNav, { tabs }),
307
- /* @__PURE__ */ jsxs5(Row3, { gap: "6", children: [
317
+ /* @__PURE__ */ jsxs5(Row2, { gap: "6", children: [
308
318
  /* @__PURE__ */ jsx7(
309
319
  SideNav,
310
320
  {
@@ -332,75 +342,45 @@ function Docs({ content, config }) {
332
342
  ] });
333
343
  }
334
344
 
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
345
  // src/components/Blogs.tsx
366
346
  import { Grid } from "@umami/react-zen";
367
347
 
368
348
  // 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";
349
+ 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
350
  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";
351
+ import { format } from "date-fns";
352
+ import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
373
353
  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 })
354
+ return /* @__PURE__ */ jsxs6(Column2, { borderSize: "1", borderRadius: "3", overflow: "hidden", children: [
355
+ image && /* @__PURE__ */ jsx8(Box6, { height: "240px", children: /* @__PURE__ */ jsx8(Image, { src: image, alt: title, objectFit: "cover" }) }),
356
+ /* @__PURE__ */ jsxs6(Column2, { padding: "6", gap: "4", children: [
357
+ /* @__PURE__ */ jsx8(Heading3, { size: "4", as: "header", children: /* @__PURE__ */ jsx8(Link4, { href: url, children: title }) }),
358
+ /* @__PURE__ */ jsxs6(Row3, { justifyContent: "space-between", children: [
359
+ /* @__PURE__ */ jsx8(Text4, { color: "muted", children: date && format(new Date(date), "PP") }),
360
+ /* @__PURE__ */ jsx8(Text4, { color: "muted", children: author })
381
361
  ] }),
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, {}) })
362
+ /* @__PURE__ */ jsx8(Box6, { marginY: "5", as: "p", children: /* @__PURE__ */ jsx8(Text4, { size: "3", children: description }) }),
363
+ /* @__PURE__ */ jsx8(Button2, { asChild: true, children: /* @__PURE__ */ jsxs6(Link4, { href: url, children: [
364
+ /* @__PURE__ */ jsx8(Text4, { children: "Read more" }),
365
+ /* @__PURE__ */ jsx8(Icon4, { children: /* @__PURE__ */ jsx8(Icons4.Arrow, {}) })
386
366
  ] }) })
387
367
  ] })
388
368
  ] });
389
369
  }
390
370
 
391
371
  // src/components/Blogs.tsx
392
- import { jsx as jsx10 } from "react/jsx-runtime";
372
+ import { jsx as jsx9 } from "react/jsx-runtime";
393
373
  function Blogs({ content, config }) {
394
374
  if (!Array.isArray(content)) {
395
375
  const { meta, code, anchors, slug } = content;
396
- return /* @__PURE__ */ jsx10(Blog, { ...meta, code, anchors });
376
+ return /* @__PURE__ */ jsx9(Blog, { ...meta, code, anchors });
397
377
  }
398
378
  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)) });
379
+ 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
380
  }
401
381
 
402
382
  // src/components/Shiso.tsx
403
- import { jsx as jsx11 } from "react/jsx-runtime";
383
+ import { jsx as jsx10 } from "react/jsx-runtime";
404
384
  var defaultTemplates = {
405
385
  docs: Docs,
406
386
  blog: Blogs
@@ -409,9 +389,42 @@ var ShisoContext = createContext(null);
409
389
  function Shiso({ type, config, content, components, templates }) {
410
390
  const Component = { ...defaultTemplates, ...templates }[type];
411
391
  if (!Component) {
412
- return /* @__PURE__ */ jsx11("h1", { children: `Component not found for type: ${type}` });
392
+ return /* @__PURE__ */ jsx10("h1", { children: `Component not found for type: ${type}` });
413
393
  }
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 }) }) });
394
+ 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 }) }) });
395
+ }
396
+
397
+ // src/components/hooks/useShiso.ts
398
+ function useShiso() {
399
+ const { content, config } = useContext(ShisoContext);
400
+ return { content, config };
401
+ }
402
+
403
+ // src/components/Blog.tsx
404
+ import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
405
+ function Blog({ title, code, author, date, image, anchors }) {
406
+ const { config } = useShiso();
407
+ const { top } = config?.blog || {};
408
+ const linksDisplay = {
409
+ default: "none",
410
+ xs: "none",
411
+ sm: "none",
412
+ md: "none",
413
+ lg: "block",
414
+ xl: "block"
415
+ };
416
+ return /* @__PURE__ */ jsxs7(Column4, { gap: "8", maxWidth: "900px", style: { margin: "0 auto" }, children: [
417
+ /* @__PURE__ */ jsx11(Box8, { flexGrow: 1, children: title && /* @__PURE__ */ jsx11(Heading5, { size: "1", as: "h1", align: "center", children: title }) }),
418
+ image && /* @__PURE__ */ jsx11(Box8, { height: "480px", children: /* @__PURE__ */ jsx11(Image2, { src: image, alt: title, objectFit: "cover", borderRadius: "3" }) }),
419
+ /* @__PURE__ */ jsxs7(Row5, { justifyContent: "space-between", children: [
420
+ /* @__PURE__ */ jsx11(Text5, { children: author }),
421
+ /* @__PURE__ */ jsx11(Text5, { children: date && format2(new Date(date), "PP") })
422
+ ] }),
423
+ /* @__PURE__ */ jsxs7(Row5, { gap: "6", children: [
424
+ /* @__PURE__ */ jsx11(Markdown, { code }),
425
+ /* @__PURE__ */ jsx11(PageLinks, { display: linksDisplay, items: anchors, style: { top } })
426
+ ] })
427
+ ] });
415
428
  }
416
429
  export {
417
430
  Blog,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umami/shiso",
3
- "version": "0.34.0",
3
+ "version": "0.35.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.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()]);