@gearbox-protocol/permissionless-ui 1.11.2 → 1.11.3
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/cjs/components/next/index.cjs +2 -0
- package/dist/cjs/components/next/markdown-viewer.cjs +138 -143
- package/dist/cjs/components/next/next-markdown-viewer.cjs +30 -0
- package/dist/esm/components/next/index.js +1 -0
- package/dist/esm/components/next/markdown-viewer.js +138 -143
- package/dist/esm/components/next/next-markdown-viewer.js +26 -0
- package/dist/types/components/next/index.d.ts +2 -1
- package/dist/types/components/next/markdown-viewer.d.ts +11 -2
- package/dist/types/components/next/next-markdown-viewer.d.ts +23 -0
- package/package.json +1 -1
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
5
5
|
const components_auth_signinRequired = require('../auth/signin-required.cjs');
|
|
6
6
|
const components_next_backButton = require('./back-button.cjs');
|
|
7
7
|
const components_next_markdownViewer = require('./markdown-viewer.cjs');
|
|
8
|
+
const components_next_nextMarkdownViewer = require('./next-markdown-viewer.cjs');
|
|
8
9
|
const components_next_siweProvider = require('./siwe-provider.cjs');
|
|
9
10
|
const components_next_tokenIcon = require('./token-icon.cjs');
|
|
10
11
|
|
|
@@ -13,5 +14,6 @@ const components_next_tokenIcon = require('./token-icon.cjs');
|
|
|
13
14
|
exports.SignInRequired = components_auth_signinRequired.SignInRequired;
|
|
14
15
|
exports.BackButton = components_next_backButton.BackButton;
|
|
15
16
|
exports.MarkdownViewer = components_next_markdownViewer.MarkdownViewer;
|
|
17
|
+
exports.NextMarkdownViewer = components_next_nextMarkdownViewer.NextMarkdownViewer;
|
|
16
18
|
exports.SIWEClientProvider = components_next_siweProvider.SIWEClientProvider;
|
|
17
19
|
exports.TokenIcon = components_next_tokenIcon.TokenIcon;
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
5
|
const jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
const navigation = require('next/navigation');
|
|
7
6
|
const React = require('react');
|
|
8
7
|
const ReactMarkdown = require('react-markdown');
|
|
9
8
|
const remarkGfm = require('remark-gfm');
|
|
@@ -53,8 +52,11 @@ function extractCustomId(children) {
|
|
|
53
52
|
}
|
|
54
53
|
return { id: slugify(text), displayText: children };
|
|
55
54
|
}
|
|
56
|
-
function MarkdownViewer({
|
|
57
|
-
|
|
55
|
+
function MarkdownViewer({
|
|
56
|
+
content,
|
|
57
|
+
title,
|
|
58
|
+
backButton
|
|
59
|
+
}) {
|
|
58
60
|
React.useEffect(() => {
|
|
59
61
|
const hash = window.location.hash;
|
|
60
62
|
if (hash) {
|
|
@@ -66,152 +68,145 @@ function MarkdownViewer({ content, title }) {
|
|
|
66
68
|
}, 100);
|
|
67
69
|
}
|
|
68
70
|
}, []);
|
|
69
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
70
|
-
|
|
71
|
+
return /* @__PURE__ */ jsxRuntime.jsx(components_layout_pageLayout_pageLayout.PageLayout, { title: title || "", backButton, children: /* @__PURE__ */ jsxRuntime.jsx("article", { className: "prose prose-invert prose-lg max-w-none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
72
|
+
ReactMarkdown,
|
|
71
73
|
{
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
74
|
+
remarkPlugins: [remarkGfm],
|
|
75
|
+
components: {
|
|
76
|
+
h1: ({ children, ...props }) => {
|
|
77
|
+
const { id, displayText } = extractCustomId(children);
|
|
78
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
79
|
+
"h1",
|
|
80
|
+
{
|
|
81
|
+
id,
|
|
82
|
+
className: "text-3xl font-bold text-foreground mt-8 mb-4 scroll-mt-24",
|
|
83
|
+
...props,
|
|
84
|
+
children: displayText
|
|
85
|
+
}
|
|
86
|
+
);
|
|
87
|
+
},
|
|
88
|
+
h2: ({ children, ...props }) => {
|
|
89
|
+
const { id, displayText } = extractCustomId(children);
|
|
90
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
91
|
+
"h2",
|
|
92
|
+
{
|
|
93
|
+
id,
|
|
94
|
+
className: "text-2xl font-semibold text-foreground mt-6 mb-3 scroll-mt-24",
|
|
95
|
+
...props,
|
|
96
|
+
children: displayText
|
|
97
|
+
}
|
|
98
|
+
);
|
|
99
|
+
},
|
|
100
|
+
h3: ({ children, ...props }) => {
|
|
101
|
+
const { id, displayText } = extractCustomId(children);
|
|
102
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
103
|
+
"h3",
|
|
104
|
+
{
|
|
105
|
+
id,
|
|
106
|
+
className: "text-xl font-semibold text-foreground mt-5 mb-2 scroll-mt-24",
|
|
107
|
+
...props,
|
|
108
|
+
children: displayText
|
|
109
|
+
}
|
|
110
|
+
);
|
|
111
|
+
},
|
|
112
|
+
h4: ({ children, ...props }) => {
|
|
113
|
+
const { id, displayText } = extractCustomId(children);
|
|
114
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
115
|
+
"h4",
|
|
116
|
+
{
|
|
117
|
+
id,
|
|
118
|
+
className: "text-lg font-semibold text-foreground mt-4 mb-2 scroll-mt-24",
|
|
119
|
+
...props,
|
|
120
|
+
children: displayText
|
|
121
|
+
}
|
|
122
|
+
);
|
|
123
|
+
},
|
|
124
|
+
p: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
125
|
+
"p",
|
|
126
|
+
{
|
|
127
|
+
className: "text-muted-foreground mb-4 leading-relaxed",
|
|
128
|
+
...props
|
|
129
|
+
}
|
|
130
|
+
),
|
|
131
|
+
a: ({ href, ...props }) => {
|
|
132
|
+
const isAnchorLink = href?.startsWith("#");
|
|
133
|
+
if (isAnchorLink && href) {
|
|
134
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
135
|
+
"a",
|
|
129
136
|
{
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
onClick: (e) => {
|
|
143
|
-
e.preventDefault();
|
|
144
|
-
const targetId = href.slice(1);
|
|
145
|
-
const element = document.getElementById(targetId);
|
|
146
|
-
if (element) {
|
|
147
|
-
element.scrollIntoView({
|
|
148
|
-
behavior: "smooth",
|
|
149
|
-
block: "start"
|
|
150
|
-
});
|
|
151
|
-
window.history.pushState(null, "", href);
|
|
152
|
-
}
|
|
153
|
-
},
|
|
154
|
-
...props
|
|
137
|
+
href,
|
|
138
|
+
className: "text-blue-400 hover:text-blue-300 underline transition-colors duration-200",
|
|
139
|
+
onClick: (e) => {
|
|
140
|
+
e.preventDefault();
|
|
141
|
+
const targetId = href.slice(1);
|
|
142
|
+
const element = document.getElementById(targetId);
|
|
143
|
+
if (element) {
|
|
144
|
+
element.scrollIntoView({
|
|
145
|
+
behavior: "smooth",
|
|
146
|
+
block: "start"
|
|
147
|
+
});
|
|
148
|
+
window.history.pushState(null, "", href);
|
|
155
149
|
}
|
|
156
|
-
|
|
157
|
-
}
|
|
158
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
159
|
-
"a",
|
|
160
|
-
{
|
|
161
|
-
href,
|
|
162
|
-
className: "text-blue-400 hover:text-blue-300 underline transition-colors duration-200",
|
|
163
|
-
target: "_blank",
|
|
164
|
-
rel: "noopener noreferrer",
|
|
165
|
-
...props
|
|
166
|
-
}
|
|
167
|
-
);
|
|
168
|
-
},
|
|
169
|
-
ul: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
170
|
-
"ul",
|
|
171
|
-
{
|
|
172
|
-
className: "list-disc list-inside mb-4 text-muted-foreground space-y-2",
|
|
150
|
+
},
|
|
173
151
|
...props
|
|
174
152
|
}
|
|
175
|
-
)
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
153
|
+
);
|
|
154
|
+
}
|
|
155
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
156
|
+
"a",
|
|
157
|
+
{
|
|
158
|
+
href,
|
|
159
|
+
className: "text-blue-400 hover:text-blue-300 underline transition-colors duration-200",
|
|
160
|
+
target: "_blank",
|
|
161
|
+
rel: "noopener noreferrer",
|
|
162
|
+
...props
|
|
163
|
+
}
|
|
164
|
+
);
|
|
165
|
+
},
|
|
166
|
+
ul: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
167
|
+
"ul",
|
|
168
|
+
{
|
|
169
|
+
className: "list-disc list-inside mb-4 text-muted-foreground space-y-2",
|
|
170
|
+
...props
|
|
171
|
+
}
|
|
172
|
+
),
|
|
173
|
+
ol: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
174
|
+
"ol",
|
|
175
|
+
{
|
|
176
|
+
className: "list-decimal list-inside mb-4 text-muted-foreground space-y-2",
|
|
177
|
+
...props
|
|
178
|
+
}
|
|
179
|
+
),
|
|
180
|
+
li: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "ml-4 text-muted-foreground", ...props }),
|
|
181
|
+
blockquote: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
182
|
+
"blockquote",
|
|
183
|
+
{
|
|
184
|
+
className: "border-l-4 border-gray-700 pl-4 my-4 italic text-muted-foreground",
|
|
185
|
+
...props
|
|
186
|
+
}
|
|
187
|
+
),
|
|
188
|
+
code: ({ className, ...props }) => {
|
|
189
|
+
const isInline = !className?.includes("language-");
|
|
190
|
+
return isInline ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
191
|
+
"code",
|
|
192
|
+
{
|
|
193
|
+
className: "bg-gray-800 text-gray-200 px-1.5 py-0.5 rounded text-sm font-mono",
|
|
194
|
+
...props
|
|
195
|
+
}
|
|
196
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
197
|
+
"code",
|
|
198
|
+
{
|
|
199
|
+
className: "block bg-gray-800 text-gray-200 p-4 rounded-lg my-4 font-mono text-sm overflow-x-auto",
|
|
200
|
+
...props
|
|
201
|
+
}
|
|
202
|
+
);
|
|
203
|
+
},
|
|
204
|
+
strong: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "font-bold text-foreground", ...props }),
|
|
205
|
+
em: ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx("em", { className: "italic text-foreground", ...props })
|
|
206
|
+
},
|
|
207
|
+
children: content
|
|
213
208
|
}
|
|
214
|
-
);
|
|
209
|
+
) }) });
|
|
215
210
|
}
|
|
216
211
|
|
|
217
212
|
exports.MarkdownViewer = MarkdownViewer;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
const navigation = require('next/navigation');
|
|
7
|
+
const components_next_markdownViewer = require('./markdown-viewer.cjs');
|
|
8
|
+
|
|
9
|
+
function NextMarkdownViewer({
|
|
10
|
+
content,
|
|
11
|
+
title,
|
|
12
|
+
backButtonHref = "/",
|
|
13
|
+
backButtonText = "Back"
|
|
14
|
+
}) {
|
|
15
|
+
const router = navigation.useRouter();
|
|
16
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
17
|
+
components_next_markdownViewer.MarkdownViewer,
|
|
18
|
+
{
|
|
19
|
+
content,
|
|
20
|
+
title,
|
|
21
|
+
backButton: {
|
|
22
|
+
href: backButtonHref,
|
|
23
|
+
text: backButtonText,
|
|
24
|
+
onClick: () => router.back()
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
exports.NextMarkdownViewer = NextMarkdownViewer;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { SignInRequired } from '../auth/signin-required.js';
|
|
2
2
|
export { BackButton } from './back-button.js';
|
|
3
3
|
export { MarkdownViewer } from './markdown-viewer.js';
|
|
4
|
+
export { NextMarkdownViewer } from './next-markdown-viewer.js';
|
|
4
5
|
export { SIWEClientProvider } from './siwe-provider.js';
|
|
5
6
|
export { TokenIcon } from './token-icon.js';
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useRouter } from 'next/navigation';
|
|
3
2
|
import { useEffect } from 'react';
|
|
4
3
|
import ReactMarkdown from 'react-markdown';
|
|
5
4
|
import remarkGfm from 'remark-gfm';
|
|
@@ -49,8 +48,11 @@ function extractCustomId(children) {
|
|
|
49
48
|
}
|
|
50
49
|
return { id: slugify(text), displayText: children };
|
|
51
50
|
}
|
|
52
|
-
function MarkdownViewer({
|
|
53
|
-
|
|
51
|
+
function MarkdownViewer({
|
|
52
|
+
content,
|
|
53
|
+
title,
|
|
54
|
+
backButton
|
|
55
|
+
}) {
|
|
54
56
|
useEffect(() => {
|
|
55
57
|
const hash = window.location.hash;
|
|
56
58
|
if (hash) {
|
|
@@ -62,152 +64,145 @@ function MarkdownViewer({ content, title }) {
|
|
|
62
64
|
}, 100);
|
|
63
65
|
}
|
|
64
66
|
}, []);
|
|
65
|
-
return /* @__PURE__ */ jsx(
|
|
66
|
-
|
|
67
|
+
return /* @__PURE__ */ jsx(PageLayout, { title: title || "", backButton, children: /* @__PURE__ */ jsx("article", { className: "prose prose-invert prose-lg max-w-none", children: /* @__PURE__ */ jsx(
|
|
68
|
+
ReactMarkdown,
|
|
67
69
|
{
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
70
|
+
remarkPlugins: [remarkGfm],
|
|
71
|
+
components: {
|
|
72
|
+
h1: ({ children, ...props }) => {
|
|
73
|
+
const { id, displayText } = extractCustomId(children);
|
|
74
|
+
return /* @__PURE__ */ jsx(
|
|
75
|
+
"h1",
|
|
76
|
+
{
|
|
77
|
+
id,
|
|
78
|
+
className: "text-3xl font-bold text-foreground mt-8 mb-4 scroll-mt-24",
|
|
79
|
+
...props,
|
|
80
|
+
children: displayText
|
|
81
|
+
}
|
|
82
|
+
);
|
|
83
|
+
},
|
|
84
|
+
h2: ({ children, ...props }) => {
|
|
85
|
+
const { id, displayText } = extractCustomId(children);
|
|
86
|
+
return /* @__PURE__ */ jsx(
|
|
87
|
+
"h2",
|
|
88
|
+
{
|
|
89
|
+
id,
|
|
90
|
+
className: "text-2xl font-semibold text-foreground mt-6 mb-3 scroll-mt-24",
|
|
91
|
+
...props,
|
|
92
|
+
children: displayText
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
},
|
|
96
|
+
h3: ({ children, ...props }) => {
|
|
97
|
+
const { id, displayText } = extractCustomId(children);
|
|
98
|
+
return /* @__PURE__ */ jsx(
|
|
99
|
+
"h3",
|
|
100
|
+
{
|
|
101
|
+
id,
|
|
102
|
+
className: "text-xl font-semibold text-foreground mt-5 mb-2 scroll-mt-24",
|
|
103
|
+
...props,
|
|
104
|
+
children: displayText
|
|
105
|
+
}
|
|
106
|
+
);
|
|
107
|
+
},
|
|
108
|
+
h4: ({ children, ...props }) => {
|
|
109
|
+
const { id, displayText } = extractCustomId(children);
|
|
110
|
+
return /* @__PURE__ */ jsx(
|
|
111
|
+
"h4",
|
|
112
|
+
{
|
|
113
|
+
id,
|
|
114
|
+
className: "text-lg font-semibold text-foreground mt-4 mb-2 scroll-mt-24",
|
|
115
|
+
...props,
|
|
116
|
+
children: displayText
|
|
117
|
+
}
|
|
118
|
+
);
|
|
119
|
+
},
|
|
120
|
+
p: ({ ...props }) => /* @__PURE__ */ jsx(
|
|
121
|
+
"p",
|
|
122
|
+
{
|
|
123
|
+
className: "text-muted-foreground mb-4 leading-relaxed",
|
|
124
|
+
...props
|
|
125
|
+
}
|
|
126
|
+
),
|
|
127
|
+
a: ({ href, ...props }) => {
|
|
128
|
+
const isAnchorLink = href?.startsWith("#");
|
|
129
|
+
if (isAnchorLink && href) {
|
|
130
|
+
return /* @__PURE__ */ jsx(
|
|
131
|
+
"a",
|
|
125
132
|
{
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
onClick: (e) => {
|
|
139
|
-
e.preventDefault();
|
|
140
|
-
const targetId = href.slice(1);
|
|
141
|
-
const element = document.getElementById(targetId);
|
|
142
|
-
if (element) {
|
|
143
|
-
element.scrollIntoView({
|
|
144
|
-
behavior: "smooth",
|
|
145
|
-
block: "start"
|
|
146
|
-
});
|
|
147
|
-
window.history.pushState(null, "", href);
|
|
148
|
-
}
|
|
149
|
-
},
|
|
150
|
-
...props
|
|
133
|
+
href,
|
|
134
|
+
className: "text-blue-400 hover:text-blue-300 underline transition-colors duration-200",
|
|
135
|
+
onClick: (e) => {
|
|
136
|
+
e.preventDefault();
|
|
137
|
+
const targetId = href.slice(1);
|
|
138
|
+
const element = document.getElementById(targetId);
|
|
139
|
+
if (element) {
|
|
140
|
+
element.scrollIntoView({
|
|
141
|
+
behavior: "smooth",
|
|
142
|
+
block: "start"
|
|
143
|
+
});
|
|
144
|
+
window.history.pushState(null, "", href);
|
|
151
145
|
}
|
|
152
|
-
|
|
153
|
-
}
|
|
154
|
-
return /* @__PURE__ */ jsx(
|
|
155
|
-
"a",
|
|
156
|
-
{
|
|
157
|
-
href,
|
|
158
|
-
className: "text-blue-400 hover:text-blue-300 underline transition-colors duration-200",
|
|
159
|
-
target: "_blank",
|
|
160
|
-
rel: "noopener noreferrer",
|
|
161
|
-
...props
|
|
162
|
-
}
|
|
163
|
-
);
|
|
164
|
-
},
|
|
165
|
-
ul: ({ ...props }) => /* @__PURE__ */ jsx(
|
|
166
|
-
"ul",
|
|
167
|
-
{
|
|
168
|
-
className: "list-disc list-inside mb-4 text-muted-foreground space-y-2",
|
|
146
|
+
},
|
|
169
147
|
...props
|
|
170
148
|
}
|
|
171
|
-
)
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
149
|
+
);
|
|
150
|
+
}
|
|
151
|
+
return /* @__PURE__ */ jsx(
|
|
152
|
+
"a",
|
|
153
|
+
{
|
|
154
|
+
href,
|
|
155
|
+
className: "text-blue-400 hover:text-blue-300 underline transition-colors duration-200",
|
|
156
|
+
target: "_blank",
|
|
157
|
+
rel: "noopener noreferrer",
|
|
158
|
+
...props
|
|
159
|
+
}
|
|
160
|
+
);
|
|
161
|
+
},
|
|
162
|
+
ul: ({ ...props }) => /* @__PURE__ */ jsx(
|
|
163
|
+
"ul",
|
|
164
|
+
{
|
|
165
|
+
className: "list-disc list-inside mb-4 text-muted-foreground space-y-2",
|
|
166
|
+
...props
|
|
167
|
+
}
|
|
168
|
+
),
|
|
169
|
+
ol: ({ ...props }) => /* @__PURE__ */ jsx(
|
|
170
|
+
"ol",
|
|
171
|
+
{
|
|
172
|
+
className: "list-decimal list-inside mb-4 text-muted-foreground space-y-2",
|
|
173
|
+
...props
|
|
174
|
+
}
|
|
175
|
+
),
|
|
176
|
+
li: ({ ...props }) => /* @__PURE__ */ jsx("li", { className: "ml-4 text-muted-foreground", ...props }),
|
|
177
|
+
blockquote: ({ ...props }) => /* @__PURE__ */ jsx(
|
|
178
|
+
"blockquote",
|
|
179
|
+
{
|
|
180
|
+
className: "border-l-4 border-gray-700 pl-4 my-4 italic text-muted-foreground",
|
|
181
|
+
...props
|
|
182
|
+
}
|
|
183
|
+
),
|
|
184
|
+
code: ({ className, ...props }) => {
|
|
185
|
+
const isInline = !className?.includes("language-");
|
|
186
|
+
return isInline ? /* @__PURE__ */ jsx(
|
|
187
|
+
"code",
|
|
188
|
+
{
|
|
189
|
+
className: "bg-gray-800 text-gray-200 px-1.5 py-0.5 rounded text-sm font-mono",
|
|
190
|
+
...props
|
|
191
|
+
}
|
|
192
|
+
) : /* @__PURE__ */ jsx(
|
|
193
|
+
"code",
|
|
194
|
+
{
|
|
195
|
+
className: "block bg-gray-800 text-gray-200 p-4 rounded-lg my-4 font-mono text-sm overflow-x-auto",
|
|
196
|
+
...props
|
|
197
|
+
}
|
|
198
|
+
);
|
|
199
|
+
},
|
|
200
|
+
strong: ({ ...props }) => /* @__PURE__ */ jsx("strong", { className: "font-bold text-foreground", ...props }),
|
|
201
|
+
em: ({ ...props }) => /* @__PURE__ */ jsx("em", { className: "italic text-foreground", ...props })
|
|
202
|
+
},
|
|
203
|
+
children: content
|
|
209
204
|
}
|
|
210
|
-
);
|
|
205
|
+
) }) });
|
|
211
206
|
}
|
|
212
207
|
|
|
213
208
|
export { MarkdownViewer };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useRouter } from 'next/navigation';
|
|
3
|
+
import { MarkdownViewer } from './markdown-viewer.js';
|
|
4
|
+
|
|
5
|
+
function NextMarkdownViewer({
|
|
6
|
+
content,
|
|
7
|
+
title,
|
|
8
|
+
backButtonHref = "/",
|
|
9
|
+
backButtonText = "Back"
|
|
10
|
+
}) {
|
|
11
|
+
const router = useRouter();
|
|
12
|
+
return /* @__PURE__ */ jsx(
|
|
13
|
+
MarkdownViewer,
|
|
14
|
+
{
|
|
15
|
+
content,
|
|
16
|
+
title,
|
|
17
|
+
backButton: {
|
|
18
|
+
href: backButtonHref,
|
|
19
|
+
text: backButtonText,
|
|
20
|
+
onClick: () => router.back()
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export { NextMarkdownViewer };
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
export { SignInRequired } from '../auth/signin-required';
|
|
7
7
|
export { BackButton } from './back-button';
|
|
8
|
-
export { MarkdownViewer } from './markdown-viewer';
|
|
8
|
+
export { MarkdownViewer, type MarkdownViewerProps } from './markdown-viewer';
|
|
9
|
+
export { NextMarkdownViewer, type NextMarkdownViewerProps, } from './next-markdown-viewer';
|
|
9
10
|
export { SIWEClientProvider } from './siwe-provider';
|
|
10
11
|
export { TokenIcon } from './token-icon';
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
export interface MarkdownViewerProps {
|
|
2
2
|
content: string;
|
|
3
3
|
title?: string;
|
|
4
|
+
backButton?: {
|
|
5
|
+
href: string;
|
|
6
|
+
text?: string;
|
|
7
|
+
onClick?: () => void;
|
|
8
|
+
};
|
|
4
9
|
}
|
|
5
10
|
/**
|
|
6
11
|
* MarkdownViewer — component for rendering markdown content with custom styling.
|
|
@@ -12,6 +17,10 @@ export interface MarkdownViewerProps {
|
|
|
12
17
|
* Props:
|
|
13
18
|
* - `content` — markdown content string to render (required).
|
|
14
19
|
* - `title` — optional page title displayed in PageLayout.
|
|
20
|
+
* - `backButton` — optional back button configuration object:
|
|
21
|
+
* - `href` — destination URL for back navigation (required).
|
|
22
|
+
* - `text` — custom text label (defaults to "Back" if not provided).
|
|
23
|
+
* - `onClick` — optional callback function executed on click.
|
|
15
24
|
*
|
|
16
25
|
* Features:
|
|
17
26
|
* - Custom heading IDs with slugification or custom IDs (e.g., "## Heading {#custom-id}").
|
|
@@ -21,11 +30,11 @@ export interface MarkdownViewerProps {
|
|
|
21
30
|
* - Internal anchor links with smooth scrolling.
|
|
22
31
|
* - External links open in new tab.
|
|
23
32
|
*
|
|
24
|
-
* Note: Wraps content in PageLayout
|
|
33
|
+
* Note: Wraps content in PageLayout. Uses prose styling with dark theme.
|
|
25
34
|
* Automatically handles heading IDs for navigation.
|
|
26
35
|
*
|
|
27
36
|
* Do NOT use MarkdownViewer:
|
|
28
37
|
* - for simple text content (use appropriate text components).
|
|
29
38
|
* - when you need rich text editing (use appropriate rich text editor components).
|
|
30
39
|
*/
|
|
31
|
-
export declare function MarkdownViewer({ content, title }: MarkdownViewerProps): import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
export declare function MarkdownViewer({ content, title, backButton, }: MarkdownViewerProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export interface NextMarkdownViewerProps {
|
|
2
|
+
content: string;
|
|
3
|
+
title?: string;
|
|
4
|
+
backButtonHref?: string;
|
|
5
|
+
backButtonText?: string;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* NextMarkdownViewer — Next.js-specific wrapper for MarkdownViewer.
|
|
9
|
+
*
|
|
10
|
+
* @usage
|
|
11
|
+
* Use NextMarkdownViewer in Next.js applications to automatically handle
|
|
12
|
+
* back navigation using Next.js router.
|
|
13
|
+
*
|
|
14
|
+
* Props:
|
|
15
|
+
* - `content` — markdown content string to render (required).
|
|
16
|
+
* - `title` — optional page title displayed in PageLayout.
|
|
17
|
+
* - `backButtonHref` — optional href for back button (defaults to "/").
|
|
18
|
+
* - `backButtonText` — optional text for back button (defaults to "Back").
|
|
19
|
+
*
|
|
20
|
+
* Note: This component requires Next.js and uses "use client" directive.
|
|
21
|
+
* For non-Next.js applications, use the base MarkdownViewer component instead.
|
|
22
|
+
*/
|
|
23
|
+
export declare function NextMarkdownViewer({ content, title, backButtonHref, backButtonText, }: NextMarkdownViewerProps): import("react/jsx-runtime").JSX.Element;
|