@gpichot/spectacle-deck 1.0.0 → 1.0.1
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/index.cjs +106 -137
- package/index.mjs +106 -137
- package/package.json +2 -1
package/index.cjs
CHANGED
|
@@ -45,43 +45,12 @@ __export(src_exports, {
|
|
|
45
45
|
Timeline: () => Timeline,
|
|
46
46
|
TimelineItem: () => TimelineItem
|
|
47
47
|
});
|
|
48
|
-
var
|
|
49
|
-
|
|
50
|
-
// ../../node_modules/.pnpm/@mdx-js+react@3.0.0_@types+react@18.2.34/node_modules/@mdx-js/react/lib/index.js
|
|
51
|
-
var import_react = __toESM(require("react"), 1);
|
|
52
|
-
var emptyComponents = {};
|
|
53
|
-
var MDXContext = import_react.default.createContext(emptyComponents);
|
|
54
|
-
function useMDXComponents(components) {
|
|
55
|
-
const contextComponents = import_react.default.useContext(MDXContext);
|
|
56
|
-
return import_react.default.useMemo(
|
|
57
|
-
function() {
|
|
58
|
-
if (typeof components === "function") {
|
|
59
|
-
return components(contextComponents);
|
|
60
|
-
}
|
|
61
|
-
return { ...contextComponents, ...components };
|
|
62
|
-
},
|
|
63
|
-
[contextComponents, components]
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
function MDXProvider(props) {
|
|
67
|
-
let allComponents;
|
|
68
|
-
if (props.disableParentContext) {
|
|
69
|
-
allComponents = typeof props.components === "function" ? props.components(emptyComponents) : props.components || emptyComponents;
|
|
70
|
-
} else {
|
|
71
|
-
allComponents = useMDXComponents(props.components);
|
|
72
|
-
}
|
|
73
|
-
return import_react.default.createElement(
|
|
74
|
-
MDXContext.Provider,
|
|
75
|
-
{ value: allComponents },
|
|
76
|
-
props.children
|
|
77
|
-
);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
// src/index.tsx
|
|
48
|
+
var import_react17 = __toESM(require("react"));
|
|
49
|
+
var import_react18 = require("@mdx-js/react");
|
|
81
50
|
var import_spectacle9 = require("spectacle");
|
|
82
51
|
|
|
83
52
|
// src/layouts/MainSectionLayout.tsx
|
|
84
|
-
var
|
|
53
|
+
var import_react = __toESM(require("react"));
|
|
85
54
|
var import_spectacle = require("spectacle");
|
|
86
55
|
|
|
87
56
|
// src/front.png
|
|
@@ -91,7 +60,7 @@ var front_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA2QAAAfPCAYAA
|
|
|
91
60
|
var MainSectionLayout = ({
|
|
92
61
|
children
|
|
93
62
|
}) => {
|
|
94
|
-
return /* @__PURE__ */
|
|
63
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
95
64
|
import_spectacle.FlexBox,
|
|
96
65
|
{
|
|
97
66
|
height: "100%",
|
|
@@ -105,8 +74,8 @@ var MainSectionLayout = ({
|
|
|
105
74
|
bottom: 0
|
|
106
75
|
}
|
|
107
76
|
},
|
|
108
|
-
/* @__PURE__ */
|
|
109
|
-
/* @__PURE__ */
|
|
77
|
+
/* @__PURE__ */ import_react.default.createElement("div", { style: { paddingLeft: "8rem", flex: 1 } }, children),
|
|
78
|
+
/* @__PURE__ */ import_react.default.createElement("div", { style: { flex: "0 0", height: "100%", paddingLeft: "5rem" } }, /* @__PURE__ */ import_react.default.createElement("img", { src: front_default, alt: "Front", style: { height: "100%" } }))
|
|
110
79
|
);
|
|
111
80
|
};
|
|
112
81
|
|
|
@@ -126,10 +95,10 @@ var SectionLayout = import_styled_components.default.div`
|
|
|
126
95
|
`;
|
|
127
96
|
|
|
128
97
|
// src/layouts/SideCodeLayout.tsx
|
|
129
|
-
var
|
|
98
|
+
var import_react4 = __toESM(require("react"));
|
|
130
99
|
|
|
131
100
|
// src/layouts/columns.tsx
|
|
132
|
-
var
|
|
101
|
+
var import_react2 = __toESM(require("react"));
|
|
133
102
|
var import_styled_components2 = __toESM(require("styled-components"));
|
|
134
103
|
var DivWithHeading = import_styled_components2.default.div`
|
|
135
104
|
h2 {
|
|
@@ -154,15 +123,15 @@ function ColumnsLayout({
|
|
|
154
123
|
children,
|
|
155
124
|
reverse
|
|
156
125
|
}) {
|
|
157
|
-
const childrenArray =
|
|
158
|
-
return /* @__PURE__ */
|
|
126
|
+
const childrenArray = import_react2.default.Children.toArray(children);
|
|
127
|
+
return /* @__PURE__ */ import_react2.default.createElement(
|
|
159
128
|
ColumnsContainer,
|
|
160
129
|
{
|
|
161
130
|
style: {
|
|
162
131
|
flexDirection: reverse ? "row-reverse" : "row"
|
|
163
132
|
}
|
|
164
133
|
},
|
|
165
|
-
childrenArray.map((child, i) => /* @__PURE__ */
|
|
134
|
+
childrenArray.map((child, i) => /* @__PURE__ */ import_react2.default.createElement(
|
|
166
135
|
"div",
|
|
167
136
|
{
|
|
168
137
|
key: i,
|
|
@@ -181,18 +150,18 @@ function ColumnsLayout({
|
|
|
181
150
|
}
|
|
182
151
|
|
|
183
152
|
// src/layouts/utils.ts
|
|
184
|
-
var
|
|
153
|
+
var import_react3 = __toESM(require("react"));
|
|
185
154
|
var Margins = {
|
|
186
155
|
vertical: "4rem",
|
|
187
156
|
horizontal: "7rem",
|
|
188
157
|
horizontalInternal: "2rem"
|
|
189
158
|
};
|
|
190
159
|
function getCode(children) {
|
|
191
|
-
const allChild =
|
|
160
|
+
const allChild = import_react3.default.Children.toArray(children);
|
|
192
161
|
if (allChild.length === 0)
|
|
193
162
|
return [null, allChild];
|
|
194
163
|
const index = allChild.findIndex((child) => {
|
|
195
|
-
if (!
|
|
164
|
+
if (!import_react3.default.isValidElement(child))
|
|
196
165
|
return false;
|
|
197
166
|
return child.props.originalType === "pre";
|
|
198
167
|
});
|
|
@@ -203,9 +172,9 @@ function getCode(children) {
|
|
|
203
172
|
return [candidate, rest];
|
|
204
173
|
}
|
|
205
174
|
function getMatchingMdxType(children, mdxType) {
|
|
206
|
-
const allChild =
|
|
175
|
+
const allChild = import_react3.default.Children.toArray(children);
|
|
207
176
|
const matchFn = (child) => {
|
|
208
|
-
if (!
|
|
177
|
+
if (!import_react3.default.isValidElement(child))
|
|
209
178
|
return false;
|
|
210
179
|
if (typeof child.type !== "function")
|
|
211
180
|
return false;
|
|
@@ -240,7 +209,7 @@ function SidedCodeLayout({
|
|
|
240
209
|
position = "right"
|
|
241
210
|
}) {
|
|
242
211
|
const [code, rest] = getCodeChildren(children);
|
|
243
|
-
return /* @__PURE__ */
|
|
212
|
+
return /* @__PURE__ */ import_react4.default.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ import_react4.default.createElement(
|
|
244
213
|
"div",
|
|
245
214
|
{
|
|
246
215
|
style: {
|
|
@@ -249,7 +218,7 @@ function SidedCodeLayout({
|
|
|
249
218
|
}
|
|
250
219
|
},
|
|
251
220
|
rest
|
|
252
|
-
), /* @__PURE__ */
|
|
221
|
+
), /* @__PURE__ */ import_react4.default.createElement(
|
|
253
222
|
CodeSide,
|
|
254
223
|
{
|
|
255
224
|
style: {
|
|
@@ -265,11 +234,11 @@ function SidedCodeLayout({
|
|
|
265
234
|
}
|
|
266
235
|
|
|
267
236
|
// src/layouts/SideImageLayout.tsx
|
|
268
|
-
var
|
|
237
|
+
var import_react6 = __toESM(require("react"));
|
|
269
238
|
var import_styled_components5 = __toESM(require("styled-components"));
|
|
270
239
|
|
|
271
240
|
// src/components/Image.tsx
|
|
272
|
-
var
|
|
241
|
+
var import_react5 = __toESM(require("react"));
|
|
273
242
|
|
|
274
243
|
// src/layouts/styled.ts
|
|
275
244
|
var import_styled_components4 = __toESM(require("styled-components"));
|
|
@@ -283,7 +252,7 @@ var SVGObject = import_styled_components4.default.object`
|
|
|
283
252
|
function Image(props) {
|
|
284
253
|
const { src, height } = props;
|
|
285
254
|
if (!(src == null ? void 0 : src.endsWith(".svg"))) {
|
|
286
|
-
return /* @__PURE__ */
|
|
255
|
+
return /* @__PURE__ */ import_react5.default.createElement(
|
|
287
256
|
"img",
|
|
288
257
|
{
|
|
289
258
|
src,
|
|
@@ -296,7 +265,7 @@ function Image(props) {
|
|
|
296
265
|
}
|
|
297
266
|
);
|
|
298
267
|
}
|
|
299
|
-
return /* @__PURE__ */
|
|
268
|
+
return /* @__PURE__ */ import_react5.default.createElement(
|
|
300
269
|
SVGObject,
|
|
301
270
|
{
|
|
302
271
|
type: "image/svg+xml",
|
|
@@ -333,7 +302,7 @@ var SidedImageLayout = ({
|
|
|
333
302
|
console.error("No image provided for SidedImageLayout");
|
|
334
303
|
return null;
|
|
335
304
|
}
|
|
336
|
-
return /* @__PURE__ */
|
|
305
|
+
return /* @__PURE__ */ import_react6.default.createElement(
|
|
337
306
|
DivWithHeading2,
|
|
338
307
|
{
|
|
339
308
|
style: {
|
|
@@ -346,7 +315,7 @@ var SidedImageLayout = ({
|
|
|
346
315
|
top: 0
|
|
347
316
|
}
|
|
348
317
|
},
|
|
349
|
-
/* @__PURE__ */
|
|
318
|
+
/* @__PURE__ */ import_react6.default.createElement(
|
|
350
319
|
"div",
|
|
351
320
|
{
|
|
352
321
|
style: {
|
|
@@ -359,7 +328,7 @@ var SidedImageLayout = ({
|
|
|
359
328
|
},
|
|
360
329
|
rest
|
|
361
330
|
),
|
|
362
|
-
/* @__PURE__ */
|
|
331
|
+
/* @__PURE__ */ import_react6.default.createElement(
|
|
363
332
|
"div",
|
|
364
333
|
{
|
|
365
334
|
style: {
|
|
@@ -371,19 +340,19 @@ var SidedImageLayout = ({
|
|
|
371
340
|
backgroundColor: "white"
|
|
372
341
|
}
|
|
373
342
|
},
|
|
374
|
-
component || /* @__PURE__ */
|
|
343
|
+
component || /* @__PURE__ */ import_react6.default.createElement(Image, { src: image })
|
|
375
344
|
)
|
|
376
345
|
);
|
|
377
346
|
};
|
|
378
347
|
|
|
379
348
|
// src/layouts/SideLayout.tsx
|
|
380
|
-
var
|
|
349
|
+
var import_react7 = __toESM(require("react"));
|
|
381
350
|
function SideLayout({
|
|
382
351
|
children,
|
|
383
352
|
position = "right"
|
|
384
353
|
}) {
|
|
385
354
|
const [side, rest] = getMatchingMdxType(children, "Side");
|
|
386
|
-
return /* @__PURE__ */
|
|
355
|
+
return /* @__PURE__ */ import_react7.default.createElement(ColumnsLayout, { reverse: position === "left" }, /* @__PURE__ */ import_react7.default.createElement("div", { style: { marginLeft: Margins.horizontal } }, rest), /* @__PURE__ */ import_react7.default.createElement(
|
|
387
356
|
"div",
|
|
388
357
|
{
|
|
389
358
|
style: {
|
|
@@ -435,11 +404,11 @@ var theme_default = {
|
|
|
435
404
|
};
|
|
436
405
|
|
|
437
406
|
// src/template.tsx
|
|
438
|
-
var
|
|
407
|
+
var import_react8 = __toESM(require("react"));
|
|
439
408
|
var import_spectacle2 = require("spectacle");
|
|
440
409
|
var template = ({ slideNumber, numberOfSlides }) => {
|
|
441
410
|
const percentage = slideNumber / numberOfSlides * 100;
|
|
442
|
-
return /* @__PURE__ */
|
|
411
|
+
return /* @__PURE__ */ import_react8.default.createElement("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0 } }, /* @__PURE__ */ import_react8.default.createElement(import_spectacle2.Box, { padding: "0 0 0.5em 0.7em" }, /* @__PURE__ */ import_react8.default.createElement(import_spectacle2.FullScreen, null)), /* @__PURE__ */ import_react8.default.createElement("div", { style: { width: "100%", height: "4px", background: "#ffffff11" } }, /* @__PURE__ */ import_react8.default.createElement(
|
|
443
412
|
"div",
|
|
444
413
|
{
|
|
445
414
|
style: {
|
|
@@ -453,11 +422,11 @@ var template = ({ slideNumber, numberOfSlides }) => {
|
|
|
453
422
|
};
|
|
454
423
|
|
|
455
424
|
// src/components/map.tsx
|
|
456
|
-
var
|
|
425
|
+
var import_react11 = __toESM(require("react"));
|
|
457
426
|
var import_spectacle5 = require("spectacle");
|
|
458
427
|
|
|
459
428
|
// src/components/styled.tsx
|
|
460
|
-
var
|
|
429
|
+
var import_react9 = __toESM(require("react"));
|
|
461
430
|
var import_spectacle3 = require("spectacle");
|
|
462
431
|
var import_styled_components6 = __toESM(require("styled-components"));
|
|
463
432
|
var StyledImage = (0, import_styled_components6.default)(import_spectacle3.Image)`
|
|
@@ -465,7 +434,7 @@ var StyledImage = (0, import_styled_components6.default)(import_spectacle3.Image
|
|
|
465
434
|
max-height: 30vh;
|
|
466
435
|
max-width: 70vw;
|
|
467
436
|
`;
|
|
468
|
-
var Image2 = (props) => /* @__PURE__ */
|
|
437
|
+
var Image2 = (props) => /* @__PURE__ */ import_react9.default.createElement(import_spectacle3.FlexBox, { margin: "0 0", padding: "0 0" }, /* @__PURE__ */ import_react9.default.createElement(StyledImage, { ...props }));
|
|
469
438
|
var CustomHeading = (0, import_styled_components6.default)(import_spectacle3.Heading)`
|
|
470
439
|
strong {
|
|
471
440
|
color: #f49676;
|
|
@@ -510,7 +479,7 @@ var HeadingThree = import_styled_components6.default.h3`
|
|
|
510
479
|
`;
|
|
511
480
|
|
|
512
481
|
// src/components/CodeStepper/CodeStepper.tsx
|
|
513
|
-
var
|
|
482
|
+
var import_react10 = __toESM(require("react"));
|
|
514
483
|
var import_react_is = __toESM(require("react-is"));
|
|
515
484
|
var import_react_syntax_highlighter = require("react-syntax-highlighter");
|
|
516
485
|
var import_gruvbox_dark = __toESM(require("react-syntax-highlighter/dist/cjs/styles/prism/gruvbox-dark"));
|
|
@@ -601,7 +570,7 @@ var CodeContainer = import_styled_components7.default.div`
|
|
|
601
570
|
}
|
|
602
571
|
`;
|
|
603
572
|
function useCodeSteps(code) {
|
|
604
|
-
return
|
|
573
|
+
return import_react10.default.useMemo(() => {
|
|
605
574
|
const prefixes = code.match(/(?:\/\/|<!--) @.*\n/g) || [];
|
|
606
575
|
const prefixesLength = prefixes.reduce(
|
|
607
576
|
(acc, prefix) => acc + prefix.length,
|
|
@@ -621,8 +590,8 @@ function useCodeSteps(code) {
|
|
|
621
590
|
}, [code]);
|
|
622
591
|
}
|
|
623
592
|
function getCodeDetails(children) {
|
|
624
|
-
const child =
|
|
625
|
-
if (!
|
|
593
|
+
const child = import_react10.default.Children.toArray(children)[0];
|
|
594
|
+
if (!import_react10.default.isValidElement(child)) {
|
|
626
595
|
return {
|
|
627
596
|
language: "",
|
|
628
597
|
code: import_react_is.default.isFragment(child) ? "" : String(child || "")
|
|
@@ -640,7 +609,7 @@ function CodeWrapper({
|
|
|
640
609
|
hasName,
|
|
641
610
|
children
|
|
642
611
|
}) {
|
|
643
|
-
return /* @__PURE__ */
|
|
612
|
+
return /* @__PURE__ */ import_react10.default.createElement(
|
|
644
613
|
"div",
|
|
645
614
|
{
|
|
646
615
|
style: {
|
|
@@ -650,7 +619,7 @@ function CodeWrapper({
|
|
|
650
619
|
borderRadius: "4px"
|
|
651
620
|
}
|
|
652
621
|
},
|
|
653
|
-
name && /* @__PURE__ */
|
|
622
|
+
name && /* @__PURE__ */ import_react10.default.createElement(
|
|
654
623
|
"span",
|
|
655
624
|
{
|
|
656
625
|
style: {
|
|
@@ -667,7 +636,7 @@ function CodeWrapper({
|
|
|
667
636
|
name
|
|
668
637
|
),
|
|
669
638
|
children,
|
|
670
|
-
hasName && /* @__PURE__ */
|
|
639
|
+
hasName && /* @__PURE__ */ import_react10.default.createElement(
|
|
671
640
|
"span",
|
|
672
641
|
{
|
|
673
642
|
style: {
|
|
@@ -682,7 +651,7 @@ function CodeWrapper({
|
|
|
682
651
|
fontStyle: "italic"
|
|
683
652
|
}
|
|
684
653
|
},
|
|
685
|
-
stepName || /* @__PURE__ */
|
|
654
|
+
stepName || /* @__PURE__ */ import_react10.default.createElement("span", { style: { visibility: "hidden" } }, "Step")
|
|
686
655
|
)
|
|
687
656
|
);
|
|
688
657
|
}
|
|
@@ -691,7 +660,7 @@ function CodeStepper({
|
|
|
691
660
|
name,
|
|
692
661
|
...props
|
|
693
662
|
}) {
|
|
694
|
-
const { language, code } =
|
|
663
|
+
const { language, code } = import_react10.default.useMemo(() => {
|
|
695
664
|
return getCodeDetails(props.children);
|
|
696
665
|
}, [props.children]);
|
|
697
666
|
const {
|
|
@@ -701,21 +670,21 @@ function CodeStepper({
|
|
|
701
670
|
hasSteps,
|
|
702
671
|
hasName
|
|
703
672
|
} = useCodeSteps(code);
|
|
704
|
-
return /* @__PURE__ */
|
|
673
|
+
return /* @__PURE__ */ import_react10.default.createElement(CodeContainer, null, import_meta.env.DEV && Boolean(prefixes == null ? void 0 : prefixes.length) && /* @__PURE__ */ import_react10.default.createElement("div", { style: { position: "absolute", top: 0, opacity: 0.5, left: 0 } }, /* @__PURE__ */ import_react10.default.createElement(Highlighter, { language, style: import_gruvbox_dark.default }, prefixes.join(""))), /* @__PURE__ */ import_react10.default.createElement(
|
|
705
674
|
import_spectacle4.Stepper,
|
|
706
675
|
{
|
|
707
676
|
values: steps,
|
|
708
677
|
alwaysVisible: !hasSteps,
|
|
709
678
|
priority: priority ? priority + 1 : void 0
|
|
710
679
|
},
|
|
711
|
-
(step, _, isActive) => /* @__PURE__ */
|
|
680
|
+
(step, _, isActive) => /* @__PURE__ */ import_react10.default.createElement(
|
|
712
681
|
CodeWrapper,
|
|
713
682
|
{
|
|
714
683
|
name,
|
|
715
684
|
stepName: step == null ? void 0 : step.name,
|
|
716
685
|
hasName
|
|
717
686
|
},
|
|
718
|
-
/* @__PURE__ */
|
|
687
|
+
/* @__PURE__ */ import_react10.default.createElement(
|
|
719
688
|
Highlighter,
|
|
720
689
|
{
|
|
721
690
|
language,
|
|
@@ -765,7 +734,7 @@ CodeStepper.mdxType = "CodeStepper";
|
|
|
765
734
|
// src/components/map.tsx
|
|
766
735
|
var componentsMap = {
|
|
767
736
|
...import_spectacle5.mdxComponentMap,
|
|
768
|
-
inlineCode: (props) => /* @__PURE__ */
|
|
737
|
+
inlineCode: (props) => /* @__PURE__ */ import_react11.default.createElement(
|
|
769
738
|
InlineCode,
|
|
770
739
|
{
|
|
771
740
|
...props,
|
|
@@ -775,7 +744,7 @@ var componentsMap = {
|
|
|
775
744
|
}
|
|
776
745
|
}
|
|
777
746
|
),
|
|
778
|
-
table: (props) => /* @__PURE__ */
|
|
747
|
+
table: (props) => /* @__PURE__ */ import_react11.default.createElement(
|
|
779
748
|
"table",
|
|
780
749
|
{
|
|
781
750
|
...props,
|
|
@@ -786,7 +755,7 @@ var componentsMap = {
|
|
|
786
755
|
}
|
|
787
756
|
}
|
|
788
757
|
),
|
|
789
|
-
tr: (props) => /* @__PURE__ */
|
|
758
|
+
tr: (props) => /* @__PURE__ */ import_react11.default.createElement(
|
|
790
759
|
"tr",
|
|
791
760
|
{
|
|
792
761
|
...props,
|
|
@@ -798,7 +767,7 @@ var componentsMap = {
|
|
|
798
767
|
}
|
|
799
768
|
}
|
|
800
769
|
),
|
|
801
|
-
td: (props) => /* @__PURE__ */
|
|
770
|
+
td: (props) => /* @__PURE__ */ import_react11.default.createElement(
|
|
802
771
|
"td",
|
|
803
772
|
{
|
|
804
773
|
...props,
|
|
@@ -811,7 +780,7 @@ var componentsMap = {
|
|
|
811
780
|
}
|
|
812
781
|
}
|
|
813
782
|
),
|
|
814
|
-
h1: (props) => /* @__PURE__ */
|
|
783
|
+
h1: (props) => /* @__PURE__ */ import_react11.default.createElement(
|
|
815
784
|
CustomHeading,
|
|
816
785
|
{
|
|
817
786
|
fontSize: "h1",
|
|
@@ -826,15 +795,15 @@ var componentsMap = {
|
|
|
826
795
|
},
|
|
827
796
|
props.children
|
|
828
797
|
),
|
|
829
|
-
h2: (props) => /* @__PURE__ */
|
|
830
|
-
h3: (props) => /* @__PURE__ */
|
|
831
|
-
img: (props) => /* @__PURE__ */
|
|
798
|
+
h2: (props) => /* @__PURE__ */ import_react11.default.createElement(HeadingTwo, null, props.children),
|
|
799
|
+
h3: (props) => /* @__PURE__ */ import_react11.default.createElement(HeadingThree, { ...props }),
|
|
800
|
+
img: (props) => /* @__PURE__ */ import_react11.default.createElement(Image2, { ...props }),
|
|
832
801
|
pre: CodeStepper,
|
|
833
|
-
li: (props) => /* @__PURE__ */
|
|
834
|
-
Side: (props) => /* @__PURE__ */
|
|
802
|
+
li: (props) => /* @__PURE__ */ import_react11.default.createElement("li", { ...props, style: { margin: "24px 0" } }),
|
|
803
|
+
Side: (props) => /* @__PURE__ */ import_react11.default.createElement("div", { ...props }),
|
|
835
804
|
p: (props) => {
|
|
836
805
|
const Text = import_spectacle5.mdxComponentMap.p;
|
|
837
|
-
return /* @__PURE__ */
|
|
806
|
+
return /* @__PURE__ */ import_react11.default.createElement(
|
|
838
807
|
Text,
|
|
839
808
|
{
|
|
840
809
|
style: { margin: "8px 0", padding: "8px 0", lineHeight: "2rem" },
|
|
@@ -842,10 +811,10 @@ var componentsMap = {
|
|
|
842
811
|
}
|
|
843
812
|
);
|
|
844
813
|
},
|
|
845
|
-
blockquote: (props) => /* @__PURE__ */
|
|
814
|
+
blockquote: (props) => /* @__PURE__ */ import_react11.default.createElement(CustomQuote, { ...props }),
|
|
846
815
|
a: ({ children, ...props }) => {
|
|
847
816
|
const domain = new URL(props.href || "").hostname;
|
|
848
|
-
return /* @__PURE__ */
|
|
817
|
+
return /* @__PURE__ */ import_react11.default.createElement("a", { ...props, style: { color: "#f49676", textDecoration: "none" } }, children, " ", /* @__PURE__ */ import_react11.default.createElement(
|
|
849
818
|
"small",
|
|
850
819
|
{
|
|
851
820
|
style: {
|
|
@@ -861,14 +830,14 @@ var componentsMap = {
|
|
|
861
830
|
var map_default = componentsMap;
|
|
862
831
|
|
|
863
832
|
// src/components/FilePane.tsx
|
|
864
|
-
var
|
|
833
|
+
var import_react12 = __toESM(require("react"));
|
|
865
834
|
function FilePane({
|
|
866
835
|
name,
|
|
867
836
|
children,
|
|
868
837
|
priority,
|
|
869
838
|
...divProps
|
|
870
839
|
}) {
|
|
871
|
-
return
|
|
840
|
+
return import_react12.default.isValidElement(children) ? import_react12.default.cloneElement(children, {
|
|
872
841
|
// @ts-expect-error cloning
|
|
873
842
|
priority,
|
|
874
843
|
name
|
|
@@ -877,14 +846,14 @@ function FilePane({
|
|
|
877
846
|
FilePane.mdxType = "FilePane";
|
|
878
847
|
|
|
879
848
|
// src/components/ItemsColumn.tsx
|
|
880
|
-
var
|
|
849
|
+
var import_react13 = __toESM(require("react"));
|
|
881
850
|
var import_spectacle6 = require("spectacle");
|
|
882
851
|
var import_styled_components8 = __toESM(require("styled-components"));
|
|
883
852
|
var import_react_spring = require("react-spring");
|
|
884
853
|
function ItemsColumn(divProps) {
|
|
885
854
|
const { style, children, ...props } = divProps;
|
|
886
|
-
const childrenArray =
|
|
887
|
-
return /* @__PURE__ */
|
|
855
|
+
const childrenArray = import_react13.default.Children.toArray(children);
|
|
856
|
+
return /* @__PURE__ */ import_react13.default.createElement(import_spectacle6.Stepper, { values: childrenArray }, (value, step) => /* @__PURE__ */ import_react13.default.createElement(
|
|
888
857
|
"div",
|
|
889
858
|
{
|
|
890
859
|
style: {
|
|
@@ -898,10 +867,10 @@ function ItemsColumn(divProps) {
|
|
|
898
867
|
},
|
|
899
868
|
childrenArray.map((child, index) => {
|
|
900
869
|
const isVisible = index <= step;
|
|
901
|
-
if (!
|
|
870
|
+
if (!import_react13.default.isValidElement(child)) {
|
|
902
871
|
return child;
|
|
903
872
|
}
|
|
904
|
-
return /* @__PURE__ */
|
|
873
|
+
return /* @__PURE__ */ import_react13.default.createElement(ItemColumnWrapper, { key: index, isVisible }, child);
|
|
905
874
|
})
|
|
906
875
|
));
|
|
907
876
|
}
|
|
@@ -916,11 +885,11 @@ function ItemColumnWrapper({
|
|
|
916
885
|
...props
|
|
917
886
|
}) {
|
|
918
887
|
const styles = (0, import_react_spring.useSpring)({ opacity: isVisible ? 1 : 0 });
|
|
919
|
-
return /* @__PURE__ */
|
|
888
|
+
return /* @__PURE__ */ import_react13.default.createElement(ItemColumnWrapperStyled, { style: styles, ...props }, children);
|
|
920
889
|
}
|
|
921
890
|
|
|
922
891
|
// src/components/HorizontalList.tsx
|
|
923
|
-
var
|
|
892
|
+
var import_react14 = __toESM(require("react"));
|
|
924
893
|
var import_react_spring2 = require("react-spring");
|
|
925
894
|
var import_spectacle7 = require("spectacle");
|
|
926
895
|
var import_styled_components9 = __toESM(require("styled-components"));
|
|
@@ -932,8 +901,8 @@ function HorizontalList({
|
|
|
932
901
|
children,
|
|
933
902
|
columns = 3
|
|
934
903
|
}) {
|
|
935
|
-
const items =
|
|
936
|
-
return /* @__PURE__ */
|
|
904
|
+
const items = import_react14.default.Children.toArray(children);
|
|
905
|
+
return /* @__PURE__ */ import_react14.default.createElement(import_spectacle7.Stepper, { values: items }, (_, step) => /* @__PURE__ */ import_react14.default.createElement(
|
|
937
906
|
Container,
|
|
938
907
|
{
|
|
939
908
|
style: {
|
|
@@ -941,10 +910,10 @@ function HorizontalList({
|
|
|
941
910
|
}
|
|
942
911
|
},
|
|
943
912
|
items.map((item, k) => {
|
|
944
|
-
if (!
|
|
913
|
+
if (!import_react14.default.isValidElement(item)) {
|
|
945
914
|
return item;
|
|
946
915
|
}
|
|
947
|
-
return
|
|
916
|
+
return import_react14.default.cloneElement(item, {
|
|
948
917
|
// @ts-expect-error cloning
|
|
949
918
|
position: k + 1,
|
|
950
919
|
isVisible: k <= step,
|
|
@@ -954,12 +923,12 @@ function HorizontalList({
|
|
|
954
923
|
));
|
|
955
924
|
}
|
|
956
925
|
function Pill({ position }) {
|
|
957
|
-
return /* @__PURE__ */
|
|
926
|
+
return /* @__PURE__ */ import_react14.default.createElement(
|
|
958
927
|
"div",
|
|
959
928
|
{
|
|
960
929
|
style: { width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 }
|
|
961
930
|
},
|
|
962
|
-
/* @__PURE__ */
|
|
931
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
963
932
|
"svg",
|
|
964
933
|
{
|
|
965
934
|
width: "48",
|
|
@@ -968,14 +937,14 @@ function Pill({ position }) {
|
|
|
968
937
|
fill: "none",
|
|
969
938
|
xmlns: "http://www.w3.org/2000/svg"
|
|
970
939
|
},
|
|
971
|
-
/* @__PURE__ */
|
|
940
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
972
941
|
"path",
|
|
973
942
|
{
|
|
974
943
|
d: "M8.64717 20L0 15.0094V5.00134L8.64717 0L17.289 5.00134V15.0094L8.64717 20ZM1.48222 14.141L8.64717 18.2846L15.8068 14.141V5.85902L8.64717 1.71536L1.48222 5.85902V14.141Z",
|
|
975
944
|
fill: "#ffffff"
|
|
976
945
|
}
|
|
977
946
|
),
|
|
978
|
-
/* @__PURE__ */
|
|
947
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
979
948
|
"text",
|
|
980
949
|
{
|
|
981
950
|
x: "9",
|
|
@@ -987,7 +956,7 @@ function Pill({ position }) {
|
|
|
987
956
|
},
|
|
988
957
|
position
|
|
989
958
|
),
|
|
990
|
-
/* @__PURE__ */
|
|
959
|
+
/* @__PURE__ */ import_react14.default.createElement(
|
|
991
960
|
"path",
|
|
992
961
|
{
|
|
993
962
|
d: "M 8.758 16.01 L 3.549 13.004 L 3.549 6.975 L 8.758 3.963 L 13.964 6.975 L 13.964 13.004 L 8.758 16.01 Z",
|
|
@@ -1040,11 +1009,11 @@ function HorizontalListItem({
|
|
|
1040
1009
|
const opacityStyles = (0, import_react_spring2.useSpring)({
|
|
1041
1010
|
opacity: getItemOpacity({ isVisible, isLast })
|
|
1042
1011
|
});
|
|
1043
|
-
return /* @__PURE__ */
|
|
1012
|
+
return /* @__PURE__ */ import_react14.default.createElement(Item, { style: opacityStyles }, /* @__PURE__ */ import_react14.default.createElement(ItemHead, null, /* @__PURE__ */ import_react14.default.createElement(Pill, { position }), /* @__PURE__ */ import_react14.default.createElement("p", null, title)), /* @__PURE__ */ import_react14.default.createElement(ItemContent, null, children));
|
|
1044
1013
|
}
|
|
1045
1014
|
|
|
1046
1015
|
// src/components/Timeline.tsx
|
|
1047
|
-
var
|
|
1016
|
+
var import_react15 = __toESM(require("react"));
|
|
1048
1017
|
var import_react_spring3 = require("react-spring");
|
|
1049
1018
|
var import_classnames = __toESM(require("classnames"));
|
|
1050
1019
|
var import_spectacle8 = require("spectacle");
|
|
@@ -1054,13 +1023,13 @@ var Timeline_module_default = {};
|
|
|
1054
1023
|
|
|
1055
1024
|
// src/components/Timeline.tsx
|
|
1056
1025
|
function Timeline(props) {
|
|
1057
|
-
const children =
|
|
1058
|
-
return /* @__PURE__ */
|
|
1026
|
+
const children = import_react15.default.Children.toArray(props.children);
|
|
1027
|
+
return /* @__PURE__ */ import_react15.default.createElement(import_spectacle8.Stepper, { ...props, values: children, className: Timeline_module_default["timeline"] }, (value, step) => {
|
|
1059
1028
|
return children.map((child, index) => {
|
|
1060
|
-
if (!
|
|
1029
|
+
if (!import_react15.default.isValidElement(child)) {
|
|
1061
1030
|
return child;
|
|
1062
1031
|
}
|
|
1063
|
-
return
|
|
1032
|
+
return import_react15.default.cloneElement(child, {
|
|
1064
1033
|
// @ts-expect-error cloning
|
|
1065
1034
|
isPhantom: step < index,
|
|
1066
1035
|
isLast: step === index
|
|
@@ -1087,7 +1056,7 @@ function TimelineItem(props) {
|
|
|
1087
1056
|
opacity: getItemOpacity2({ isPhantom, isLast })
|
|
1088
1057
|
});
|
|
1089
1058
|
const colorStyles = (0, import_react_spring3.useSpring)({ opacity: isPhantom || isLast ? 1 : 0.15 });
|
|
1090
|
-
return /* @__PURE__ */
|
|
1059
|
+
return /* @__PURE__ */ import_react15.default.createElement(
|
|
1091
1060
|
import_react_spring3.animated.div,
|
|
1092
1061
|
{
|
|
1093
1062
|
...rest,
|
|
@@ -1096,7 +1065,7 @@ function TimelineItem(props) {
|
|
|
1096
1065
|
...appearStyles
|
|
1097
1066
|
}
|
|
1098
1067
|
},
|
|
1099
|
-
/* @__PURE__ */
|
|
1068
|
+
/* @__PURE__ */ import_react15.default.createElement(
|
|
1100
1069
|
"div",
|
|
1101
1070
|
{
|
|
1102
1071
|
className: (0, import_classnames.default)(
|
|
@@ -1104,21 +1073,21 @@ function TimelineItem(props) {
|
|
|
1104
1073
|
Timeline_module_default["timelineItemContentPhantom"]
|
|
1105
1074
|
)
|
|
1106
1075
|
},
|
|
1107
|
-
/* @__PURE__ */
|
|
1108
|
-
/* @__PURE__ */
|
|
1076
|
+
/* @__PURE__ */ import_react15.default.createElement("div", { className: Timeline_module_default["timelineItemTitle"] }, title),
|
|
1077
|
+
/* @__PURE__ */ import_react15.default.createElement("div", { className: Timeline_module_default["timelineItemBody"] }, children)
|
|
1109
1078
|
),
|
|
1110
|
-
/* @__PURE__ */
|
|
1079
|
+
/* @__PURE__ */ import_react15.default.createElement(import_react_spring3.animated.div, { className: Timeline_module_default["timelineItemGuide"], style: colorStyles }, /* @__PURE__ */ import_react15.default.createElement(Hexagon, null), /* @__PURE__ */ import_react15.default.createElement(
|
|
1111
1080
|
import_react_spring3.animated.div,
|
|
1112
1081
|
{
|
|
1113
1082
|
className: Timeline_module_default["timelineItemGuideLine"],
|
|
1114
1083
|
style: guideLineProps
|
|
1115
1084
|
}
|
|
1116
1085
|
)),
|
|
1117
|
-
/* @__PURE__ */
|
|
1086
|
+
/* @__PURE__ */ import_react15.default.createElement("div", { className: Timeline_module_default["timelineItemContent"] }, /* @__PURE__ */ import_react15.default.createElement("div", { className: Timeline_module_default["timelineItemTitle"] }, title), /* @__PURE__ */ import_react15.default.createElement("div", { className: Timeline_module_default["timelineItemBody"] }, children))
|
|
1118
1087
|
);
|
|
1119
1088
|
}
|
|
1120
1089
|
function Hexagon() {
|
|
1121
|
-
return /* @__PURE__ */
|
|
1090
|
+
return /* @__PURE__ */ import_react15.default.createElement(
|
|
1122
1091
|
"svg",
|
|
1123
1092
|
{
|
|
1124
1093
|
width: "18",
|
|
@@ -1127,14 +1096,14 @@ function Hexagon() {
|
|
|
1127
1096
|
fill: "none",
|
|
1128
1097
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1129
1098
|
},
|
|
1130
|
-
/* @__PURE__ */
|
|
1099
|
+
/* @__PURE__ */ import_react15.default.createElement(
|
|
1131
1100
|
"path",
|
|
1132
1101
|
{
|
|
1133
1102
|
d: "M8.64717 20L0 15.0094V5.00134L8.64717 0L17.289 5.00134V15.0094L8.64717 20ZM1.48222 14.141L8.64717 18.2846L15.8068 14.141V5.85902L8.64717 1.71536L1.48222 5.85902V14.141Z",
|
|
1134
1103
|
fill: "#F49676"
|
|
1135
1104
|
}
|
|
1136
1105
|
),
|
|
1137
|
-
/* @__PURE__ */
|
|
1106
|
+
/* @__PURE__ */ import_react15.default.createElement(
|
|
1138
1107
|
"path",
|
|
1139
1108
|
{
|
|
1140
1109
|
d: "M 8.758 16.01 L 3.549 13.004 L 3.549 6.975 L 8.758 3.963 L 13.964 6.975 L 13.964 13.004 L 8.758 16.01 Z",
|
|
@@ -1145,7 +1114,7 @@ function Hexagon() {
|
|
|
1145
1114
|
}
|
|
1146
1115
|
|
|
1147
1116
|
// src/components/IconBox.tsx
|
|
1148
|
-
var
|
|
1117
|
+
var import_react16 = __toESM(require("react"));
|
|
1149
1118
|
var import_styled_components10 = __toESM(require("styled-components"));
|
|
1150
1119
|
var IconBoxContent = import_styled_components10.default.div`
|
|
1151
1120
|
* {
|
|
@@ -1157,7 +1126,7 @@ function IconBox({
|
|
|
1157
1126
|
children,
|
|
1158
1127
|
icon
|
|
1159
1128
|
}) {
|
|
1160
|
-
return /* @__PURE__ */
|
|
1129
|
+
return /* @__PURE__ */ import_react16.default.createElement(
|
|
1161
1130
|
"div",
|
|
1162
1131
|
{
|
|
1163
1132
|
style: {
|
|
@@ -1167,14 +1136,14 @@ function IconBox({
|
|
|
1167
1136
|
padding: "1rem 0"
|
|
1168
1137
|
}
|
|
1169
1138
|
},
|
|
1170
|
-
/* @__PURE__ */
|
|
1171
|
-
/* @__PURE__ */
|
|
1139
|
+
/* @__PURE__ */ import_react16.default.createElement("div", { style: { fontSize: 60 } }, icon),
|
|
1140
|
+
/* @__PURE__ */ import_react16.default.createElement(IconBoxContent, null, children)
|
|
1172
1141
|
);
|
|
1173
1142
|
}
|
|
1174
1143
|
|
|
1175
1144
|
// src/index.tsx
|
|
1176
1145
|
function PassThrough({ children }) {
|
|
1177
|
-
return /* @__PURE__ */
|
|
1146
|
+
return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, children);
|
|
1178
1147
|
}
|
|
1179
1148
|
function Layout({
|
|
1180
1149
|
children,
|
|
@@ -1186,37 +1155,37 @@ function Layout({
|
|
|
1186
1155
|
console.warn(`Layout ${layout} not found`);
|
|
1187
1156
|
}
|
|
1188
1157
|
if (Layout2) {
|
|
1189
|
-
return /* @__PURE__ */
|
|
1158
|
+
return /* @__PURE__ */ import_react17.default.createElement(Layout2, { ...frontmatter }, children);
|
|
1190
1159
|
}
|
|
1191
|
-
return /* @__PURE__ */
|
|
1160
|
+
return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, children);
|
|
1192
1161
|
}
|
|
1193
1162
|
var componentsMap2 = {
|
|
1194
1163
|
...map_default,
|
|
1195
1164
|
wrapper: Layout
|
|
1196
1165
|
};
|
|
1197
1166
|
function Deck({ deck }) {
|
|
1198
|
-
|
|
1167
|
+
import_react17.default.useEffect(() => {
|
|
1199
1168
|
document.title = deck.metadata.title || "Untitled";
|
|
1200
1169
|
}, [deck.metadata.title]);
|
|
1201
|
-
return /* @__PURE__ */
|
|
1170
|
+
return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.StrictMode, null, /* @__PURE__ */ import_react17.default.createElement(import_react18.MDXProvider, { components: componentsMap2 }, /* @__PURE__ */ import_react17.default.createElement(import_spectacle9.Deck, { theme: theme_default, template }, deck.slides.map((slide, i) => {
|
|
1202
1171
|
const Component = slide.slideComponent;
|
|
1203
|
-
return /* @__PURE__ */
|
|
1172
|
+
return /* @__PURE__ */ import_react17.default.createElement(import_spectacle9.Slide, { key: i }, /* @__PURE__ */ import_react17.default.createElement(Component, null));
|
|
1204
1173
|
}))));
|
|
1205
1174
|
}
|
|
1206
1175
|
function Danger({ children }) {
|
|
1207
|
-
return /* @__PURE__ */
|
|
1176
|
+
return /* @__PURE__ */ import_react17.default.createElement("div", { style: { color: "red" } }, children);
|
|
1208
1177
|
}
|
|
1209
1178
|
function Doc({ children }) {
|
|
1210
|
-
return /* @__PURE__ */
|
|
1179
|
+
return /* @__PURE__ */ import_react17.default.createElement("div", { style: { color: "blue" } }, children);
|
|
1211
1180
|
}
|
|
1212
1181
|
function Information({ children }) {
|
|
1213
|
-
return /* @__PURE__ */
|
|
1182
|
+
return /* @__PURE__ */ import_react17.default.createElement("div", { style: { color: "orange" } }, children);
|
|
1214
1183
|
}
|
|
1215
1184
|
function Success({ children }) {
|
|
1216
|
-
return /* @__PURE__ */
|
|
1185
|
+
return /* @__PURE__ */ import_react17.default.createElement("div", { style: { color: "green" } }, children);
|
|
1217
1186
|
}
|
|
1218
1187
|
function Side({ children }) {
|
|
1219
|
-
return /* @__PURE__ */
|
|
1188
|
+
return /* @__PURE__ */ import_react17.default.createElement("div", null, children);
|
|
1220
1189
|
}
|
|
1221
1190
|
Side.mdxType = "Side";
|
|
1222
1191
|
|