@thanh01.pmt/presentation-kit 0.2.17 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -0
- package/dist/ai/index.cjs +33 -28
- package/dist/ai/index.cjs.map +1 -1
- package/dist/ai/index.d.cts +4 -3
- package/dist/ai/index.d.ts +4 -3
- package/dist/ai/index.js +3 -2
- package/dist/ai/index.js.map +1 -1
- package/dist/assets/fonts/NOTICE.md +25 -0
- package/dist/assets/fonts/SOURCES.json +47 -0
- package/dist/assets/fonts/fira-code.woff2 +0 -0
- package/dist/assets/fonts/inter.woff2 +0 -0
- package/dist/assets/fonts/jetbrains-mono.woff2 +0 -0
- package/dist/assets/fonts/playfair-display.woff2 +0 -0
- package/dist/assets/fonts/plus-jakarta-sans.woff2 +0 -0
- package/dist/assets/fonts/space-grotesk.woff2 +0 -0
- package/dist/chunk-3Q4RMZVQ.cjs +867 -0
- package/dist/chunk-3Q4RMZVQ.cjs.map +1 -0
- package/dist/chunk-HSVXH7DD.cjs +1624 -0
- package/dist/chunk-HSVXH7DD.cjs.map +1 -0
- package/dist/{chunk-NYLDRVHZ.js → chunk-I5RG2L3M.js} +4 -78
- package/dist/chunk-I5RG2L3M.js.map +1 -0
- package/dist/{chunk-7QHDWDSB.js → chunk-INAOTYLK.cjs} +437 -849
- package/dist/chunk-INAOTYLK.cjs.map +1 -0
- package/dist/{chunk-TGI6YSZP.cjs → chunk-JBGGQGSQ.cjs} +4 -80
- package/dist/chunk-JBGGQGSQ.cjs.map +1 -0
- package/dist/{chunk-JNTRKKJX.cjs → chunk-OCP2TAY2.js} +421 -868
- package/dist/chunk-OCP2TAY2.js.map +1 -0
- package/dist/chunk-V6X7D44H.js +854 -0
- package/dist/chunk-V6X7D44H.js.map +1 -0
- package/dist/chunk-VRXEXUHR.js +1610 -0
- package/dist/chunk-VRXEXUHR.js.map +1 -0
- package/dist/{click-css-Bcc1CkTN.d.cts → click-css-C8VciwZ6.d.cts} +1 -1
- package/dist/{click-css-B2s9B_uP.d.ts → click-css-COIiFo1I.d.ts} +1 -1
- package/dist/index.cjs +143 -110
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +62 -6
- package/dist/index.d.ts +62 -6
- package/dist/index.js +6 -5
- package/dist/index.js.map +1 -1
- package/dist/node/index.cjs +117 -0
- package/dist/node/index.cjs.map +1 -0
- package/dist/node/index.d.cts +36 -0
- package/dist/node/index.d.ts +36 -0
- package/dist/node/index.js +105 -0
- package/dist/node/index.js.map +1 -0
- package/dist/{presets-D_hfPJX9.d.ts → presets-DPRGtpO-.d.ts} +1 -1
- package/dist/{presets-BYvgAAkJ.d.cts → presets-MIi91wZg.d.cts} +1 -1
- package/dist/react/index.cjs +17 -16
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.d.cts +4 -3
- package/dist/react/index.d.ts +4 -3
- package/dist/react/index.js +4 -3
- package/dist/react/index.js.map +1 -1
- package/dist/skills/index.cjs +16 -12
- package/dist/skills/index.d.cts +36 -20
- package/dist/skills/index.d.ts +36 -20
- package/dist/skills/index.js +1 -1
- package/dist/{types-C3d04zzP.d.cts → types-CvxCxWus.d.cts} +1 -67
- package/dist/{types-C3d04zzP.d.ts → types-CvxCxWus.d.ts} +1 -67
- package/dist/types-k_eae8UV.d.cts +74 -0
- package/dist/types-k_eae8UV.d.ts +74 -0
- package/package.json +8 -2
- package/dist/chunk-6R6L6KSC.cjs +0 -601
- package/dist/chunk-6R6L6KSC.cjs.map +0 -1
- package/dist/chunk-7QHDWDSB.js.map +0 -1
- package/dist/chunk-BHJXQCVE.js +0 -588
- package/dist/chunk-BHJXQCVE.js.map +0 -1
- package/dist/chunk-JNTRKKJX.cjs.map +0 -1
- package/dist/chunk-NYLDRVHZ.js.map +0 -1
- package/dist/chunk-TGI6YSZP.cjs.map +0 -1
|
@@ -1,852 +1,78 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
// src/
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
let inCodeFence = false;
|
|
40
|
-
let lineIdx = 0;
|
|
41
|
-
if (lines.length > 0 && lines[0].trim() === "---") {
|
|
42
|
-
const fmBuffer = [lines[0]];
|
|
43
|
-
lineIdx = 1;
|
|
44
|
-
while (lineIdx < lines.length) {
|
|
45
|
-
const line = lines[lineIdx];
|
|
46
|
-
fmBuffer.push(line);
|
|
47
|
-
if (line.trim() === "---") {
|
|
48
|
-
frontmatter = fmBuffer.join("\n");
|
|
49
|
-
lineIdx++;
|
|
50
|
-
break;
|
|
51
|
-
}
|
|
52
|
-
lineIdx++;
|
|
53
|
-
}
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
// src/plugins/shiki.ts
|
|
4
|
+
var highlighterPromise = null;
|
|
5
|
+
var highlighterFailed = false;
|
|
6
|
+
var SUPPORTED_LANGS = [
|
|
7
|
+
"javascript",
|
|
8
|
+
"typescript",
|
|
9
|
+
"python",
|
|
10
|
+
"cpp",
|
|
11
|
+
"c",
|
|
12
|
+
"java",
|
|
13
|
+
"html",
|
|
14
|
+
"css",
|
|
15
|
+
"json",
|
|
16
|
+
"yaml",
|
|
17
|
+
"bash",
|
|
18
|
+
"shell",
|
|
19
|
+
"sql",
|
|
20
|
+
"go",
|
|
21
|
+
"rust",
|
|
22
|
+
"swift",
|
|
23
|
+
"kotlin",
|
|
24
|
+
"ruby",
|
|
25
|
+
"php",
|
|
26
|
+
"xml",
|
|
27
|
+
"markdown",
|
|
28
|
+
"dockerfile",
|
|
29
|
+
"toml",
|
|
30
|
+
"ini",
|
|
31
|
+
"graphql",
|
|
32
|
+
"prisma",
|
|
33
|
+
"solidity"
|
|
34
|
+
];
|
|
35
|
+
async function getHighlighter() {
|
|
36
|
+
if (highlighterFailed) {
|
|
37
|
+
highlighterPromise = null;
|
|
38
|
+
highlighterFailed = false;
|
|
54
39
|
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
67
|
-
currentBuffer.push(line);
|
|
40
|
+
if (!highlighterPromise) {
|
|
41
|
+
highlighterPromise = import('shiki').then(
|
|
42
|
+
(mod) => mod.createHighlighter({
|
|
43
|
+
themes: ["vitesse-dark", "vitesse-light"],
|
|
44
|
+
langs: [...SUPPORTED_LANGS]
|
|
45
|
+
})
|
|
46
|
+
).catch((err) => {
|
|
47
|
+
highlighterPromise = null;
|
|
48
|
+
highlighterFailed = true;
|
|
49
|
+
throw new Error(`[presentation-kit] Failed to load Shiki highlighter: ${err}`);
|
|
50
|
+
});
|
|
68
51
|
}
|
|
69
|
-
|
|
70
|
-
const slides = slideBuffers.map((b) => b.join("\n"));
|
|
71
|
-
return { frontmatter, slides };
|
|
52
|
+
return highlighterPromise;
|
|
72
53
|
}
|
|
73
|
-
function
|
|
74
|
-
|
|
75
|
-
if (slideIndex < 0 || slideIndex >= slides.length) {
|
|
76
|
-
return markdown;
|
|
77
|
-
}
|
|
78
|
-
let slideContent = slides[slideIndex];
|
|
79
|
-
const layoutCommentRegex = /<!--\s*layout:\s*[\s\S]*?-->/i;
|
|
80
|
-
const newComment = layout && layout.boxes && layout.boxes.length > 0 ? serializeLayoutToComment(layout) : "";
|
|
81
|
-
if (layoutCommentRegex.test(slideContent)) {
|
|
82
|
-
if (newComment) {
|
|
83
|
-
slideContent = slideContent.replace(layoutCommentRegex, newComment);
|
|
84
|
-
} else {
|
|
85
|
-
slideContent = slideContent.replace(layoutCommentRegex, "").trim();
|
|
86
|
-
}
|
|
87
|
-
} else if (newComment) {
|
|
88
|
-
const trimmed = slideContent.trimStart();
|
|
89
|
-
slideContent = `${newComment}
|
|
90
|
-
|
|
91
|
-
${trimmed}`;
|
|
92
|
-
}
|
|
93
|
-
slides[slideIndex] = slideContent;
|
|
94
|
-
const joinedSlides = slides.join("\n---\n");
|
|
95
|
-
if (frontmatter) {
|
|
96
|
-
return `${frontmatter}
|
|
97
|
-
|
|
98
|
-
${joinedSlides}`;
|
|
99
|
-
}
|
|
100
|
-
return joinedSlides;
|
|
54
|
+
function decodeHtmlEntities(html) {
|
|
55
|
+
return html.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, '"').replace(/'/g, "'").replace(/'/g, "'").replace(/ /g, " ").replace(/&#(\d+);/g, (_, code) => String.fromCharCode(Number(code))).replace(/&#x([0-9a-fA-F]+);/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)));
|
|
101
56
|
}
|
|
102
|
-
function
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
return markdown;
|
|
106
|
-
}
|
|
107
|
-
const cleanOld = oldText.trim();
|
|
108
|
-
const cleanNew = newText.trim();
|
|
109
|
-
if (!cleanOld || cleanOld === cleanNew) return markdown;
|
|
110
|
-
let slideContent = slides[slideIndex];
|
|
111
|
-
if (slideContent.includes(cleanOld)) {
|
|
112
|
-
slideContent = slideContent.replace(cleanOld, cleanNew);
|
|
113
|
-
} else {
|
|
114
|
-
const lines = slideContent.split("\n");
|
|
115
|
-
let replaced = false;
|
|
116
|
-
for (let i = 0; i < lines.length; i++) {
|
|
117
|
-
const line = lines[i];
|
|
118
|
-
const stripped = line.replace(/^[#\s\-\*\>]+/, "").replace(/[*_`]/g, "").trim();
|
|
119
|
-
if (stripped === cleanOld) {
|
|
120
|
-
const prefixMatch = line.match(/^([#\s\-\*\>]+)/);
|
|
121
|
-
const prefix = prefixMatch ? prefixMatch[1] : "";
|
|
122
|
-
lines[i] = `${prefix}${cleanNew}`;
|
|
123
|
-
replaced = true;
|
|
124
|
-
break;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
if (replaced) {
|
|
128
|
-
slideContent = lines.join("\n");
|
|
129
|
-
} else {
|
|
130
|
-
const escaped = cleanOld.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
131
|
-
const regex = new RegExp(escaped, "i");
|
|
132
|
-
if (regex.test(slideContent)) {
|
|
133
|
-
slideContent = slideContent.replace(regex, cleanNew);
|
|
134
|
-
} else {
|
|
135
|
-
const words = cleanOld.split(/\s+/).filter((w) => w.length > 2);
|
|
136
|
-
if (words.length > 0) {
|
|
137
|
-
const pattern = words.map((w) => w.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("[\\s\\S]*?");
|
|
138
|
-
const fuzzyRegex = new RegExp(pattern, "i");
|
|
139
|
-
if (fuzzyRegex.test(slideContent)) {
|
|
140
|
-
slideContent = slideContent.replace(fuzzyRegex, cleanNew);
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
slides[slideIndex] = slideContent;
|
|
147
|
-
const joinedSlides = slides.join("\n---\n");
|
|
148
|
-
if (frontmatter) {
|
|
149
|
-
return `${frontmatter}
|
|
150
|
-
|
|
151
|
-
${joinedSlides}`;
|
|
152
|
-
}
|
|
153
|
-
return joinedSlides;
|
|
57
|
+
function getShikiTheme(theme) {
|
|
58
|
+
if (theme === "light") return "vitesse-light";
|
|
59
|
+
return "vitesse-dark";
|
|
154
60
|
}
|
|
155
|
-
function
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
const stripped = line.replace(/^[#\s\-\*\>]+/, "").replace(/[*_`]/g, "").trim();
|
|
168
|
-
if (stripped === cleanContent || line.includes(cleanContent)) {
|
|
169
|
-
removed = true;
|
|
170
|
-
return false;
|
|
171
|
-
}
|
|
172
|
-
return true;
|
|
173
|
-
});
|
|
174
|
-
if (removed) {
|
|
175
|
-
slideContent = updatedLines.join("\n");
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
const layoutCommentRegex = /<!--\s*layout:\s*([\s\S]*?)-->/i;
|
|
179
|
-
const match = slideContent.match(layoutCommentRegex);
|
|
180
|
-
if (match && match[1]) {
|
|
181
|
-
try {
|
|
182
|
-
const parsed = yaml.load(match[1]);
|
|
183
|
-
if (parsed && Array.isArray(parsed.boxes)) {
|
|
184
|
-
const remainingBoxes = parsed.boxes.filter((b) => {
|
|
185
|
-
if (options.boxId && b.id === options.boxId) return false;
|
|
186
|
-
if (options.target && b.target === options.target) return false;
|
|
187
|
-
return true;
|
|
188
|
-
});
|
|
189
|
-
if (remainingBoxes.length > 0) {
|
|
190
|
-
const yamlStr = yaml.dump({ boxes: remainingBoxes }, { indent: 2, lineWidth: -1, noRefs: true }).trim();
|
|
191
|
-
slideContent = slideContent.replace(layoutCommentRegex, `<!-- layout:
|
|
192
|
-
${yamlStr.split("\n").join("\n ")}
|
|
193
|
-
-->`);
|
|
194
|
-
} else {
|
|
195
|
-
slideContent = slideContent.replace(layoutCommentRegex, "").trim();
|
|
196
|
-
}
|
|
61
|
+
async function highlightCodeBlocks(html, theme = "dark") {
|
|
62
|
+
if (!html.includes("<pre><code")) return html;
|
|
63
|
+
const highlighter = await getHighlighter();
|
|
64
|
+
const shikiTheme = getShikiTheme(theme);
|
|
65
|
+
return html.replace(
|
|
66
|
+
/<pre><code class="language-(\w+)">([\s\S]*?)<\/code><\/pre>/g,
|
|
67
|
+
(_, lang, code) => {
|
|
68
|
+
const decoded = decodeHtmlEntities(code);
|
|
69
|
+
try {
|
|
70
|
+
return highlighter.codeToHtml(decoded, { lang, theme: shikiTheme });
|
|
71
|
+
} catch {
|
|
72
|
+
return `<pre><code class="language-${lang}">${code}</code></pre>`;
|
|
197
73
|
}
|
|
198
|
-
} catch {
|
|
199
74
|
}
|
|
200
|
-
|
|
201
|
-
slides[slideIndex] = slideContent;
|
|
202
|
-
const joinedSlides = slides.join("\n---\n");
|
|
203
|
-
if (frontmatter) {
|
|
204
|
-
return `${frontmatter}
|
|
205
|
-
|
|
206
|
-
${joinedSlides}`;
|
|
207
|
-
}
|
|
208
|
-
return joinedSlides;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
// src/core/layout/presets.ts
|
|
212
|
-
var SLIDE_LAYOUT_PRESETS = [
|
|
213
|
-
{
|
|
214
|
-
id: "title-hero",
|
|
215
|
-
name: "Title & Speaker Cover",
|
|
216
|
-
category: "cover",
|
|
217
|
-
description: "High-impact opening slide with large title, subtitle, and speaker credentials.",
|
|
218
|
-
layout: {
|
|
219
|
-
boxes: [
|
|
220
|
-
{
|
|
221
|
-
id: "title",
|
|
222
|
-
target: "h1",
|
|
223
|
-
pos: [100, 180, 1080, 140],
|
|
224
|
-
fontSize: "3rem",
|
|
225
|
-
textAlign: "center"
|
|
226
|
-
},
|
|
227
|
-
{
|
|
228
|
-
id: "subtitle",
|
|
229
|
-
target: "h3",
|
|
230
|
-
pos: [100, 350, 1080, 70],
|
|
231
|
-
fontSize: "1.5rem",
|
|
232
|
-
textAlign: "center"
|
|
233
|
-
},
|
|
234
|
-
{
|
|
235
|
-
id: "speaker-meta",
|
|
236
|
-
target: "p",
|
|
237
|
-
pos: [100, 460, 1080, 80],
|
|
238
|
-
fontSize: "1.1rem",
|
|
239
|
-
textAlign: "center"
|
|
240
|
-
}
|
|
241
|
-
]
|
|
242
|
-
},
|
|
243
|
-
markdownSnippet: `<!-- layout:
|
|
244
|
-
boxes:
|
|
245
|
-
- id: title
|
|
246
|
-
target: h1
|
|
247
|
-
pos: [100, 180, 1080, 140]
|
|
248
|
-
fontSize: 3rem
|
|
249
|
-
textAlign: center
|
|
250
|
-
- id: subtitle
|
|
251
|
-
target: h3
|
|
252
|
-
pos: [100, 350, 1080, 70]
|
|
253
|
-
fontSize: 1.5rem
|
|
254
|
-
textAlign: center
|
|
255
|
-
- id: speaker-meta
|
|
256
|
-
target: p
|
|
257
|
-
pos: [100, 460, 1080, 80]
|
|
258
|
-
fontSize: 1.1rem
|
|
259
|
-
textAlign: center
|
|
260
|
-
-->
|
|
261
|
-
|
|
262
|
-
# \u{1F680} Engineering Scalable Cloud Systems
|
|
263
|
-
### Principles, Bottlenecks, and Real-World Architecture Patterns
|
|
264
|
-
|
|
265
|
-
**Presenter:** Senior Systems Architect | **Duration:** 45 mins | **Level:** Intermediate
|
|
266
|
-
|
|
267
|
-
<!--
|
|
268
|
-
Presenter Notes:
|
|
269
|
-
- Welcome the audience and outline today's primary engineering goals.
|
|
270
|
-
- Spark curiosity with an opening hook about scaling under high concurrency.
|
|
271
|
-
-->`
|
|
272
|
-
},
|
|
273
|
-
{
|
|
274
|
-
id: "two-column-split",
|
|
275
|
-
name: "Two-Column Comparison",
|
|
276
|
-
category: "split",
|
|
277
|
-
description: "Balanced side-by-side comparison for legacy vs modern patterns or pros vs cons.",
|
|
278
|
-
layout: {
|
|
279
|
-
boxes: [
|
|
280
|
-
{
|
|
281
|
-
id: "heading",
|
|
282
|
-
target: "h2",
|
|
283
|
-
pos: [80, 50, 1120, 70],
|
|
284
|
-
fontSize: "2rem"
|
|
285
|
-
},
|
|
286
|
-
{
|
|
287
|
-
id: "col-left",
|
|
288
|
-
target: ".columns-2 > div:first-child",
|
|
289
|
-
pos: [80, 150, 530, 510]
|
|
290
|
-
},
|
|
291
|
-
{
|
|
292
|
-
id: "col-right",
|
|
293
|
-
target: ".columns-2 > div:last-child",
|
|
294
|
-
pos: [670, 150, 530, 510]
|
|
295
|
-
}
|
|
296
|
-
]
|
|
297
|
-
},
|
|
298
|
-
markdownSnippet: `<!-- layout:
|
|
299
|
-
boxes:
|
|
300
|
-
- id: heading
|
|
301
|
-
target: h2
|
|
302
|
-
pos: [80, 50, 1120, 70]
|
|
303
|
-
fontSize: 2rem
|
|
304
|
-
- id: col-left
|
|
305
|
-
target: '.columns-2 > div:first-child'
|
|
306
|
-
pos: [80, 150, 530, 510]
|
|
307
|
-
- id: col-right
|
|
308
|
-
target: '.columns-2 > div:last-child'
|
|
309
|
-
pos: [670, 150, 530, 510]
|
|
310
|
-
-->
|
|
311
|
-
|
|
312
|
-
## \u2696\uFE0F Monolithic Polling vs Event-Driven Architecture
|
|
313
|
-
|
|
314
|
-
<div class="columns-2">
|
|
315
|
-
<div>
|
|
316
|
-
|
|
317
|
-
### \u{1F534} Legacy Polling
|
|
318
|
-
- Heavy database CPU overhead on idle cycles
|
|
319
|
-
- High network latency between updates
|
|
320
|
-
- Prone to cascading timeouts during spikes
|
|
321
|
-
|
|
322
|
-
</div>
|
|
323
|
-
<div>
|
|
324
|
-
|
|
325
|
-
### \u{1F7E2} Event-Driven Streams
|
|
326
|
-
- Real-time event propagation via webhooks
|
|
327
|
-
- Zero idle compute waste with serverless consumers
|
|
328
|
-
- Automatic backpressure and queue isolation
|
|
329
|
-
|
|
330
|
-
</div>
|
|
331
|
-
</div>
|
|
332
|
-
|
|
333
|
-
<!--
|
|
334
|
-
Presenter Notes:
|
|
335
|
-
- Emphasize the core failure mode of periodic polling under sudden load spikes.
|
|
336
|
-
- Ask the room if anyone has experienced database lockups caused by polling loops.
|
|
337
|
-
-->`
|
|
338
|
-
},
|
|
339
|
-
{
|
|
340
|
-
id: "code-explainer",
|
|
341
|
-
name: "Code Walkthrough & Analysis",
|
|
342
|
-
category: "code",
|
|
343
|
-
description: "Syntax-highlighted code block on the left with step-by-step key annotations on the right.",
|
|
344
|
-
layout: {
|
|
345
|
-
boxes: [
|
|
346
|
-
{
|
|
347
|
-
id: "heading",
|
|
348
|
-
target: "h2",
|
|
349
|
-
pos: [80, 45, 1120, 65],
|
|
350
|
-
fontSize: "1.9rem"
|
|
351
|
-
},
|
|
352
|
-
{
|
|
353
|
-
id: "code-box",
|
|
354
|
-
target: ".columns-2 > div:first-child",
|
|
355
|
-
pos: [80, 135, 630, 535]
|
|
356
|
-
},
|
|
357
|
-
{
|
|
358
|
-
id: "notes-box",
|
|
359
|
-
target: ".columns-2 > div:last-child",
|
|
360
|
-
pos: [740, 135, 460, 535]
|
|
361
|
-
}
|
|
362
|
-
]
|
|
363
|
-
},
|
|
364
|
-
markdownSnippet: `<!-- layout:
|
|
365
|
-
boxes:
|
|
366
|
-
- id: heading
|
|
367
|
-
target: h2
|
|
368
|
-
pos: [80, 45, 1120, 65]
|
|
369
|
-
fontSize: 1.9rem
|
|
370
|
-
- id: code-box
|
|
371
|
-
target: '.columns-2 > div:first-child'
|
|
372
|
-
pos: [80, 135, 630, 535]
|
|
373
|
-
- id: notes-box
|
|
374
|
-
target: '.columns-2 > div:last-child'
|
|
375
|
-
pos: [740, 135, 460, 535]
|
|
376
|
-
-->
|
|
377
|
-
|
|
378
|
-
## \u{1F4BB} Robust Async Transaction Pipeline
|
|
379
|
-
|
|
380
|
-
<div class="columns-2">
|
|
381
|
-
<div>
|
|
382
|
-
|
|
383
|
-
\`\`\`ts
|
|
384
|
-
// Process payment with idempotency guarantee
|
|
385
|
-
export async function processPayment(order: Order) {
|
|
386
|
-
const isValid = await validateOrder(order);
|
|
387
|
-
if (!isValid) throw new Error("ValidationFailed");
|
|
388
|
-
|
|
389
|
-
const receipt = await chargeCard(order);
|
|
390
|
-
return sendConfirmation(receipt);
|
|
391
|
-
}
|
|
392
|
-
\`\`\`
|
|
393
|
-
|
|
394
|
-
</div>
|
|
395
|
-
<div>
|
|
396
|
-
|
|
397
|
-
### \u{1F50D} Key Engineering Invariants:
|
|
398
|
-
1. **Early Guard Clause:** Validates payload immediately at line 3 before triggering external calls.
|
|
399
|
-
2. **Deterministic Sequence:** Enforces strict order of operations using native \`await\`.
|
|
400
|
-
3. **Audit Trail:** Returns immutable payment receipt upon successful execution.
|
|
401
|
-
|
|
402
|
-
</div>
|
|
403
|
-
</div>
|
|
404
|
-
|
|
405
|
-
<!--
|
|
406
|
-
Presenter Notes:
|
|
407
|
-
- Walk through lines 1 to 7 sequentially.
|
|
408
|
-
- Cold-call check: "What happens if line 6 throws a network timeout?"
|
|
409
|
-
- Cognitive scaffolding: Highlight the importance of idempotency keys in payment APIs.
|
|
410
|
-
-->`
|
|
411
|
-
},
|
|
412
|
-
{
|
|
413
|
-
id: "metrics-3-card",
|
|
414
|
-
name: "3-Metric Key Results Grid",
|
|
415
|
-
category: "metrics",
|
|
416
|
-
description: "Three high-visibility KPI stat cards for benchmarks, impact, and success criteria.",
|
|
417
|
-
layout: {
|
|
418
|
-
boxes: [
|
|
419
|
-
{
|
|
420
|
-
id: "heading",
|
|
421
|
-
target: "h2",
|
|
422
|
-
pos: [80, 50, 1120, 70],
|
|
423
|
-
fontSize: "2rem",
|
|
424
|
-
textAlign: "center"
|
|
425
|
-
},
|
|
426
|
-
{
|
|
427
|
-
id: "metric-1",
|
|
428
|
-
target: ".columns-3 > div:nth-child(1)",
|
|
429
|
-
pos: [80, 165, 340, 485]
|
|
430
|
-
},
|
|
431
|
-
{
|
|
432
|
-
id: "metric-2",
|
|
433
|
-
target: ".columns-3 > div:nth-child(2)",
|
|
434
|
-
pos: [470, 165, 340, 485]
|
|
435
|
-
},
|
|
436
|
-
{
|
|
437
|
-
id: "metric-3",
|
|
438
|
-
target: ".columns-3 > div:nth-child(3)",
|
|
439
|
-
pos: [860, 165, 340, 485]
|
|
440
|
-
}
|
|
441
|
-
]
|
|
442
|
-
},
|
|
443
|
-
markdownSnippet: `<!-- layout:
|
|
444
|
-
boxes:
|
|
445
|
-
- id: heading
|
|
446
|
-
target: h2
|
|
447
|
-
pos: [80, 50, 1120, 70]
|
|
448
|
-
fontSize: 2rem
|
|
449
|
-
textAlign: center
|
|
450
|
-
- id: metric-1
|
|
451
|
-
target: '.columns-3 > div:nth-child(1)'
|
|
452
|
-
pos: [80, 165, 340, 485]
|
|
453
|
-
- id: metric-2
|
|
454
|
-
target: '.columns-3 > div:nth-child(2)'
|
|
455
|
-
pos: [470, 165, 340, 485]
|
|
456
|
-
- id: metric-3
|
|
457
|
-
target: '.columns-3 > div:nth-child(3)'
|
|
458
|
-
pos: [860, 165, 340, 485]
|
|
459
|
-
-->
|
|
460
|
-
|
|
461
|
-
## \u{1F4CA} Performance & Reliability Benchmarks
|
|
462
|
-
|
|
463
|
-
<div class="columns-3">
|
|
464
|
-
<div>
|
|
465
|
-
|
|
466
|
-
# \u26A1 99.99%
|
|
467
|
-
### SLA Availability
|
|
468
|
-
High-availability multi-region cluster with automated failover routing.
|
|
469
|
-
|
|
470
|
-
</div>
|
|
471
|
-
<div>
|
|
472
|
-
|
|
473
|
-
# \u{1F680} 15ms
|
|
474
|
-
### P99 Latency
|
|
475
|
-
Sub-20ms roundtrip response time via distributed edge caching.
|
|
476
|
-
|
|
477
|
-
</div>
|
|
478
|
-
<div>
|
|
479
|
-
|
|
480
|
-
# \u{1F6E1}\uFE0F Zero
|
|
481
|
-
### Unhandled Breaches
|
|
482
|
-
Full SOC2 Type II compliance and end-to-end payload encryption.
|
|
483
|
-
|
|
484
|
-
</div>
|
|
485
|
-
</div>
|
|
486
|
-
|
|
487
|
-
<!--
|
|
488
|
-
Presenter Notes:
|
|
489
|
-
- Highlight the 15ms P99 latency target as the primary technical milestone.
|
|
490
|
-
- Connect these metrics directly to the architecture decisions discussed next.
|
|
491
|
-
-->`
|
|
492
|
-
},
|
|
493
|
-
{
|
|
494
|
-
id: "process-flow",
|
|
495
|
-
name: "Architecture & Process Flow",
|
|
496
|
-
category: "diagram",
|
|
497
|
-
description: "Multi-stage workflow with responsive Mermaid diagram and phase summaries.",
|
|
498
|
-
layout: {
|
|
499
|
-
boxes: [
|
|
500
|
-
{
|
|
501
|
-
id: "heading",
|
|
502
|
-
target: "h2",
|
|
503
|
-
pos: [80, 45, 1120, 65],
|
|
504
|
-
fontSize: "1.9rem"
|
|
505
|
-
},
|
|
506
|
-
{
|
|
507
|
-
id: "diagram-box",
|
|
508
|
-
target: "pre.mermaid, .mermaid",
|
|
509
|
-
pos: [80, 130, 1120, 310]
|
|
510
|
-
},
|
|
511
|
-
{
|
|
512
|
-
id: "summary-box",
|
|
513
|
-
target: "ul, p",
|
|
514
|
-
pos: [80, 465, 1120, 205]
|
|
515
|
-
}
|
|
516
|
-
]
|
|
517
|
-
},
|
|
518
|
-
markdownSnippet: `<!-- layout:
|
|
519
|
-
boxes:
|
|
520
|
-
- id: heading
|
|
521
|
-
target: h2
|
|
522
|
-
pos: [80, 45, 1120, 65]
|
|
523
|
-
fontSize: 1.9rem
|
|
524
|
-
- id: diagram-box
|
|
525
|
-
target: 'pre.mermaid, .mermaid'
|
|
526
|
-
pos: [80, 130, 1120, 310]
|
|
527
|
-
- id: summary-box
|
|
528
|
-
target: 'ul, p'
|
|
529
|
-
pos: [80, 465, 1120, 205]
|
|
530
|
-
-->
|
|
531
|
-
|
|
532
|
-
## \u{1F504} End-to-End Data Ingestion Pipeline
|
|
533
|
-
|
|
534
|
-
\`\`\`mermaid
|
|
535
|
-
graph LR
|
|
536
|
-
A[1. Client Ingress] --> B[2. API Gateway]
|
|
537
|
-
B --> C[3. Auth Verifier]
|
|
538
|
-
C --> D[4. Distributed DB]
|
|
539
|
-
style A fill:#0284c7,stroke:#38bdf8,stroke-width:2px,color:#fff
|
|
540
|
-
style B fill:#1e293b,stroke:#64748b,stroke-width:2px,color:#fff
|
|
541
|
-
style C fill:#059669,stroke:#34d399,stroke-width:2px,color:#fff
|
|
542
|
-
style D fill:#7c3aed,stroke:#a78bfa,stroke-width:2px,color:#fff
|
|
543
|
-
\`\`\`
|
|
544
|
-
|
|
545
|
-
- **Ingress & Gateway:** Rate-limits traffic and applies reverse-proxy load balancing.
|
|
546
|
-
- **Verification & Storage:** Decodes cryptographic JWT tokens before transactional write commit.
|
|
547
|
-
|
|
548
|
-
<!--
|
|
549
|
-
Presenter Notes:
|
|
550
|
-
- Trace each hop across the diagram from left to right.
|
|
551
|
-
- Ask: "Where should rate limiting be applied to prevent DDoS attacks?"
|
|
552
|
-
-->`
|
|
553
|
-
},
|
|
554
|
-
{
|
|
555
|
-
id: "quote-highlight",
|
|
556
|
-
name: "Core Principle & Quote Highlight",
|
|
557
|
-
category: "quote",
|
|
558
|
-
description: "Prominent quote callout for fundamental engineering rules or memorable mantras.",
|
|
559
|
-
layout: {
|
|
560
|
-
boxes: [
|
|
561
|
-
{
|
|
562
|
-
id: "heading",
|
|
563
|
-
target: "h2",
|
|
564
|
-
pos: [100, 100, 1080, 80],
|
|
565
|
-
fontSize: "2.2rem",
|
|
566
|
-
textAlign: "center"
|
|
567
|
-
},
|
|
568
|
-
{
|
|
569
|
-
id: "quote-box",
|
|
570
|
-
target: "blockquote",
|
|
571
|
-
pos: [140, 230, 1e3, 360],
|
|
572
|
-
fontSize: "1.4rem"
|
|
573
|
-
}
|
|
574
|
-
]
|
|
575
|
-
},
|
|
576
|
-
markdownSnippet: `<!-- layout:
|
|
577
|
-
boxes:
|
|
578
|
-
- id: heading
|
|
579
|
-
target: h2
|
|
580
|
-
pos: [100, 100, 1080, 80]
|
|
581
|
-
fontSize: 2.2rem
|
|
582
|
-
textAlign: center
|
|
583
|
-
- id: quote-box
|
|
584
|
-
target: blockquote
|
|
585
|
-
pos: [140, 230, 1000, 360]
|
|
586
|
-
fontSize: 1.4rem
|
|
587
|
-
-->
|
|
588
|
-
|
|
589
|
-
## \u{1F4A1} Foundational Architecture Principle
|
|
590
|
-
|
|
591
|
-
> "Simplicity is prerequisite for reliability. A well-engineered distributed system is one where a new engineer can understand the request flow within their first hour."
|
|
592
|
-
>
|
|
593
|
-
> \u2014 **Edsger W. Dijkstra**
|
|
594
|
-
|
|
595
|
-
<!--
|
|
596
|
-
Presenter Notes:
|
|
597
|
-
- Pause for 5 seconds of silence to let the quote sink in.
|
|
598
|
-
- Ask: "How do our current architectural choices reflect this principle?"
|
|
599
|
-
-->`
|
|
600
|
-
},
|
|
601
|
-
{
|
|
602
|
-
id: "quiz-checkpoint",
|
|
603
|
-
name: "Interactive Formative Checkpoint",
|
|
604
|
-
category: "assessment",
|
|
605
|
-
description: "Interactive multiple-choice diagnostic checkpoint with A/B/C/D voting options.",
|
|
606
|
-
layout: {
|
|
607
|
-
boxes: [
|
|
608
|
-
{
|
|
609
|
-
id: "heading",
|
|
610
|
-
target: "h2",
|
|
611
|
-
pos: [80, 45, 1120, 65],
|
|
612
|
-
fontSize: "1.9rem"
|
|
613
|
-
},
|
|
614
|
-
{
|
|
615
|
-
id: "question-callout",
|
|
616
|
-
target: "blockquote",
|
|
617
|
-
pos: [80, 130, 1120, 110],
|
|
618
|
-
fontSize: "1.2rem"
|
|
619
|
-
},
|
|
620
|
-
{
|
|
621
|
-
id: "options-list",
|
|
622
|
-
target: "ul",
|
|
623
|
-
pos: [80, 260, 1120, 390],
|
|
624
|
-
fontSize: "1.15rem"
|
|
625
|
-
}
|
|
626
|
-
]
|
|
627
|
-
},
|
|
628
|
-
markdownSnippet: `<!-- layout:
|
|
629
|
-
boxes:
|
|
630
|
-
- id: heading
|
|
631
|
-
target: h2
|
|
632
|
-
pos: [80, 45, 1120, 65]
|
|
633
|
-
fontSize: 1.9rem
|
|
634
|
-
- id: question-callout
|
|
635
|
-
target: blockquote
|
|
636
|
-
pos: [80, 130, 1120, 110]
|
|
637
|
-
fontSize: 1.2rem
|
|
638
|
-
- id: options-list
|
|
639
|
-
target: ul
|
|
640
|
-
pos: [80, 260, 1120, 390]
|
|
641
|
-
fontSize: 1.15rem
|
|
642
|
-
-->
|
|
643
|
-
|
|
644
|
-
## \u{1F3AF} Formative Checkpoint: Verify Your Understanding
|
|
645
|
-
|
|
646
|
-
> **Question:** In an event-driven architecture, which pattern guarantees that messages are never permanently lost if a downstream consumer crashes?
|
|
647
|
-
|
|
648
|
-
- **A.** Direct HTTP POST call with a short 2-second timeout
|
|
649
|
-
- **B.** Persistent Message Broker with Dead-Letter Queue (DLQ) & retry policy
|
|
650
|
-
- **C.** In-memory client RAM cache without disk persistence
|
|
651
|
-
- **D.** Discarding failed packets and prompting the user to re-submit
|
|
652
|
-
|
|
653
|
-
<!--
|
|
654
|
-
Presenter Notes:
|
|
655
|
-
- Give students 30 seconds to vote on option A, B, C, or D.
|
|
656
|
-
- Correct answer: B.
|
|
657
|
-
- Explain why options A and C introduce catastrophic data loss in production.
|
|
658
|
-
-->`
|
|
659
|
-
},
|
|
660
|
-
{
|
|
661
|
-
id: "tiered-practice-3cards",
|
|
662
|
-
name: "Tiered Differentiation (Bronze / Silver / Gold)",
|
|
663
|
-
category: "content",
|
|
664
|
-
description: "Three progressive competency tiers allowing self-paced learning acceleration.",
|
|
665
|
-
layout: {
|
|
666
|
-
boxes: [
|
|
667
|
-
{
|
|
668
|
-
id: "heading",
|
|
669
|
-
target: "h2",
|
|
670
|
-
pos: [80, 45, 1120, 65],
|
|
671
|
-
fontSize: "1.9rem"
|
|
672
|
-
},
|
|
673
|
-
{
|
|
674
|
-
id: "tier-bronze",
|
|
675
|
-
target: ".columns-3 > div:nth-child(1)",
|
|
676
|
-
pos: [80, 140, 350, 520]
|
|
677
|
-
},
|
|
678
|
-
{
|
|
679
|
-
id: "tier-silver",
|
|
680
|
-
target: ".columns-3 > div:nth-child(2)",
|
|
681
|
-
pos: [465, 140, 350, 520]
|
|
682
|
-
},
|
|
683
|
-
{
|
|
684
|
-
id: "tier-gold",
|
|
685
|
-
target: ".columns-3 > div:nth-child(3)",
|
|
686
|
-
pos: [850, 140, 350, 520]
|
|
687
|
-
}
|
|
688
|
-
]
|
|
689
|
-
},
|
|
690
|
-
markdownSnippet: `<!-- layout:
|
|
691
|
-
boxes:
|
|
692
|
-
- id: heading
|
|
693
|
-
target: h2
|
|
694
|
-
pos: [80, 45, 1120, 65]
|
|
695
|
-
fontSize: 1.9rem
|
|
696
|
-
- id: tier-bronze
|
|
697
|
-
target: '.columns-3 > div:nth-child(1)'
|
|
698
|
-
pos: [80, 140, 350, 520]
|
|
699
|
-
- id: tier-silver
|
|
700
|
-
target: '.columns-3 > div:nth-child(2)'
|
|
701
|
-
pos: [465, 140, 350, 520]
|
|
702
|
-
- id: tier-gold
|
|
703
|
-
target: '.columns-3 > div:nth-child(3)'
|
|
704
|
-
pos: [850, 140, 350, 520]
|
|
705
|
-
-->
|
|
706
|
-
|
|
707
|
-
## \u{1F6E0}\uFE0F Hands-On Challenge: 3-Tier Differentiation
|
|
708
|
-
|
|
709
|
-
<div class="columns-3">
|
|
710
|
-
<div>
|
|
711
|
-
|
|
712
|
-
### \u{1F949} Bronze Tier
|
|
713
|
-
- Implement basic handler logic
|
|
714
|
-
- Pass 3 baseline unit tests
|
|
715
|
-
- *Goal: Foundational mastery*
|
|
716
|
-
|
|
717
|
-
</div>
|
|
718
|
-
<div>
|
|
719
|
-
|
|
720
|
-
### \u{1F948} Silver Tier
|
|
721
|
-
- Add boundary error handling
|
|
722
|
-
- Enforce O(N) memory complexity
|
|
723
|
-
- *Goal: Production-ready code*
|
|
724
|
-
|
|
725
|
-
</div>
|
|
726
|
-
<div>
|
|
727
|
-
|
|
728
|
-
### \u{1F947} Gold Tier
|
|
729
|
-
- Design distributed retry queue
|
|
730
|
-
- Add 95% automated test coverage
|
|
731
|
-
- *Goal: Architectural leadership*
|
|
732
|
-
|
|
733
|
-
</div>
|
|
734
|
-
</div>
|
|
735
|
-
|
|
736
|
-
<!--
|
|
737
|
-
Presenter Notes:
|
|
738
|
-
- All learners begin at Bronze to establish baseline competency.
|
|
739
|
-
- Accelerate self-directed learners to Silver and Gold as they complete each tier.
|
|
740
|
-
-->`
|
|
741
|
-
},
|
|
742
|
-
{
|
|
743
|
-
id: "agenda-timeline",
|
|
744
|
-
name: "Session Agenda & Milestones",
|
|
745
|
-
category: "content",
|
|
746
|
-
description: "Structured time-budgeted agenda mapping stages to measurable deliverables.",
|
|
747
|
-
layout: {
|
|
748
|
-
boxes: [
|
|
749
|
-
{
|
|
750
|
-
id: "heading",
|
|
751
|
-
target: "h2",
|
|
752
|
-
pos: [80, 45, 1120, 65],
|
|
753
|
-
fontSize: "1.9rem"
|
|
754
|
-
},
|
|
755
|
-
{
|
|
756
|
-
id: "table-box",
|
|
757
|
-
target: "table",
|
|
758
|
-
pos: [80, 140, 1120, 520]
|
|
759
|
-
}
|
|
760
|
-
]
|
|
761
|
-
},
|
|
762
|
-
markdownSnippet: `<!-- layout:
|
|
763
|
-
boxes:
|
|
764
|
-
- id: heading
|
|
765
|
-
target: h2
|
|
766
|
-
pos: [80, 45, 1120, 65]
|
|
767
|
-
fontSize: 1.9rem
|
|
768
|
-
- id: table-box
|
|
769
|
-
target: table
|
|
770
|
-
pos: [80, 140, 1120, 520]
|
|
771
|
-
-->
|
|
772
|
-
|
|
773
|
-
## \u{1F5FA}\uFE0F Milestone Roadmap & Time Budget
|
|
774
|
-
|
|
775
|
-
| Allocated Time | Session Stage | Core Learning Focus | Deliverable Milestone |
|
|
776
|
-
|:---:|---|---|---|
|
|
777
|
-
| **05 mins** | Warm-Up | Real-World Scenario & Context | Identify system bottleneck |
|
|
778
|
-
| **15 mins** | Concept Discovery | Core Architectural Patterns | Deconstruct message queue models |
|
|
779
|
-
| **20 mins** | Hands-On Lab | Tiered Code Implementation | Complete Bronze + Silver tasks |
|
|
780
|
-
| **05 mins** | Wrap-Up | Formative Checkpoint & Debrief | Consolidate key principles |
|
|
781
|
-
|
|
782
|
-
<!--
|
|
783
|
-
Presenter Notes:
|
|
784
|
-
- Walk through the time budget so students understand expectations and pacing.
|
|
785
|
-
-->`
|
|
786
|
-
},
|
|
787
|
-
{
|
|
788
|
-
id: "takeaways-summary",
|
|
789
|
-
name: "Key Takeaways & Wrap-up",
|
|
790
|
-
category: "content",
|
|
791
|
-
description: "Three memorable synthesis takeaways with actionable next steps.",
|
|
792
|
-
layout: {
|
|
793
|
-
boxes: [
|
|
794
|
-
{
|
|
795
|
-
id: "heading",
|
|
796
|
-
target: "h2",
|
|
797
|
-
pos: [80, 50, 1120, 70],
|
|
798
|
-
fontSize: "2rem"
|
|
799
|
-
},
|
|
800
|
-
{
|
|
801
|
-
id: "list-box",
|
|
802
|
-
target: "ol",
|
|
803
|
-
pos: [80, 150, 1120, 340],
|
|
804
|
-
fontSize: "1.25rem"
|
|
805
|
-
},
|
|
806
|
-
{
|
|
807
|
-
id: "callout-next",
|
|
808
|
-
target: "blockquote",
|
|
809
|
-
pos: [80, 520, 1120, 140],
|
|
810
|
-
fontSize: "1.1rem"
|
|
811
|
-
}
|
|
812
|
-
]
|
|
813
|
-
},
|
|
814
|
-
markdownSnippet: `<!-- layout:
|
|
815
|
-
boxes:
|
|
816
|
-
- id: heading
|
|
817
|
-
target: h2
|
|
818
|
-
pos: [80, 50, 1120, 70]
|
|
819
|
-
fontSize: 2rem
|
|
820
|
-
- id: list-box
|
|
821
|
-
target: ol
|
|
822
|
-
pos: [80, 150, 1120, 340]
|
|
823
|
-
fontSize: 1.25rem
|
|
824
|
-
- id: callout-next
|
|
825
|
-
target: blockquote
|
|
826
|
-
pos: [80, 520, 1120, 140]
|
|
827
|
-
fontSize: 1.1rem
|
|
828
|
-
-->
|
|
829
|
-
|
|
830
|
-
## \u{1F3C1} Key Takeaways & Action Items
|
|
831
|
-
|
|
832
|
-
1. **Decouple Before Scaling:** Separate producer rate from consumer processing capacity.
|
|
833
|
-
2. **Design for Failure:** Always configure retries, backoff intervals, and dead-letter queues.
|
|
834
|
-
3. **Measure End-to-End:** Track P99 latency and error rates across all distributed boundaries.
|
|
835
|
-
|
|
836
|
-
> \u{1F4DD} **Next Action Item:** Complete the Silver Tier refactoring challenge before our next peer-review session.
|
|
837
|
-
|
|
838
|
-
<!--
|
|
839
|
-
Presenter Notes:
|
|
840
|
-
- Deliver a crisp 2-minute wrap-up reinforcing the 3 core takeaways.
|
|
841
|
-
- Acknowledge strong peer collaboration during the hands-on lab.
|
|
842
|
-
-->`
|
|
843
|
-
}
|
|
844
|
-
];
|
|
845
|
-
function getSlideLayoutPresetById(id) {
|
|
846
|
-
return SLIDE_LAYOUT_PRESETS.find((p) => p.id === id);
|
|
847
|
-
}
|
|
848
|
-
function getSlideLayoutPresetsByCategory(category) {
|
|
849
|
-
return SLIDE_LAYOUT_PRESETS.filter((p) => p.category === category);
|
|
75
|
+
);
|
|
850
76
|
}
|
|
851
77
|
|
|
852
78
|
// src/html-engine/themes.ts
|
|
@@ -1274,6 +500,133 @@ var HTML_SLIDE_PRESETS = {
|
|
|
1274
500
|
}
|
|
1275
501
|
};
|
|
1276
502
|
|
|
503
|
+
// src/html-engine/utilities.ts
|
|
504
|
+
var FONT_SIZES = [
|
|
505
|
+
// class, var, fallback px, line-height
|
|
506
|
+
["xs", "--font-size-xs", "14px", "1.4"],
|
|
507
|
+
["sm", "--font-size-sm", "16px", "1.45"],
|
|
508
|
+
["base", "--font-size-base", "18px", "1.5"],
|
|
509
|
+
["lg", "--font-size-lg", "20px", "1.5"],
|
|
510
|
+
["xl", "--font-size-xl", "22px", "1.5"],
|
|
511
|
+
["2xl", "--font-size-2xl", "26px", "1.4"],
|
|
512
|
+
["3xl", "--font-size-3xl", "32px", "1.3"],
|
|
513
|
+
["4xl", "--font-size-4xl", "38px", "1.25"],
|
|
514
|
+
["6xl", "--font-size-6xl", "58px", "1.15"],
|
|
515
|
+
["8xl", "--font-size-8xl", "96px", "1.05"]
|
|
516
|
+
];
|
|
517
|
+
var SPACING = {
|
|
518
|
+
"0.5": "0.125rem",
|
|
519
|
+
"1": "0.25rem",
|
|
520
|
+
"1.5": "0.375rem",
|
|
521
|
+
"2": "0.5rem",
|
|
522
|
+
"2.5": "0.625rem",
|
|
523
|
+
"3": "0.75rem",
|
|
524
|
+
"4": "1rem",
|
|
525
|
+
"5": "1.25rem",
|
|
526
|
+
"6": "1.5rem",
|
|
527
|
+
"7": "1.75rem",
|
|
528
|
+
"8": "2rem",
|
|
529
|
+
"10": "2.5rem",
|
|
530
|
+
"12": "3rem",
|
|
531
|
+
"16": "4rem",
|
|
532
|
+
"20": "5rem",
|
|
533
|
+
"24": "6rem"
|
|
534
|
+
};
|
|
535
|
+
function sp(value) {
|
|
536
|
+
return `calc(${SPACING[value]} * var(--scale-spacing-eff, 1))`;
|
|
537
|
+
}
|
|
538
|
+
function fontSizeRules() {
|
|
539
|
+
return FONT_SIZES.map(
|
|
540
|
+
([cls, cssVar, fallback, lh]) => `.text-${cls}{font-size:var(${cssVar}, ${fallback});line-height:${lh}}`
|
|
541
|
+
).join("\n");
|
|
542
|
+
}
|
|
543
|
+
function spacingRules() {
|
|
544
|
+
const out = [];
|
|
545
|
+
for (const value of Object.keys(SPACING)) {
|
|
546
|
+
out.push(`.p-${value}{padding:${sp(value)}}`);
|
|
547
|
+
out.push(`.px-${value}{padding-left:${sp(value)};padding-right:${sp(value)}}`);
|
|
548
|
+
out.push(`.py-${value}{padding-top:${sp(value)};padding-bottom:${sp(value)}}`);
|
|
549
|
+
out.push(`.pt-${value}{padding-top:${sp(value)}}`);
|
|
550
|
+
out.push(`.pb-${value}{padding-bottom:${sp(value)}}`);
|
|
551
|
+
out.push(`.mt-${value}{margin-top:${sp(value)}}`);
|
|
552
|
+
out.push(`.mb-${value}{margin-bottom:${sp(value)}}`);
|
|
553
|
+
out.push(`.my-${value}{margin-top:${sp(value)};margin-bottom:${sp(value)}`);
|
|
554
|
+
out.push(`.gap-${value}{gap:${sp(value)}}`);
|
|
555
|
+
}
|
|
556
|
+
return out.join("\n");
|
|
557
|
+
}
|
|
558
|
+
function sizeRules() {
|
|
559
|
+
const out = [];
|
|
560
|
+
for (const value of Object.keys(SPACING)) {
|
|
561
|
+
out.push(`.w-${value}{width:${sp(value)}}`);
|
|
562
|
+
out.push(`.h-${value}{height:${sp(value)}}`);
|
|
563
|
+
}
|
|
564
|
+
return out.join("\n");
|
|
565
|
+
}
|
|
566
|
+
var SLIDE_UTILITY_CSS = `
|
|
567
|
+
/* preflight \u2014 the presets were authored against Tailwind's reset (no default
|
|
568
|
+
margins, no list markers, border-box everywhere), so it has to come along. */
|
|
569
|
+
.slide-page *,.slide-page *::before,.slide-page *::after{box-sizing:border-box;border-width:0;border-style:solid}
|
|
570
|
+
.slide-page h1,.slide-page h2,.slide-page h3,.slide-page h4,.slide-page h5,.slide-page h6,
|
|
571
|
+
.slide-page p,.slide-page ul,.slide-page ol,.slide-page li,.slide-page figure,.slide-page blockquote,
|
|
572
|
+
.slide-page pre,.slide-page dl,.slide-page dd{margin:0;padding:0}
|
|
573
|
+
.slide-page ul,.slide-page ol{list-style:none}
|
|
574
|
+
.slide-page img,.slide-page svg,.slide-page video{display:block;max-width:100%}
|
|
575
|
+
.slide-page button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
|
|
576
|
+
.slide-page table{border-collapse:collapse}
|
|
577
|
+
.slide-page a{color:inherit;text-decoration:inherit}
|
|
578
|
+
/* layout */
|
|
579
|
+
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.inline-block{display:inline-block}
|
|
580
|
+
.flex-col{flex-direction:column}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.shrink-0{flex-shrink:0}
|
|
581
|
+
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
582
|
+
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
|
|
583
|
+
.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
|
|
584
|
+
.col-span-5{grid-column:span 5/span 5}.col-span-7{grid-column:span 7/span 7}
|
|
585
|
+
.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}
|
|
586
|
+
.justify-center{justify-content:center}.justify-between{justify-content:space-between}
|
|
587
|
+
.relative{position:relative}.overflow-hidden{overflow:hidden}.z-10{z-index:10}
|
|
588
|
+
.h-full{height:100%}.w-full{width:100%}.min-h-0{min-height:0}.my-auto{margin-top:auto;margin-bottom:auto}
|
|
589
|
+
.text-center{text-align:center}
|
|
590
|
+
/* typography */
|
|
591
|
+
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
|
|
592
|
+
.font-extrabold{font-weight:800}.font-black{font-weight:900}.font-mono{font-family:var(--font-code)}
|
|
593
|
+
.tracking-tighter{letter-spacing:-0.05em}.tracking-tight{letter-spacing:-0.025em}
|
|
594
|
+
.tracking-wider{letter-spacing:0.05em}.tracking-widest{letter-spacing:0.1em}
|
|
595
|
+
.uppercase{text-transform:uppercase}
|
|
596
|
+
.leading-tight{line-height:1.25}.leading-snug{line-height:1.375}.leading-relaxed{line-height:1.625}
|
|
597
|
+
.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}
|
|
598
|
+
${fontSizeRules()}
|
|
599
|
+
/* spacing (scaled by the density editor) */
|
|
600
|
+
${spacingRules()}
|
|
601
|
+
${sizeRules()}
|
|
602
|
+
.space-y-3 > * + *{margin-top:${sp("3")}}
|
|
603
|
+
.space-y-4 > * + *{margin-top:${sp("4")}}
|
|
604
|
+
.space-y-6 > * + *{margin-top:${sp("6")}}
|
|
605
|
+
/* surfaces & color (theme-variable driven) */
|
|
606
|
+
.rounded{border-radius:0.25rem}.rounded-xl{border-radius:0.75rem}.rounded-full{border-radius:9999px}
|
|
607
|
+
.border{border-width:1px;border-style:solid;border-color:var(--border)}
|
|
608
|
+
.border-t{border-top-width:1px;border-top-style:solid;border-top-color:var(--border)}
|
|
609
|
+
.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--border)}
|
|
610
|
+
.border-current{border-color:currentColor}
|
|
611
|
+
.shadow{box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08)}
|
|
612
|
+
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.08)}
|
|
613
|
+
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.15),0 4px 6px -4px rgba(0,0,0,.1)}
|
|
614
|
+
.opacity-60{opacity:.6}.opacity-65{opacity:.65}.opacity-75{opacity:.75}
|
|
615
|
+
.opacity-80{opacity:.8}.opacity-85{opacity:.85}.opacity-90{opacity:.9}
|
|
616
|
+
.bg-red-500\\/70{background-color:rgba(239,68,68,.7)}
|
|
617
|
+
.bg-yellow-500\\/70{background-color:rgba(234,179,8,.7)}
|
|
618
|
+
.bg-green-500\\/70{background-color:rgba(34,197,94,.7)}
|
|
619
|
+
/* theme color utilities (previously provided by tailwind.config extend) */
|
|
620
|
+
.text-primary{color:var(--primary)}.text-muted{color:var(--text-muted)}.text-themeText{color:var(--text)}
|
|
621
|
+
.bg-themeBg{background-color:var(--bg)}.bg-themeBgSecondary{background-color:var(--bg-secondary)}
|
|
622
|
+
.bg-themePrimary{background-color:var(--primary)}.border-themeBorder{border-color:var(--border)}
|
|
623
|
+
`.trim();
|
|
624
|
+
function listUtilityClasses() {
|
|
625
|
+
return Array.from(SLIDE_UTILITY_CSS.matchAll(/\.([a-zA-Z0-9\\/_.-]+)(?=[{,: >])/g)).map(
|
|
626
|
+
(m) => m[1].replace(/\\\//g, "/")
|
|
627
|
+
);
|
|
628
|
+
}
|
|
629
|
+
|
|
1277
630
|
// src/html-engine/shell.ts
|
|
1278
631
|
function generateHtmlShell(options) {
|
|
1279
632
|
const { title, theme, slidesHtml, slideCount, customHeadTags = "", deckId = "" } = options;
|
|
@@ -1285,12 +638,16 @@ function generateHtmlShell(options) {
|
|
|
1285
638
|
<title>${title}</title>
|
|
1286
639
|
|
|
1287
640
|
<!-- Fonts -->
|
|
641
|
+
<!-- DECK_FONT_BLOCK_START -->${options?.fontFaceCss ? `
|
|
642
|
+
<style>
|
|
643
|
+
${options.fontFaceCss}
|
|
644
|
+
</style>` : `
|
|
1288
645
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
1289
646
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
1290
|
-
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@500;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet"
|
|
647
|
+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@500;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">`}<!-- DECK_FONT_BLOCK_END -->
|
|
1291
648
|
|
|
1292
|
-
<!-- Core Presentation Styling & 1920x1080 Scaled
|
|
1293
|
-
<
|
|
649
|
+
<!-- Core Presentation Styling & 1920x1080 Scaled Layout Utilities (inlined) -->
|
|
650
|
+
<style>${SLIDE_UTILITY_CSS}</style>
|
|
1294
651
|
<script>
|
|
1295
652
|
window.tailwind = window.tailwind || {};
|
|
1296
653
|
tailwind.config = {
|
|
@@ -1440,6 +797,59 @@ function generateHtmlShell(options) {
|
|
|
1440
797
|
opacity: 1;
|
|
1441
798
|
}
|
|
1442
799
|
|
|
800
|
+
/* \u2500\u2500 Bespoke (authored) slides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
801
|
+
The frontend-slides mode hands the model the whole slide surface, so the
|
|
802
|
+
shell owns only what must stay invariant: full-stage sizing, border-box
|
|
803
|
+
maths, theme type defaults, and one orchestrated entrance. */
|
|
804
|
+
.bespoke-slide {
|
|
805
|
+
position: relative;
|
|
806
|
+
width: 100%;
|
|
807
|
+
height: 100%;
|
|
808
|
+
overflow: hidden;
|
|
809
|
+
}
|
|
810
|
+
|
|
811
|
+
.bespoke-slide,
|
|
812
|
+
.bespoke-slide *,
|
|
813
|
+
.bespoke-slide *::before,
|
|
814
|
+
.bespoke-slide *::after {
|
|
815
|
+
box-sizing: border-box;
|
|
816
|
+
}
|
|
817
|
+
|
|
818
|
+
.bespoke-slide h1,
|
|
819
|
+
.bespoke-slide h2 {
|
|
820
|
+
font-family: var(--font-display);
|
|
821
|
+
letter-spacing: -0.02em;
|
|
822
|
+
}
|
|
823
|
+
|
|
824
|
+
.bespoke-slide img,
|
|
825
|
+
.bespoke-slide svg {
|
|
826
|
+
max-width: 100%;
|
|
827
|
+
height: auto;
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
.slide-page.active .bespoke-slide > * {
|
|
831
|
+
animation: bespokeReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
832
|
+
}
|
|
833
|
+
|
|
834
|
+
.slide-page.active .bespoke-slide > *:nth-child(2) { animation-delay: 0.08s; }
|
|
835
|
+
.slide-page.active .bespoke-slide > *:nth-child(3) { animation-delay: 0.16s; }
|
|
836
|
+
.slide-page.active .bespoke-slide > *:nth-child(4) { animation-delay: 0.24s; }
|
|
837
|
+
.slide-page.active .bespoke-slide > *:nth-child(5) { animation-delay: 0.32s; }
|
|
838
|
+
.slide-page.active .bespoke-slide > *:nth-child(n + 6) { animation-delay: 0.4s; }
|
|
839
|
+
|
|
840
|
+
@keyframes bespokeReveal {
|
|
841
|
+
from { opacity: 0; transform: translateY(14px); }
|
|
842
|
+
to { opacity: 1; transform: none; }
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
@media (prefers-reduced-motion: reduce) {
|
|
846
|
+
.slide-page.active .bespoke-slide > * {
|
|
847
|
+
animation: none;
|
|
848
|
+
opacity: 1;
|
|
849
|
+
transform: none;
|
|
850
|
+
}
|
|
851
|
+
}
|
|
852
|
+
|
|
1443
853
|
/* Top Progress Bar */
|
|
1444
854
|
#progress-bar {
|
|
1445
855
|
position: absolute;
|
|
@@ -3582,15 +2992,152 @@ main();`;
|
|
|
3582
2992
|
return slots;
|
|
3583
2993
|
}
|
|
3584
2994
|
|
|
2995
|
+
// src/html-engine/sanitize.ts
|
|
2996
|
+
var CONTAINER_TAGS = ["script", "iframe", "object", "embed", "applet", "form", "button", "textarea", "select", "template"];
|
|
2997
|
+
var VOID_TAGS = ["link", "meta", "base", "input"];
|
|
2998
|
+
var CONTAINER_ELEMENT_RE = new RegExp(
|
|
2999
|
+
`<(${CONTAINER_TAGS.join("|")})\\b[\\s\\S]*?<\\/\\1\\s*>`,
|
|
3000
|
+
"gi"
|
|
3001
|
+
);
|
|
3002
|
+
var STRAY_TAG_RE = new RegExp(`<\\/?(?:${[...CONTAINER_TAGS, ...VOID_TAGS].join("|")})\\b[^>]*>`, "gi");
|
|
3003
|
+
var EVENT_ATTR_RE = /\s+on[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi;
|
|
3004
|
+
var EXTERNAL_URL_RE = /^(?:https?:)?\/\//i;
|
|
3005
|
+
var CSS_URL_RE = /url\(\s*(?:"([^"]*)"|'([^']*)'|([^)'"\s]*))\s*\)/gi;
|
|
3006
|
+
var CSS_IMPORT_RE = /@import[^;]+;/gi;
|
|
3007
|
+
function isOffBoxUrl(url) {
|
|
3008
|
+
const value = url.trim();
|
|
3009
|
+
if (!value) return false;
|
|
3010
|
+
return EXTERNAL_URL_RE.test(value) || /^javascript:/i.test(value) || /^data:(?!image\/)/i.test(value);
|
|
3011
|
+
}
|
|
3012
|
+
function sanitizeSlideHtml(raw) {
|
|
3013
|
+
const removed = [];
|
|
3014
|
+
let html = String(raw ?? "");
|
|
3015
|
+
html = html.replace(CONTAINER_ELEMENT_RE, (_match, tag) => {
|
|
3016
|
+
removed.push(`<${String(tag).toLowerCase()}>`);
|
|
3017
|
+
return "";
|
|
3018
|
+
});
|
|
3019
|
+
html = html.replace(STRAY_TAG_RE, (match) => {
|
|
3020
|
+
const tag = (match.match(/^<\/?\s*([a-z]+)/i) || [])[1]?.toLowerCase();
|
|
3021
|
+
if (tag) removed.push(`<${tag}>`);
|
|
3022
|
+
return "";
|
|
3023
|
+
});
|
|
3024
|
+
const beforeEvents = html.length;
|
|
3025
|
+
html = html.replace(EVENT_ATTR_RE, "");
|
|
3026
|
+
if (html.length !== beforeEvents) removed.push("inline event handler");
|
|
3027
|
+
html = html.replace(CSS_URL_RE, (match, dq, sq, bare) => {
|
|
3028
|
+
if (!isOffBoxUrl(String(dq ?? sq ?? bare ?? ""))) return match;
|
|
3029
|
+
removed.push("external url()");
|
|
3030
|
+
return "none";
|
|
3031
|
+
});
|
|
3032
|
+
const beforeImports = html.length;
|
|
3033
|
+
html = html.replace(CSS_IMPORT_RE, "");
|
|
3034
|
+
if (html.length !== beforeImports) removed.push("@import");
|
|
3035
|
+
html = html.replace(/\s+(href|src|srcset|poster)\s*=\s*("([^"]*)"|'([^']*)')/gi, (match, attr, _q, dq, sq) => {
|
|
3036
|
+
const value = String(dq ?? sq ?? "").trim();
|
|
3037
|
+
if (!isOffBoxUrl(value)) return match;
|
|
3038
|
+
removed.push(`${attr}="${value.slice(0, 60)}"`);
|
|
3039
|
+
return "";
|
|
3040
|
+
});
|
|
3041
|
+
return { html: html.trim(), removed: Array.from(new Set(removed)) };
|
|
3042
|
+
}
|
|
3043
|
+
function validateBespokeSlideHtml(raw, contract = {}) {
|
|
3044
|
+
const maxChars = contract.maxChars ?? 16e3;
|
|
3045
|
+
const minChars = contract.minChars ?? 120;
|
|
3046
|
+
const issues = [];
|
|
3047
|
+
const html = String(raw ?? "").trim();
|
|
3048
|
+
if (!html) return { valid: false, issues: ["slide html is empty"] };
|
|
3049
|
+
if (html.length > maxChars) issues.push(`slide html exceeds ${maxChars} chars (${html.length})`);
|
|
3050
|
+
if (html.replace(/<[^>]*>/g, "").replace(/\s+/g, "").length < minChars) {
|
|
3051
|
+
issues.push("slide has too little text content to teach anything");
|
|
3052
|
+
}
|
|
3053
|
+
if (!/<h[12]\b/i.test(html)) {
|
|
3054
|
+
issues.push("slide has no <h1>/<h2> \u2014 typographic hierarchy is required");
|
|
3055
|
+
}
|
|
3056
|
+
const { html: clean, removed } = sanitizeSlideHtml(html);
|
|
3057
|
+
if (removed.length > 0) {
|
|
3058
|
+
issues.push(`slide is not self-contained (stripped: ${removed.join(", ")})`);
|
|
3059
|
+
}
|
|
3060
|
+
if (/<script\b/i.test(clean)) issues.push("slide still contains a script tag after sanitizing");
|
|
3061
|
+
if (/\b(todo|tbd|lorem ipsum|<code>)\b/i.test(clean) && !/<pre\b/i.test(clean)) {
|
|
3062
|
+
issues.push("slide contains placeholder text");
|
|
3063
|
+
}
|
|
3064
|
+
if (/<html\b|<body\b|<section\b[^>]*class="[^"]*slide-page/i.test(clean)) {
|
|
3065
|
+
issues.push("slide markup carries deck-level structure (html/body/section.slide-page)");
|
|
3066
|
+
}
|
|
3067
|
+
return { valid: issues.length === 0, issues };
|
|
3068
|
+
}
|
|
3069
|
+
function buildBespokeSlideMarkup(raw) {
|
|
3070
|
+
const { html } = sanitizeSlideHtml(raw);
|
|
3071
|
+
return `<div class="bespoke-slide">${html}</div>`;
|
|
3072
|
+
}
|
|
3073
|
+
|
|
3585
3074
|
// src/html-engine/compiler.ts
|
|
3075
|
+
var SHIKI_LANGS = /* @__PURE__ */ new Set([
|
|
3076
|
+
"javascript",
|
|
3077
|
+
"typescript",
|
|
3078
|
+
"python",
|
|
3079
|
+
"cpp",
|
|
3080
|
+
"c",
|
|
3081
|
+
"java",
|
|
3082
|
+
"html",
|
|
3083
|
+
"css",
|
|
3084
|
+
"json",
|
|
3085
|
+
"yaml",
|
|
3086
|
+
"bash",
|
|
3087
|
+
"shell",
|
|
3088
|
+
"sql",
|
|
3089
|
+
"go",
|
|
3090
|
+
"rust",
|
|
3091
|
+
"swift",
|
|
3092
|
+
"kotlin",
|
|
3093
|
+
"ruby",
|
|
3094
|
+
"php",
|
|
3095
|
+
"xml",
|
|
3096
|
+
"markdown",
|
|
3097
|
+
"dockerfile",
|
|
3098
|
+
"toml",
|
|
3099
|
+
"ini",
|
|
3100
|
+
"graphql",
|
|
3101
|
+
"prisma",
|
|
3102
|
+
"solidity"
|
|
3103
|
+
]);
|
|
3104
|
+
function normalizeShikiLang(lang) {
|
|
3105
|
+
if (!lang) return null;
|
|
3106
|
+
const l = String(lang).toLowerCase().trim();
|
|
3107
|
+
if (SHIKI_LANGS.has(l)) return l;
|
|
3108
|
+
if (l === "js") return "javascript";
|
|
3109
|
+
if (l === "ts") return "typescript";
|
|
3110
|
+
if (l === "py") return "python";
|
|
3111
|
+
if (l === "sh") return "bash";
|
|
3112
|
+
if (l === "yml") return "yaml";
|
|
3113
|
+
if (l === "c++") return "cpp";
|
|
3114
|
+
return null;
|
|
3115
|
+
}
|
|
3116
|
+
function decodeHtmlEntities2(html) {
|
|
3117
|
+
return html.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, '"').replace(/'/g, "'").replace(/'/g, "'");
|
|
3118
|
+
}
|
|
3586
3119
|
function compileHtmlDeck(deckData, options) {
|
|
3587
3120
|
const theme = options?.themeOverride || resolveHtmlTheme(deckData.theme);
|
|
3588
3121
|
const slides = deckData.slides || [];
|
|
3589
3122
|
const slideCount = Math.max(slides.length, 1);
|
|
3590
3123
|
const renderedSlides = slides.map((slide, index) => {
|
|
3124
|
+
if (typeof slide.html === "string" && slide.html.trim()) {
|
|
3125
|
+
const notesAttr2 = slide.notes ? ` data-notes="${encodeURIComponent(slide.notes)}"` : "";
|
|
3126
|
+
const customClass2 = slide.customClass ? ` ${slide.customClass}` : "";
|
|
3127
|
+
return `
|
|
3128
|
+
<!-- Slide ${index + 1}: authored html -->
|
|
3129
|
+
<section class="slide-page${customClass2}" data-index="${index}" data-layout="bespoke"${notesAttr2}>
|
|
3130
|
+
${buildBespokeSlideMarkup(slide.html)}
|
|
3131
|
+
</section>
|
|
3132
|
+
`;
|
|
3133
|
+
}
|
|
3591
3134
|
const preset = HTML_SLIDE_PRESETS[slide.layoutId] || HTML_SLIDE_PRESETS["hero-cover"];
|
|
3592
3135
|
const normalizedSlots = normalizeSlideSlots(slide);
|
|
3593
|
-
|
|
3136
|
+
let innerHtml = preset.template(normalizedSlots, theme);
|
|
3137
|
+
if (normalizedSlots.code != null && String(normalizedSlots.code).trim()) {
|
|
3138
|
+
const lang = normalizeShikiLang(normalizedSlots.language) || "typescript";
|
|
3139
|
+
innerHtml = innerHtml.replace("<code>", `<code class="language-${lang}">`);
|
|
3140
|
+
}
|
|
3594
3141
|
const notesAttr = slide.notes ? ` data-notes="${encodeURIComponent(slide.notes)}"` : "";
|
|
3595
3142
|
const customClass = slide.customClass ? ` ${slide.customClass}` : "";
|
|
3596
3143
|
return `
|
|
@@ -3616,7 +3163,48 @@ function compileHtmlDeck(deckData, options) {
|
|
|
3616
3163
|
title: deckData.title
|
|
3617
3164
|
};
|
|
3618
3165
|
}
|
|
3166
|
+
async function highlightDeckCodeBlocks(html, scheme = "dark") {
|
|
3167
|
+
if (!html.includes('<code class="language-')) return html;
|
|
3168
|
+
const highlighter = await getHighlighter();
|
|
3169
|
+
const shikiTheme = scheme === "light" ? "vitesse-light" : "vitesse-dark";
|
|
3170
|
+
return html.replace(
|
|
3171
|
+
/<pre([^>]*)><code class="language-(\w+)">([\s\S]*?)<\/code><\/pre>/g,
|
|
3172
|
+
(full, preAttrs, lang, escapedCode) => {
|
|
3173
|
+
try {
|
|
3174
|
+
const decoded = decodeHtmlEntities2(escapedCode);
|
|
3175
|
+
return highlighter.codeToHtml(decoded, { lang, theme: shikiTheme }).replace("<pre", `<pre${preAttrs}`);
|
|
3176
|
+
} catch {
|
|
3177
|
+
return full;
|
|
3178
|
+
}
|
|
3179
|
+
}
|
|
3180
|
+
);
|
|
3181
|
+
}
|
|
3182
|
+
async function compileHtmlDeckAsync(deckData, options) {
|
|
3183
|
+
const result = compileHtmlDeck(deckData, options);
|
|
3184
|
+
if (options?.highlight === false) return result;
|
|
3185
|
+
try {
|
|
3186
|
+
const html = await highlightDeckCodeBlocks(result.html, result.theme.scheme);
|
|
3187
|
+
return { ...result, html };
|
|
3188
|
+
} catch (err) {
|
|
3189
|
+
console.warn("[html-engine] Shiki highlighting unavailable, using plain escaped code:", err);
|
|
3190
|
+
return result;
|
|
3191
|
+
}
|
|
3192
|
+
}
|
|
3619
3193
|
|
|
3620
|
-
|
|
3621
|
-
|
|
3622
|
-
|
|
3194
|
+
exports.HTML_SLIDE_PRESETS = HTML_SLIDE_PRESETS;
|
|
3195
|
+
exports.HTML_THEMES = HTML_THEMES;
|
|
3196
|
+
exports.SLIDE_UTILITY_CSS = SLIDE_UTILITY_CSS;
|
|
3197
|
+
exports.buildBespokeSlideMarkup = buildBespokeSlideMarkup;
|
|
3198
|
+
exports.compileHtmlDeck = compileHtmlDeck;
|
|
3199
|
+
exports.compileHtmlDeckAsync = compileHtmlDeckAsync;
|
|
3200
|
+
exports.generateHtmlShell = generateHtmlShell;
|
|
3201
|
+
exports.getHighlighter = getHighlighter;
|
|
3202
|
+
exports.highlightCodeBlocks = highlightCodeBlocks;
|
|
3203
|
+
exports.highlightDeckCodeBlocks = highlightDeckCodeBlocks;
|
|
3204
|
+
exports.listUtilityClasses = listUtilityClasses;
|
|
3205
|
+
exports.normalizeSlideSlots = normalizeSlideSlots;
|
|
3206
|
+
exports.resolveHtmlTheme = resolveHtmlTheme;
|
|
3207
|
+
exports.sanitizeSlideHtml = sanitizeSlideHtml;
|
|
3208
|
+
exports.validateBespokeSlideHtml = validateBespokeSlideHtml;
|
|
3209
|
+
//# sourceMappingURL=chunk-INAOTYLK.cjs.map
|
|
3210
|
+
//# sourceMappingURL=chunk-INAOTYLK.cjs.map
|