@thanh01.pmt/presentation-kit 0.2.1 → 0.2.2

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.
@@ -1264,104 +1264,6 @@ function extractLayoutsAndNotes(rawComments) {
1264
1264
  }
1265
1265
  return { layouts, notes };
1266
1266
  }
1267
- function serializeLayoutToComment(layout) {
1268
- if (!layout.boxes || layout.boxes.length === 0) return "";
1269
- const cleanData = {
1270
- boxes: layout.boxes.map((box) => {
1271
- const b = {
1272
- id: box.id,
1273
- target: box.target || `h1`,
1274
- pos: [
1275
- Math.round(box.pos[0]),
1276
- Math.round(box.pos[1]),
1277
- Math.round(box.pos[2]),
1278
- Math.round(box.pos[3])
1279
- ]
1280
- };
1281
- if (box.fontSize) b.fontSize = box.fontSize;
1282
- if (box.color) b.color = box.color;
1283
- if (box.textAlign) b.textAlign = box.textAlign;
1284
- if (box.style) b.style = box.style;
1285
- return b;
1286
- })
1287
- };
1288
- const yamlStr = yaml__default.default.dump(cleanData, {
1289
- indent: 2,
1290
- lineWidth: -1,
1291
- noRefs: true
1292
- }).trim();
1293
- return `<!-- layout:
1294
- ${yamlStr.split("\n").join("\n ")}
1295
- -->`;
1296
- }
1297
- function splitMarkdownSlides(markdown) {
1298
- const lines = markdown.split("\n");
1299
- let frontmatter = null;
1300
- const slideBuffers = [];
1301
- let currentBuffer = [];
1302
- let inCodeFence = false;
1303
- let lineIdx = 0;
1304
- if (lines.length > 0 && lines[0].trim() === "---") {
1305
- const fmBuffer = [lines[0]];
1306
- lineIdx = 1;
1307
- while (lineIdx < lines.length) {
1308
- const line = lines[lineIdx];
1309
- fmBuffer.push(line);
1310
- if (line.trim() === "---") {
1311
- frontmatter = fmBuffer.join("\n");
1312
- lineIdx++;
1313
- break;
1314
- }
1315
- lineIdx++;
1316
- }
1317
- }
1318
- for (let i = lineIdx; i < lines.length; i++) {
1319
- const line = lines[i];
1320
- if (/^```/.test(line.trim())) {
1321
- inCodeFence = !inCodeFence;
1322
- currentBuffer.push(line);
1323
- continue;
1324
- }
1325
- if (!inCodeFence && line.trim() === "---") {
1326
- slideBuffers.push(currentBuffer);
1327
- currentBuffer = [];
1328
- continue;
1329
- }
1330
- currentBuffer.push(line);
1331
- }
1332
- slideBuffers.push(currentBuffer);
1333
- const slides = slideBuffers.map((b) => b.join("\n"));
1334
- return { frontmatter, slides };
1335
- }
1336
- function updateSlideLayoutInMarkdown(markdown, slideIndex, layout) {
1337
- const { frontmatter, slides } = splitMarkdownSlides(markdown);
1338
- if (slideIndex < 0 || slideIndex >= slides.length) {
1339
- return markdown;
1340
- }
1341
- let slideContent = slides[slideIndex];
1342
- const layoutCommentRegex = /<!--\s*layout:\s*[\s\S]*?-->/i;
1343
- const newComment = layout && layout.boxes && layout.boxes.length > 0 ? serializeLayoutToComment(layout) : "";
1344
- if (layoutCommentRegex.test(slideContent)) {
1345
- if (newComment) {
1346
- slideContent = slideContent.replace(layoutCommentRegex, newComment);
1347
- } else {
1348
- slideContent = slideContent.replace(layoutCommentRegex, "").trim();
1349
- }
1350
- } else if (newComment) {
1351
- const trimmed = slideContent.trimStart();
1352
- slideContent = `${newComment}
1353
-
1354
- ${trimmed}`;
1355
- }
1356
- slides[slideIndex] = slideContent;
1357
- const joinedSlides = slides.join("\n---\n");
1358
- if (frontmatter) {
1359
- return `${frontmatter}
1360
-
1361
- ${joinedSlides}`;
1362
- }
1363
- return joinedSlides;
1364
- }
1365
1267
 
1366
1268
  // src/core/layout/css-generator.ts
1367
1269
  function generateLayoutCss(layouts, containerId = "marp-container") {
@@ -1410,646 +1312,6 @@ ${ruleSelector} {
1410
1312
  });
1411
1313
  return cssRules.join("\n");
1412
1314
  }
1413
-
1414
- // src/core/layout/presets.ts
1415
- var SLIDE_LAYOUT_PRESETS = [
1416
- {
1417
- id: "title-hero",
1418
- name: "B\xECa & Gi\u1EDBi thi\u1EC7u (Title Cover)",
1419
- category: "cover",
1420
- description: "Slide b\xECa m\u1EDF \u0111\u1EA7u \u1EA5n t\u01B0\u1EE3ng v\u1EDBi ti\xEAu \u0111\u1EC1 l\u1EDBn, ph\u1EE5 \u0111\u1EC1 v\xE0 th\xF4ng tin gi\u1EA3ng vi\xEAn.",
1421
- layout: {
1422
- boxes: [
1423
- {
1424
- id: "title",
1425
- target: "h1",
1426
- pos: [100, 180, 1080, 140],
1427
- fontSize: "3rem",
1428
- textAlign: "center"
1429
- },
1430
- {
1431
- id: "subtitle",
1432
- target: "h3",
1433
- pos: [100, 350, 1080, 70],
1434
- fontSize: "1.5rem",
1435
- textAlign: "center"
1436
- },
1437
- {
1438
- id: "speaker-meta",
1439
- target: "p",
1440
- pos: [100, 460, 1080, 80],
1441
- fontSize: "1.1rem",
1442
- textAlign: "center"
1443
- }
1444
- ]
1445
- },
1446
- markdownSnippet: `<!-- layout:
1447
- boxes:
1448
- - id: title
1449
- target: h1
1450
- pos: [100, 180, 1080, 140]
1451
- fontSize: 3rem
1452
- textAlign: center
1453
- - id: subtitle
1454
- target: h3
1455
- pos: [100, 350, 1080, 70]
1456
- fontSize: 1.5rem
1457
- textAlign: center
1458
- - id: speaker-meta
1459
- target: p
1460
- pos: [100, 460, 1080, 80]
1461
- fontSize: 1.1rem
1462
- textAlign: center
1463
- -->
1464
-
1465
- # \u{1F680} Ti\xEAu \u0110\u1EC1 B\xE0i Gi\u1EA3ng Ch\xEDnh
1466
- ### Ph\u1EE5 \u0111\u1EC1 ng\u1EAFn g\u1ECDn, truy\u1EC1n c\u1EA3m h\u1EE9ng v\xE0 \u0111\u1ECBnh v\u1ECB m\u1EE5c ti\xEAu
1467
-
1468
- **Gi\u1EA3ng vi\xEAn:** Th\u1EA7y Nguy\u1EC5n V\u0103n A | **Th\u1EDDi l\u01B0\u1EE3ng:** 45 ph\xFAt | **C\u1EA5p \u0111\u1ED9:** Trung c\u1EA5p
1469
-
1470
- <!--
1471
- Presenter Notes:
1472
- - Ch\xE0o m\u1EEBng h\u1ECDc vi\xEAn, gi\u1EDBi thi\u1EC7u m\u1EE5c ti\xEAu b\xE0i h\u1ECDc h\xF4m nay.
1473
- - Kh\u01A1i g\u1EE3i s\u1EF1 t\xF2 m\xF2 b\u1EB1ng c\xE2u h\u1ECFi m\u1EDF \u0111\u1EA7u v\u1EC1 b\xE0i to\xE1n th\u1EF1c t\u1EBF.
1474
- -->`
1475
- },
1476
- {
1477
- id: "two-column-split",
1478
- name: "So S\xE1nh 2 C\u1ED9t (2-Column Comparison)",
1479
- category: "split",
1480
- description: "B\u1ED1 c\u1EE5c chia \u0111\xF4i m\xE0n h\xECnh \u0111\u1EC3 so s\xE1nh ph\u01B0\u01A1ng ph\xE1p c\u0169 vs m\u1EDBi, l\xFD thuy\u1EBFt vs th\u1EF1c t\u1EBF.",
1481
- layout: {
1482
- boxes: [
1483
- {
1484
- id: "heading",
1485
- target: "h2",
1486
- pos: [80, 50, 1120, 70],
1487
- fontSize: "2rem"
1488
- },
1489
- {
1490
- id: "col-left",
1491
- target: ".columns-2 > div:first-child",
1492
- pos: [80, 150, 530, 510]
1493
- },
1494
- {
1495
- id: "col-right",
1496
- target: ".columns-2 > div:last-child",
1497
- pos: [670, 150, 530, 510]
1498
- }
1499
- ]
1500
- },
1501
- markdownSnippet: `<!-- layout:
1502
- boxes:
1503
- - id: heading
1504
- target: h2
1505
- pos: [80, 50, 1120, 70]
1506
- fontSize: 2rem
1507
- - id: col-left
1508
- target: '.columns-2 > div:first-child'
1509
- pos: [80, 150, 530, 510]
1510
- - id: col-right
1511
- target: '.columns-2 > div:last-child'
1512
- pos: [670, 150, 530, 510]
1513
- -->
1514
-
1515
- ## \u2696\uFE0F So S\xE1nh Kh\xE1i Ni\u1EC7m & Gi\u1EA3i Ph\xE1p
1516
-
1517
- <div class="columns-2">
1518
- <div>
1519
-
1520
- ### \u{1F534} C\xE1ch Ti\u1EBFp C\u1EADn C\u0169
1521
- - X\u1EED l\xFD th\u1EE7 c\xF4ng, t\u1ED1n nhi\u1EC1u nh\xE2n l\u1EF1c
1522
- - D\u1EC5 ph\xE1t sinh sai s\u1ED1 do thao t\xE1c l\u1EB7p l\u1EA1i
1523
- - Kh\xF3 m\u1EDF r\u1ED9ng khi t\u1EA3i t\u0103ng \u0111\u1ED9t bi\u1EBFn
1524
-
1525
- </div>
1526
- <div>
1527
-
1528
- ### \u{1F7E2} Gi\u1EA3i Ph\xE1p T\u1ED1i \u01AFu M\u1EDBi
1529
- - T\u1EF1 \u0111\u1ED9ng h\xF3a ho\xE0n to\xE0n lu\u1ED3ng x\u1EED l\xFD
1530
- - Gi\xE1m s\xE1t tr\u1EA1ng th\xE1i th\u1EDDi gian th\u1EF1c
1531
- - Kh\u1EA3 n\u0103ng co gi\xE3n linh ho\u1EA1t theo nhu c\u1EA7u
1532
-
1533
- </div>
1534
- </div>
1535
-
1536
- <!--
1537
- Presenter Notes:
1538
- - Nh\u1EA5n m\u1EA1nh \u0111i\u1EC3m ngh\u1EBDn l\u1EDBn nh\u1EA5t \u1EDF c\u1ED9t b\xEAn tr\xE1i.
1539
- - D\u1EABn ch\u1EE9ng s\u1ED1 li\u1EC7u th\u1EF1c t\u1EBF ch\u1EE9ng minh t\xEDnh hi\u1EC7u qu\u1EA3 c\u1EE7a c\u1ED9t ph\u1EA3i.
1540
- -->`
1541
- },
1542
- {
1543
- id: "code-explainer",
1544
- name: "Gi\u1EA3i Th\xEDch Code (Code Walkthrough)",
1545
- category: "code",
1546
- description: "C\u1ED9t tr\xE1i hi\u1EC3n th\u1ECB code snippet c\xF3 \u0111\xE1nh s\u1ED1, c\u1ED9t ph\u1EA3i gi\u1EA3i th\xEDch t\u1EEBng b\u01B0\u1EDBc ho\u1EA1t \u0111\u1ED9ng.",
1547
- layout: {
1548
- boxes: [
1549
- {
1550
- id: "heading",
1551
- target: "h2",
1552
- pos: [80, 45, 1120, 65],
1553
- fontSize: "1.9rem"
1554
- },
1555
- {
1556
- id: "code-box",
1557
- target: ".columns-2 > div:first-child",
1558
- pos: [80, 135, 630, 535]
1559
- },
1560
- {
1561
- id: "notes-box",
1562
- target: ".columns-2 > div:last-child",
1563
- pos: [740, 135, 460, 535]
1564
- }
1565
- ]
1566
- },
1567
- markdownSnippet: `<!-- layout:
1568
- boxes:
1569
- - id: heading
1570
- target: h2
1571
- pos: [80, 45, 1120, 65]
1572
- fontSize: 1.9rem
1573
- - id: code-box
1574
- target: '.columns-2 > div:first-child'
1575
- pos: [80, 135, 630, 535]
1576
- - id: notes-box
1577
- target: '.columns-2 > div:last-child'
1578
- pos: [740, 135, 460, 535]
1579
- -->
1580
-
1581
- ## \u{1F4BB} Ph\xE2n T\xEDch C\u1EA5u Tr\xFAc M\xE3 Ngu\u1ED3n
1582
-
1583
- <div class="columns-2">
1584
- <div>
1585
-
1586
- \`\`\`ts
1587
- // Kh\u1EDFi t\u1EA1o quy tr\xECnh ki\u1EC3m tra d\u1EEF li\u1EC7u
1588
- export async function processPayment(order: Order) {
1589
- const isValid = await validateOrder(order);
1590
- if (!isValid) throw new Error("Invalid");
1591
-
1592
- const receipt = await chargeCard(order);
1593
- return sendConfirmation(receipt);
1594
- }
1595
- \`\`\`
1596
-
1597
- </div>
1598
- <div>
1599
-
1600
- ### \u{1F50D} 3 \u0110i\u1EC3m C\u1EA7n Ch\xFA \xDD:
1601
- 1. **Ki\u1EC3m tra s\u1EDBm (Guard Clause):** Ki\u1EC3m tra t\xEDnh h\u1EE3p l\u1EC7 ngay d\xF2ng 3 \u0111\u1EC3 tr\xE1nh g\u1ECDi h\xE0m t\u1ED1n chi ph\xED.
1602
- 2. **B\u1EA5t \u0111\u1ED3ng b\u1ED9 (Async/Await):** \u0110\u1EA3m b\u1EA3o th\u1EE9 t\u1EF1 g\u1ECDi API t\xE0i ch\xEDnh chu\u1EA9n x\xE1c.
1603
- 3. **Ph\u1EA3n h\u1ED3i ng\u01B0\u1EDDi d\xF9ng:** Tr\u1EA3 v\u1EC1 bi\xEAn lai ho\xE0n ch\u1EC9nh sau khi giao d\u1ECBch th\xE0nh c\xF4ng.
1604
-
1605
- </div>
1606
- </div>
1607
-
1608
- <!--
1609
- Presenter Notes:
1610
- - Y\xEAu c\u1EA7u h\u1ECDc vi\xEAn x\xE1c \u0111\u1ECBnh d\xF2ng code n\xE0o l\xE0 r\u1EE7i ro nh\u1EA5t n\u1EBFu k\u1EBFt n\u1ED1i m\u1EA1ng b\u1ECB r\u1EDBt.
1611
- - Nh\u1EAFc l\u1EA1i nguy\xEAn t\u1EAFc Fail-Fast trong l\u1EADp tr\xECnh ph\xF2ng th\u1EE7.
1612
- -->`
1613
- },
1614
- {
1615
- id: "metrics-3-card",
1616
- name: "L\u01B0\u1EDBi 3 Ch\u1EC9 S\u1ED1 (3-Metric Dashboard)",
1617
- category: "metrics",
1618
- description: "Hi\u1EC3n th\u1ECB 3 ch\u1EC9 s\u1ED1 quan tr\u1ECDng (KPIs, Benchmarks, Impact) d\u1EA1ng card n\u1ED5i b\u1EADt.",
1619
- layout: {
1620
- boxes: [
1621
- {
1622
- id: "heading",
1623
- target: "h2",
1624
- pos: [80, 50, 1120, 70],
1625
- fontSize: "2rem",
1626
- textAlign: "center"
1627
- },
1628
- {
1629
- id: "metric-1",
1630
- target: ".columns-3 > div:nth-child(1)",
1631
- pos: [80, 165, 340, 485]
1632
- },
1633
- {
1634
- id: "metric-2",
1635
- target: ".columns-3 > div:nth-child(2)",
1636
- pos: [470, 165, 340, 485]
1637
- },
1638
- {
1639
- id: "metric-3",
1640
- target: ".columns-3 > div:nth-child(3)",
1641
- pos: [860, 165, 340, 485]
1642
- }
1643
- ]
1644
- },
1645
- markdownSnippet: `<!-- layout:
1646
- boxes:
1647
- - id: heading
1648
- target: h2
1649
- pos: [80, 50, 1120, 70]
1650
- fontSize: 2rem
1651
- textAlign: center
1652
- - id: metric-1
1653
- target: '.columns-3 > div:nth-child(1)'
1654
- pos: [80, 165, 340, 485]
1655
- - id: metric-2
1656
- target: '.columns-3 > div:nth-child(2)'
1657
- pos: [470, 165, 340, 485]
1658
- - id: metric-3
1659
- target: '.columns-3 > div:nth-child(3)'
1660
- pos: [860, 165, 340, 485]
1661
- -->
1662
-
1663
- ## \u{1F4CA} 3 Ch\u1EC9 S\u1ED1 Th\xE0nh C\xF4ng C\u1EE7a D\u1EF1 \xC1n
1664
-
1665
- <div class="columns-3">
1666
- <div>
1667
-
1668
- # \u26A1 99.9%
1669
- ### \u0110\u1ED9 S\u1EB5n S\xE0ng (Uptime)
1670
- H\u1EC7 th\u1ED1ng v\u1EADn h\xE0nh li\xEAn t\u1EE5c 24/7 v\u1EDBi kh\u1EA3 n\u0103ng t\u1EF1 ph\u1EE5c h\u1ED3i l\u1ED7i t\u1EE9c th\xEC.
1671
-
1672
- </div>
1673
- <div>
1674
-
1675
- # \u{1F680} 10x
1676
- ### T\u1ED1c \u0110\u1ED9 X\u1EED L\xFD
1677
- R\xFAt ng\u1EAFn th\u1EDDi gian bi\xEAn d\u1ECBch v\xE0 ph\u1EA3n h\u1ED3i ng\u01B0\u1EDDi d\xF9ng t\u1EEB gi\xE2y xu\u1ED1ng mili-gi\xE2y.
1678
-
1679
- </div>
1680
- <div>
1681
-
1682
- # \u{1F6E1}\uFE0F 0
1683
- ### L\u1ED7 H\u1ED5ng B\u1EA3o M\u1EADt
1684
- \u0110\u1EA1t chu\u1EA9n \u0111\xE1nh gi\xE1 an to\xE0n OWASP v\xE0 m\xE3 h\xF3a d\u1EEF li\u1EC7u \u0111\u1EA7u cu\u1ED1i.
1685
-
1686
- </div>
1687
- </div>
1688
-
1689
- <!--
1690
- Presenter Notes:
1691
- - Tr\xECnh b\xE0y l\u1EA7n l\u01B0\u1EE3t 3 m\u1EE5c ti\xEAu \u0111o l\u01B0\u1EDDng \u0111\u01B0\u1EE3c c\u1EE7a h\u1EC7 th\u1ED1ng.
1692
- - Nh\u1EA5n m\u1EA1nh ch\u1EC9 s\u1ED1 th\u1EE9 2 l\xE0 tr\u1ECDng t\xE2m k\u1EF9 thu\u1EADt c\u1EE7a b\xE0i h\u1ECDc h\xF4m nay.
1693
- -->`
1694
- },
1695
- {
1696
- id: "process-flow",
1697
- name: "S\u01A1 \u0110\u1ED3 Quy Tr\xECnh (Process / Flowchart)",
1698
- category: "diagram",
1699
- description: "Quy tr\xECnh nhi\u1EC1u b\u01B0\u1EDBc v\u1EDBi s\u01A1 \u0111\u1ED3 Mermaid tr\u1EF1c quan k\xE8m ghi ch\xFA t\xF3m t\u1EAFt.",
1700
- layout: {
1701
- boxes: [
1702
- {
1703
- id: "heading",
1704
- target: "h2",
1705
- pos: [80, 45, 1120, 65],
1706
- fontSize: "1.9rem"
1707
- },
1708
- {
1709
- id: "diagram-box",
1710
- target: "pre.mermaid, .mermaid",
1711
- pos: [80, 130, 1120, 310]
1712
- },
1713
- {
1714
- id: "summary-box",
1715
- target: "ul, p",
1716
- pos: [80, 465, 1120, 205]
1717
- }
1718
- ]
1719
- },
1720
- markdownSnippet: `<!-- layout:
1721
- boxes:
1722
- - id: heading
1723
- target: h2
1724
- pos: [80, 45, 1120, 65]
1725
- fontSize: 1.9rem
1726
- - id: diagram-box
1727
- target: 'pre.mermaid, .mermaid'
1728
- pos: [80, 130, 1120, 310]
1729
- - id: summary-box
1730
- target: 'ul, p'
1731
- pos: [80, 465, 1120, 205]
1732
- -->
1733
-
1734
- ## \u{1F504} Ki\u1EBFn Tr\xFAc Lu\u1ED3ng D\u1EEF Li\u1EC7u 4 B\u01B0\u1EDBc
1735
-
1736
- \`\`\`mermaid
1737
- graph LR
1738
- A[1. Client Request] --> B[2. API Gateway]
1739
- B --> C[3. Auth Service]
1740
- C --> D[4. Database Cluster]
1741
- style A fill:#0284c7,stroke:#38bdf8,stroke-width:2px,color:#fff
1742
- style B fill:#1e293b,stroke:#64748b,stroke-width:2px,color:#fff
1743
- style C fill:#059669,stroke:#34d399,stroke-width:2px,color:#fff
1744
- style D fill:#7c3aed,stroke:#a78bfa,stroke-width:2px,color:#fff
1745
- \`\`\`
1746
-
1747
- - **Giai \u0111o\u1EA1n 1 & 2:** Ti\u1EBFp nh\u1EADn y\xEAu c\u1EA7u t\u1EEB client, \u0111i\u1EC1u h\u01B0\u1EDBng t\u1EA3i v\xE0 gi\u1EDBi h\u1EA1n t\u1EA7n su\u1EA5t (Rate Limiting).
1748
- - **Giai \u0111o\u1EA1n 3 & 4:** X\xE1c th\u1EF1c token JWT ph\xE2n quy\u1EC1n tr\u01B0\u1EDBc khi truy v\u1EA5n d\u1EEF li\u1EC7u t\u1EEB DB Cluster.
1749
-
1750
- <!--
1751
- Presenter Notes:
1752
- - Tr\u1ECF tr\u1EF1c ti\u1EBFp v\xE0o t\u1EEBng node c\u1EE7a s\u01A1 \u0111\u1ED3 Mermaid khi thuy\u1EBFt tr\xECnh.
1753
- - \u0110\u1EB7t c\xE2u h\u1ECFi: "N\u1EBFu b\u01B0\u1EDBc 3 th\u1EA5t b\u1EA1i th\xEC b\u01B0\u1EDBc 4 c\xF3 \u0111\u01B0\u1EE3c g\u1ECDi kh\xF4ng?"
1754
- -->`
1755
- },
1756
- {
1757
- id: "quote-highlight",
1758
- name: "Th\xF4ng \u0110i\u1EC7p Then Ch\u1ED1t (Quote / Highlight)",
1759
- category: "quote",
1760
- description: "Tr\xEDch d\u1EABn danh ng\xF4n ho\u1EB7c nguy\xEAn t\u1EAFc v\xE0ng c\u1EA7n ghi nh\u1EDB s\xE2u s\u1EAFc.",
1761
- layout: {
1762
- boxes: [
1763
- {
1764
- id: "heading",
1765
- target: "h2",
1766
- pos: [100, 100, 1080, 80],
1767
- fontSize: "2.2rem",
1768
- textAlign: "center"
1769
- },
1770
- {
1771
- id: "quote-box",
1772
- target: "blockquote",
1773
- pos: [140, 230, 1e3, 360],
1774
- fontSize: "1.4rem"
1775
- }
1776
- ]
1777
- },
1778
- markdownSnippet: `<!-- layout:
1779
- boxes:
1780
- - id: heading
1781
- target: h2
1782
- pos: [100, 100, 1080, 80]
1783
- fontSize: 2.2rem
1784
- textAlign: center
1785
- - id: quote-box
1786
- target: blockquote
1787
- pos: [140, 230, 1000, 360]
1788
- fontSize: 1.4rem
1789
- -->
1790
-
1791
- ## \u{1F4A1} Nguy\xEAn T\u1EAFc Thi\u1EBFt K\u1EBF C\u1ED1t L\xF5i
1792
-
1793
- > "S\u1EF1 \u0111\u01A1n gi\u1EA3n l\xE0 \u0111i\u1EC1u ki\u1EC7n ti\xEAn quy\u1EBFt cho \u0111\u1ED9 tin c\u1EADy. M\u1ED9t ki\u1EBFn tr\xFAc t\u1ED1t l\xE0 khi b\u1EA5t k\u1EF3 l\u1EADp tr\xECnh vi\xEAn m\u1EDBi n\xE0o c\u0169ng c\xF3 th\u1EC3 \u0111\u1ECDc hi\u1EC3u lu\u1ED3ng ho\u1EA1t \u0111\u1ED9ng ch\u1EC9 sau 15 ph\xFAt."
1794
- >
1795
- > \u2014 **Edsger W. Dijkstra**
1796
-
1797
- <!--
1798
- Presenter Notes:
1799
- - D\u1EEBng l\u1EA1i 5 gi\xE2y im l\u1EB7ng \u0111\u1EC3 c\u1EA3 l\u1EDBp c\xF9ng suy ng\u1EABm v\u1EC1 th\xF4ng \u0111i\u1EC7p.
1800
- - Y\xEAu c\u1EA7u m\u1ED9t h\u1ECDc vi\xEAn chia s\u1EBB suy ngh\u0129 v\u1EC1 c\xE1ch \xE1p d\u1EE5ng nguy\xEAn t\u1EAFc n\xE0y v\xE0o b\xE0i t\u1EADp l\u1EDBn.
1801
- -->`
1802
- },
1803
- {
1804
- id: "quiz-checkpoint",
1805
- name: "Tr\u1EAFc Nghi\u1EC7m T\u01B0\u01A1ng T\xE1c (Quiz Checkpoint)",
1806
- category: "assessment",
1807
- description: "C\xE2u h\u1ECFi t\u01B0\u01A1ng t\xE1c Formative Checkpoint k\xE8m c\xE1c l\u1EF1a ch\u1ECDn A/B/C/D \u0111\u1EC3 l\u1EDBp b\xECnh ch\u1ECDn.",
1808
- layout: {
1809
- boxes: [
1810
- {
1811
- id: "heading",
1812
- target: "h2",
1813
- pos: [80, 45, 1120, 65],
1814
- fontSize: "1.9rem"
1815
- },
1816
- {
1817
- id: "question-callout",
1818
- target: "blockquote",
1819
- pos: [80, 130, 1120, 110],
1820
- fontSize: "1.2rem"
1821
- },
1822
- {
1823
- id: "options-list",
1824
- target: "ul",
1825
- pos: [80, 260, 1120, 390],
1826
- fontSize: "1.15rem"
1827
- }
1828
- ]
1829
- },
1830
- markdownSnippet: `<!-- layout:
1831
- boxes:
1832
- - id: heading
1833
- target: h2
1834
- pos: [80, 45, 1120, 65]
1835
- fontSize: 1.9rem
1836
- - id: question-callout
1837
- target: blockquote
1838
- pos: [80, 130, 1120, 110]
1839
- fontSize: 1.2rem
1840
- - id: options-list
1841
- target: ul
1842
- pos: [80, 260, 1120, 390]
1843
- fontSize: 1.15rem
1844
- -->
1845
-
1846
- ## \u{1F3AF} Ki\u1EC3m Tra Nhanh: B\u1EA1n \u0110\xE3 Hi\u1EC3u \u0110\xFAng?
1847
-
1848
- > **C\xE2u h\u1ECFi:** Trong ki\u1EBFn tr\xFAc Microservices, c\u01A1 ch\u1EBF n\xE0o gi\xFAp \u0111\u1EA3m b\u1EA3o tin nh\u1EAFn kh\xF4ng b\u1ECB th\u1EA5t l\u1EA1c khi d\u1ECBch v\u1EE5 nh\u1EADn g\u1EB7p s\u1EF1 c\u1ED1 t\u1EA1m th\u1EDDi?
1849
-
1850
- - **A.** G\u1ECDi API HTTP tr\u1EF1c ti\u1EBFp v\u1EDBi timeout ng\u1EAFn
1851
- - **B.** S\u1EED d\u1EE5ng Message Queue (H\xE0ng \u0111\u1EE3i tin nh\u1EAFn) c\xF3 c\u01A1 ch\u1EBF Retry & DLQ
1852
- - **C.** L\u01B0u t\u1EA1m v\xE0o b\u1ED9 nh\u1EDB RAM c\u1EE7a m\xE1y kh\xE1ch (Client In-Memory Storage)
1853
- - **D.** B\u1ECF qua tin nh\u1EAFn b\u1ECB l\u1ED7i v\xE0 th\xF4ng b\xE1o ng\u01B0\u1EDDi d\xF9ng g\u1EEDi l\u1EA1i t\u1EEB \u0111\u1EA7u
1854
-
1855
- <!--
1856
- Presenter Notes:
1857
- - D\xE0nh 30 gi\xE2y cho h\u1ECDc vi\xEAn gi\u01A1 tay ho\u1EB7c b\xECnh ch\u1ECDn \u0111\xE1p \xE1n.
1858
- - \u0110\xE1p \xE1n ch\xEDnh x\xE1c: B.
1859
- - Gi\u1EA3i th\xEDch v\xEC sao \u0111\xE1p \xE1n A v\xE0 C ti\u1EC1m \u1EA9n nguy c\u01A1 m\u1EA5t m\xE1t d\u1EEF li\u1EC7u nghi\xEAm tr\u1ECDng.
1860
- -->`
1861
- },
1862
- {
1863
- id: "tiered-practice-3cards",
1864
- name: "Th\u1EF1c H\xE0nh Ph\xE2n H\xF3a (Tiered Practice)",
1865
- category: "content",
1866
- description: "3 c\u1EA5p b\u1EADc nhi\u1EC7m v\u1EE5 \u0110\u1ED3ng - B\u1EA1c - V\xE0ng \u0111\u1EC3 h\u1ECDc sinh t\u1EF1 ch\u1ECDn m\u1EE9c th\u1EED th\xE1ch ph\xF9 h\u1EE3p.",
1867
- layout: {
1868
- boxes: [
1869
- {
1870
- id: "heading",
1871
- target: "h2",
1872
- pos: [80, 45, 1120, 65],
1873
- fontSize: "1.9rem"
1874
- },
1875
- {
1876
- id: "tier-bronze",
1877
- target: ".columns-3 > div:nth-child(1)",
1878
- pos: [80, 140, 350, 520]
1879
- },
1880
- {
1881
- id: "tier-silver",
1882
- target: ".columns-3 > div:nth-child(2)",
1883
- pos: [465, 140, 350, 520]
1884
- },
1885
- {
1886
- id: "tier-gold",
1887
- target: ".columns-3 > div:nth-child(3)",
1888
- pos: [850, 140, 350, 520]
1889
- }
1890
- ]
1891
- },
1892
- markdownSnippet: `<!-- layout:
1893
- boxes:
1894
- - id: heading
1895
- target: h2
1896
- pos: [80, 45, 1120, 65]
1897
- fontSize: 1.9rem
1898
- - id: tier-bronze
1899
- target: '.columns-3 > div:nth-child(1)'
1900
- pos: [80, 140, 350, 520]
1901
- - id: tier-silver
1902
- target: '.columns-3 > div:nth-child(2)'
1903
- pos: [465, 140, 350, 520]
1904
- - id: tier-gold
1905
- target: '.columns-3 > div:nth-child(3)'
1906
- pos: [850, 140, 350, 520]
1907
- -->
1908
-
1909
- ## \u{1F6E0}\uFE0F Th\u1EED Th\xE1ch Ph\xE2n H\xF3a 3 C\u1EA5p \u0110\u1ED9 (Tiered Lab)
1910
-
1911
- <div class="columns-3">
1912
- <div>
1913
-
1914
- ### \u{1F949} H\u1EA1ng \u0110\u1ED3ng (Bronze)
1915
- - Vi\u1EBFt h\xE0m x\u1EED l\xFD c\u01A1 b\u1EA3n
1916
- - V\u01B0\u1EE3t qua 3 test case m\u1EABu
1917
- - *M\u1EE5c ti\xEAu: \u0110\u1EA1t chu\u1EA9n ki\u1EBFn th\u1EE9c c\u01A1 b\u1EA3n*
1918
-
1919
- </div>
1920
- <div>
1921
-
1922
- ### \u{1F948} H\u1EA1ng B\u1EA1c (Silver)
1923
- - Th\xEAm ki\u1EC3m tra \u0111i\u1EC1u ki\u1EC7n bi\xEAn
1924
- - T\u1ED1i \u01B0u \u0111\u1ED9 ph\u1EE9c t\u1EA1p thu\u1EADt to\xE1n O(N)
1925
- - *M\u1EE5c ti\xEAu: V\u1EEFng v\xE0ng k\u1EF9 n\u0103ng th\u1EF1c chi\u1EBFn*
1926
-
1927
- </div>
1928
- <div>
1929
-
1930
- ### \u{1F947} H\u1EA1ng V\xE0ng (Gold)
1931
- - Thi\u1EBFt k\u1EBF t\xEDnh n\u0103ng m\u1EDF r\u1ED9ng
1932
- - Vi\u1EBFt Unit Test t\u1EF1 \u0111\u1ED9ng bao ph\u1EE7 90%
1933
- - *M\u1EE5c ti\xEAu: S\xE1ng t\u1EA1o & b\u1EE9t ph\xE1*
1934
-
1935
- </div>
1936
- </div>
1937
-
1938
- <!--
1939
- Presenter Notes:
1940
- - To\xE0n b\u1ED9 l\u1EDBp \u0111\u1EC1u b\u1EAFt \u0111\u1EA7u t\u1EEB H\u1EA1ng \u0110\u1ED3ng \u0111\u1EC3 \u0111\u1EA3m b\u1EA3o hi\u1EC3u b\xE0i.
1941
- - Khuy\u1EBFn kh\xEDch h\u1ECDc vi\xEAn \u0111\xE3 xong Bronze ch\u1EE7 \u0111\u1ED9ng th\u1EED s\u1EE9c v\u1EDBi Silver v\xE0 Gold.
1942
- -->`
1943
- },
1944
- {
1945
- id: "agenda-timeline",
1946
- name: "L\u1ED9 Tr\xECnh Bu\u1ED5i H\u1ECDc (Agenda Table)",
1947
- category: "content",
1948
- description: "B\u1EA3ng l\u1ED9 tr\xECnh th\u1EDDi gian chi ti\u1EBFt theo t\u1EEBng giai \u0111o\u1EA1n v\xE0 s\u1EA3n ph\u1EA9m \u0111\u1EA7u ra.",
1949
- layout: {
1950
- boxes: [
1951
- {
1952
- id: "heading",
1953
- target: "h2",
1954
- pos: [80, 45, 1120, 65],
1955
- fontSize: "1.9rem"
1956
- },
1957
- {
1958
- id: "table-box",
1959
- target: "table",
1960
- pos: [80, 140, 1120, 520]
1961
- }
1962
- ]
1963
- },
1964
- markdownSnippet: `<!-- layout:
1965
- boxes:
1966
- - id: heading
1967
- target: h2
1968
- pos: [80, 45, 1120, 65]
1969
- fontSize: 1.9rem
1970
- - id: table-box
1971
- target: table
1972
- pos: [80, 140, 1120, 520]
1973
- -->
1974
-
1975
- ## \u{1F5FA}\uFE0F L\u1ED9 Tr\xECnh Ho\u1EA1t \u0110\u1ED9ng & M\u1EE5c Ti\xEAu
1976
-
1977
- | Th\u1EDDi l\u01B0\u1EE3ng | Giai \u0111o\u1EA1n | Tr\u1ECDng t\xE2m ho\u1EA1t \u0111\u1ED9ng | K\u1EBFt qu\u1EA3 \u0111\u1EA1t \u0111\u01B0\u1EE3c |
1978
- |:---:|---|---|---|
1979
- | **05'** | Kh\u1EDFi \u0111\u1ED9ng | T\xECnh hu\u1ED1ng th\u1EF1c t\u1EBF & Th\u1EED th\xE1ch | Nh\u1EADn di\u1EC7n b\xE0i to\xE1n c\u1EA7n gi\u1EA3i |
1980
- | **15'** | Kh\xE1m ph\xE1 | Ph\xE2n t\xEDch 2 kh\xE1i ni\u1EC7m c\u1ED1t l\xF5i | Hi\u1EC3u b\u1EA3n ch\u1EA5t thu\u1EADt to\xE1n |
1981
- | **20'** | Th\u1EF1c h\xE0nh | Code Lab t\u1EA1i m\xE1y theo 3 b\u1EADc | Ho\xE0n th\xE0nh t\u1ED1i thi\u1EC3u H\u1EA1ng \u0110\u1ED3ng |
1982
- | **05'** | T\u1ED5ng k\u1EBFt | Tr\u1EAFc nghi\u1EC7m ph\u1EA3n x\u1EA1 & \u0110\xE1nh gi\xE1 | H\u1EC7 th\u1ED1ng h\xF3a to\xE0n b\u1ED9 ki\u1EBFn th\u1EE9c |
1983
-
1984
- <!--
1985
- Presenter Notes:
1986
- - Gi\u1EDBi thi\u1EC7u t\u1ED5ng quan \u0111\u1EC3 h\u1ECDc vi\xEAn bi\u1EBFt r\xF5 c\u1EA5u tr\xFAc bu\u1ED5i h\u1ECDc v\xE0 ch\u1EE7 \u0111\u1ED9ng ph\xE2n b\u1ED5 th\u1EDDi gian.
1987
- -->`
1988
- },
1989
- {
1990
- id: "takeaways-summary",
1991
- name: "T\u1ED5ng K\u1EBFt C\u1ED1t L\xF5i (Key Takeaways)",
1992
- category: "content",
1993
- description: "Slide k\u1EBFt lu\u1EADn v\u1EDBi 3 b\xE0i h\u1ECDc \u0111\u1EAFt gi\xE1 nh\u1EA5t v\xE0 h\xE0nh \u0111\u1ED9ng ti\u1EBFp theo.",
1994
- layout: {
1995
- boxes: [
1996
- {
1997
- id: "heading",
1998
- target: "h2",
1999
- pos: [80, 50, 1120, 70],
2000
- fontSize: "2rem"
2001
- },
2002
- {
2003
- id: "list-box",
2004
- target: "ol",
2005
- pos: [80, 150, 1120, 340],
2006
- fontSize: "1.25rem"
2007
- },
2008
- {
2009
- id: "callout-next",
2010
- target: "blockquote",
2011
- pos: [80, 520, 1120, 140],
2012
- fontSize: "1.1rem"
2013
- }
2014
- ]
2015
- },
2016
- markdownSnippet: `<!-- layout:
2017
- boxes:
2018
- - id: heading
2019
- target: h2
2020
- pos: [80, 50, 1120, 70]
2021
- fontSize: 2rem
2022
- - id: list-box
2023
- target: ol
2024
- pos: [80, 150, 1120, 340]
2025
- fontSize: 1.25rem
2026
- - id: callout-next
2027
- target: blockquote
2028
- pos: [80, 520, 1120, 140]
2029
- fontSize: 1.1rem
2030
- -->
2031
-
2032
- ## \u{1F3C1} 3 \u0110i\u1EC1u C\u1EA7n Nh\u1EDB Sau Bu\u1ED5i H\u1ECDc
2033
-
2034
- 1. **Hi\u1EC3u b\u1EA3n ch\u1EA5t tr\u01B0\u1EDBc khi vi\u1EBFt m\xE3:** Thu\u1EADt to\xE1n \u0111\xFAng lu\xF4n quan tr\u1ECDng h\u01A1n c\xFA ph\xE1p b\xF3ng b\u1EA9y.
2035
- 2. **Ki\u1EC3m so\xE1t \u0111i\u1EC1u ki\u1EC7n bi\xEAn:** 80% l\u1ED7i h\u1EC7 th\u1ED1ng ph\xE1t sinh t\u1EEB c\xE1c d\u1EEF li\u1EC7u \u0111\u1EA7u v\xE0o kh\xF4ng l\u01B0\u1EDDng tr\u01B0\u1EDBc.
2036
- 3. **Thi\u1EBFt k\u1EBF h\u01B0\u1EDBng m\xF4-\u0111un:** Chia nh\u1ECF v\u1EA5n \u0111\u1EC1 l\u1EDBn th\xE0nh c\xE1c h\xE0m \u0111\u1ED9c l\u1EADp d\u1EC5 ki\u1EC3m th\u1EED.
2037
-
2038
- > \u{1F4DD} **Nhi\u1EC7m v\u1EE5 v\u1EC1 nh\xE0:** Ho\xE0n thi\u1EC7n b\xE0i th\u1EF1c h\xE0nh H\u1EA1ng B\u1EA1c v\xE0 chu\u1EA9n b\u1ECB c\xE2u h\u1ECFi cho bu\u1ED5i Review tu\u1EA7n t\u1EDBi.
2039
-
2040
- <!--
2041
- Presenter Notes:
2042
- - T\xF3m t\u1EAFt s\xFAc t\xEDch trong 2 ph\xFAt cu\u1ED1i bu\u1ED5i.
2043
- - Tuy\xEAn d\u01B0\u01A1ng c\xE1c b\u1EA1n c\xF3 gi\u1EA3i ph\xE1p xu\u1EA5t s\u1EAFc trong ph\u1EA7n th\u1EF1c h\xE0nh.
2044
- -->`
2045
- }
2046
- ];
2047
- function getSlideLayoutPresetById(id) {
2048
- return SLIDE_LAYOUT_PRESETS.find((p) => p.id === id);
2049
- }
2050
- function getSlideLayoutPresetsByCategory(category) {
2051
- return SLIDE_LAYOUT_PRESETS.filter((p) => p.category === category);
2052
- }
2053
1315
  function renderMarp(markdown, containerId = "marp-container", enableClicks = false) {
2054
1316
  const cleanSource = extractMarpSource(markdown);
2055
1317
  const { markdown: clickProcessed, totalClicks } = enableClicks ? preprocessClicks(cleanSource) : { markdown: cleanSource, totalClicks: 0 };
@@ -2122,7 +1384,6 @@ async function renderSlideAsync(markdown, options) {
2122
1384
  };
2123
1385
  }
2124
1386
 
2125
- exports.SLIDE_LAYOUT_PRESETS = SLIDE_LAYOUT_PRESETS;
2126
1387
  exports.convertTextArrows = convertTextArrows;
2127
1388
  exports.countSlides = countSlides;
2128
1389
  exports.darkThemeTokens = darkThemeTokens;
@@ -2137,8 +1398,6 @@ exports.generateLayoutCss = generateLayoutCss;
2137
1398
  exports.generateScopedCss = generateScopedCss;
2138
1399
  exports.generateScopedCss2 = generateScopedCss2;
2139
1400
  exports.getHighlighter = getHighlighter;
2140
- exports.getSlideLayoutPresetById = getSlideLayoutPresetById;
2141
- exports.getSlideLayoutPresetsByCategory = getSlideLayoutPresetsByCategory;
2142
1401
  exports.getThemeTokens = getThemeTokens;
2143
1402
  exports.highlightCodeBlocks = highlightCodeBlocks;
2144
1403
  exports.isLayoutComment = isLayoutComment;
@@ -2153,8 +1412,5 @@ exports.renderSlide = renderSlide;
2153
1412
  exports.renderSlideAsync = renderSlideAsync;
2154
1413
  exports.resolveTheme = resolveTheme;
2155
1414
  exports.sanitizeMermaidCode = sanitizeMermaidCode;
2156
- exports.serializeLayoutToComment = serializeLayoutToComment;
2157
- exports.splitMarkdownSlides = splitMarkdownSlides;
2158
- exports.updateSlideLayoutInMarkdown = updateSlideLayoutInMarkdown;
2159
- //# sourceMappingURL=chunk-RJMPTRL3.cjs.map
2160
- //# sourceMappingURL=chunk-RJMPTRL3.cjs.map
1415
+ //# sourceMappingURL=chunk-VLAPHJOC.cjs.map
1416
+ //# sourceMappingURL=chunk-VLAPHJOC.cjs.map