@blocklet/pages-kit-inner-components 0.6.1 → 0.6.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.
Files changed (45) hide show
  1. package/lib/cjs/add-component.js +1 -420
  2. package/lib/cjs/chunks/draft-data-CfIMszE7.js +1 -0
  3. package/lib/cjs/chunks/home-DUjl5PbP.js +6 -0
  4. package/lib/cjs/chunks/publish-button-C522nNv6.js +1 -0
  5. package/lib/cjs/chunks/site-state-BG2d2tBl.js +57 -0
  6. package/lib/cjs/chunks/state-CtNs8GrN.js +1 -0
  7. package/lib/cjs/home.js +1 -1
  8. package/lib/cjs/project-html.js +11 -4
  9. package/lib/cjs/resources.js +1 -1
  10. package/lib/es/add-component.js +2 -1089
  11. package/lib/es/chunks/{draft-data-CafrGKeh.js → draft-data-bRUHvvzp.js} +5 -4
  12. package/lib/es/chunks/home-VWWdvIPQ.js +69 -0
  13. package/lib/es/chunks/{publish-button-XSZrDaTQ.js → publish-button-Ceet-m88.js} +158 -140
  14. package/lib/es/chunks/site-state-BoVWlYLn.js +2096 -0
  15. package/lib/es/chunks/state-BdNIIXJP.js +502 -0
  16. package/lib/es/home.js +3 -28
  17. package/lib/es/project-html.js +114 -130
  18. package/lib/es/resources.js +93 -137
  19. package/package.json +11 -11
  20. package/lib/cjs/chunks/draft-data-D44_IEV2.js +0 -1
  21. package/lib/cjs/chunks/home-BYk01EUy.js +0 -39
  22. package/lib/cjs/chunks/index-BRgYwvuv.js +0 -475
  23. package/lib/cjs/chunks/publish-button-C8XPA4g_.js +0 -1
  24. package/lib/cjs/chunks/session-BRtsDvA-.js +0 -1
  25. package/lib/cjs/chunks/site-state-gSkcvhcV.js +0 -57
  26. package/lib/cjs/chunks/state-B6BF5wJ-.js +0 -1
  27. package/lib/cjs/chunks-map.json +0 -1
  28. package/lib/cjs/components.js +0 -1
  29. package/lib/cjs/locales.js +0 -3
  30. package/lib/cjs/setting.js +0 -11
  31. package/lib/cjs/site-state.js +0 -1
  32. package/lib/cjs/theme.js +0 -1
  33. package/lib/cjs/uploader.js +0 -1
  34. package/lib/es/chunks/home-DW8SdyfO.js +0 -594
  35. package/lib/es/chunks/index-D5gXPe_7.js +0 -2326
  36. package/lib/es/chunks/session-C72Dq8zg.js +0 -19
  37. package/lib/es/chunks/site-state-W2H7XCSQ.js +0 -2077
  38. package/lib/es/chunks/state-0gvZF3k2.js +0 -573
  39. package/lib/es/chunks-map.json +0 -1
  40. package/lib/es/components.js +0 -22
  41. package/lib/es/locales.js +0 -1032
  42. package/lib/es/setting.js +0 -2294
  43. package/lib/es/site-state.js +0 -48
  44. package/lib/es/theme.js +0 -484
  45. package/lib/es/uploader.js +0 -8
@@ -1,2326 +0,0 @@
1
- import { jsx as n, jsxs as k, Fragment as X } from "react/jsx-runtime";
2
- import { ErrorOutline as Ut } from "@mui/icons-material";
3
- import { Box as f, styled as Ft, Typography as M, Container as Ht, Stack as Vt, useTheme as yt, createTheme as Yt, ThemeProvider as Dt, useMediaQuery as Jt, Card as Gt, CircularProgress as Kt, Grid as ct, CardMedia as Xt, CardContent as qt, Alert as Qt } from "@mui/material";
4
- import Zt from "lodash/isEmpty";
5
- import q from "lodash/pick";
6
- import te, { createContext as wt, useMemo as P, useCallback as O, useContext as vt, Fragment as ee, isValidElement as kt, useState as Q, useEffect as U, useRef as rt } from "react";
7
- import Z from "lodash/keyBy";
8
- import { e as R, f as N, E as oe, i as it, l as at } from "./state-0gvZF3k2.js";
9
- import { AIForm as dt, AIFormResult as mt } from "@blocklet/ai-runtime/components";
10
- import { deepmerge as ne } from "@mui/utils";
11
- import { ErrorBoundary as re } from "react-error-boundary";
12
- import ie from "@blocklet/pages-kit/builtin/markdown/markdown-renderer";
13
- import { useColorConvert as _t } from "@blocklet/pages-kit/contexts/color";
14
- import { cx as v, css as et } from "@emotion/css";
15
- import { materialDark as ae } from "react-syntax-highlighter/dist/esm/styles/prism";
16
- import { useTheme as $t, styled as $ } from "@arcblock/ux/lib/Theme";
17
- import se from "@arcblock/react-hooks/lib/useBrowser";
18
- import pt from "@arcblock/ux/lib/Colors";
19
- import { ResponsiveImage as St, CustomComponentRenderer as le } from "@blocklet/pages-kit/components";
20
- import { isGradient as ce, isColorString as de } from "@blocklet/pages-kit/utils/style";
21
- import Ct from "@mui/material/useMediaQuery";
22
- import B from "lodash/omit";
23
- import { Icon as Nt } from "@iconify-icon/react";
24
- import me from "@arcblock/ux/lib/Screenshot";
25
- import { Link as pe, NavLink as ue, useNavigate as he } from "react-router-dom";
26
- import ge from "@arcblock/ux/lib/Button";
27
- import ot from "is-uri";
28
- import { join as G } from "pathe";
29
- import { withoutTrailingSlash as tt, isRelative as fe, parseURL as xe } from "ufo";
30
- import { useMessage as be } from "@blocklet/embed/message";
31
- import { useLatest as ye } from "ahooks";
32
- import we from "lodash/isEqual";
33
- import { EmbedIframe as ve } from "@blocklet/embed/react";
34
- import { useLocaleContext as ke } from "@arcblock/ux/lib/Locale/context";
35
- import { TwitterTimelineEmbed as _e } from "react-twitter-embed";
36
- import { useUpdate as $e, useMount as Se } from "react-use";
37
- const Bt = "{{CUSTOM_VALUE}}", Ce = [
38
- {
39
- title: "None",
40
- value: "none",
41
- sx: { py: 0 }
42
- },
43
- {
44
- title: "Small",
45
- value: "small",
46
- sx: { py: { xs: 2.5, md: 4, lg: 4, xl: 6 } }
47
- },
48
- {
49
- title: "Normal",
50
- value: "normal",
51
- sx: { py: { xs: 5, md: 7.5, lg: 10, xl: 12.5 } }
52
- },
53
- {
54
- title: "Large",
55
- value: "large",
56
- sx: { py: { xs: 7.5, md: 10, lg: 12.5, xl: 15 } }
57
- }
58
- ], Ne = [
59
- {
60
- title: "None",
61
- value: "none",
62
- sx: { py: 0 }
63
- },
64
- {
65
- title: "Small",
66
- value: "small",
67
- sx: { py: { xs: 2.5, md: 4, lg: 4, xl: 6 } }
68
- },
69
- {
70
- title: "Normal",
71
- value: "normal",
72
- sx: { py: { xs: 5, md: 7, lg: 7, xl: 9 } }
73
- },
74
- {
75
- title: "Large",
76
- value: "large",
77
- sx: { py: { xs: 6, md: 9, lg: 9, xl: 11 } }
78
- }
79
- ], Be = [
80
- {
81
- title: "None",
82
- value: "none",
83
- sx: { px: 0 }
84
- },
85
- {
86
- title: "Small",
87
- value: "small",
88
- sx: { px: { xs: 2, md: 4, lg: 4, xl: 6 } }
89
- },
90
- {
91
- title: "Normal",
92
- value: "normal",
93
- sx: { px: { xs: 2.5, md: 7.5, lg: 10, xl: 12.5 } }
94
- },
95
- {
96
- title: "Large",
97
- value: "large",
98
- sx: { px: { xs: 2.5, md: 10, lg: 12.5, xl: 15 } }
99
- }
100
- ], K = (t, e, o) => {
101
- const r = t.breakpoints.values[o];
102
- return `${e}${r ? ` (${r}px)` : ""}`;
103
- }, Me = [
104
- {
105
- title: "100%",
106
- value: "full",
107
- sx: { maxWidth: "100%" }
108
- },
109
- {
110
- title: (t) => K(t, "Small", "sm"),
111
- value: "sm",
112
- sx: {
113
- maxWidth: (t) => t.breakpoints.values.sm,
114
- width: "100%",
115
- mx: "auto"
116
- }
117
- },
118
- {
119
- title: (t) => K(t, "Normal", "md"),
120
- value: "md",
121
- sx: { maxWidth: (t) => t.breakpoints.values.md, width: "100%", mx: "auto" }
122
- },
123
- {
124
- title: (t) => K(t, "Large", "lg"),
125
- value: "lg",
126
- sx: { maxWidth: (t) => t.breakpoints.values.lg, width: "100%", mx: "auto" }
127
- },
128
- {
129
- title: (t) => K(t, "Extra Large", "xl"),
130
- value: "xl",
131
- sx: { maxWidth: (t) => t.breakpoints.values.xl, width: "100%", mx: "auto" }
132
- },
133
- {
134
- title: "Custom",
135
- value: "custom",
136
- sx: {
137
- maxWidth: Bt,
138
- width: "100%",
139
- mx: "auto"
140
- }
141
- }
142
- ], Ie = Z(Ce, "value"), Pe = Z(Ne, "value"), We = Z(Be, "value"), Re = Z(Me, "value"), je = /* @__PURE__ */ new Map([
143
- ["baseSectionPaddingY", Ie],
144
- ["maxWidth", Re],
145
- ["paddingY", Pe],
146
- ["paddingX", We]
147
- ]);
148
- function Mt(t) {
149
- const { type: e, value: o, format: r = "sx", defaultValue: i = null } = t, a = je.get(e);
150
- if (!a)
151
- return i;
152
- const c = o.startsWith("custom:"), s = c ? "custom" : o;
153
- if (a?.[s] && a?.[s]?.[r]) {
154
- const l = a[s][r];
155
- if (c) {
156
- const d = o.replace("custom:", "");
157
- try {
158
- return JSON.parse(JSON.stringify(l || {}).replaceAll(Bt, d));
159
- } catch {
160
- }
161
- }
162
- return l;
163
- }
164
- return i;
165
- }
166
- const It = wt({
167
- page: null,
168
- getPageMeta: () => ({}),
169
- getPageMetaStyle: () => ({})
170
- });
171
- function ze() {
172
- return vt(It);
173
- }
174
- function Cn({
175
- page: t,
176
- children: e,
177
- defaultLocale: o = "en",
178
- currentLocale: r
179
- }) {
180
- const i = P(() => t ? JSON.parse(JSON.stringify(t)) : null, [JSON.stringify(t)]), a = O(() => {
181
- if (!i) return {};
182
- const l = r || o;
183
- return i.locales?.[l] ?? {};
184
- }, [i, o, r]), c = O(
185
- (l = "sx") => {
186
- const d = a();
187
- return !d || !d.style ? {} : Object.entries(d.style || {}).reduce((m, [h, u]) => {
188
- if (!u) return m;
189
- const b = `${h}Custom`;
190
- d.style[b];
191
- const x = Mt({
192
- type: h,
193
- value: u,
194
- format: l
195
- });
196
- return x ? { ...m, ...x } : m;
197
- }, {});
198
- },
199
- [a]
200
- ), s = P(
201
- () => ({
202
- page: i,
203
- getPageMeta: a,
204
- getPageMetaStyle: c
205
- }),
206
- [i, a, c]
207
- );
208
- return /* @__PURE__ */ n(It.Provider, { value: s, children: e });
209
- }
210
- function z({ actions: t, center: e, className: o, align: r }) {
211
- return t && t?.length ? /* @__PURE__ */ n(
212
- f,
213
- {
214
- className: v(
215
- "flex gap-4 flex-wrap",
216
- "lg:flex-row lg:gap-8",
217
- (e || r === "center") && "justify-center",
218
- !e && r === "right" && "justify-end",
219
- !e && r === "left" && "justify-start",
220
- o
221
- ),
222
- sx: { alignItems: "center" },
223
- children: t
224
- }
225
- ) : null;
226
- }
227
- const Ee = "section", Le = Ft(f)`
228
- overflow: hidden;
229
-
230
- .section__title {
231
- margin-top: 0;
232
- font-weight: 700;
233
- }
234
- .section__title_non_big {
235
- font-size: 32px;
236
- @media (max-width: 600px) {
237
- font-size: 24px;
238
- }
239
- }
240
- &.base-info .section__tag {
241
- margin-top: 0;
242
- margin-bottom: 2vw;
243
- background-color: ${({ theme: t }) => t.palette.primary.main};
244
- white-space: nowrap;
245
- max-width: 100%;
246
- display: inline-block;
247
- padding: 0 10px;
248
- justify-content: flex-start;
249
- overflow: hidden;
250
- text-overflow: ellipsis;
251
- font-size: 12px;
252
- color: #fff;
253
- border-radius: 4px;
254
- line-height: 20px;
255
- }
256
- .section__title {
257
- color: ${({ theme: t }) => t.palette.text.primary};
258
- a {
259
- color: ${({ theme: t }) => t.palette.primary.main};
260
- }
261
- p {
262
- margin-top: 0;
263
- margin-bottom: 0;
264
- }
265
- }
266
- .section__description {
267
- color: ${({ theme: t }) => t.palette.text.primary};
268
- margin-bottom: 4vw;
269
- margin-top: 0;
270
- a {
271
- color: ${({ theme: t }) => t.palette.primary.main};
272
- }
273
- p {
274
- margin-top: 0;
275
- margin-bottom: 0.5rem;
276
- }
277
- }
278
- @media (min-width: ${({ theme: t }) => t.breakpoints.values[Ee]}px) {
279
- .section__tag {
280
- margin-bottom: 32px;
281
- }
282
- .section__title {
283
- margin-bottom: 32px;
284
- }
285
- .section__description {
286
- margin-bottom: 40px;
287
- }
288
- }
289
- `;
290
- function F({
291
- title: t,
292
- description: e,
293
- descriptionMarkdown: o,
294
- actions: r,
295
- className: i = "",
296
- classes: a = {},
297
- prepend: c,
298
- append: s,
299
- level: l = 2,
300
- tag: d,
301
- badge: p,
302
- center: m,
303
- logo: h,
304
- titleAppearance: u,
305
- descriptionAppearance: b,
306
- ...x
307
- }) {
308
- const y = _t();
309
- if (!t && !e && !r && !p && !d && !c && !s && !h) return null;
310
- const g = Math.max(Math.min(5, l + 1), 1), w = {
311
- 1: "xl:!text-3xl lg:!text-2xl md:!text-xl",
312
- 2: "xl:!text-2xl lg:!text-xl md:!text-lg",
313
- 3: "xl:!text-2xl lg:!text-xl md:!text-lg",
314
- 4: "xl:!text-xl lg:!text-lg md:!text-md",
315
- 5: "xl:!text-lg md:!text-md sm:!text-sm",
316
- 6: "!text-sm"
317
- }, S = l === 0 ? "big" : `h${g}`, _ = l === 0;
318
- return /* @__PURE__ */ k(Le, { className: v("base-info", "lg:text-left", m && "!text-center", i), ...x, children: [
319
- c && /* @__PURE__ */ n("div", { children: c }),
320
- (d || p) && /* @__PURE__ */ n("div", { className: v("section__tag", a?.tag || a?.badge), children: d || p }),
321
- h && /* @__PURE__ */ n("img", { className: "w-[120px] m-auto mb-8", src: h, alt: "info", loading: "lazy" }),
322
- t && /* @__PURE__ */ n(
323
- M,
324
- {
325
- sx: {
326
- whiteSpace: "pre-wrap",
327
- mb: e ? "2vw" : 0,
328
- ...u?.color && { color: `${y(u.color)} !important` }
329
- },
330
- className: v(
331
- "section__title",
332
- "text-gray-800",
333
- "dark:text-gray-50",
334
- a.title,
335
- "page-kit-section__title",
336
- _ ? "" : "section__title_non_big"
337
- ),
338
- component: `h${Math.max(l, 1)}`,
339
- variant: S,
340
- children: t
341
- }
342
- ),
343
- e && (o ? /* @__PURE__ */ n(
344
- f,
345
- {
346
- sx: {
347
- ...b?.color && { color: `${y(b.color)} !important` }
348
- },
349
- className: v(
350
- "section__description",
351
- "text-gray-800",
352
- "dark:text-gray-100",
353
- w[g],
354
- a.description,
355
- "page-kit-section__description"
356
- ),
357
- children: /* @__PURE__ */ n(ie, { codeOptions: { showActionButton: !1, theme: ae }, children: e })
358
- }
359
- ) : /* @__PURE__ */ n(
360
- M,
361
- {
362
- sx: {
363
- whiteSpace: "pre-wrap",
364
- ...b?.color && { color: `${y(b.color)} !important` }
365
- },
366
- className: v(
367
- "section__description",
368
- "text-gray-800",
369
- "dark:text-gray-100",
370
- w[g],
371
- a.description,
372
- "page-kit-section__description"
373
- ),
374
- component: "div",
375
- variant: "body1",
376
- gutterBottom: !0,
377
- children: e
378
- }
379
- )),
380
- /* @__PURE__ */ n(z, { actions: r, center: m, className: "mt-8" }),
381
- s && /* @__PURE__ */ n("div", { children: s })
382
- ] });
383
- }
384
- const H = [
385
- "actions",
386
- "append",
387
- "badge",
388
- "tag",
389
- "center",
390
- "description",
391
- "descriptionMarkdown",
392
- "level",
393
- "logo",
394
- "prepend",
395
- "title",
396
- "titleAppearance",
397
- "descriptionAppearance"
398
- ];
399
- function Pt(t) {
400
- if (t.type === ee) {
401
- const o = (t.props.children || []).filter((r) => kt(r));
402
- return o.length === 1 ? Pt(o[0]) : o.length > 1;
403
- }
404
- return Array.isArray(t);
405
- }
406
- const I = "&>*";
407
- function st({ children: t, col: e, gap: o, className: r, align: i, sx: a, type: c, ...s } = {
408
- children: null,
409
- className: "",
410
- col: 3,
411
- gap: void 0,
412
- sx: {},
413
- align: "center",
414
- type: "default"
415
- }) {
416
- const l = $t(), d = Number(Math.floor(100 / e * 100) / 100), p = {
417
- center: "justify-center items-center",
418
- left: "justify-start items-center",
419
- right: "justify-end items-center",
420
- top: "justify-center items-start",
421
- bottom: "justify-center items-end",
422
- "top-left": "justify-start items-start",
423
- "top-right": "justify-end items-start",
424
- "bottom-left": "justify-start items-end",
425
- "bottom-right": "justify-end items-end"
426
- }, m = p[i] || p.center;
427
- let u = o ?? ({
428
- 2: 6,
429
- 3: 4,
430
- 4: 4,
431
- 5: 3,
432
- 6: 3
433
- }[e] || 0);
434
- Pt(t) || (u = 0);
435
- const x = (e - 1) * u / e;
436
- let y = { ...a, gap: `${u}rem` };
437
- const g = { [I]: { width: "100%" } }, w = {}, S = {}, _ = {};
438
- switch (g.gap = "1rem", w.gap = `${u / 2}rem`, e) {
439
- case 3:
440
- case 4:
441
- w[I] = {
442
- width: `calc(50% - ${u / 2}rem)`
443
- };
444
- break;
445
- case 5:
446
- case 6:
447
- g[I] = {
448
- width: `calc(50% - ${u / 2 / 2}rem)`
449
- }, w[I] = {
450
- width: `calc(50% - ${u / 2 / 2}rem)`
451
- }, S[I] = {
452
- width: `calc(33.33% - ${u * 2 / 3}rem)`
453
- };
454
- break;
455
- }
456
- return y[I] = { width: `calc(${d}% - ${x}rem)` }, y[`@media (max-width: ${l.breakpoints.values.xl}px)`] = _, y[`@media (max-width: ${l.breakpoints.values.lg}px)`] = S, y[`@media (max-width: ${l.breakpoints.values.md}px)`] = w, y[`@media (max-width: ${l.breakpoints.values.sm}px)`] = g, c === "wall" && (y = { ...a, gap: `${u}rem` }, y[I] = { width: `calc(${d}% - ${x}rem)` }, g[I] = { width: `calc(45% - ${u / 2 / 2}rem)` }, y[`@media (max-width: ${l.breakpoints.values.sm}px)`] = g), /* @__PURE__ */ n(f, { className: v("flex flex-wrap flex-row h-full", m, r), sx: y, ...s, children: t });
457
- }
458
- function Ae() {
459
- const t = navigator.userAgent.toLowerCase();
460
- return t.includes("safari") && !t.includes("chrome");
461
- }
462
- function Te(t = "") {
463
- if (t.startsWith("data:image/svg+xml,")) return !0;
464
- const e = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/, o = /^(\/|\.\/|\.\.\/)(?:[^/]+\/)*[^/]+$/;
465
- return e.test(t) || o.test(t);
466
- }
467
- function A(t) {
468
- return t?.endsWith(".mp4") || t?.endsWith(".m4v") || t?.endsWith(".webm");
469
- }
470
- function Oe(t) {
471
- return t?.endsWith(".mp4") || t?.endsWith(".m4v") ? "video/mp4" : t?.endsWith(".webm") ? "video/webm" : void 0;
472
- }
473
- function Ue(t) {
474
- let e = {};
475
- return typeof t == "string" ? ce(t) ? e.image = t : (e.image = N(t), de(t) && (e.color = t, e.image = "")) : e = t, e;
476
- }
477
- function Fe() {
478
- const [t, e] = Q(Date.now());
479
- return U(() => {
480
- const o = () => {
481
- e(Date.now());
482
- };
483
- return document.addEventListener("visibilitychange", o), () => {
484
- document.removeEventListener("visibilitychange", o);
485
- };
486
- }, []), t;
487
- }
488
- function ut(t, e, o, r, i) {
489
- let a = null;
490
- const { color: c = "", image: s } = Ue(e);
491
- if (s && Te(s)) {
492
- delete o.backgroundColor;
493
- const l = !(t.mobile.apple.device || Ae()) && A(s), d = A(s) && r ? R(N(r), 1200, "quality") : "";
494
- l ? a = /* @__PURE__ */ n(
495
- f,
496
- {
497
- component: "video",
498
- className: "section-bg",
499
- autoPlay: !0,
500
- loop: !0,
501
- muted: !0,
502
- controls: !1,
503
- playsInline: !0,
504
- poster: d,
505
- src: A(s) ? s : R(s, 1200, "quality"),
506
- sx: {
507
- width: "100%",
508
- position: "absolute",
509
- zIndex: -9999,
510
- right: 0,
511
- left: 0,
512
- top: 0,
513
- height: "100%",
514
- objectFit: "cover"
515
- }
516
- },
517
- s
518
- ) : a = /* @__PURE__ */ n(
519
- St,
520
- {
521
- src: A(s) && r ? d : s,
522
- sizesAttr: {
523
- sm: 600,
524
- md: 900,
525
- lg: 1200
526
- },
527
- className: "section-bg",
528
- alt: "",
529
- width: "100%",
530
- loading: "lazy",
531
- sx: {
532
- position: "absolute",
533
- zIndex: -9999,
534
- right: 0,
535
- left: 0,
536
- top: 0,
537
- width: "100%",
538
- height: "100%",
539
- objectFit: "cover"
540
- }
541
- },
542
- i || s
543
- );
544
- } else s ? o.backgroundImage = `${s} !important` : c && (o.backgroundColor = `${c} !important`);
545
- return a;
546
- }
547
- function He({ autoWidth: t, children: e, ...o }) {
548
- return t ? /* @__PURE__ */ n(
549
- f,
550
- {
551
- ...o,
552
- sx: [
553
- {
554
- display: "flex"
555
- },
556
- ...Array.isArray(o.sx) ? o.sx : [o.sx]
557
- ],
558
- children: e
559
- }
560
- ) : /* @__PURE__ */ n(Ht, { ...o, children: e });
561
- }
562
- function V({
563
- dark: t = !1,
564
- children: e,
565
- className: o,
566
- sx: r = {},
567
- boxed: i = { show: !1 },
568
- padding: a = "normal",
569
- boxProps: c,
570
- type: s,
571
- ...l
572
- }) {
573
- const d = { ...r }, p = Ct((u) => u.breakpoints.down("md"));
574
- t && (d.color = pt.common.white, d.backgroundColor = `${pt.grey[900]} !important`), i.show && (d.display = "flex");
575
- const m = P(() => !Number(l.boxMaxWidth) || p ? {
576
- width: "100%"
577
- } : s === "wall" && l.boxMaxWidth ? {
578
- maxWidth: `${l.boxMaxWidth}px !important`,
579
- width: "100%"
580
- } : {
581
- width: "100%"
582
- }, [l.boxMaxWidth, p, s]), h = Mt({
583
- type: "baseSectionPaddingY",
584
- value: a || "normal",
585
- // section default is normal
586
- defaultValue: ""
587
- });
588
- return /* @__PURE__ */ n(
589
- Ve,
590
- {
591
- component: "section",
592
- styles: { ...d, ...h },
593
- className: v("base-section", "px-2 md:px-5 lg:px-5 xl:px-10", o, {
594
- dark: t
595
- }),
596
- ...B(
597
- l,
598
- "hoverStyle",
599
- "boxMaxWidth",
600
- "embedUrl",
601
- "autoWidth",
602
- "paddingXY",
603
- "iframeHeight",
604
- "titleAppearance",
605
- "descriptionAppearance"
606
- ),
607
- children: /* @__PURE__ */ n(He, { autoWidth: l?.autoWidth, className: v("section-content h-full"), sx: m, children: i.show ? /* @__PURE__ */ n(Wt, { ...c, boxed: i, children: e }) : e })
608
- }
609
- );
610
- }
611
- function Wt({
612
- background: t = "",
613
- backgroundVideoPoster: e,
614
- children: o,
615
- sx: r = {},
616
- boxed: i = { show: !1 },
617
- className: a = "",
618
- styles: c = {},
619
- ...s
620
- }) {
621
- const l = { ...c, ...r }, d = _t();
622
- let p = null;
623
- const m = Ct((b) => b.breakpoints.up("sm")), h = se(), u = Fe();
624
- return t && (p = ut(
625
- h,
626
- typeof t == "string" ? d(t) : t,
627
- l,
628
- e,
629
- u
630
- )), i.show && (l.borderRadius = "10px", l.padding === void 0 && (l.padding = m ? "50px" : "20px"), i?.border && (l.border = "1px solid #c0c0c0"), i?.background && (p = ut(
631
- h,
632
- typeof i?.background == "string" ? d(i?.background) : i?.background,
633
- l,
634
- i?.backgroundVideoPoster,
635
- u
636
- ))), /* @__PURE__ */ k(
637
- f,
638
- {
639
- ...s,
640
- sx: {
641
- ...l,
642
- ...p ? { position: "relative", overflow: "hidden", zIndex: 0 } : {}
643
- },
644
- className: v(a, i?.boxShadow && "shadow-xl"),
645
- children: [
646
- p,
647
- o
648
- ]
649
- }
650
- );
651
- }
652
- const Ve = $(Wt)`
653
- &:nth-of-type(even) {
654
- background: #f8f8f8;
655
- }
656
-
657
- @media (max-width: 600px) {
658
- .section__title {
659
- font-size: 24px;
660
- }
661
-
662
- .base-info {
663
- > *:last-child {
664
- margin-bottom: 0;
665
- }
666
- }
667
- }
668
- `;
669
- function Rt({ icon: t, ...e }) {
670
- return /* @__PURE__ */ n(Nt, { icon: t, ...e, ref: null });
671
- }
672
- function C(t, e) {
673
- const o = q(t, e), r = B(t, e);
674
- return [o, r];
675
- }
676
- const jt = ["title", "description", "actions", "badge", "tag", "prepend", "append", "logo"];
677
- function Ye({
678
- image: t,
679
- imageBorder: e,
680
- imageShadow: o,
681
- className: r,
682
- reverse: i = !1,
683
- fullSizeImage: a,
684
- ...c
685
- }) {
686
- const [s, l] = C(c, H), d = Object.keys(s).length > 0 && Object.values(q(s, jt)).filter(Boolean).length > 0 && /* @__PURE__ */ n(F, { ...s }), p = kt(t) ? t : /* @__PURE__ */ n(f, { component: "img", src: t, alt: "", className: "block" }), m = ["phone", "macbook"].includes(e), h = t && /* @__PURE__ */ n(
687
- f,
688
- {
689
- className: v(
690
- "section__image",
691
- "m-auto, leading-[1] text-center",
692
- o && "shadow-xl",
693
- s?.center ? "flex justify-center items-center" : ""
694
- ),
695
- sx: {
696
- border: e === !0 ? "1px solid #c0c0c0" : void 0,
697
- borderRadius: 2,
698
- overflow: "hidden",
699
- // FIXME: Screenshot 组件无法设置最外层 div 的样式,只能通过父元素设置
700
- "> div": m ? { width: "100%", video: { borderRadius: "0 !important" } } : void 0
701
- },
702
- children: m ? (
703
- // @ts-ignore
704
- /* @__PURE__ */ n(me, { type: e, sx: { width: "100%" }, children: p })
705
- ) : p
706
- }
707
- );
708
- return /* @__PURE__ */ n(
709
- V,
710
- {
711
- className: v(
712
- "section--block",
713
- r,
714
- a && !i && et`
715
- .section-bg {
716
- height: 80%;
717
- }
718
- `
719
- ),
720
- ...l,
721
- boxProps: a ? { sx: { padding: 0, overflow: "hidden" } } : void 0,
722
- children: /* @__PURE__ */ n(
723
- st,
724
- {
725
- col: t ? 2 : 1,
726
- className: a ? et`
727
- display: flex;
728
- flex-direction: column;
729
-
730
- > .base-info,
731
- > .section__image {
732
- width: 100%;
733
-
734
- > img,
735
- > video {
736
- width: 100%;
737
- }
738
- }
739
- ` : void 0,
740
- children: i ? /* @__PURE__ */ k(X, { children: [
741
- h,
742
- d
743
- ] }) : /* @__PURE__ */ k(X, { children: [
744
- d,
745
- h
746
- ] })
747
- }
748
- )
749
- }
750
- );
751
- }
752
- const Y = ["editing", "height", "locale", "dev", "sx"];
753
- function De(t) {
754
- const { className: e, ...o } = t;
755
- return /* @__PURE__ */ n(Je, { ...o, className: v("BlockBase-root", e) });
756
- }
757
- const Je = $(f)`
758
- position: relative;
759
- color: ${({ theme: t }) => t.palette.text.primary};
760
- `;
761
- function Ge({
762
- widget: t,
763
- reverse: e,
764
- projectId: o,
765
- assistantId: r,
766
- working: i,
767
- submitTitle: a,
768
- submitIcon: c,
769
- submitColor: s,
770
- placeholder: l,
771
- loadingIndicator: d,
772
- section: p,
773
- ...m
774
- }) {
775
- const [{ editing: h }, u] = C(m, Y), [b, x] = C(u, H), y = o && r ? { projectId: o, gitRef: "main", assistantId: r, working: !0 } : void 0, g = {
776
- children: a,
777
- endIcon: c ? /* @__PURE__ */ n(Rt, { icon: c }) : void 0,
778
- sx: {
779
- background: s || void 0,
780
- ":hover": {
781
- background: s || void 0,
782
- opacity: 0.8
783
- }
784
- }
785
- }, w = [], S = l && /* @__PURE__ */ n(
786
- M,
787
- {
788
- variant: "caption",
789
- sx: {
790
- color: "text.disabled"
791
- },
792
- children: l
793
- }
794
- ), _ = d && /* @__PURE__ */ n(
795
- M,
796
- {
797
- variant: "caption",
798
- sx: {
799
- color: "text.disabled"
800
- },
801
- children: d
802
- }
803
- );
804
- Object.keys(b).length > 0 && Object.values(q(b, jt)).filter(Boolean).length > 0 && w.push(/* @__PURE__ */ n(F, { ...b }, "base-info")), y && (t === "form" ? w.push(/* @__PURE__ */ n(dt, { identifier: y, SubmitProps: g }, "form")) : t === "result" ? w.push(
805
- /* @__PURE__ */ n(
806
- mt,
807
- {
808
- identifier: y,
809
- placeholder: S,
810
- loadingIndicator: _
811
- },
812
- "result"
813
- )
814
- ) : w.push(
815
- /* @__PURE__ */ k(
816
- Vt,
817
- {
818
- direction: "row",
819
- sx: {
820
- width: "100%",
821
- gap: 2
822
- },
823
- children: [
824
- /* @__PURE__ */ n(dt, { identifier: y, BoxProps: { flex: 1 }, SubmitProps: g }),
825
- /* @__PURE__ */ n(
826
- mt,
827
- {
828
- identifier: y,
829
- BoxProps: { flex: 1 },
830
- placeholder: S,
831
- loadingIndicator: _
832
- }
833
- )
834
- ]
835
- },
836
- "form-result"
837
- )
838
- )), e && w.reverse();
839
- const W = yt(), j = P(
840
- () => Yt(ne(W, { palette: { primary: s ? { main: s } : void 0 } })),
841
- [s, W]
842
- );
843
- return /* @__PURE__ */ n(re, { fallbackRender: oe, children: /* @__PURE__ */ n(Dt, { theme: j, children: /* @__PURE__ */ n(V, { ...x, sx: h ? { pointerEvents: "none" } : {}, children: /* @__PURE__ */ n(st, { col: w.length, children: w }) }) }) });
844
- }
845
- const zt = wt({
846
- pages: [],
847
- project: void 0
848
- }), { Provider: Nn, Consumer: Bn } = zt;
849
- function Et() {
850
- return vt(zt);
851
- }
852
- function Ke({ icon: t, className: e = "", size: o = "1rem", ...r }) {
853
- return /* @__PURE__ */ n(Xe, { component: Rt, className: v("css-icon", e), size: o, ...r, icon: t });
854
- }
855
- const Xe = $(f)`
856
- &.css-icon {
857
- display: inline-block;
858
- width: ${({ size: t }) => t};
859
- height: ${({ size: t }) => t};
860
- }
861
- `;
862
- function qe({ icon: t, className: e = "", size: o = "1rem", imageMeta: r, ...i }) {
863
- const a = R(N(t), 540), [c, s] = Q(!1), l = $t();
864
- return c ? /* @__PURE__ */ n(Ke, { icon: "i-mdi:image", color: l.palette.grey[500], size: o, className: e, ...i }) : /* @__PURE__ */ n(Qe, { className: v("image-icon", e), size: o, ...i, children: /* @__PURE__ */ n(
865
- "img",
866
- {
867
- className: "image-icon__image",
868
- src: a,
869
- onError: () => s(!0),
870
- width: r?.naturalWidth,
871
- height: r?.naturalHeight,
872
- alt: r?.filename || "card-icon",
873
- loading: "lazy"
874
- }
875
- ) });
876
- }
877
- const Qe = $(f)`
878
- display: inline-block;
879
- width: ${({ size: t }) => t};
880
- height: ${({ size: t }) => t};
881
- .image-icon__image {
882
- object-fit: contain;
883
- height: 100%;
884
- width: 100%;
885
- }
886
- `, lt = (t) => typeof t == "string" && /^[\w-_]+:[\w-_]+$/.test(t);
887
- function nt({ icon: t, size: e = "1rem", imageMeta: o, ...r }) {
888
- const i = window.isNaN(e) ? e : `${e}px`;
889
- return lt(t) ? /* @__PURE__ */ n(Nt, { icon: t }) : /* @__PURE__ */ n(Ze, { component: qe, imageMeta: o, className: "base-icon", icon: t, size: i, ...r });
890
- }
891
- const Ze = $(f)`
892
- flex-shrink: 0;
893
- `;
894
- function T({ text: t, children: e, icon: o = "", endIcon: r, color: i = "primary", link: a = "", href: c = "", ...s }) {
895
- const l = o ? /* @__PURE__ */ n(nt, { icon: o }) : null, d = r ? /* @__PURE__ */ n(nt, { icon: r }) : null, p = a || c, m = { ...s };
896
- return p && (m.href = p, ot(p) && (m.target = m.target || "_blank")), /* @__PURE__ */ n(ge, { startIcon: l, endIcon: d, color: i, ...m, children: t || e });
897
- }
898
- function Lt({ editing: t, text: e, ...o }) {
899
- const { pages: r = [] } = Et(), i = r.find((a) => a.id === (o.link || o.linkId));
900
- if (t)
901
- return /* @__PURE__ */ n(T, { ...B(o, ["link", "linkId"]), children: e });
902
- if (i) {
903
- const a = i.path || "/";
904
- return /* @__PURE__ */ n(pe, { to: a, children: /* @__PURE__ */ n(T, { ...B(o, ["link", "linkId"]), children: e }) });
905
- }
906
- return /* @__PURE__ */ n(T, { ...B(o, "linkId"), children: e });
907
- }
908
- function E({ type: t = "", icon: e = "", size: o = "3rem", className: r = "", ...i }) {
909
- return /* @__PURE__ */ n(
910
- nt,
911
- {
912
- icon: e || t,
913
- size: o,
914
- className: v("content-icon", r),
915
- ...i,
916
- color: typeof i.color > "u" ? "inherit" : i.color
917
- }
918
- );
919
- }
920
- function to({
921
- to: t,
922
- base: e,
923
- children: o,
924
- className: r,
925
- activeClassName: i = "active",
926
- target: a = "auto",
927
- autoExternalMark: c = !1,
928
- useRouterLink: s,
929
- ...l
930
- }) {
931
- const { pages: d = [], locale: p = "" } = {}, m = e ? G("/", e) : e || "";
932
- let h = a === "auto" ? "_self" : a, u = G(m, t);
933
- const b = c ? ot(u) : !1;
934
- if (e)
935
- return u = G(m, p, t), /* @__PURE__ */ n(
936
- "a",
937
- {
938
- className: `no-underline ${r}`,
939
- href: tt(u),
940
- rel: "noreferrer noopener",
941
- target: h,
942
- ...l,
943
- children: o
944
- }
945
- );
946
- if (ot(t))
947
- a === "auto" && (h = "_blank"), u = t;
948
- else {
949
- fe(u) && (u = G(window.location.pathname, u));
950
- const x = xe(`${window.location.origin}${u}`), y = d.some((g) => g.pathname === x.pathname);
951
- if (s || y)
952
- return /* @__PURE__ */ n(
953
- ue,
954
- {
955
- end: !0,
956
- to: tt(u),
957
- className: ({ isActive: g }) => v(r, g ? i : ""),
958
- ...l,
959
- children: o
960
- }
961
- );
962
- }
963
- return /* @__PURE__ */ k(
964
- "a",
965
- {
966
- className: `no-underline ${r}`,
967
- href: tt(u),
968
- rel: "noreferrer noopener",
969
- target: h,
970
- ...l,
971
- children: [
972
- o,
973
- b && /* @__PURE__ */ n(E, { icon: "i-mdi:arrow-top-right", size: "0.9em", className: "smart-link__mark", style: { marginLeft: 5 } })
974
- ]
975
- }
976
- );
977
- }
978
- function D({
979
- prepend: t,
980
- append: e,
981
- children: o,
982
- className: r = "",
983
- dark: i = !1,
984
- border: a = !0,
985
- ...c
986
- }) {
987
- let s = {};
988
- const { pages: l = [] } = Et(), d = l.find((h) => h.id === c.link), p = !o || te.Children.toArray(o).every((h) => h === null);
989
- c.link && (s = {
990
- component: to,
991
- to: d?.path || c.link,
992
- useRouterLink: !0
993
- });
994
- const m = yt();
995
- return /* @__PURE__ */ k(
996
- eo,
997
- {
998
- className: v("base-card card", { dark: i, "border-transparent": !a }, r),
999
- sx: {
1000
- borderColor: m.palette.divider
1001
- },
1002
- ...s,
1003
- ...B(c, ["listType", "dark", "iconColor", "link", "hoverStyle", "imageSize"]),
1004
- children: [
1005
- t,
1006
- !p && /* @__PURE__ */ n("div", { className: "card__body", children: o }),
1007
- e
1008
- ]
1009
- }
1010
- );
1011
- }
1012
- const eo = $(f)`
1013
- &.base-card {
1014
- text-align: left;
1015
- border-width: 1px;
1016
- border-style: solid;
1017
- border-radius: 12px;
1018
- overflow: hidden;
1019
- &,
1020
- &:hover {
1021
- text-decoration: none;
1022
- }
1023
- }
1024
- .card__body {
1025
- padding: 15px 15px;
1026
- }
1027
- `;
1028
- function J({
1029
- align: t = "left",
1030
- title: e,
1031
- titleProps: o = {},
1032
- description: r,
1033
- descriptionProps: i = {}
1034
- }) {
1035
- return /* @__PURE__ */ k(X, { children: [
1036
- e && /* @__PURE__ */ n(
1037
- M,
1038
- {
1039
- className: v("card__title text-gray-800", "dark:text-gray-50"),
1040
- component: "h5",
1041
- variant: "h5",
1042
- gutterBottom: !0,
1043
- align: t,
1044
- ...o,
1045
- children: e
1046
- }
1047
- ),
1048
- r && /* @__PURE__ */ n(
1049
- M,
1050
- {
1051
- className: v("card__description", "text-gray-500", "dark:text-gray-400"),
1052
- component: "div",
1053
- variant: "body1",
1054
- gutterBottom: !0,
1055
- align: t,
1056
- ...i,
1057
- children: r
1058
- }
1059
- )
1060
- ] });
1061
- }
1062
- function oo({
1063
- image: t,
1064
- title: e,
1065
- description: o,
1066
- imageProps: r = {},
1067
- imageMeta: i,
1068
- imageSize: a,
1069
- titleProps: c = {},
1070
- descriptionProps: s = {},
1071
- actions: l,
1072
- align: d,
1073
- ...p
1074
- }) {
1075
- const m = lt(t), h = R(N(t), 540);
1076
- return /* @__PURE__ */ k(
1077
- no,
1078
- {
1079
- className: "card-article",
1080
- ...p,
1081
- prepend: /* @__PURE__ */ n("div", { className: "card__image__wrap", children: m && t ? /* @__PURE__ */ n(
1082
- f,
1083
- {
1084
- sx: {
1085
- position: "absolute",
1086
- left: 0,
1087
- top: 0,
1088
- right: 0,
1089
- bottom: 0,
1090
- display: "flex",
1091
- alignItems: "center",
1092
- justifyContent: "center"
1093
- },
1094
- children: /* @__PURE__ */ n(E, { icon: t, color: "primary.main" })
1095
- }
1096
- ) : h && /* @__PURE__ */ n(
1097
- "img",
1098
- {
1099
- className: "card__image",
1100
- src: h,
1101
- ...r,
1102
- alt: r.alt || i?.filename || "card-image",
1103
- width: i?.naturalWidth,
1104
- height: i?.naturalHeight,
1105
- style: { width: "100%", height: "100%", objectFit: a || "cover", objectPosition: "center" },
1106
- loading: "lazy"
1107
- }
1108
- ) }),
1109
- children: [
1110
- e || o ? /* @__PURE__ */ n(
1111
- J,
1112
- {
1113
- align: d,
1114
- title: e,
1115
- titleProps: c,
1116
- description: o,
1117
- descriptionProps: s
1118
- }
1119
- ) : null,
1120
- l?.length ? /* @__PURE__ */ n(z, { align: d, actions: l, className: "mt-4" }) : null
1121
- ]
1122
- }
1123
- );
1124
- }
1125
- const no = $(D)`
1126
- ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
1127
- &:hover {
1128
- box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
1129
- }` : ""}
1130
-
1131
- .card__title {
1132
- color: ${({ theme: t }) => t.palette.text.primary};
1133
- a {
1134
- color: ${({ theme: t }) => t.palette.primary.main};
1135
- }
1136
- }
1137
- .card__description {
1138
- color: ${({ theme: t }) => t.palette.text.primary};
1139
- a {
1140
- color: ${({ theme: t }) => t.palette.primary.main};
1141
- }
1142
- }
1143
-
1144
- .card__image__wrap {
1145
- padding-top: 61.8%;
1146
- width: 100%;
1147
- position: relative;
1148
- }
1149
- .card__image {
1150
- position: absolute;
1151
- top: 0;
1152
- left: 0;
1153
- bottom: 0;
1154
- right: 0;
1155
- width: 100%;
1156
- height: 100%;
1157
- object-position: top center;
1158
- }
1159
- `, ht = "section";
1160
- function gt({
1161
- title: t,
1162
- image: e,
1163
- imageMeta: o,
1164
- description: r,
1165
- actions: i,
1166
- align: a,
1167
- listType: c = "",
1168
- className: s = "",
1169
- ...l
1170
- }) {
1171
- return /* @__PURE__ */ k(ro, { className: v("card", `list-type-${c}`, s), align: a, ...l, children: [
1172
- e && /* @__PURE__ */ n(
1173
- E,
1174
- {
1175
- icon: e,
1176
- color: "primary.main",
1177
- size: c === "icon-title" ? "1.2rem" : "3rem",
1178
- imageMeta: o
1179
- }
1180
- ),
1181
- t || r ? /* @__PURE__ */ n(J, { align: a, title: t, description: r }) : null,
1182
- i?.length ? /* @__PURE__ */ n(z, { align: a, actions: i, className: "mt-4" }) : null
1183
- ] });
1184
- }
1185
- const ro = $(D)`
1186
- padding: 5vw 4vw;
1187
- box-sizing: border-box;
1188
- /* min-height: 320px; */
1189
- color: inherit !important;
1190
- border-radius: 0.5rem;
1191
- /* ${({ dark: t, theme: e }) => `background-color:${t ? e.palette.grey[900] : e.palette.common.white};`} */
1192
- @media (max-width: ${({ theme: t }) => t.breakpoints.values[ht]}px) {
1193
- padding: 1.5rem 2rem;
1194
- }
1195
- @media (max-width: ${({ theme: t }) => t.breakpoints.values.sm}px) {
1196
- height: auto;
1197
- min-height: unset;
1198
- }
1199
-
1200
- ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
1201
- &:hover {
1202
- box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
1203
- }` : ""}
1204
-
1205
- .card__title {
1206
- font-weight: 700;
1207
- margin-top: 24px;
1208
- margin-bottom: 12px;
1209
- color: ${({ theme: t }) => t.palette.text.primary};
1210
- a {
1211
- color: ${({ theme: t }) => t.palette.primary.main};
1212
- }
1213
- }
1214
- .card__description {
1215
- color: ${({ theme: t }) => t.palette.text.primary};
1216
- a {
1217
- color: ${({ theme: t }) => t.palette.primary.main};
1218
- }
1219
- }
1220
- .card__body {
1221
- color: ${({ theme: t }) => t.palette.text.primary};
1222
- padding: 0;
1223
- ${({ align: t }) => `text-align:${t || "left"};`}
1224
- }
1225
-
1226
- &.list-type-icon-title {
1227
- padding: 1.2rem;
1228
- .title-line {
1229
- display: flex;
1230
- }
1231
- .card__title {
1232
- margin: 0;
1233
- font-size: 1em;
1234
- }
1235
- .css-icon {
1236
- margin-right: 0.5rem;
1237
- }
1238
- }
1239
-
1240
- @media (min-width: ${({ theme: t }) => t.breakpoints.values[ht]}px) {
1241
- padding: 2rem 2rem;
1242
- text-align: left;
1243
- box-sizing: border-box;
1244
- }
1245
- `;
1246
- function io({
1247
- image: t,
1248
- title: e,
1249
- description: o,
1250
- imageProps: r = {},
1251
- imageMeta: i,
1252
- imageSize: a,
1253
- titleProps: c = {},
1254
- descriptionProps: s = {},
1255
- actions: l,
1256
- align: d,
1257
- ...p
1258
- }) {
1259
- const m = lt(t), h = R(N(t), 540);
1260
- return /* @__PURE__ */ k(
1261
- ao,
1262
- {
1263
- className: "card-article",
1264
- ...p,
1265
- prepend: /* @__PURE__ */ n("div", { className: "card__image__wrap", children: m && t ? /* @__PURE__ */ n(
1266
- f,
1267
- {
1268
- sx: {
1269
- position: "absolute",
1270
- left: 0,
1271
- top: 0,
1272
- right: 0,
1273
- bottom: 0,
1274
- display: "flex",
1275
- alignItems: "center",
1276
- justifyContent: "center"
1277
- },
1278
- children: /* @__PURE__ */ n(E, { icon: t, color: "primary.main" })
1279
- }
1280
- ) : h && /* @__PURE__ */ n(
1281
- f,
1282
- {
1283
- component: "img",
1284
- className: "card__image",
1285
- src: h,
1286
- ...r,
1287
- alt: r.alt || i?.filename || "card-image",
1288
- style: { width: "100%", height: "100%", objectFit: a || "contain", objectPosition: "center" },
1289
- loading: "lazy",
1290
- sx: [
1291
- {
1292
- width: i?.naturalWidth,
1293
- height: i?.naturalHeight
1294
- },
1295
- ...Array.isArray(r.sx) ? r.sx : [r.sx]
1296
- ]
1297
- }
1298
- ) }),
1299
- children: [
1300
- e || o ? /* @__PURE__ */ n(
1301
- J,
1302
- {
1303
- align: d,
1304
- title: e,
1305
- titleProps: c,
1306
- description: o,
1307
- descriptionProps: s
1308
- }
1309
- ) : null,
1310
- l?.length ? /* @__PURE__ */ n(z, { align: d, actions: l, className: "mt-4" }) : null
1311
- ]
1312
- }
1313
- );
1314
- }
1315
- const ao = $(D)`
1316
- ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
1317
- &:hover {
1318
- box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
1319
- }` : ""}
1320
-
1321
- border-radius: 0 !important;
1322
-
1323
- .card__body {
1324
- ${({ align: t }) => `text-align:${t || "left"};`}
1325
- }
1326
-
1327
- .card__image__wrap {
1328
- width: 100%;
1329
- height: 100%;
1330
- position: relative;
1331
- display: flex;
1332
- justify-content: center;
1333
- align-items: center;
1334
- }
1335
-
1336
- .card__image {
1337
- max-height: 60px;
1338
- }
1339
- `, ft = "section";
1340
- function so({
1341
- title: t,
1342
- image: e,
1343
- imageMeta: o,
1344
- iconSize: r = 100,
1345
- description: i,
1346
- actions: a,
1347
- align: c,
1348
- className: s = "",
1349
- ...l
1350
- }) {
1351
- return /* @__PURE__ */ n(lo, { className: v("card", s), ...l, children: /* @__PURE__ */ k(f, { className: "flex items-center", children: [
1352
- e && /* @__PURE__ */ n(E, { icon: e, color: "primary.main", size: r, imageMeta: o }),
1353
- /* @__PURE__ */ k(f, { className: "flex-1 ml-4", children: [
1354
- /* @__PURE__ */ n(J, { align: c, title: t, description: i }),
1355
- /* @__PURE__ */ n(z, { align: c, actions: a, className: "mt-4" })
1356
- ] })
1357
- ] }) });
1358
- }
1359
- const lo = $(D)`
1360
- padding: 5vw 4vw;
1361
- text-align: left;
1362
- box-sizing: border-box;
1363
- /* min-height: 320px; */
1364
- color: inherit !important;
1365
- border-radius: 0.5rem;
1366
- /* ${({ dark: t, theme: e }) => `background-color:${t ? e.palette.grey[900] : e.palette.common.white};`} */
1367
- @media (max-width: ${({ theme: t }) => t.breakpoints.values[ft]}px) {
1368
- padding: 1.5rem 2rem;
1369
- }
1370
- @media (max-width: ${({ theme: t }) => t.breakpoints.values.sm}px) {
1371
- height: auto;
1372
- min-height: unset;
1373
- }
1374
-
1375
- ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
1376
- &:hover {
1377
- box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
1378
- }` : ""}
1379
-
1380
- .card__title {
1381
- font-weight: 700;
1382
- margin-bottom: 12px;
1383
- color: ${({ theme: t }) => t.palette.text.primary};
1384
- a {
1385
- color: ${({ theme: t }) => t.palette.primary.main};
1386
- }
1387
- }
1388
- .card__description {
1389
- color: ${({ theme: t }) => t.palette.text.primary};
1390
- a {
1391
- color: ${({ theme: t }) => t.palette.primary.main};
1392
- }
1393
- }
1394
- .card__body {
1395
- padding: 0;
1396
- }
1397
-
1398
- &.list-type-icon-title {
1399
- padding: 1.2rem;
1400
- .title-line {
1401
- display: flex;
1402
- }
1403
- .card__title {
1404
- margin: 0;
1405
- font-size: 1em;
1406
- }
1407
- .css-icon {
1408
- margin-right: 0.5rem;
1409
- }
1410
- }
1411
-
1412
- @media (min-width: ${({ theme: t }) => t.breakpoints.values[ft]}px) {
1413
- padding: 2rem 2rem;
1414
- text-align: left;
1415
- box-sizing: border-box;
1416
- }
1417
- `;
1418
- function co({
1419
- title: t,
1420
- titleProps: e = {},
1421
- description: o,
1422
- descriptionProps: r = {},
1423
- image: i,
1424
- imageMeta: a,
1425
- className: c = "",
1426
- align: s,
1427
- hoverStyle: l,
1428
- ...d
1429
- }) {
1430
- return /* @__PURE__ */ k(mo, { className: v("card-simple", c, `hover-style__${l}`), align: s, ...d, children: [
1431
- i && /* @__PURE__ */ n(E, { icon: i, color: "primary.main", imageMeta: a }),
1432
- t || o ? /* @__PURE__ */ n(
1433
- J,
1434
- {
1435
- align: s,
1436
- title: t,
1437
- titleProps: e,
1438
- description: o,
1439
- descriptionProps: r
1440
- }
1441
- ) : null
1442
- ] });
1443
- }
1444
- const mo = $(D)`
1445
- .card__title {
1446
- color: ${({ theme: t }) => t.palette.text.primary};
1447
- a {
1448
- color: ${({ theme: t }) => t.palette.primary.main};
1449
- }
1450
- }
1451
- .card__description {
1452
- color: ${({ theme: t }) => t.palette.text.primary};
1453
- a {
1454
- color: ${({ theme: t }) => t.palette.primary.main};
1455
- }
1456
- }
1457
-
1458
- &.hover-style__default {
1459
- &.card-simple {
1460
- &:hover {
1461
- border-top-right-radius: 36px;
1462
- }
1463
- }
1464
- .card__body {
1465
- &:hover {
1466
- &::before {
1467
- width: 42px;
1468
- height: 42px;
1469
- transform: translate(50%, -50%) rotate(45deg);
1470
- }
1471
- &::after {
1472
- transform: none;
1473
- }
1474
- }
1475
- }
1476
- }
1477
-
1478
- &.card-simple {
1479
- border-radius: 8px;
1480
- border-top-right-radius: 26px;
1481
-
1482
- .card__body {
1483
- ${({ align: t }) => `text-align:${t || "left"};`}
1484
- }
1485
-
1486
- ${(t) => t.link ? `
1487
- cursor: pointer;
1488
- ` : ""}
1489
- /* cursor: pointer; */
1490
- /* &:hover {
1491
- border-top-right-radius: 36px;
1492
- } */
1493
- transition: all 180ms ease 0s;
1494
- overflow: visible;
1495
- .card__title {
1496
- margin: 12px 0;
1497
- }
1498
- .card__body {
1499
- position: relative;
1500
- padding: 20px 16px 18px;
1501
- overflow: hidden;
1502
- transition: all 180ms ease 0s;
1503
- /* &:hover {
1504
- &::before {
1505
- width: 42px;
1506
- height: 42px;
1507
- transform: translate(50%, -50%) rotate(45deg);
1508
- }
1509
- &::after {
1510
- transform: none;
1511
- }
1512
- } */
1513
- &::before,
1514
- &::after {
1515
- content: ${({ border: t }) => t ? '""' : ""};
1516
- transition: inherit;
1517
- position: absolute;
1518
- top: 0px;
1519
- right: 0px;
1520
- }
1521
- &::before {
1522
- z-index: 3;
1523
- background: #fff;
1524
- width: 30px;
1525
- height: 30px;
1526
- transform: translate(50%, -50%) rotate(45deg);
1527
- box-shadow: 0 1px 0 0 #e9eaec;
1528
- }
1529
- &::after {
1530
- z-index: 2;
1531
- width: 28px;
1532
- height: 28px;
1533
- border-bottom-left-radius: 6px;
1534
- background: #fcfcfd;
1535
- box-shadow: -1px 1px 0 0 #e9eaec;
1536
- transform: translate(8px, -8px);
1537
- }
1538
- }
1539
- }
1540
- `;
1541
- function po({ type: t = "default", ...e }) {
1542
- const r = {
1543
- article: oo,
1544
- simple: co,
1545
- news: so,
1546
- default: gt,
1547
- wall: io
1548
- }[t] || gt;
1549
- return /* @__PURE__ */ n(r, { ...t === "news" ? e : B(e, "iconSize") });
1550
- }
1551
- function uo({
1552
- list: t = [],
1553
- align: e = "top",
1554
- cards: o,
1555
- listBorder: r = !0,
1556
- listType: i = "",
1557
- col: a = 3,
1558
- gap: c,
1559
- iconColor: s,
1560
- className: l = "",
1561
- type: d = "default",
1562
- dark: p = !1,
1563
- textAlign: m = "left",
1564
- hoverStyle: h,
1565
- ...u
1566
- }) {
1567
- return /* @__PURE__ */ n(
1568
- st,
1569
- {
1570
- type: d,
1571
- className: v("card-list py-1", l, "items-stretch"),
1572
- col: a,
1573
- gap: c,
1574
- align: e,
1575
- ...u,
1576
- children: o || t.map((b) => /* @__PURE__ */ n(
1577
- po,
1578
- {
1579
- borderColor: r,
1580
- iconColor: s,
1581
- type: d,
1582
- listType: i,
1583
- dark: p,
1584
- ...b,
1585
- align: m,
1586
- style: c === 0 && t.length > 1 ? {
1587
- borderRadius: 0,
1588
- marginRight: "-1px",
1589
- marginBottom: "-1px"
1590
- } : {}
1591
- },
1592
- b.id
1593
- ))
1594
- }
1595
- );
1596
- }
1597
- const ho = [
1598
- "align",
1599
- "cards",
1600
- "list",
1601
- "listBorder",
1602
- "listType",
1603
- "col",
1604
- "gap",
1605
- "iconColor",
1606
- "type",
1607
- "textAlign"
1608
- ], go = $(V)`
1609
- a .card {
1610
- color: #404040;
1611
- cursor: pointer;
1612
- }
1613
- a:not(.MuiButton-root) {
1614
- color: ${({ theme: t }) => t.palette.primary.main};
1615
- &:hover,
1616
- &:active {
1617
- color: ${({ theme: t }) => t.palette.primary.main};
1618
- }
1619
- }
1620
- a:hover .card {
1621
- color: #404040;
1622
- }
1623
- `;
1624
- function fo({ className: t, ...e }) {
1625
- const [o, r] = C(e, H), [i, a] = C(r, ho);
1626
- return /* @__PURE__ */ k(go, { className: v("section--card-list", t), type: e.type, ...a, children: [
1627
- Object.keys(o).length > 0 && /* @__PURE__ */ n(F, { center: !0, ...o, className: "mb-[2.5vw]" }),
1628
- /* @__PURE__ */ n(uo, { ...i, dark: !!e.dark })
1629
- ] });
1630
- }
1631
- const xo = $(fo)`
1632
- .card__description {
1633
- white-space: pre-wrap;
1634
- }
1635
- .section__description {
1636
- }
1637
- .card {
1638
- /* background: inherit !important; */
1639
- }
1640
- &.dark .card-simple .card__body::before {
1641
- background: #212121 !important;
1642
- }
1643
- .card-simple .card__body::after {
1644
- background: inherit !important;
1645
- }
1646
- `;
1647
- function bo({ section: t, ...e }) {
1648
- const [{ editing: o }, r] = C(e, Y), i = P(() => ({
1649
- ...B(r, ["listBorder", "list", "iconSize", "imageSize"]),
1650
- list: r.list?.map((a) => ({
1651
- ...B(a, "icon", "iconColor"),
1652
- image: ["news", "simple", "default"].includes(r.type) && a.icon ? a.icon : a.image,
1653
- actions: a.actions?.map?.((c) => /* @__PURE__ */ n(Lt, { ...c, editing: o }, c.id)),
1654
- border: r.listBorder,
1655
- iconSize: r.iconSize,
1656
- imageSize: r.imageSize,
1657
- hoverStyle: r.hoverStyle
1658
- }))
1659
- }), [r]);
1660
- return /* @__PURE__ */ n(xo, { style: o ? { pointerEvents: "none" } : {}, ...i });
1661
- }
1662
- function yo({
1663
- properties: t,
1664
- section: e,
1665
- locale: o,
1666
- dev: r
1667
- }) {
1668
- return e?.config?.componentId ? /* @__PURE__ */ n(
1669
- le,
1670
- {
1671
- instanceId: e.id,
1672
- componentId: e.config.componentId,
1673
- blockletId: e.config.blockletId,
1674
- blockletTitle: e.config.blockletTitle,
1675
- componentName: e.config.componentName,
1676
- locale: o,
1677
- properties: t,
1678
- dev: r
1679
- }
1680
- ) : /* @__PURE__ */ n(
1681
- f,
1682
- {
1683
- sx: {
1684
- textAlign: "center",
1685
- py: 2
1686
- },
1687
- children: /* @__PURE__ */ n(
1688
- M,
1689
- {
1690
- variant: "caption",
1691
- sx: {
1692
- color: "text.secondary"
1693
- },
1694
- children: "Please select component to render"
1695
- }
1696
- )
1697
- }
1698
- );
1699
- }
1700
- function wo({
1701
- src: t,
1702
- dataId: e,
1703
- isEdit: o = !1,
1704
- height: r = "100%",
1705
- onLoad: i = () => {
1706
- }
1707
- }) {
1708
- return /* @__PURE__ */ n(
1709
- ve,
1710
- {
1711
- isEdit: o,
1712
- embedId: e,
1713
- src: t,
1714
- height: r,
1715
- onLoad: () => {
1716
- i();
1717
- }
1718
- }
1719
- );
1720
- }
1721
- function vo({ dataId: t, src: e, actions: o, center: r, onLoad: i, ...a }) {
1722
- const [c, s] = C(a, H);
1723
- return /* @__PURE__ */ k(V, { ...s, children: [
1724
- Object.keys(c).length > 0 && /* @__PURE__ */ n(F, { center: r, ...c }),
1725
- /* @__PURE__ */ n(
1726
- wo,
1727
- {
1728
- dataId: t,
1729
- src: e,
1730
- onLoad: i,
1731
- height: a.iframeHeight ? `${a.iframeHeight}px` : "100%"
1732
- }
1733
- ),
1734
- /* @__PURE__ */ n(z, { actions: o, center: r })
1735
- ] });
1736
- }
1737
- const Mn = {
1738
- src: "",
1739
- embedUrl: "",
1740
- title: "",
1741
- description: "",
1742
- dark: !1,
1743
- background: "",
1744
- center: !0,
1745
- config: {},
1746
- id: ""
1747
- };
1748
- function ko({ section: t, id: e, src: o, ...r }) {
1749
- const i = `${e}-${r.locale}`, [{ editing: a }, c] = C(r, Y), s = rt({}), l = JSON.parse(JSON.stringify(c)), { message: d } = be(i, "server"), p = ye(JSON.parse(JSON.stringify(c.config) || "{}"));
1750
- return U(() => {
1751
- d && d.onInit(() => p.current);
1752
- }, [d]), U(() => {
1753
- const m = JSON.parse(JSON.stringify(c.config) || "{}");
1754
- we(s.current, m) || (s.current = m, d?.send("config-set", m));
1755
- }, [d, c.config]), o ? /* @__PURE__ */ n(vo, { ...l, dataId: i, src: o, style: a ? { pointerEvents: "none" } : {} }) : /* @__PURE__ */ n(_o, { children: 'Please set the "src" attribute for this block' });
1756
- }
1757
- const _o = $("div")`
1758
- user-select: none;
1759
- color: #999;
1760
- padding: 8px;
1761
- height: 200px;
1762
- `, $o = 12, So = ({
1763
- gridSettings: t,
1764
- section: e,
1765
- index: o,
1766
- columns: r,
1767
- simulateMode: i = "desktop",
1768
- isBackground: a
1769
- }) => {
1770
- const c = t?.[i] ?? {}, s = c[e.id], l = Co(c);
1771
- return {
1772
- i: e.id,
1773
- static: e?.locked || a,
1774
- ...a ? {
1775
- x: 0,
1776
- y: 0,
1777
- w: r,
1778
- h: 1,
1779
- isResizable: !1
1780
- } : {
1781
- x: s?.x ?? 0,
1782
- y: s?.y ?? o,
1783
- w: s?.w ?? r,
1784
- h: s?.h ?? 1,
1785
- isResizable: !0
1786
- },
1787
- minH: 1,
1788
- maxH: 1,
1789
- maxY: l
1790
- };
1791
- }, Co = (t) => Object.values(t).reduce((e, o) => Math.max(e, o.y || 0), 0) || 0, No = (t) => {
1792
- const { dev: e, id: o, section: r, onBlockRender: i } = t, a = e?.mode, c = Jt((g) => g.breakpoints.down("sm")), { t: s } = ke(), { sections: l, sectionIds: d, config: p } = r, { columns: m = $o, gridSettings: h } = p || {}, u = O(
1793
- (g, w = !1, S = 0) => {
1794
- if (!i || !g || !g.component || g.visibility === "hidden")
1795
- return null;
1796
- const _ = So({
1797
- gridSettings: h,
1798
- section: g,
1799
- index: S,
1800
- columns: m,
1801
- simulateMode: c ? "mobile" : "desktop",
1802
- isBackground: w
1803
- }), W = _?.x ?? 0, j = _?.y ?? 0, L = _?.w ?? m, At = _?.h ?? 1, Tt = _?.maxY ?? 0, Ot = !!r?.config?.backgroundSectionId;
1804
- return /* @__PURE__ */ n(
1805
- f,
1806
- {
1807
- className: w ? "layout-block-background" : "layout-block-section",
1808
- sx: {
1809
- // 背景元素和普通元素都使用 grid 布局
1810
- ...w ? {
1811
- // 背景元素覆盖整个网格区域
1812
- gridColumn: "1 / -1",
1813
- gridRow: `1 / ${Tt + 1}`,
1814
- zIndex: 0,
1815
- width: "100%",
1816
- height: "100%",
1817
- "& .BlockBase-root": {
1818
- width: "100%",
1819
- height: "100%"
1820
- }
1821
- } : {
1822
- position: "relative",
1823
- // 使用 grid 定位普通元素
1824
- gridColumn: `${W + 1} / span ${L}`,
1825
- // hasBackground 的话,不再 + 1,因为 background 会占用第一行
1826
- gridRow: `${j + (Ot ? 0 : 1)} / span ${At}`,
1827
- zIndex: 1
1828
- // Ensure content is above background
1829
- }
1830
- },
1831
- children: i({
1832
- id: g.id,
1833
- type: g.component,
1834
- config: {},
1835
- section: {
1836
- ...g
1837
- },
1838
- mode: a
1839
- })
1840
- },
1841
- g.id
1842
- );
1843
- },
1844
- [o, a, i, h, m, c]
1845
- ), { backgroundElements: b, contentElements: x } = P(() => {
1846
- if (!d || !d.length || !l || !Object.keys(l).length)
1847
- return { backgroundElements: [], contentElements: [] };
1848
- const g = [], w = [];
1849
- return d?.forEach((S, _) => {
1850
- const W = l[S];
1851
- if (!W) return;
1852
- const j = r?.config?.backgroundSectionId === S, L = u(W, j, _);
1853
- L && (j ? g.push(L) : w.push(L));
1854
- }), { backgroundElements: g, contentElements: w };
1855
- }, [u, l, d]);
1856
- return a === "draft" && !b?.length && !x?.length ? /* @__PURE__ */ k(
1857
- f,
1858
- {
1859
- sx: {
1860
- gridColumn: "1 / -1",
1861
- gridRow: "1",
1862
- display: "flex",
1863
- flexDirection: "column",
1864
- alignItems: "center",
1865
- justifyContent: "center",
1866
- gap: 2,
1867
- border: (g) => `2px dashed ${g.palette.divider}`,
1868
- borderRadius: 2,
1869
- padding: 4,
1870
- color: "text.secondary",
1871
- textAlign: "center",
1872
- minHeight: "160px"
1873
- },
1874
- children: [
1875
- /* @__PURE__ */ n(
1876
- f,
1877
- {
1878
- sx: {
1879
- fontSize: "48px",
1880
- opacity: 0.5
1881
- },
1882
- children: "📐"
1883
- }
1884
- ),
1885
- /* @__PURE__ */ n(
1886
- f,
1887
- {
1888
- sx: {
1889
- fontSize: "16px",
1890
- fontWeight: 500,
1891
- marginBottom: 1
1892
- },
1893
- children: "Section Layout"
1894
- }
1895
- ),
1896
- /* @__PURE__ */ n(
1897
- f,
1898
- {
1899
- sx: {
1900
- opacity: 0.7,
1901
- whiteSpace: "pre-line"
1902
- },
1903
- children: s("maker.layoutBlock.draftPlaceholder")
1904
- }
1905
- ),
1906
- /* @__PURE__ */ n(
1907
- f,
1908
- {
1909
- sx: {
1910
- position: "absolute",
1911
- top: 0,
1912
- left: 0,
1913
- right: 0,
1914
- bottom: 0,
1915
- pointerEvents: "none",
1916
- opacity: 0.1,
1917
- background: (g) => `
1918
- repeating-linear-gradient(
1919
- 90deg,
1920
- transparent,
1921
- transparent calc(100% / ${m} - 1px),
1922
- ${g.palette.grey[400]} calc(100% / ${m} - 1px),
1923
- ${g.palette.grey[400]} calc(100% / ${m})
1924
- )
1925
- `
1926
- }
1927
- }
1928
- )
1929
- ]
1930
- }
1931
- ) : /* @__PURE__ */ k(
1932
- f,
1933
- {
1934
- sx: {
1935
- position: "relative",
1936
- display: "grid",
1937
- gridTemplateColumns: `repeat(${m}, 1fr)`,
1938
- alignItems: "center",
1939
- width: "100%",
1940
- height: "100%"
1941
- },
1942
- children: [
1943
- b,
1944
- x
1945
- ]
1946
- }
1947
- );
1948
- }, Bo = [
1949
- /youtu\.be\/([^#&?]{11})/,
1950
- // youtu.be/<id>
1951
- /\?v=([^#&?]{11})/,
1952
- // ?v=<id>
1953
- /&v=([^#&?]{11})/,
1954
- // &v=<id>
1955
- /embed\/([^#&?]{11})/,
1956
- // embed/<id>
1957
- /\/v\/([^#&?]{11})/
1958
- // /v/<id>
1959
- ];
1960
- function Mo(t) {
1961
- if (/youtu\.?be/.test(t))
1962
- for (const e of Bo) {
1963
- const o = e.exec(t)?.[1];
1964
- if (o)
1965
- return o;
1966
- }
1967
- }
1968
- function Io(t) {
1969
- const e = Mo(t);
1970
- if (e)
1971
- return `https://youtube.com/embed/${e}`;
1972
- }
1973
- function Po({ src: t }) {
1974
- return U(() => {
1975
- import("@lottiefiles/lottie-player");
1976
- }, []), /* @__PURE__ */ n("lottie-player", { autoplay: !0, loop: !0, mode: "normal", src: t });
1977
- }
1978
- function Wo(t) {
1979
- return /* @__PURE__ */ n(
1980
- f,
1981
- {
1982
- sx: {
1983
- maxHeight: 400,
1984
- overflow: "hidden auto"
1985
- },
1986
- children: /* @__PURE__ */ n(_e, { ...t })
1987
- }
1988
- );
1989
- }
1990
- function Ro({ url: t }) {
1991
- const e = rt(null), o = 495, [r, i] = Q(
1992
- e.current ? e.current.offsetWidth * 0.5625 : o
1993
- ), a = O(() => {
1994
- const c = window.innerWidth > 990 ? 1 : window.innerWidth > 522 ? 1.2 : window.innerWidth > 400 ? 1.45 : 1.85, s = e.current ? e.current.offsetWidth * 0.5625 : o;
1995
- return i(Math.floor(s * c));
1996
- }, []);
1997
- return U(() => {
1998
- window.addEventListener("resize", a);
1999
- const c = window.innerWidth > 990 ? 1 : window.innerWidth > 522 ? 1.2 : window.innerWidth > 400 ? 1.45 : 1.85, s = e.current ? e.current.offsetWidth * 0.5625 : o;
2000
- return i(Math.floor(s * c)), function() {
2001
- window.removeEventListener("resize", a);
2002
- };
2003
- }, [r, a]), /* @__PURE__ */ n(
2004
- f,
2005
- {
2006
- component: "iframe",
2007
- ref: e,
2008
- title: "youtube",
2009
- src: t,
2010
- frameBorder: "0",
2011
- allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
2012
- allowFullScreen: !0,
2013
- sx: {
2014
- width: "100%",
2015
- height: `${r}px`,
2016
- display: "block"
2017
- }
2018
- }
2019
- );
2020
- }
2021
- const In = {
2022
- image: "https://www.arcblock.io/static/ead0cabde7f2b7ff34db8f3e8ceca271/afc4b/builder.png",
2023
- badge: "Develop · Deploy · Run",
2024
- title: "The Future is Here: Blockchain and Decentralized Application Development",
2025
- description: "ArcBlock, your exclusive new decentralized development platform, makes developing decentralized applications, blockchain, and distributed ledger technology straightforward.",
2026
- reverse: !1,
2027
- dark: !1,
2028
- background: "",
2029
- actions: void 0,
2030
- hasImage: !0,
2031
- center: !1
2032
- }, jo = $(Ye)`
2033
- .section__description {
2034
- }
2035
- `;
2036
- function zo({
2037
- hasImage: t,
2038
- fullSizeImage: e,
2039
- boxed: o,
2040
- videoPoster: r,
2041
- imageMeta: i,
2042
- imageOptimization: a,
2043
- imageSize: c,
2044
- section: s,
2045
- ...l
2046
- }) {
2047
- const [{ editing: d }, p] = C({ ...l, boxed: e ? void 0 : o }, Y);
2048
- let m = Eo(p.image, r, e, i, a, c);
2049
- t || (m = null);
2050
- let h = null;
2051
- return p.actions && (h = p.actions?.map?.((u, b) => /* @__PURE__ */ n(Lt, { ...u, editing: d }, b))), /* @__PURE__ */ n(
2052
- jo,
2053
- {
2054
- ...p,
2055
- style: d ? { pointerEvents: "none" } : {},
2056
- image: m,
2057
- fullSizeImage: t && e,
2058
- actions: h
2059
- }
2060
- );
2061
- }
2062
- function Eo(t, e, o, r, i, a) {
2063
- if (t) {
2064
- if (t.endsWith(".json"))
2065
- return /* @__PURE__ */ n(Po, { src: t });
2066
- if (t.indexOf("twitter.com") !== -1)
2067
- return /* @__PURE__ */ n(Wo, { sourceType: "url", url: t });
2068
- const c = Io(t);
2069
- if (c)
2070
- return /* @__PURE__ */ n(Ro, { url: c });
2071
- const { naturalWidth: s, naturalHeight: l, filename: d } = r || {};
2072
- if (A(t))
2073
- return /* @__PURE__ */ n(
2074
- "video",
2075
- {
2076
- width: s && `${s}px`,
2077
- height: l && `${l}px`,
2078
- controls: !0,
2079
- autoPlay: !0,
2080
- muted: !0,
2081
- style: {
2082
- display: "block",
2083
- objectFit: a || "contain",
2084
- borderRadius: "8px",
2085
- width: "100%",
2086
- height: "100%"
2087
- },
2088
- poster: R(N(e), o ? 1200 : 540, i),
2089
- children: /* @__PURE__ */ n("source", { src: N(t), type: Oe(t) })
2090
- },
2091
- t
2092
- );
2093
- const p = i === "quality" ? 1 : 0.6;
2094
- return /* @__PURE__ */ n(
2095
- St,
2096
- {
2097
- src: N(t),
2098
- sizesAttr: {
2099
- sm: 600 * p,
2100
- md: 450 * p,
2101
- lg: 540 * p,
2102
- ...o && {
2103
- md: 900 * p,
2104
- lg: 1200 * p
2105
- }
2106
- },
2107
- width: s && `${s}px`,
2108
- height: l && `${l}px`,
2109
- alt: d ?? t,
2110
- style: { objectFit: a || "contain", display: "block", width: "100%", height: "100%" },
2111
- loading: "lazy"
2112
- }
2113
- );
2114
- }
2115
- return null;
2116
- }
2117
- const Pn = ["production", "draft"];
2118
- function Wn({ mode: t, version: e } = {}) {
2119
- const o = e && typeof e == "number" ? { mode: t, version: e } : { mode: t };
2120
- return it.get(`/api/${at()}/pages`, { params: o }).then((r) => r.data);
2121
- }
2122
- function Rn({ mode: t, routes: e }) {
2123
- return it.post(`/api/${at()}/pages/publish`, { mode: t, routes: e }).then((o) => o.data);
2124
- }
2125
- function Lo({
2126
- locale: t,
2127
- sort: e,
2128
- page: o,
2129
- limit: r,
2130
- mode: i
2131
- } = {}) {
2132
- return it.get(`/api/${at()}/pages/toc`, { params: { locale: t, sort: e, page: o, limit: r, mode: i } }).then((a) => a.data);
2133
- }
2134
- const jn = {
2135
- style: "list",
2136
- sort: "-updatedAt"
2137
- }, xt = 20;
2138
- function Ao({ style: t, sort: e, section: o, ...r }) {
2139
- const [{ editing: i, locale: a }, c] = C(r, Y), [s, l] = C(c, H), [d, p] = Q(), m = rt(!1), h = $e(), u = he(), b = O(async () => {
2140
- if (!m.current) {
2141
- m.current = !0, h();
2142
- try {
2143
- const x = d ? Math.floor(d.list.length / xt) + 1 : 1, { list: y, total: g } = await Lo({ locale: a, sort: e, page: x, limit: xt });
2144
- p((w) => ({
2145
- list: (w?.list ?? []).concat(y),
2146
- total: g
2147
- }));
2148
- } finally {
2149
- m.current = !1, h();
2150
- }
2151
- }
2152
- }, [d, a, e, h]);
2153
- return Se(() => {
2154
- b();
2155
- }), /* @__PURE__ */ k(V, { ...l, sx: i ? { pointerEvents: "none" } : {}, children: [
2156
- Object.keys(s).length > 0 && /* @__PURE__ */ n(F, { ...s }),
2157
- d ? /* @__PURE__ */ k(X, { children: [
2158
- /* @__PURE__ */ n(
2159
- ct,
2160
- {
2161
- container: !0,
2162
- spacing: 2,
2163
- sx: {
2164
- justifyContent: "center"
2165
- },
2166
- children: d?.list.map((x) => /* @__PURE__ */ n(
2167
- ct,
2168
- {
2169
- size: {
2170
- xs: 12,
2171
- sm: t === "card" ? 6 : 12,
2172
- md: t === "card" ? 3 : 12
2173
- },
2174
- children: /* @__PURE__ */ k(
2175
- To,
2176
- {
2177
- elevation: 0,
2178
- className: v(t === "card" && "style-card"),
2179
- onClick: i ? void 0 : () => u(x.slug),
2180
- children: [
2181
- !!x.image && /* @__PURE__ */ n(
2182
- Xt,
2183
- {
2184
- component: "img",
2185
- alt: "",
2186
- image: R(N(x.image), 540),
2187
- loading: "lazy"
2188
- }
2189
- ),
2190
- /* @__PURE__ */ k(qt, { children: [
2191
- /* @__PURE__ */ n(M, { variant: "h6", component: "div", className: bt, children: x.title || x.id }),
2192
- /* @__PURE__ */ n(M, { variant: "body2", className: bt, children: x.description })
2193
- ] })
2194
- ]
2195
- }
2196
- )
2197
- },
2198
- x.id
2199
- ))
2200
- }
2201
- ),
2202
- /* @__PURE__ */ n(
2203
- f,
2204
- {
2205
- sx: {
2206
- textAlign: "center",
2207
- mt: 2
2208
- },
2209
- children: d.total > d.list.length ? /* @__PURE__ */ n(T, { variant: "outlined", color: "secondary", onClick: b, loading: m.current, children: "More" }) : /* @__PURE__ */ n(T, { variant: "outlined", color: "secondary", disabled: !0, children: "No More" })
2210
- }
2211
- )
2212
- ] }) : /* @__PURE__ */ n(
2213
- f,
2214
- {
2215
- sx: {
2216
- p: 2,
2217
- textAlign: "center"
2218
- },
2219
- children: /* @__PURE__ */ n(Kt, { size: 24 })
2220
- }
2221
- )
2222
- ] });
2223
- }
2224
- const bt = et`
2225
- display: -webkit-box;
2226
- -webkit-box-orient: vertical;
2227
- -webkit-line-clamp: 2;
2228
- overflow: hidden;
2229
- text-overflow: ellipsis;
2230
- `, To = $(Gt)`
2231
- border: 1px solid #e0e0e0;
2232
- background-color: transparent;
2233
- cursor: pointer;
2234
- display: flex;
2235
- color: inherit;
2236
-
2237
- > .MuiCardMedia-root {
2238
- width: 30vw;
2239
- max-height: 50vw;
2240
- }
2241
-
2242
- &.style-card {
2243
- display: block;
2244
-
2245
- > .MuiCardMedia-root {
2246
- width: 100%;
2247
- max-height: 50vw;
2248
- }
2249
- }
2250
- `, Oo = {
2251
- iframe: ko,
2252
- section: zo,
2253
- "section-card-list": bo,
2254
- toc: Ao,
2255
- "ai-runtime": Ge,
2256
- "custom-component": yo,
2257
- "layout-block": No
2258
- };
2259
- function Uo({
2260
- id: t,
2261
- type: e,
2262
- mode: o,
2263
- config: r,
2264
- section: i,
2265
- ignorePageMetaStyle: a,
2266
- page: c,
2267
- ...s
2268
- }) {
2269
- const l = Oo[e], { getPageMetaStyle: d } = ze(), p = P(() => {
2270
- const { height: u, ...b } = r;
2271
- return e === "layout-block" && (b.onBlockRender = (x) => {
2272
- const y = {
2273
- ...r?.dev,
2274
- ...x?.config?.dev
2275
- }, { defaultLocale: g } = y, w = {
2276
- ...q(r, ["locale", "editing"]),
2277
- ...x?.config,
2278
- dev: y
2279
- }, { locale: S } = w;
2280
- let _ = c?.dataSource?.[x?.id]?.[S];
2281
- return Zt(_) && (_ = c?.dataSource?.[x?.id]?.[g ?? "en"]), /* @__PURE__ */ n(
2282
- Uo,
2283
- {
2284
- ...x,
2285
- config: {
2286
- ...x?.section?.properties,
2287
- ..._,
2288
- ...w
2289
- },
2290
- page: c,
2291
- ignorePageMetaStyle: !0
2292
- }
2293
- );
2294
- }), b;
2295
- }, [r, e]), m = P(() => {
2296
- const u = {};
2297
- return e !== "custom-component" && (u.height = r.height), u.sx = a ? void 0 : d("sx"), u.id = `BlockBase-${t}`, u;
2298
- }, [r.height, a, e, d]), h = l && /* @__PURE__ */ n(l, { mode: o, ...p, id: t, section: i });
2299
- return h ? /* @__PURE__ */ n(De, { ...s, ...m, children: h }) : /* @__PURE__ */ n(Fo, { type: e });
2300
- }
2301
- function Fo({ type: t }) {
2302
- return /* @__PURE__ */ n(
2303
- f,
2304
- {
2305
- sx: {
2306
- p: 2
2307
- },
2308
- children: /* @__PURE__ */ k(Qt, { icon: /* @__PURE__ */ n(Ut, {}), color: "error", children: [
2309
- "Unsupported Block `",
2310
- t,
2311
- "`"
2312
- ] })
2313
- }
2314
- );
2315
- }
2316
- export {
2317
- Uo as B,
2318
- Mn as I,
2319
- Nn as P,
2320
- Pn as S,
2321
- jn as T,
2322
- Cn as a,
2323
- In as b,
2324
- Wn as g,
2325
- Rn as p
2326
- };