@umami/shiso 0.20.0 → 0.21.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 (4) hide show
  1. package/dist/index.css +26 -23
  2. package/dist/index.js +44 -38
  3. package/dist/index.mjs +20 -14
  4. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -34,45 +34,45 @@ pre.CodeBlock_container__YmFmN code {
34
34
  }
35
35
 
36
36
  /* virtual-css:css:0ed498f49b21d225f1b5a4e1685cf2e5 */
37
- .PageLinks_title__YjEwN {
37
+ .PageLinks_title__ZGY1Y {
38
38
  position: sticky;
39
39
  top: 0;
40
40
  }
41
- .PageLinks_links__OWRlM {
41
+ .PageLinks_links__ODM4N {
42
42
  position: sticky;
43
43
  top: 30px;
44
44
  height: max-content;
45
45
  }
46
- .PageLinks_links__OWRlM a.PageLinks_link__NDJjM {
46
+ .PageLinks_links__ODM4N a.PageLinks_link__ZDE4O {
47
47
  display: block;
48
48
  color: var(--font-color-muted);
49
49
  font-size: var(--font-size);
50
50
  text-wrap: nowrap;
51
51
  text-decoration: none;
52
52
  }
53
- .PageLinks_links__OWRlM a.PageLinks_link__NDJjM:hover {
53
+ .PageLinks_links__ODM4N a.PageLinks_link__ZDE4O:hover {
54
54
  color: var(--primary-color);
55
55
  text-decoration: none;
56
56
  }
57
- .PageLinks_indent-1__MDU1M {
57
+ .PageLinks_indent-1__NGU3M {
58
58
  margin-left: 0;
59
59
  }
60
- .PageLinks_indent-2__MDBmY {
60
+ .PageLinks_indent-2__YjFlN {
61
61
  margin-left: 0;
62
62
  }
63
- .PageLinks_indent-3__ZmY2O {
63
+ .PageLinks_indent-3__NzQxY {
64
64
  margin-left: 10px;
65
65
  }
66
- .PageLinks_indent-4__MDA4N {
66
+ .PageLinks_indent-4__NzRjN {
67
67
  margin-left: 20px;
68
68
  }
69
- .PageLinks_indent-5__MDBlM {
69
+ .PageLinks_indent-5__ZmRhN {
70
70
  margin-left: 30px;
71
71
  }
72
- .PageLinks_indent-6__NjIwM {
72
+ .PageLinks_indent-6__YzQ3N {
73
73
  margin-left: 40px;
74
74
  }
75
- a.PageLinks_selected__NjEyY {
75
+ .PageLinks_links__ODM4N a.PageLinks_selected__NTViM {
76
76
  color: var(--primary-color);
77
77
  }
78
78
 
@@ -107,52 +107,55 @@ a.PageLinks_selected__NjEyY {
107
107
  }
108
108
 
109
109
  /* virtual-css:css:7938c95522eda3e1f8244364ad70b38c */
110
- .ContentArea_content__OTBiZ {
110
+ .ContentArea_content__NDVhM {
111
111
  font-size: 16px;
112
112
  margin-bottom: 60px;
113
113
  }
114
- .ContentArea_content__OTBiZ > p {
114
+ .ContentArea_content__NDVhM > p {
115
115
  color: var(--font-color-muted);
116
116
  line-height: 1.8;
117
117
  }
118
- .ContentArea_content__OTBiZ a {
118
+ .ContentArea_content__NDVhM a {
119
119
  color: var(--font-color);
120
120
  font-weight: 600;
121
121
  text-decoration: underline var(--border-color);
122
122
  text-underline-offset: 4px;
123
123
  }
124
- .ContentArea_content__OTBiZ a:hover {
124
+ .ContentArea_content__NDVhM a:hover {
125
125
  color: var(--font-color);
126
126
  text-decoration: underline var(--primary-color);
127
127
  }
128
- .ContentArea_content__OTBiZ h1 {
128
+ .ContentArea_content__NDVhM h1 {
129
129
  font-size: var(--font-size-8);
130
130
  letter-spacing: var(--letter-spacing-1);
131
131
  margin: 0 0 var(--spacing-4) 0;
132
132
  }
133
- .ContentArea_content__OTBiZ h2 {
133
+ .ContentArea_content__NDVhM h2 {
134
134
  font-size: var(--font-size-6);
135
135
  letter-spacing: var(--letter-spacing-1);
136
136
  margin: var(--spacing-8) 0 var(--spacing-4) 0;
137
137
  }
138
- .ContentArea_content__OTBiZ h3 {
138
+ .ContentArea_content__NDVhM h3 {
139
139
  font-size: var(--font-size-5);
140
140
  letter-spacing: var(--letter-spacing-1);
141
141
  margin: var(--spacing-7) 0 var(--spacing-4) 0;
142
142
  }
143
- .ContentArea_content__OTBiZ ul {
143
+ .ContentArea_content__NDVhM *[id] {
144
+ scroll-margin-top: var(--spacing-4);
145
+ }
146
+ .ContentArea_content__NDVhM ul {
144
147
  list-style: disc;
145
148
  }
146
- .ContentArea_content__OTBiZ ol {
149
+ .ContentArea_content__NDVhM ol {
147
150
  list-style: decimal;
148
151
  }
149
- .ContentArea_content__OTBiZ pre {
152
+ .ContentArea_content__NDVhM pre {
150
153
  margin: var(--spacing-5) 0;
151
154
  }
152
- .ContentArea_content__OTBiZ code {
155
+ .ContentArea_content__NDVhM code {
153
156
  font-size: 14px;
154
157
  }
155
- .ContentArea_content__OTBiZ code:not([class]) {
158
+ .ContentArea_content__NDVhM code:not([class]) {
156
159
  font-family: var(--font-family-code);
157
160
  color: var(--font-color);
158
161
  padding: var(--spacing-1);
package/dist/index.js CHANGED
@@ -39,6 +39,9 @@ module.exports = __toCommonJS(index_exports);
39
39
  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
+ // src/components/Blog.tsx
43
+ var import_react_zen2 = require("@umami/react-zen");
44
+
42
45
  // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/Blog.module.css
43
46
  var Blog_default = {};
44
47
 
@@ -75,9 +78,10 @@ function Markdown({ code }) {
75
78
  }
76
79
 
77
80
  // src/components/Blogs.tsx
81
+ var import_react_zen = require("@umami/react-zen");
78
82
  var import_jsx_runtime2 = require("react/jsx-runtime");
79
83
  function Blogs() {
80
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { children: "All the blogs!" });
84
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_zen.Column, { flexGrow: 1, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { children: "All the blogs!" }) });
81
85
  }
82
86
 
83
87
  // src/components/Blog.tsx
@@ -86,7 +90,7 @@ function Blog({ content }) {
86
90
  if (!content) {
87
91
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Blogs, {});
88
92
  }
89
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: Blog_default.blog, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: Blog_default.main, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: Blog_default.content, children: [
93
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_zen2.Column, { className: Blog_default.blog, flexGrow: 1, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: Blog_default.main, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: Blog_default.content, children: [
90
94
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { children: content?.meta?.title }),
91
95
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: Blog_default.description, children: content?.meta?.description }),
92
96
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Markdown, { code: content?.code })
@@ -94,7 +98,7 @@ function Blog({ content }) {
94
98
  }
95
99
 
96
100
  // src/components/Docs.tsx
97
- var import_react_zen6 = require("@umami/react-zen");
101
+ var import_react_zen9 = require("@umami/react-zen");
98
102
 
99
103
  // src/components/hooks/useShiso.ts
100
104
  var import_react5 = require("react");
@@ -102,10 +106,11 @@ var import_react5 = require("react");
102
106
  // src/components/Shiso.tsx
103
107
  var import_react3 = require("react");
104
108
  var import_react4 = require("@mdx-js/react");
109
+ var import_react_zen4 = require("@umami/react-zen");
105
110
 
106
111
  // src/components/CodeBlock.tsx
107
112
  var import_react2 = require("react");
108
- var import_react_zen = require("@umami/react-zen");
113
+ var import_react_zen3 = require("@umami/react-zen");
109
114
 
110
115
  // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/CodeBlock.module.css
111
116
  var CodeBlock_default = { "container": "CodeBlock_container__YmFmN", "button": "CodeBlock_button__NDg0Y", "copy": "CodeBlock_copy__MmQzM", "check": "CodeBlock_check__YmI0Z" };
@@ -124,7 +129,7 @@ function CodeBlock(props) {
124
129
  };
125
130
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("pre", { ref: textInput, className: CodeBlock_default.container, children: [
126
131
  props.children,
127
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen.Icon, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen.Icons.Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen.Icons.Copy, {}) }) })
132
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen3.Icon, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen3.Icons.Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_zen3.Icons.Copy, {}) }) })
128
133
  ] });
129
134
  }
130
135
 
@@ -140,7 +145,7 @@ function Shiso({ content, type, config, components, templates }) {
140
145
  if (!Component) {
141
146
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { children: `Component not found for type: ${type}` });
142
147
  }
143
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ShisoContext.Provider, { value: { content, type, config }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.MDXProvider, { components: { ...components, pre: CodeBlock }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, { content, config }) }) });
148
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ShisoContext.Provider, { value: { content, type, config }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.MDXProvider, { components: { ...components, pre: CodeBlock, code: import_react_zen4.Code }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, { content, config }) }) });
144
149
  }
145
150
 
146
151
  // src/components/hooks/useShiso.ts
@@ -151,21 +156,21 @@ function useShiso() {
151
156
 
152
157
  // src/components/PageLinks.tsx
153
158
  var import_react6 = require("react");
154
- var import_react_zen2 = require("@umami/react-zen");
159
+ var import_react_zen5 = require("@umami/react-zen");
155
160
  var import_classnames = __toESM(require("classnames"));
156
161
 
157
162
  // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/PageLinks.module.css
158
- var PageLinks_default = { "title": "PageLinks_title__YjEwN", "links": "PageLinks_links__OWRlM", "link": "PageLinks_link__NDJjM", "indent-1": "PageLinks_indent-1__MDU1M", "indent-2": "PageLinks_indent-2__MDBmY", "indent-3": "PageLinks_indent-3__ZmY2O", "indent-4": "PageLinks_indent-4__MDA4N", "indent-5": "PageLinks_indent-5__MDBlM", "indent-6": "PageLinks_indent-6__NjIwM", "selected": "PageLinks_selected__NjEyY" };
163
+ var PageLinks_default = { "title": "PageLinks_title__ZGY1Y", "links": "PageLinks_links__ODM4N", "link": "PageLinks_link__ZDE4O", "indent-1": "PageLinks_indent-1__NGU3M", "indent-2": "PageLinks_indent-2__YjFlN", "indent-3": "PageLinks_indent-3__NzQxY", "indent-4": "PageLinks_indent-4__NzRjN", "indent-5": "PageLinks_indent-5__ZmRhN", "indent-6": "PageLinks_indent-6__YzQ3N", "selected": "PageLinks_selected__NTViM" };
159
164
 
160
165
  // src/components/PageLinks.tsx
161
166
  var import_jsx_runtime6 = require("react/jsx-runtime");
162
- function PageLinks({ items, offset = 0 }) {
167
+ function PageLinks({ items = [], className, ...props }) {
163
168
  const [hash, setHash] = (0, import_react6.useState)(items?.[0]?.id);
164
169
  (0, import_react6.useEffect)(() => {
165
170
  const callback = () => {
166
171
  const x = [...items].reverse().find(({ id }) => {
167
172
  const rect = document.getElementById(id)?.getBoundingClientRect();
168
- return rect && rect.top <= offset;
173
+ return rect && rect.top <= 0;
169
174
  });
170
175
  if (x) setHash(x.id);
171
176
  };
@@ -177,8 +182,8 @@ function PageLinks({ items, offset = 0 }) {
177
182
  if (!items?.length) {
178
183
  return null;
179
184
  }
180
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_zen2.Column, { gap: "3", minWidth: "240px", className: PageLinks_default.links, children: [
181
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen2.Text, { size: "2", weight: "bold", children: "On this page" }),
185
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_zen5.Column, { ...props, gap: "3", minWidth: "240px", className: (0, import_classnames.default)(PageLinks_default.links, className), children: [
186
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_zen5.Text, { size: "2", weight: "bold", children: "On this page" }),
182
187
  items.map(({ name, id, size }) => {
183
188
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
184
189
  "a",
@@ -196,7 +201,7 @@ function PageLinks({ items, offset = 0 }) {
196
201
  }
197
202
 
198
203
  // src/components/SideNav.tsx
199
- var import_react_zen3 = require("@umami/react-zen");
204
+ var import_react_zen6 = require("@umami/react-zen");
200
205
  var import_classnames2 = __toESM(require("classnames"));
201
206
  var import_navigation = require("next/navigation");
202
207
  var import_link = __toESM(require("next/link"));
@@ -206,14 +211,14 @@ var SideNav_default = { "nav": "SideNav_nav__YWMxN", "item": "SideNav_item__YTQz
206
211
 
207
212
  // src/components/SideNav.tsx
208
213
  var import_jsx_runtime7 = require("react/jsx-runtime");
209
- function SideNav({ tabs, navigation }) {
214
+ function SideNav({ tabs, navigation, className, ...props }) {
210
215
  const pathname = (0, import_navigation.usePathname)();
211
216
  const tab = tabs?.find(({ url, id }) => id !== "docs" ? pathname.startsWith(url) : false);
212
217
  const menu = navigation[tab?.id || "docs"];
213
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen3.Box, { className: SideNav_default.nav, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen3.List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
214
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen3.ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
218
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen6.Box, { ...props, className: (0, import_classnames2.default)(SideNav_default.nav, className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen6.List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
219
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_zen6.ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
215
220
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
216
- import_react_zen3.ListItem,
221
+ import_react_zen6.ListItem,
217
222
  {
218
223
  className: (0, import_classnames2.default)(SideNav_default.item, {
219
224
  [SideNav_default.selected]: url === pathname
@@ -229,33 +234,33 @@ function SideNav({ tabs, navigation }) {
229
234
  // src/components/TopNav.tsx
230
235
  var import_link2 = __toESM(require("next/link"));
231
236
  var import_navigation2 = require("next/navigation");
232
- var import_react_zen4 = require("@umami/react-zen");
237
+ var import_react_zen7 = require("@umami/react-zen");
233
238
  var import_jsx_runtime8 = require("react/jsx-runtime");
234
239
  function TopNav({ tabs }) {
235
240
  const pathname = (0, import_navigation2.usePathname)();
236
241
  const tab = tabs?.find(({ id, url }) => id !== "docs" ? pathname.startsWith(url) : false);
237
242
  const selected = tab?.id || "docs";
238
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen4.Tabs, { selectedKey: selected, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen4.TabList, { items: tabs, children: ({ id, label, url }) => {
239
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen4.Tab, { id, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_link2.default, { href: url, children: label }) });
243
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen7.Tabs, { selectedKey: selected, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen7.TabList, { items: tabs, children: ({ id, label, url }) => {
244
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_zen7.Tab, { id, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_link2.default, { href: url, children: label }) });
240
245
  } }) });
241
246
  }
242
247
 
243
248
  // src/components/ContentArea.tsx
244
- var import_react_zen5 = require("@umami/react-zen");
249
+ var import_react_zen8 = require("@umami/react-zen");
245
250
 
246
251
  // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/ContentArea.module.css
247
- var ContentArea_default = { "content": "ContentArea_content__OTBiZ" };
252
+ var ContentArea_default = { "content": "ContentArea_content__NDVhM" };
248
253
 
249
254
  // src/components/ContentArea.tsx
250
255
  var import_link3 = __toESM(require("next/link"));
251
256
  var import_jsx_runtime9 = require("react/jsx-runtime");
252
257
  function ContentArea({ section, title, description, code, next, prev }) {
253
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_zen5.Box, { flexGrow: 1, children: [
254
- section && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen5.Text, { color: "primary", weight: "bold", children: section }),
255
- title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen5.Heading, { size: "8", as: "h1", children: title }),
256
- description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen5.Text, { color: "muted", children: description }),
257
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen5.Box, { className: ContentArea_default.content, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Markdown, { code }) }),
258
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_zen5.Row, { justifyContent: "space-between", children: [
258
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_zen8.Box, { flexGrow: 1, children: [
259
+ section && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen8.Text, { color: "primary", weight: "bold", children: section }),
260
+ title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen8.Heading, { size: "2", as: "h1", children: title }),
261
+ description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen8.Text, { color: "muted", children: description }),
262
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen8.Box, { className: ContentArea_default.content, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Markdown, { code }) }),
263
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_zen8.Row, { justifyContent: "space-between", children: [
259
264
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NavigationButton, { ...prev, isPrev: true }),
260
265
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NavigationButton, { ...next })
261
266
  ] })
@@ -267,12 +272,12 @@ var NavigationButton = ({
267
272
  isPrev
268
273
  }) => {
269
274
  if (!url || !label) {
270
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen5.Box, {});
275
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen8.Box, {});
271
276
  }
272
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_link3.default, { href: url, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_zen5.Row, { alignItems: "center", gap: "3", marginY: "3", children: [
273
- isPrev && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen5.Icon, { size: "sm", rotate: 180, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen5.Icons.Chevron, {}) }),
274
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen5.Text, { size: "3", weight: "bold", children: label }),
275
- !isPrev && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen5.Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen5.Icons.Chevron, {}) })
277
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_link3.default, { href: url, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_zen8.Row, { alignItems: "center", gap: "3", marginY: "3", children: [
278
+ isPrev && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen8.Icon, { size: "sm", rotate: 180, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen8.Icons.Chevron, {}) }),
279
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen8.Text, { size: "3", weight: "bold", children: label }),
280
+ !isPrev && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen8.Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_zen8.Icons.Chevron, {}) })
276
281
  ] }) });
277
282
  };
278
283
 
@@ -305,16 +310,17 @@ function parseContent(content, config = {}) {
305
310
  function Docs() {
306
311
  const { content, config } = useShiso();
307
312
  if (!content) {
308
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen6.Heading, { size: "6", children: "Page not found" });
313
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Heading, { size: "6", children: "Page not found" });
309
314
  }
310
315
  const { tabs, navigation, code, meta, section, next, prev, anchors } = parseContent(
311
316
  content,
312
317
  config?.docs
313
318
  );
314
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_zen6.Box, { flexGrow: "1", children: [
319
+ const { top } = config?.docs || {};
320
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_zen9.Box, { flexGrow: "1", children: [
315
321
  tabs && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TopNav, { tabs }),
316
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_zen6.Grid, { gap: "6", columns: "240px 1fr 240px", children: [
317
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SideNav, { tabs, navigation }),
322
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_zen9.Grid, { gap: "6", columns: "240px 1fr 240px", children: [
323
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SideNav, { tabs, navigation, style: { top } }),
318
324
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
319
325
  ContentArea,
320
326
  {
@@ -326,7 +332,7 @@ function Docs() {
326
332
  prev
327
333
  }
328
334
  ),
329
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PageLinks, { items: anchors, offset: 150 })
335
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PageLinks, { items: anchors, style: { top } })
330
336
  ] })
331
337
  ] });
332
338
  }
package/dist/index.mjs CHANGED
@@ -4,6 +4,9 @@
4
4
  import "@umami/react-zen/styles.css";
5
5
  import "highlight.js/styles/github-dark.css";
6
6
 
7
+ // src/components/Blog.tsx
8
+ import { Column as Column2 } from "@umami/react-zen";
9
+
7
10
  // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/Blog.module.css
8
11
  var Blog_default = {};
9
12
 
@@ -39,9 +42,10 @@ function Markdown({ code }) {
39
42
  }
40
43
 
41
44
  // src/components/Blogs.tsx
45
+ import { Column } from "@umami/react-zen";
42
46
  import { jsx as jsx2 } from "react/jsx-runtime";
43
47
  function Blogs() {
44
- return /* @__PURE__ */ jsx2("h1", { children: "All the blogs!" });
48
+ return /* @__PURE__ */ jsx2(Column, { flexGrow: 1, children: /* @__PURE__ */ jsx2("h1", { children: "All the blogs!" }) });
45
49
  }
46
50
 
47
51
  // src/components/Blog.tsx
@@ -50,7 +54,7 @@ function Blog({ content }) {
50
54
  if (!content) {
51
55
  return /* @__PURE__ */ jsx3(Blogs, {});
52
56
  }
53
- return /* @__PURE__ */ jsx3("div", { className: Blog_default.blog, children: /* @__PURE__ */ jsx3("div", { className: Blog_default.main, children: /* @__PURE__ */ jsxs2("div", { className: Blog_default.content, children: [
57
+ return /* @__PURE__ */ jsx3(Column2, { className: Blog_default.blog, flexGrow: 1, children: /* @__PURE__ */ jsx3("div", { className: Blog_default.main, children: /* @__PURE__ */ jsxs2("div", { className: Blog_default.content, children: [
54
58
  /* @__PURE__ */ jsx3("h1", { children: content?.meta?.title }),
55
59
  /* @__PURE__ */ jsx3("p", { className: Blog_default.description, children: content?.meta?.description }),
56
60
  /* @__PURE__ */ jsx3(Markdown, { code: content?.code })
@@ -66,6 +70,7 @@ import { useContext } from "react";
66
70
  // src/components/Shiso.tsx
67
71
  import { createContext } from "react";
68
72
  import { MDXProvider } from "@mdx-js/react";
73
+ import { Code } from "@umami/react-zen";
69
74
 
70
75
  // src/components/CodeBlock.tsx
71
76
  import { useState, useRef } from "react";
@@ -104,7 +109,7 @@ function Shiso({ content, type, config, components, templates }) {
104
109
  if (!Component) {
105
110
  return /* @__PURE__ */ jsx5("h1", { children: `Component not found for type: ${type}` });
106
111
  }
107
- return /* @__PURE__ */ jsx5(ShisoContext.Provider, { value: { content, type, config }, children: /* @__PURE__ */ jsx5(MDXProvider, { components: { ...components, pre: CodeBlock }, children: /* @__PURE__ */ jsx5(Component, { content, config }) }) });
112
+ return /* @__PURE__ */ jsx5(ShisoContext.Provider, { value: { content, type, config }, children: /* @__PURE__ */ jsx5(MDXProvider, { components: { ...components, pre: CodeBlock, code: Code }, children: /* @__PURE__ */ jsx5(Component, { content, config }) }) });
108
113
  }
109
114
 
110
115
  // src/components/hooks/useShiso.ts
@@ -115,21 +120,21 @@ function useShiso() {
115
120
 
116
121
  // src/components/PageLinks.tsx
117
122
  import { useEffect, useState as useState2 } from "react";
118
- import { Column, Text } from "@umami/react-zen";
123
+ import { Column as Column3, Text } from "@umami/react-zen";
119
124
  import classNames from "classnames";
120
125
 
121
126
  // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/PageLinks.module.css
122
- var PageLinks_default = { "title": "PageLinks_title__YjEwN", "links": "PageLinks_links__OWRlM", "link": "PageLinks_link__NDJjM", "indent-1": "PageLinks_indent-1__MDU1M", "indent-2": "PageLinks_indent-2__MDBmY", "indent-3": "PageLinks_indent-3__ZmY2O", "indent-4": "PageLinks_indent-4__MDA4N", "indent-5": "PageLinks_indent-5__MDBlM", "indent-6": "PageLinks_indent-6__NjIwM", "selected": "PageLinks_selected__NjEyY" };
127
+ var PageLinks_default = { "title": "PageLinks_title__ZGY1Y", "links": "PageLinks_links__ODM4N", "link": "PageLinks_link__ZDE4O", "indent-1": "PageLinks_indent-1__NGU3M", "indent-2": "PageLinks_indent-2__YjFlN", "indent-3": "PageLinks_indent-3__NzQxY", "indent-4": "PageLinks_indent-4__NzRjN", "indent-5": "PageLinks_indent-5__ZmRhN", "indent-6": "PageLinks_indent-6__YzQ3N", "selected": "PageLinks_selected__NTViM" };
123
128
 
124
129
  // src/components/PageLinks.tsx
125
130
  import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
126
- function PageLinks({ items, offset = 0 }) {
131
+ function PageLinks({ items = [], className, ...props }) {
127
132
  const [hash, setHash] = useState2(items?.[0]?.id);
128
133
  useEffect(() => {
129
134
  const callback = () => {
130
135
  const x = [...items].reverse().find(({ id }) => {
131
136
  const rect = document.getElementById(id)?.getBoundingClientRect();
132
- return rect && rect.top <= offset;
137
+ return rect && rect.top <= 0;
133
138
  });
134
139
  if (x) setHash(x.id);
135
140
  };
@@ -141,7 +146,7 @@ function PageLinks({ items, offset = 0 }) {
141
146
  if (!items?.length) {
142
147
  return null;
143
148
  }
144
- return /* @__PURE__ */ jsxs4(Column, { gap: "3", minWidth: "240px", className: PageLinks_default.links, children: [
149
+ return /* @__PURE__ */ jsxs4(Column3, { ...props, gap: "3", minWidth: "240px", className: classNames(PageLinks_default.links, className), children: [
145
150
  /* @__PURE__ */ jsx6(Text, { size: "2", weight: "bold", children: "On this page" }),
146
151
  items.map(({ name, id, size }) => {
147
152
  return /* @__PURE__ */ jsx6(
@@ -170,11 +175,11 @@ var SideNav_default = { "nav": "SideNav_nav__YWMxN", "item": "SideNav_item__YTQz
170
175
 
171
176
  // src/components/SideNav.tsx
172
177
  import { jsx as jsx7 } from "react/jsx-runtime";
173
- function SideNav({ tabs, navigation }) {
178
+ function SideNav({ tabs, navigation, className, ...props }) {
174
179
  const pathname = usePathname();
175
180
  const tab = tabs?.find(({ url, id }) => id !== "docs" ? pathname.startsWith(url) : false);
176
181
  const menu = navigation[tab?.id || "docs"];
177
- return /* @__PURE__ */ jsx7(Box, { className: SideNav_default.nav, children: /* @__PURE__ */ jsx7(List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
182
+ return /* @__PURE__ */ jsx7(Box, { ...props, className: classNames2(SideNav_default.nav, className), children: /* @__PURE__ */ jsx7(List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
178
183
  return /* @__PURE__ */ jsx7(ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
179
184
  return /* @__PURE__ */ jsx7(
180
185
  ListItem,
@@ -208,7 +213,7 @@ function TopNav({ tabs }) {
208
213
  import { Heading, Box as Box2, Text as Text2, Row, Icon as Icon2, Icons as Icons2 } from "@umami/react-zen";
209
214
 
210
215
  // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/ContentArea.module.css
211
- var ContentArea_default = { "content": "ContentArea_content__OTBiZ" };
216
+ var ContentArea_default = { "content": "ContentArea_content__NDVhM" };
212
217
 
213
218
  // src/components/ContentArea.tsx
214
219
  import Link3 from "next/link";
@@ -216,7 +221,7 @@ import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
216
221
  function ContentArea({ section, title, description, code, next, prev }) {
217
222
  return /* @__PURE__ */ jsxs5(Box2, { flexGrow: 1, children: [
218
223
  section && /* @__PURE__ */ jsx9(Text2, { color: "primary", weight: "bold", children: section }),
219
- title && /* @__PURE__ */ jsx9(Heading, { size: "8", as: "h1", children: title }),
224
+ title && /* @__PURE__ */ jsx9(Heading, { size: "2", as: "h1", children: title }),
220
225
  description && /* @__PURE__ */ jsx9(Text2, { color: "muted", children: description }),
221
226
  /* @__PURE__ */ jsx9(Box2, { className: ContentArea_default.content, children: /* @__PURE__ */ jsx9(Markdown, { code }) }),
222
227
  /* @__PURE__ */ jsxs5(Row, { justifyContent: "space-between", children: [
@@ -275,10 +280,11 @@ function Docs() {
275
280
  content,
276
281
  config?.docs
277
282
  );
283
+ const { top } = config?.docs || {};
278
284
  return /* @__PURE__ */ jsxs6(Box3, { flexGrow: "1", children: [
279
285
  tabs && /* @__PURE__ */ jsx10(TopNav, { tabs }),
280
286
  /* @__PURE__ */ jsxs6(Grid, { gap: "6", columns: "240px 1fr 240px", children: [
281
- /* @__PURE__ */ jsx10(SideNav, { tabs, navigation }),
287
+ /* @__PURE__ */ jsx10(SideNav, { tabs, navigation, style: { top } }),
282
288
  /* @__PURE__ */ jsx10(
283
289
  ContentArea,
284
290
  {
@@ -290,7 +296,7 @@ function Docs() {
290
296
  prev
291
297
  }
292
298
  ),
293
- /* @__PURE__ */ jsx10(PageLinks, { items: anchors, offset: 150 })
299
+ /* @__PURE__ */ jsx10(PageLinks, { items: anchors, style: { top } })
294
300
  ] })
295
301
  ] });
296
302
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umami/shiso",
3
- "version": "0.20.0",
3
+ "version": "0.21.0",
4
4
  "description": "A content layer for Next.js",
5
5
  "homepage": "https://umami.is/shiso",
6
6
  "repository": {
@@ -46,7 +46,7 @@
46
46
  "@mdx-js/loader": "^3.0.0",
47
47
  "@mdx-js/mdx": "^3.1.0",
48
48
  "@mdx-js/react": "^3.0.0",
49
- "@umami/react-zen": "^0.32.0",
49
+ "@umami/react-zen": "^0.34.0",
50
50
  "classnames": "^2.5.1",
51
51
  "glob": "^10.3.10",
52
52
  "gray-matter": "^4.0.3",