@umami/shiso 0.30.0 → 0.31.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.
- package/dist/index.css +82 -83
- package/dist/index.d.ts +14 -6
- package/dist/index.js +202 -179
- package/dist/index.mjs +207 -184
- package/package.json +3 -2
- package/server/index.d.ts +3 -19
- package/server/index.js +35 -13
package/dist/index.mjs
CHANGED
|
@@ -5,16 +5,66 @@ 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 { Column as Column2 } from "@umami/react-zen";
|
|
8
|
+
import { Heading, Box as Box3, Text as Text2, Row, Column as Column2, Grid, Image } from "@umami/react-zen";
|
|
9
|
+
import { format } from "date-fns";
|
|
9
10
|
|
|
10
|
-
//
|
|
11
|
-
|
|
11
|
+
// src/components/PageLinks.tsx
|
|
12
|
+
import { useEffect, useState } from "react";
|
|
13
|
+
import { Column, Text, Box } from "@umami/react-zen";
|
|
14
|
+
import classNames from "classnames";
|
|
15
|
+
|
|
16
|
+
// css-modules:E:\dev\umami-shiso\src\components\PageLinks.module.css
|
|
17
|
+
var PageLinks_default = { "links": "PageLinks_links__YmMzM", "link": "PageLinks_link__MjIyN", "indent-1": "PageLinks_indent-1__MDg5M", "indent-2": "PageLinks_indent-2__YTU4M", "indent-3": "PageLinks_indent-3__NTYxY", "indent-4": "PageLinks_indent-4__NjhmY", "indent-5": "PageLinks_indent-5__ZmFiY", "indent-6": "PageLinks_indent-6__MmRkN", "selected": "PageLinks_selected__NDQxY" };
|
|
18
|
+
|
|
19
|
+
// src/components/PageLinks.tsx
|
|
20
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
21
|
+
function PageLinks({ items = [], className, ...props }) {
|
|
22
|
+
const [hash, setHash] = useState(items?.[0]?.id);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
const callback = () => {
|
|
25
|
+
const x = [...items].reverse().find(({ id }) => {
|
|
26
|
+
const rect = document.getElementById(id)?.getBoundingClientRect();
|
|
27
|
+
return rect && rect.top <= 0;
|
|
28
|
+
});
|
|
29
|
+
if (x) setHash(x.id);
|
|
30
|
+
};
|
|
31
|
+
window.addEventListener("scroll", callback, false);
|
|
32
|
+
return () => {
|
|
33
|
+
window.removeEventListener("scroll", callback, false);
|
|
34
|
+
};
|
|
35
|
+
}, []);
|
|
36
|
+
if (!items?.length) {
|
|
37
|
+
return null;
|
|
38
|
+
}
|
|
39
|
+
return /* @__PURE__ */ jsx(Box, { ...props, className: classNames(PageLinks_default.links, className), children: /* @__PURE__ */ jsxs(Column, { gap: "3", minWidth: "240px", children: [
|
|
40
|
+
/* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", children: "On this page" }),
|
|
41
|
+
items.map(({ name, id, size }) => {
|
|
42
|
+
return /* @__PURE__ */ jsx(
|
|
43
|
+
"a",
|
|
44
|
+
{
|
|
45
|
+
href: `#${id}`,
|
|
46
|
+
className: classNames(PageLinks_default.link, PageLinks_default[`indent-${size}`], {
|
|
47
|
+
[PageLinks_default.selected]: hash === id
|
|
48
|
+
}),
|
|
49
|
+
children: name
|
|
50
|
+
},
|
|
51
|
+
id
|
|
52
|
+
);
|
|
53
|
+
})
|
|
54
|
+
] }) });
|
|
55
|
+
}
|
|
12
56
|
|
|
13
57
|
// src/components/Markdown.tsx
|
|
58
|
+
import { Box as Box2 } from "@umami/react-zen";
|
|
14
59
|
import { runSync } from "@mdx-js/mdx";
|
|
15
60
|
import { useMDXComponents } from "@mdx-js/react";
|
|
16
61
|
import * as runtime from "react/jsx-runtime";
|
|
17
|
-
|
|
62
|
+
|
|
63
|
+
// css-modules:E:\dev\umami-shiso\src\components\Markdown.module.css
|
|
64
|
+
var Markdown_default = { "content": "Markdown_content__ZDlhO" };
|
|
65
|
+
|
|
66
|
+
// src/components/Markdown.tsx
|
|
67
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
18
68
|
var parseMdx = (code) => {
|
|
19
69
|
try {
|
|
20
70
|
const result = runSync(code, {
|
|
@@ -30,7 +80,7 @@ function Markdown({ code }) {
|
|
|
30
80
|
const components = useMDXComponents();
|
|
31
81
|
const { Component, error } = parseMdx(code);
|
|
32
82
|
if (error) {
|
|
33
|
-
return /* @__PURE__ */
|
|
83
|
+
return /* @__PURE__ */ jsxs2("h1", { children: [
|
|
34
84
|
"Error rendering MDX: ",
|
|
35
85
|
error
|
|
36
86
|
] });
|
|
@@ -38,147 +88,44 @@ function Markdown({ code }) {
|
|
|
38
88
|
if (!Component) {
|
|
39
89
|
return null;
|
|
40
90
|
}
|
|
41
|
-
return /* @__PURE__ */
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
// src/components/Blogs.tsx
|
|
45
|
-
import { Column } from "@umami/react-zen";
|
|
46
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
47
|
-
function Blogs() {
|
|
48
|
-
return /* @__PURE__ */ jsx2(Column, { flexGrow: 1, children: /* @__PURE__ */ jsx2("h1", { children: "All the blogs!" }) });
|
|
91
|
+
return /* @__PURE__ */ jsx2(Box2, { className: Markdown_default.content, children: /* @__PURE__ */ jsx2(Component, { components }) });
|
|
49
92
|
}
|
|
50
93
|
|
|
51
94
|
// src/components/Blog.tsx
|
|
52
|
-
import { jsx as jsx3, jsxs as
|
|
53
|
-
function Blog({
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
95
|
+
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
96
|
+
function Blog({ title, description, code, author, date, image, anchors }) {
|
|
97
|
+
return /* @__PURE__ */ jsxs3(Column2, { gap: "8", maxWidth: "900px", style: { margin: "0 auto" }, children: [
|
|
98
|
+
/* @__PURE__ */ jsx3(Box3, { flexGrow: 1, children: title && /* @__PURE__ */ jsx3(Heading, { size: "1", as: "h1", align: "center", children: title }) }),
|
|
99
|
+
image && /* @__PURE__ */ jsx3(Box3, { height: "480px", children: /* @__PURE__ */ jsx3(Image, { src: image, alt: title, objectFit: "cover", borderRadius: "3" }) }),
|
|
100
|
+
/* @__PURE__ */ jsxs3(Row, { justifyContent: "space-between", children: [
|
|
101
|
+
/* @__PURE__ */ jsx3(Text2, { children: author }),
|
|
102
|
+
/* @__PURE__ */ jsx3(Text2, { children: date && format(new Date(date), "PP") })
|
|
103
|
+
] }),
|
|
104
|
+
/* @__PURE__ */ jsxs3(Grid, { columns: "1fr 240px", gap: "5", children: [
|
|
105
|
+
/* @__PURE__ */ jsx3(Markdown, { code }),
|
|
106
|
+
/* @__PURE__ */ jsx3(PageLinks, { items: anchors })
|
|
107
|
+
] })
|
|
108
|
+
] });
|
|
62
109
|
}
|
|
63
110
|
|
|
64
111
|
// src/components/Docs.tsx
|
|
65
112
|
import {
|
|
66
|
-
Grid,
|
|
67
|
-
Box as
|
|
68
|
-
Heading as
|
|
113
|
+
Grid as Grid2,
|
|
114
|
+
Box as Box6,
|
|
115
|
+
Heading as Heading3,
|
|
69
116
|
Button,
|
|
70
117
|
Icon as Icon3,
|
|
71
118
|
Icons as Icons3,
|
|
72
|
-
Row as
|
|
119
|
+
Row as Row3,
|
|
73
120
|
Modal,
|
|
74
121
|
DialogTrigger,
|
|
75
122
|
Dialog,
|
|
76
|
-
Text as
|
|
123
|
+
Text as Text4
|
|
77
124
|
} from "@umami/react-zen";
|
|
78
125
|
|
|
79
|
-
// src/components/hooks/useShiso.ts
|
|
80
|
-
import { useContext } from "react";
|
|
81
|
-
|
|
82
|
-
// src/components/Shiso.tsx
|
|
83
|
-
import { createContext } from "react";
|
|
84
|
-
import { MDXProvider } from "@mdx-js/react";
|
|
85
|
-
import { Code } from "@umami/react-zen";
|
|
86
|
-
|
|
87
|
-
// src/components/CodeBlock.tsx
|
|
88
|
-
import { useState, useRef } from "react";
|
|
89
|
-
import { Icon, Icons } from "@umami/react-zen";
|
|
90
|
-
|
|
91
|
-
// css-modules:E:\dev\umami-shiso\src\components\CodeBlock.module.css
|
|
92
|
-
var CodeBlock_default = { "container": "CodeBlock_container__ZTkxY", "button": "CodeBlock_button__MmZkO", "copy": "CodeBlock_copy__M2I0N", "check": "CodeBlock_check__MjkzY" };
|
|
93
|
-
|
|
94
|
-
// src/components/CodeBlock.tsx
|
|
95
|
-
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
96
|
-
function CodeBlock(props) {
|
|
97
|
-
const textInput = useRef(null);
|
|
98
|
-
const [copied, setCopied] = useState(false);
|
|
99
|
-
const handleCopy = () => {
|
|
100
|
-
setCopied(true);
|
|
101
|
-
navigator?.clipboard?.writeText(textInput?.current?.textContent);
|
|
102
|
-
setTimeout(() => {
|
|
103
|
-
setCopied(false);
|
|
104
|
-
}, 1e3);
|
|
105
|
-
};
|
|
106
|
-
return /* @__PURE__ */ jsxs3("pre", { ref: textInput, className: CodeBlock_default.container, children: [
|
|
107
|
-
props.children,
|
|
108
|
-
/* @__PURE__ */ jsx4("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ jsx4(Icon, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ jsx4(Icons.Check, {}) : /* @__PURE__ */ jsx4(Icons.Copy, {}) }) })
|
|
109
|
-
] });
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
// src/components/Shiso.tsx
|
|
113
|
-
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
114
|
-
var defaultTemplates = {
|
|
115
|
-
docs: Docs,
|
|
116
|
-
blog: Blog
|
|
117
|
-
};
|
|
118
|
-
var ShisoContext = createContext(null);
|
|
119
|
-
function Shiso({ content, type, config, components, templates }) {
|
|
120
|
-
const Component = { ...defaultTemplates, ...templates }[type];
|
|
121
|
-
if (!Component) {
|
|
122
|
-
return /* @__PURE__ */ jsx5("h1", { children: `Component not found for type: ${type}` });
|
|
123
|
-
}
|
|
124
|
-
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 }) }) });
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
// src/components/hooks/useShiso.ts
|
|
128
|
-
function useShiso() {
|
|
129
|
-
const { content, config } = useContext(ShisoContext);
|
|
130
|
-
return { content, config };
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
// src/components/PageLinks.tsx
|
|
134
|
-
import { useEffect, useState as useState2 } from "react";
|
|
135
|
-
import { Column as Column3, Text, Box } from "@umami/react-zen";
|
|
136
|
-
import classNames from "classnames";
|
|
137
|
-
|
|
138
|
-
// css-modules:E:\dev\umami-shiso\src\components\PageLinks.module.css
|
|
139
|
-
var PageLinks_default = { "links": "PageLinks_links__YmMzM", "link": "PageLinks_link__MjIyN", "indent-1": "PageLinks_indent-1__MDg5M", "indent-2": "PageLinks_indent-2__YTU4M", "indent-3": "PageLinks_indent-3__NTYxY", "indent-4": "PageLinks_indent-4__NjhmY", "indent-5": "PageLinks_indent-5__ZmFiY", "indent-6": "PageLinks_indent-6__MmRkN", "selected": "PageLinks_selected__NDQxY" };
|
|
140
|
-
|
|
141
|
-
// src/components/PageLinks.tsx
|
|
142
|
-
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
143
|
-
function PageLinks({ items = [], className, ...props }) {
|
|
144
|
-
const [hash, setHash] = useState2(items?.[0]?.id);
|
|
145
|
-
useEffect(() => {
|
|
146
|
-
const callback = () => {
|
|
147
|
-
const x = [...items].reverse().find(({ id }) => {
|
|
148
|
-
const rect = document.getElementById(id)?.getBoundingClientRect();
|
|
149
|
-
return rect && rect.top <= 0;
|
|
150
|
-
});
|
|
151
|
-
if (x) setHash(x.id);
|
|
152
|
-
};
|
|
153
|
-
window.addEventListener("scroll", callback, false);
|
|
154
|
-
return () => {
|
|
155
|
-
window.removeEventListener("scroll", callback, false);
|
|
156
|
-
};
|
|
157
|
-
}, []);
|
|
158
|
-
if (!items?.length) {
|
|
159
|
-
return null;
|
|
160
|
-
}
|
|
161
|
-
return /* @__PURE__ */ jsx6(Box, { ...props, className: classNames(PageLinks_default.links, className), children: /* @__PURE__ */ jsxs4(Column3, { gap: "3", minWidth: "240px", children: [
|
|
162
|
-
/* @__PURE__ */ jsx6(Text, { size: "2", weight: "bold", children: "On this page" }),
|
|
163
|
-
items.map(({ name, id, size }) => {
|
|
164
|
-
return /* @__PURE__ */ jsx6(
|
|
165
|
-
"a",
|
|
166
|
-
{
|
|
167
|
-
href: `#${id}`,
|
|
168
|
-
className: classNames(PageLinks_default.link, PageLinks_default[`indent-${size}`], {
|
|
169
|
-
[PageLinks_default.selected]: hash === id
|
|
170
|
-
}),
|
|
171
|
-
children: name
|
|
172
|
-
},
|
|
173
|
-
id
|
|
174
|
-
);
|
|
175
|
-
})
|
|
176
|
-
] }) });
|
|
177
|
-
}
|
|
178
|
-
|
|
179
126
|
// src/components/SideNav.tsx
|
|
180
|
-
import { useEffect as useEffect2, useState as
|
|
181
|
-
import { Box as
|
|
127
|
+
import { useEffect as useEffect2, useState as useState2 } from "react";
|
|
128
|
+
import { Box as Box4, List, ListItem, ListSection } from "@umami/react-zen";
|
|
182
129
|
import classNames2 from "classnames";
|
|
183
130
|
import { usePathname } from "next/navigation";
|
|
184
131
|
import Link from "next/link";
|
|
@@ -187,7 +134,7 @@ import Link from "next/link";
|
|
|
187
134
|
var SideNav_default = { "nav": "SideNav_nav__YjU1O", "sticky": "SideNav_sticky__NjhmY", "item": "SideNav_item__ZGRlM", "selected": "SideNav_selected__NTMzY", "items": "SideNav_items__MWI3O" };
|
|
188
135
|
|
|
189
136
|
// src/components/SideNav.tsx
|
|
190
|
-
import { jsx as
|
|
137
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
191
138
|
function SideNav({
|
|
192
139
|
tabs,
|
|
193
140
|
navigation,
|
|
@@ -200,7 +147,7 @@ function SideNav({
|
|
|
200
147
|
const pathname = usePathname();
|
|
201
148
|
const tab = tabs?.find(({ url, id }) => id !== "docs" ? pathname.startsWith(url) : false);
|
|
202
149
|
const menu = navigation[tab?.id || "docs"];
|
|
203
|
-
const [height, setHeight] =
|
|
150
|
+
const [height, setHeight] = useState2();
|
|
204
151
|
useEffect2(() => {
|
|
205
152
|
if (autoHeight) {
|
|
206
153
|
const rect = document.getElementById("shiso_docs_sidenav")?.getBoundingClientRect();
|
|
@@ -209,22 +156,22 @@ function SideNav({
|
|
|
209
156
|
}
|
|
210
157
|
}
|
|
211
158
|
}, [autoHeight]);
|
|
212
|
-
return /* @__PURE__ */
|
|
213
|
-
|
|
159
|
+
return /* @__PURE__ */ jsx4(
|
|
160
|
+
Box4,
|
|
214
161
|
{
|
|
215
162
|
...props,
|
|
216
163
|
id: "shiso_docs_sidenav",
|
|
217
164
|
className: classNames2(SideNav_default.nav, isSticky && SideNav_default.sticky, className),
|
|
218
165
|
style: { ...style, height },
|
|
219
|
-
children: /* @__PURE__ */
|
|
220
|
-
return /* @__PURE__ */
|
|
221
|
-
return /* @__PURE__ */
|
|
166
|
+
children: /* @__PURE__ */ jsx4(List, { items: navigation, "aria-label": "nav", children: menu.map(({ section, pages }) => {
|
|
167
|
+
return /* @__PURE__ */ jsx4(ListSection, { title: section, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
|
|
168
|
+
return /* @__PURE__ */ jsx4(
|
|
222
169
|
ListItem,
|
|
223
170
|
{
|
|
224
171
|
className: classNames2(SideNav_default.item, {
|
|
225
172
|
[SideNav_default.selected]: url === pathname
|
|
226
173
|
}),
|
|
227
|
-
children: /* @__PURE__ */
|
|
174
|
+
children: /* @__PURE__ */ jsx4(Link, { href: url, prefetch: false, children: text })
|
|
228
175
|
},
|
|
229
176
|
index
|
|
230
177
|
);
|
|
@@ -238,34 +185,29 @@ function SideNav({
|
|
|
238
185
|
import Link2 from "next/link";
|
|
239
186
|
import { usePathname as usePathname2 } from "next/navigation";
|
|
240
187
|
import { Tabs, TabList, Tab } from "@umami/react-zen";
|
|
241
|
-
import { jsx as
|
|
188
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
242
189
|
function TopNav({ tabs }) {
|
|
243
190
|
const pathname = usePathname2();
|
|
244
191
|
const tab = tabs?.find(({ id, url }) => id !== "docs" ? pathname.startsWith(url) : false);
|
|
245
192
|
const selected = tab?.id || "docs";
|
|
246
|
-
return /* @__PURE__ */
|
|
247
|
-
return /* @__PURE__ */
|
|
193
|
+
return /* @__PURE__ */ jsx5(Tabs, { selectedKey: selected, children: /* @__PURE__ */ jsx5(TabList, { items: tabs, children: ({ id, label, url }) => {
|
|
194
|
+
return /* @__PURE__ */ jsx5(Tab, { id, children: /* @__PURE__ */ jsx5(Link2, { href: url, children: label }) });
|
|
248
195
|
} }) });
|
|
249
196
|
}
|
|
250
197
|
|
|
251
|
-
// src/components/
|
|
252
|
-
import { Heading, Box as
|
|
253
|
-
|
|
254
|
-
// css-modules:E:\dev\umami-shiso\src\components\ContentArea.module.css
|
|
255
|
-
var ContentArea_default = { "content": "ContentArea_content__MTM4Z" };
|
|
256
|
-
|
|
257
|
-
// src/components/ContentArea.tsx
|
|
198
|
+
// src/components/DocContent.tsx
|
|
199
|
+
import { Heading as Heading2, Box as Box5, Text as Text3, Row as Row2, Icon as Icon2, Icons as Icons2 } from "@umami/react-zen";
|
|
258
200
|
import Link3 from "next/link";
|
|
259
|
-
import { jsx as
|
|
260
|
-
function
|
|
261
|
-
return /* @__PURE__ */
|
|
262
|
-
section && /* @__PURE__ */
|
|
263
|
-
title && /* @__PURE__ */
|
|
264
|
-
description && /* @__PURE__ */
|
|
265
|
-
/* @__PURE__ */
|
|
266
|
-
/* @__PURE__ */
|
|
267
|
-
/* @__PURE__ */
|
|
268
|
-
/* @__PURE__ */
|
|
201
|
+
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
202
|
+
function DocContent({ section, title, description, code, next, prev }) {
|
|
203
|
+
return /* @__PURE__ */ jsxs4(Box5, { flexGrow: 1, children: [
|
|
204
|
+
section && /* @__PURE__ */ jsx6(Text3, { color: "primary", weight: "bold", children: section }),
|
|
205
|
+
title && /* @__PURE__ */ jsx6(Heading2, { size: "2", as: "h1", marginY: "3", children: title }),
|
|
206
|
+
description && /* @__PURE__ */ jsx6(Text3, { color: "muted", size: "3", children: description }),
|
|
207
|
+
/* @__PURE__ */ jsx6(Markdown, { code }),
|
|
208
|
+
/* @__PURE__ */ jsxs4(Row2, { justifyContent: "space-between", children: [
|
|
209
|
+
/* @__PURE__ */ jsx6(NavigationButton, { ...prev, isPrev: true }),
|
|
210
|
+
/* @__PURE__ */ jsx6(NavigationButton, { ...next })
|
|
269
211
|
] })
|
|
270
212
|
] });
|
|
271
213
|
}
|
|
@@ -275,17 +217,17 @@ var NavigationButton = ({
|
|
|
275
217
|
isPrev
|
|
276
218
|
}) => {
|
|
277
219
|
if (!url || !label) {
|
|
278
|
-
return /* @__PURE__ */
|
|
220
|
+
return /* @__PURE__ */ jsx6(Box5, {});
|
|
279
221
|
}
|
|
280
|
-
return /* @__PURE__ */
|
|
281
|
-
isPrev && /* @__PURE__ */
|
|
282
|
-
/* @__PURE__ */
|
|
283
|
-
!isPrev && /* @__PURE__ */
|
|
222
|
+
return /* @__PURE__ */ jsx6(Link3, { href: url, children: /* @__PURE__ */ jsxs4(Row2, { alignItems: "center", gap: "3", marginY: "3", children: [
|
|
223
|
+
isPrev && /* @__PURE__ */ jsx6(Icon2, { size: "sm", rotate: 180, children: /* @__PURE__ */ jsx6(Icons2.Chevron, {}) }),
|
|
224
|
+
/* @__PURE__ */ jsx6(Text3, { size: "3", weight: "bold", children: label }),
|
|
225
|
+
!isPrev && /* @__PURE__ */ jsx6(Icon2, { size: "sm", children: /* @__PURE__ */ jsx6(Icons2.Chevron, {}) })
|
|
284
226
|
] }) });
|
|
285
227
|
};
|
|
286
228
|
|
|
287
229
|
// src/components/Docs.tsx
|
|
288
|
-
import { Fragment, jsx as
|
|
230
|
+
import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
289
231
|
function parseContent(content, config = {}) {
|
|
290
232
|
const { tabs, navigation } = config;
|
|
291
233
|
const keys = Object.keys(navigation);
|
|
@@ -310,10 +252,9 @@ function parseContent(content, config = {}) {
|
|
|
310
252
|
});
|
|
311
253
|
return { ...content, tabs, navigation, section, next, prev };
|
|
312
254
|
}
|
|
313
|
-
function Docs() {
|
|
314
|
-
const { content, config } = useShiso();
|
|
255
|
+
function Docs({ content, config }) {
|
|
315
256
|
if (!content) {
|
|
316
|
-
return /* @__PURE__ */
|
|
257
|
+
return /* @__PURE__ */ jsx7(Heading3, { children: "Page not found" });
|
|
317
258
|
}
|
|
318
259
|
const { tabs, navigation, code, meta, section, next, prev, anchors } = parseContent(
|
|
319
260
|
content,
|
|
@@ -340,28 +281,28 @@ function Docs() {
|
|
|
340
281
|
lg: "none",
|
|
341
282
|
xl: "none"
|
|
342
283
|
};
|
|
343
|
-
const MobileMenuButton = () => /* @__PURE__ */
|
|
344
|
-
/* @__PURE__ */
|
|
345
|
-
/* @__PURE__ */
|
|
346
|
-
/* @__PURE__ */
|
|
284
|
+
const MobileMenuButton = () => /* @__PURE__ */ jsxs5(DialogTrigger, { children: [
|
|
285
|
+
/* @__PURE__ */ jsxs5(Button, { children: [
|
|
286
|
+
/* @__PURE__ */ jsx7(Icon3, { children: /* @__PURE__ */ jsx7(Icons3.Menu, {}) }),
|
|
287
|
+
/* @__PURE__ */ jsx7(Text4, { children: "Menu" })
|
|
347
288
|
] }),
|
|
348
|
-
/* @__PURE__ */
|
|
349
|
-
return /* @__PURE__ */
|
|
350
|
-
/* @__PURE__ */
|
|
351
|
-
/* @__PURE__ */
|
|
289
|
+
/* @__PURE__ */ jsx7(Modal, { position: "bottom", offset: "40px", children: /* @__PURE__ */ jsx7(Dialog, { variant: "sheet", children: ({ close }) => {
|
|
290
|
+
return /* @__PURE__ */ jsxs5(Fragment, { children: [
|
|
291
|
+
/* @__PURE__ */ jsx7(Row3, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx7(Button, { onPress: () => close(), variant: "quiet", children: /* @__PURE__ */ jsx7(Icon3, { size: "sm", children: /* @__PURE__ */ jsx7(Icons3.Close, {}) }) }) }),
|
|
292
|
+
/* @__PURE__ */ jsx7(Box6, { height: "100%", overflow: "auto", children: /* @__PURE__ */ jsx7(SideNav, { tabs, navigation }) })
|
|
352
293
|
] });
|
|
353
294
|
} }) })
|
|
354
295
|
] });
|
|
355
|
-
return /* @__PURE__ */
|
|
356
|
-
/* @__PURE__ */
|
|
357
|
-
tabs && /* @__PURE__ */
|
|
358
|
-
/* @__PURE__ */
|
|
359
|
-
|
|
296
|
+
return /* @__PURE__ */ jsxs5(Box6, { flexGrow: "1", children: [
|
|
297
|
+
/* @__PURE__ */ jsx7(Row3, { display: menuDisplay, justifyContent: "flex-end", children: /* @__PURE__ */ jsx7(MobileMenuButton, {}) }),
|
|
298
|
+
tabs && /* @__PURE__ */ jsx7(TopNav, { tabs }),
|
|
299
|
+
/* @__PURE__ */ jsxs5(
|
|
300
|
+
Grid2,
|
|
360
301
|
{
|
|
361
302
|
gap: "6",
|
|
362
303
|
columns: { xs: "1fr", sm: "1fr", md: "1fr", lg: "240px 1fr 240px", xl: "240px 1fr 240px" },
|
|
363
304
|
children: [
|
|
364
|
-
/* @__PURE__ */
|
|
305
|
+
/* @__PURE__ */ jsx7(
|
|
365
306
|
SideNav,
|
|
366
307
|
{
|
|
367
308
|
display: navDisplay,
|
|
@@ -372,8 +313,8 @@ function Docs() {
|
|
|
372
313
|
autoHeight: true
|
|
373
314
|
}
|
|
374
315
|
),
|
|
375
|
-
/* @__PURE__ */
|
|
376
|
-
|
|
316
|
+
/* @__PURE__ */ jsx7(
|
|
317
|
+
DocContent,
|
|
377
318
|
{
|
|
378
319
|
section,
|
|
379
320
|
title: meta?.title,
|
|
@@ -383,12 +324,94 @@ function Docs() {
|
|
|
383
324
|
prev
|
|
384
325
|
}
|
|
385
326
|
),
|
|
386
|
-
/* @__PURE__ */
|
|
327
|
+
/* @__PURE__ */ jsx7(PageLinks, { display: linksDisplay, items: anchors, style: { top } })
|
|
387
328
|
]
|
|
388
329
|
}
|
|
389
330
|
)
|
|
390
331
|
] });
|
|
391
332
|
}
|
|
333
|
+
|
|
334
|
+
// src/components/Shiso.tsx
|
|
335
|
+
import { createContext } from "react";
|
|
336
|
+
import { MDXProvider } from "@mdx-js/react";
|
|
337
|
+
import { Code } from "@umami/react-zen";
|
|
338
|
+
|
|
339
|
+
// src/components/CodeBlock.tsx
|
|
340
|
+
import { useState as useState3, useRef } from "react";
|
|
341
|
+
import { Icon as Icon4, Icons as Icons4 } from "@umami/react-zen";
|
|
342
|
+
|
|
343
|
+
// css-modules:E:\dev\umami-shiso\src\components\CodeBlock.module.css
|
|
344
|
+
var CodeBlock_default = { "container": "CodeBlock_container__ZTkxY", "button": "CodeBlock_button__MmZkO", "copy": "CodeBlock_copy__M2I0N", "check": "CodeBlock_check__MjkzY" };
|
|
345
|
+
|
|
346
|
+
// src/components/CodeBlock.tsx
|
|
347
|
+
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
348
|
+
function CodeBlock(props) {
|
|
349
|
+
const textInput = useRef(null);
|
|
350
|
+
const [copied, setCopied] = useState3(false);
|
|
351
|
+
const handleCopy = () => {
|
|
352
|
+
setCopied(true);
|
|
353
|
+
navigator?.clipboard?.writeText(textInput?.current?.textContent);
|
|
354
|
+
setTimeout(() => {
|
|
355
|
+
setCopied(false);
|
|
356
|
+
}, 1e3);
|
|
357
|
+
};
|
|
358
|
+
return /* @__PURE__ */ jsxs6("pre", { ref: textInput, className: CodeBlock_default.container, children: [
|
|
359
|
+
props.children,
|
|
360
|
+
/* @__PURE__ */ jsx8("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ jsx8(Icon4, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ jsx8(Icons4.Check, {}) : /* @__PURE__ */ jsx8(Icons4.Copy, {}) }) })
|
|
361
|
+
] });
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
// src/components/Blogs.tsx
|
|
365
|
+
import { Grid as Grid3 } from "@umami/react-zen";
|
|
366
|
+
|
|
367
|
+
// src/components/Card.tsx
|
|
368
|
+
import { Box as Box7, Image as Image2, Column as Column3, Row as Row4, Heading as Heading4, Text as Text5, Button as Button2, Icon as Icon5, Icons as Icons5 } from "@umami/react-zen";
|
|
369
|
+
import Link4 from "next/link";
|
|
370
|
+
import { format as format2 } from "date-fns";
|
|
371
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
372
|
+
function Card({ title, description, date, author, url, image }) {
|
|
373
|
+
return /* @__PURE__ */ jsxs7(Column3, { borderSize: "1", borderRadius: "3", overflow: "hidden", children: [
|
|
374
|
+
image && /* @__PURE__ */ jsx9(Box7, { height: "240px", children: /* @__PURE__ */ jsx9(Image2, { src: image, alt: title, objectFit: "cover" }) }),
|
|
375
|
+
/* @__PURE__ */ jsxs7(Column3, { padding: "6", gap: "4", children: [
|
|
376
|
+
/* @__PURE__ */ jsx9(Heading4, { size: "4", as: "header", children: /* @__PURE__ */ jsx9(Link4, { href: url, children: title }) }),
|
|
377
|
+
/* @__PURE__ */ jsx9(Text5, { as: "p", children: description }),
|
|
378
|
+
/* @__PURE__ */ jsxs7(Row4, { justifyContent: "space-between", marginTop: "5", children: [
|
|
379
|
+
/* @__PURE__ */ jsx9(Text5, { color: "muted", children: date && format2(new Date(date), "PP") }),
|
|
380
|
+
/* @__PURE__ */ jsx9(Text5, { color: "muted", children: author })
|
|
381
|
+
] }),
|
|
382
|
+
/* @__PURE__ */ jsx9(Button2, { asChild: true, children: /* @__PURE__ */ jsxs7(Link4, { href: url, children: [
|
|
383
|
+
/* @__PURE__ */ jsx9(Text5, { children: "Read more" }),
|
|
384
|
+
/* @__PURE__ */ jsx9(Icon5, { children: /* @__PURE__ */ jsx9(Icons5.Arrow, {}) })
|
|
385
|
+
] }) })
|
|
386
|
+
] })
|
|
387
|
+
] });
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
// src/components/Blogs.tsx
|
|
391
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
392
|
+
function Blogs({ content, config }) {
|
|
393
|
+
if (!Array.isArray(content)) {
|
|
394
|
+
const { meta, code, anchors, slug } = content;
|
|
395
|
+
return /* @__PURE__ */ jsx10(Blog, { ...meta, code, anchors });
|
|
396
|
+
}
|
|
397
|
+
console.log({ content });
|
|
398
|
+
return /* @__PURE__ */ jsx10(Grid3, { 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)) });
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
// src/components/Shiso.tsx
|
|
402
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
403
|
+
var defaultTemplates = {
|
|
404
|
+
docs: Docs,
|
|
405
|
+
blog: Blogs
|
|
406
|
+
};
|
|
407
|
+
var ShisoContext = createContext(null);
|
|
408
|
+
function Shiso({ type, config, content, components, templates }) {
|
|
409
|
+
const Component = { ...defaultTemplates, ...templates }[type];
|
|
410
|
+
if (!Component) {
|
|
411
|
+
return /* @__PURE__ */ jsx11("h1", { children: `Component not found for type: ${type}` });
|
|
412
|
+
}
|
|
413
|
+
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 }) }) });
|
|
414
|
+
}
|
|
392
415
|
export {
|
|
393
416
|
Blog,
|
|
394
417
|
Docs,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umami/shiso",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.31.0",
|
|
4
4
|
"description": "A content layer for Next.js",
|
|
5
5
|
"homepage": "https://umami.is/shiso",
|
|
6
6
|
"repository": {
|
|
@@ -46,8 +46,9 @@
|
|
|
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.
|
|
49
|
+
"@umami/react-zen": "^0.42.0",
|
|
50
50
|
"classnames": "^2.5.1",
|
|
51
|
+
"date-fns": "^4.1.0",
|
|
51
52
|
"glob": "^10.3.10",
|
|
52
53
|
"gray-matter": "^4.0.3",
|
|
53
54
|
"highlight.js": "^11.11.1",
|
package/server/index.d.ts
CHANGED
|
@@ -5,20 +5,8 @@
|
|
|
5
5
|
|
|
6
6
|
declare module '@umami/shiso/server' {
|
|
7
7
|
import { ReactElement } from 'react';
|
|
8
|
-
import type { ShisoConfig } from '@/lib/types';
|
|
9
|
-
export const
|
|
10
|
-
path: string;
|
|
11
|
-
meta: {
|
|
12
|
-
[key: string]: any;
|
|
13
|
-
};
|
|
14
|
-
content: string;
|
|
15
|
-
code: string;
|
|
16
|
-
anchors: {
|
|
17
|
-
name: string;
|
|
18
|
-
id: string;
|
|
19
|
-
size: number;
|
|
20
|
-
}[];
|
|
21
|
-
} | null>;
|
|
8
|
+
import type { ShisoConfig, ShisoRenderProps, ShisoContent } from '@/lib/types';
|
|
9
|
+
export const parseFile: (file: string) => Promise<ShisoContent | null>;
|
|
22
10
|
export function next(type: string, config: ShisoConfig): {
|
|
23
11
|
generateMetadata: ({ params }: {
|
|
24
12
|
params: Promise<{
|
|
@@ -31,11 +19,7 @@ declare module '@umami/shiso/server' {
|
|
|
31
19
|
};
|
|
32
20
|
}>;
|
|
33
21
|
generateStaticParams: () => Promise<any>;
|
|
34
|
-
renderPage: (render: (
|
|
35
|
-
type: string;
|
|
36
|
-
content: any;
|
|
37
|
-
config: ShisoConfig;
|
|
38
|
-
}) => ReactElement) => ({ params }: {
|
|
22
|
+
renderPage: (render: (props: ShisoRenderProps) => ReactElement) => ({ params }: {
|
|
39
23
|
params: Promise<{
|
|
40
24
|
slug: string[];
|
|
41
25
|
}>;
|