@umami/shiso 0.20.0 → 0.22.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 +36 -31
  2. package/dist/index.js +91 -51
  3. package/dist/index.mjs +80 -29
  4. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -34,125 +34,130 @@ 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
 
79
79
  /* virtual-css:css:72ce2cfbba7b635b2ff1a5f4f5eeabf3 */
80
- .SideNav_nav__YWMxN {
80
+ .SideNav_nav__YTUyY {
81
+ height: max-content;
82
+ overflow-y: auto;
83
+ }
84
+ .SideNav_nav__YTUyY.SideNav_sticky__NGNiY {
81
85
  position: sticky;
82
86
  top: 30px;
83
- height: 100vh;
84
- overflow-y: auto;
85
87
  }
86
- .SideNav_nav__YWMxN .SideNav_item__YTQzN {
88
+ .SideNav_nav__YTUyY .SideNav_item__ZjUyN {
87
89
  color: var(--font-color-muted);
88
90
  padding: 0;
89
91
  border-radius: 0;
90
92
  border-left: var(--border-size-1) solid var(--border-color);
91
93
  }
92
- .SideNav_nav__YWMxN .SideNav_item__YTQzN a {
94
+ .SideNav_nav__YTUyY .SideNav_item__ZjUyN a {
93
95
  color: currentColor;
94
96
  width: 100%;
95
97
  padding: var(--padding-y) var(--padding-x);
96
98
  text-decoration: none;
97
99
  }
98
- .SideNav_nav__YWMxN .SideNav_item__YTQzN a:hover {
100
+ .SideNav_nav__YTUyY .SideNav_item__ZjUyN a:hover {
99
101
  color: var(--primary-color);
100
102
  }
101
- .SideNav_nav__YWMxN .SideNav_item__YTQzN.SideNav_selected__ZDI0N {
103
+ .SideNav_nav__YTUyY .SideNav_item__ZjUyN.SideNav_selected__OWI5N {
102
104
  color: var(--font-color);
103
105
  border-color: var(--primary-color);
104
106
  }
105
- .SideNav_items__Y2YwZ header {
107
+ .SideNav_items__OThkZ header {
106
108
  padding: var(--padding-y) 0;
107
109
  }
108
110
 
109
111
  /* virtual-css:css:7938c95522eda3e1f8244364ad70b38c */
110
- .ContentArea_content__OTBiZ {
112
+ .ContentArea_content__NDVhM {
111
113
  font-size: 16px;
112
114
  margin-bottom: 60px;
113
115
  }
114
- .ContentArea_content__OTBiZ > p {
116
+ .ContentArea_content__NDVhM > p {
115
117
  color: var(--font-color-muted);
116
118
  line-height: 1.8;
117
119
  }
118
- .ContentArea_content__OTBiZ a {
120
+ .ContentArea_content__NDVhM a {
119
121
  color: var(--font-color);
120
122
  font-weight: 600;
121
123
  text-decoration: underline var(--border-color);
122
124
  text-underline-offset: 4px;
123
125
  }
124
- .ContentArea_content__OTBiZ a:hover {
126
+ .ContentArea_content__NDVhM a:hover {
125
127
  color: var(--font-color);
126
128
  text-decoration: underline var(--primary-color);
127
129
  }
128
- .ContentArea_content__OTBiZ h1 {
130
+ .ContentArea_content__NDVhM h1 {
129
131
  font-size: var(--font-size-8);
130
132
  letter-spacing: var(--letter-spacing-1);
131
133
  margin: 0 0 var(--spacing-4) 0;
132
134
  }
133
- .ContentArea_content__OTBiZ h2 {
135
+ .ContentArea_content__NDVhM h2 {
134
136
  font-size: var(--font-size-6);
135
137
  letter-spacing: var(--letter-spacing-1);
136
138
  margin: var(--spacing-8) 0 var(--spacing-4) 0;
137
139
  }
138
- .ContentArea_content__OTBiZ h3 {
140
+ .ContentArea_content__NDVhM h3 {
139
141
  font-size: var(--font-size-5);
140
142
  letter-spacing: var(--letter-spacing-1);
141
143
  margin: var(--spacing-7) 0 var(--spacing-4) 0;
142
144
  }
143
- .ContentArea_content__OTBiZ ul {
145
+ .ContentArea_content__NDVhM *[id] {
146
+ scroll-margin-top: var(--spacing-4);
147
+ }
148
+ .ContentArea_content__NDVhM ul {
144
149
  list-style: disc;
145
150
  }
146
- .ContentArea_content__OTBiZ ol {
151
+ .ContentArea_content__NDVhM ol {
147
152
  list-style: decimal;
148
153
  }
149
- .ContentArea_content__OTBiZ pre {
154
+ .ContentArea_content__NDVhM pre {
150
155
  margin: var(--spacing-5) 0;
151
156
  }
152
- .ContentArea_content__OTBiZ code {
157
+ .ContentArea_content__NDVhM code {
153
158
  font-size: 14px;
154
159
  }
155
- .ContentArea_content__OTBiZ code:not([class]) {
160
+ .ContentArea_content__NDVhM code:not([class]) {
156
161
  font-family: var(--font-family-code);
157
162
  color: var(--font-color);
158
163
  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,24 +201,24 @@ 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"));
203
208
 
204
209
  // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/SideNav.module.css
205
- var SideNav_default = { "nav": "SideNav_nav__YWMxN", "item": "SideNav_item__YTQzN", "selected": "SideNav_selected__ZDI0N", "items": "SideNav_items__Y2YwZ" };
210
+ var SideNav_default = { "nav": "SideNav_nav__YTUyY", "sticky": "SideNav_sticky__NGNiY", "item": "SideNav_item__ZjUyN", "selected": "SideNav_selected__OWI5N", "items": "SideNav_items__OThkZ" };
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, isSticky, 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, isSticky && SideNav_default.sticky, 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,29 +310,64 @@ 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
+ const navDisplay = {
321
+ default: "none",
322
+ xs: "none",
323
+ sm: "none",
324
+ md: "none",
325
+ lg: "block",
326
+ xl: "block"
327
+ };
328
+ const menuDisplay = {
329
+ default: "flex",
330
+ lg: "none",
331
+ xl: "none"
332
+ };
333
+ const MobileMenu = () => {
334
+ const handlePress = () => {
335
+ };
336
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Row, { justifyContent: "flex-end", display: menuDisplay, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_zen9.DialogTrigger, { children: [
337
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Button, { onPress: handlePress, variant: "quiet", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Icons.Menu, {}) }) }),
338
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Modal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Dialog, { children: ({ close }) => {
339
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_zen9.Box, { minWidth: "calc(100vw - 60px)", minHeight: "calc(100vh - 60px)", children: [
340
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Row, { justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Button, { onPress: () => close(), variant: "quiet", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_zen9.Icons.Close, {}) }) }) }),
341
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SideNav, { tabs, navigation })
342
+ ] });
343
+ } }) })
344
+ ] }) });
345
+ };
346
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_zen9.Box, { flexGrow: "1", children: [
347
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MobileMenu, {}),
315
348
  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 }),
318
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
319
- ContentArea,
320
- {
321
- section,
322
- title: meta?.title,
323
- description: meta?.description,
324
- code,
325
- next,
326
- prev
327
- }
328
- ),
329
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PageLinks, { items: anchors, offset: 150 })
330
- ] })
349
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
350
+ import_react_zen9.Grid,
351
+ {
352
+ gap: "6",
353
+ columns: { xs: "1fr", sm: "1fr", md: "1fr", lg: "240px 1fr 240px", xl: "240px 1fr 240px" },
354
+ children: [
355
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SideNav, { display: navDisplay, tabs, navigation, isSticky: true }),
356
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
357
+ ContentArea,
358
+ {
359
+ section,
360
+ title: meta?.title,
361
+ description: meta?.description,
362
+ code,
363
+ next,
364
+ prev
365
+ }
366
+ ),
367
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PageLinks, { display: navDisplay, items: anchors, style: { top } })
368
+ ]
369
+ }
370
+ )
331
371
  ] });
332
372
  }
333
373
  // Annotate the CommonJS export names for ESM import in node:
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 })
@@ -58,7 +62,18 @@ function Blog({ content }) {
58
62
  }
59
63
 
60
64
  // src/components/Docs.tsx
61
- import { Grid, Box as Box3, Heading as Heading2 } from "@umami/react-zen";
65
+ import {
66
+ Grid,
67
+ Box as Box3,
68
+ Heading as Heading2,
69
+ Button,
70
+ Icon as Icon3,
71
+ Icons as Icons3,
72
+ Row as Row2,
73
+ Modal,
74
+ DialogTrigger,
75
+ Dialog
76
+ } from "@umami/react-zen";
62
77
 
63
78
  // src/components/hooks/useShiso.ts
64
79
  import { useContext } from "react";
@@ -66,6 +81,7 @@ import { useContext } from "react";
66
81
  // src/components/Shiso.tsx
67
82
  import { createContext } from "react";
68
83
  import { MDXProvider } from "@mdx-js/react";
84
+ import { Code } from "@umami/react-zen";
69
85
 
70
86
  // src/components/CodeBlock.tsx
71
87
  import { useState, useRef } from "react";
@@ -104,7 +120,7 @@ function Shiso({ content, type, config, components, templates }) {
104
120
  if (!Component) {
105
121
  return /* @__PURE__ */ jsx5("h1", { children: `Component not found for type: ${type}` });
106
122
  }
107
- return /* @__PURE__ */ jsx5(ShisoContext.Provider, { value: { content, type, config }, children: /* @__PURE__ */ jsx5(MDXProvider, { components: { ...components, pre: CodeBlock }, children: /* @__PURE__ */ jsx5(Component, { content, config }) }) });
123
+ 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
124
  }
109
125
 
110
126
  // src/components/hooks/useShiso.ts
@@ -115,21 +131,21 @@ function useShiso() {
115
131
 
116
132
  // src/components/PageLinks.tsx
117
133
  import { useEffect, useState as useState2 } from "react";
118
- import { Column, Text } from "@umami/react-zen";
134
+ import { Column as Column3, Text } from "@umami/react-zen";
119
135
  import classNames from "classnames";
120
136
 
121
137
  // 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" };
138
+ 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
139
 
124
140
  // src/components/PageLinks.tsx
125
141
  import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
126
- function PageLinks({ items, offset = 0 }) {
142
+ function PageLinks({ items = [], className, ...props }) {
127
143
  const [hash, setHash] = useState2(items?.[0]?.id);
128
144
  useEffect(() => {
129
145
  const callback = () => {
130
146
  const x = [...items].reverse().find(({ id }) => {
131
147
  const rect = document.getElementById(id)?.getBoundingClientRect();
132
- return rect && rect.top <= offset;
148
+ return rect && rect.top <= 0;
133
149
  });
134
150
  if (x) setHash(x.id);
135
151
  };
@@ -141,7 +157,7 @@ function PageLinks({ items, offset = 0 }) {
141
157
  if (!items?.length) {
142
158
  return null;
143
159
  }
144
- return /* @__PURE__ */ jsxs4(Column, { gap: "3", minWidth: "240px", className: PageLinks_default.links, children: [
160
+ return /* @__PURE__ */ jsxs4(Column3, { ...props, gap: "3", minWidth: "240px", className: classNames(PageLinks_default.links, className), children: [
145
161
  /* @__PURE__ */ jsx6(Text, { size: "2", weight: "bold", children: "On this page" }),
146
162
  items.map(({ name, id, size }) => {
147
163
  return /* @__PURE__ */ jsx6(
@@ -166,15 +182,15 @@ import { usePathname } from "next/navigation";
166
182
  import Link from "next/link";
167
183
 
168
184
  // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/SideNav.module.css
169
- var SideNav_default = { "nav": "SideNav_nav__YWMxN", "item": "SideNav_item__YTQzN", "selected": "SideNav_selected__ZDI0N", "items": "SideNav_items__Y2YwZ" };
185
+ var SideNav_default = { "nav": "SideNav_nav__YTUyY", "sticky": "SideNav_sticky__NGNiY", "item": "SideNav_item__ZjUyN", "selected": "SideNav_selected__OWI5N", "items": "SideNav_items__OThkZ" };
170
186
 
171
187
  // src/components/SideNav.tsx
172
188
  import { jsx as jsx7 } from "react/jsx-runtime";
173
- function SideNav({ tabs, navigation }) {
189
+ function SideNav({ tabs, navigation, isSticky, className, ...props }) {
174
190
  const pathname = usePathname();
175
191
  const tab = tabs?.find(({ url, id }) => id !== "docs" ? pathname.startsWith(url) : false);
176
192
  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 }) => {
193
+ return /* @__PURE__ */ jsx7(Box, { ...props, className: classNames2(SideNav_default.nav, isSticky && SideNav_default.sticky, className), children: /* @__PURE__ */ jsx7(List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
178
194
  return /* @__PURE__ */ jsx7(ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
179
195
  return /* @__PURE__ */ jsx7(
180
196
  ListItem,
@@ -208,7 +224,7 @@ function TopNav({ tabs }) {
208
224
  import { Heading, Box as Box2, Text as Text2, Row, Icon as Icon2, Icons as Icons2 } from "@umami/react-zen";
209
225
 
210
226
  // css-modules:/Users/mikecao/Development/umami-software/shiso/src/components/ContentArea.module.css
211
- var ContentArea_default = { "content": "ContentArea_content__OTBiZ" };
227
+ var ContentArea_default = { "content": "ContentArea_content__NDVhM" };
212
228
 
213
229
  // src/components/ContentArea.tsx
214
230
  import Link3 from "next/link";
@@ -216,7 +232,7 @@ import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
216
232
  function ContentArea({ section, title, description, code, next, prev }) {
217
233
  return /* @__PURE__ */ jsxs5(Box2, { flexGrow: 1, children: [
218
234
  section && /* @__PURE__ */ jsx9(Text2, { color: "primary", weight: "bold", children: section }),
219
- title && /* @__PURE__ */ jsx9(Heading, { size: "8", as: "h1", children: title }),
235
+ title && /* @__PURE__ */ jsx9(Heading, { size: "2", as: "h1", children: title }),
220
236
  description && /* @__PURE__ */ jsx9(Text2, { color: "muted", children: description }),
221
237
  /* @__PURE__ */ jsx9(Box2, { className: ContentArea_default.content, children: /* @__PURE__ */ jsx9(Markdown, { code }) }),
222
238
  /* @__PURE__ */ jsxs5(Row, { justifyContent: "space-between", children: [
@@ -275,23 +291,58 @@ function Docs() {
275
291
  content,
276
292
  config?.docs
277
293
  );
294
+ const { top } = config?.docs || {};
295
+ const navDisplay = {
296
+ default: "none",
297
+ xs: "none",
298
+ sm: "none",
299
+ md: "none",
300
+ lg: "block",
301
+ xl: "block"
302
+ };
303
+ const menuDisplay = {
304
+ default: "flex",
305
+ lg: "none",
306
+ xl: "none"
307
+ };
308
+ const MobileMenu = () => {
309
+ const handlePress = () => {
310
+ };
311
+ return /* @__PURE__ */ jsx10(Row2, { justifyContent: "flex-end", display: menuDisplay, children: /* @__PURE__ */ jsxs6(DialogTrigger, { children: [
312
+ /* @__PURE__ */ jsx10(Button, { onPress: handlePress, variant: "quiet", children: /* @__PURE__ */ jsx10(Icon3, { children: /* @__PURE__ */ jsx10(Icons3.Menu, {}) }) }),
313
+ /* @__PURE__ */ jsx10(Modal, { children: /* @__PURE__ */ jsx10(Dialog, { children: ({ close }) => {
314
+ return /* @__PURE__ */ jsxs6(Box3, { minWidth: "calc(100vw - 60px)", minHeight: "calc(100vh - 60px)", children: [
315
+ /* @__PURE__ */ jsx10(Row2, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx10(Button, { onPress: () => close(), variant: "quiet", children: /* @__PURE__ */ jsx10(Icon3, { children: /* @__PURE__ */ jsx10(Icons3.Close, {}) }) }) }),
316
+ /* @__PURE__ */ jsx10(SideNav, { tabs, navigation })
317
+ ] });
318
+ } }) })
319
+ ] }) });
320
+ };
278
321
  return /* @__PURE__ */ jsxs6(Box3, { flexGrow: "1", children: [
322
+ /* @__PURE__ */ jsx10(MobileMenu, {}),
279
323
  tabs && /* @__PURE__ */ jsx10(TopNav, { tabs }),
280
- /* @__PURE__ */ jsxs6(Grid, { gap: "6", columns: "240px 1fr 240px", children: [
281
- /* @__PURE__ */ jsx10(SideNav, { tabs, navigation }),
282
- /* @__PURE__ */ jsx10(
283
- ContentArea,
284
- {
285
- section,
286
- title: meta?.title,
287
- description: meta?.description,
288
- code,
289
- next,
290
- prev
291
- }
292
- ),
293
- /* @__PURE__ */ jsx10(PageLinks, { items: anchors, offset: 150 })
294
- ] })
324
+ /* @__PURE__ */ jsxs6(
325
+ Grid,
326
+ {
327
+ gap: "6",
328
+ columns: { xs: "1fr", sm: "1fr", md: "1fr", lg: "240px 1fr 240px", xl: "240px 1fr 240px" },
329
+ children: [
330
+ /* @__PURE__ */ jsx10(SideNav, { display: navDisplay, tabs, navigation, isSticky: true }),
331
+ /* @__PURE__ */ jsx10(
332
+ ContentArea,
333
+ {
334
+ section,
335
+ title: meta?.title,
336
+ description: meta?.description,
337
+ code,
338
+ next,
339
+ prev
340
+ }
341
+ ),
342
+ /* @__PURE__ */ jsx10(PageLinks, { display: navDisplay, items: anchors, style: { top } })
343
+ ]
344
+ }
345
+ )
295
346
  ] });
296
347
  }
297
348
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umami/shiso",
3
- "version": "0.20.0",
3
+ "version": "0.22.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.36.0",
50
50
  "classnames": "^2.5.1",
51
51
  "glob": "^10.3.10",
52
52
  "gray-matter": "^4.0.3",