mulmocast 2.1.40 → 2.2.1

package/lib/slide/layouts/grid.js

@@ -1,5 +1,5 @@
 import { escapeHtml, nl2br, c, cardWrap, numBadge, iconSquare } from "../utils.js";
-import { renderContentBlocks } from "../blocks.js";
+import { renderCardContentBlocks } from "../blocks.js";
 export const layoutGrid = (data) => {
     const accent = data.accentColor || "primary";
     const nCols = data.gridColumns || 3;
@@ -8,7 +8,7 @@ export const layoutGrid = (data) => {
     parts.push(`<div class="px-12 pt-5 shrink-0">`);
     parts.push(`  <h2 class="text-[42px] leading-tight font-title font-bold text-d-text">${nl2br(data.title)}</h2>`);
     parts.push(`</div>`);
-    parts.push(`<div class="grid grid-cols-${nCols} gap-4 px-12 mt-5 flex-1 content-start">`);
+    parts.push(`<div class="grid grid-cols-${nCols} gap-4 px-12 mt-5 flex-1 min-h-0 overflow-hidden content-start">`);
     (data.items || []).forEach((item) => {
         const itemAccent = item.accentColor || "primary";
         const inner = [];
@@ -31,7 +31,7 @@ export const layoutGrid = (data) => {
             inner.push(`<p class="text-sm text-d-muted font-body mt-3">${escapeHtml(item.description)}</p>`);
         }
         if (item.content) {
-            inner.push(`<div class="mt-3 space-y-3">${renderContentBlocks(item.content)}</div>`);
+            inner.push(`<div class="mt-3 space-y-3 flex-1 min-h-0 overflow-hidden flex flex-col">${renderCardContentBlocks(item.content)}</div>`);
         }
         parts.push(cardWrap(itemAccent, inner.join("\n")));
     });

package/lib/slide/render.js

@@ -1,9 +1,31 @@
-import { escapeHtml, buildTailwindConfig, sanitizeHex } from "./utils.js";
+import { escapeHtml, buildTailwindConfig, sanitizeHex, detectBlockTypes } from "./utils.js";
 import { renderSlideContent } from "./layouts/index.js";
+/** Determine if a hex color is dark (luminance < 128) */
+const isDarkBg = (hex) => {
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return (r * 299 + g * 587 + b * 114) / 1000 < 128;
+};
+/** Build CDN script tags for chart/mermaid when needed */
+const buildCdnScripts = (theme, slide) => {
+    const { hasChart, hasMermaid } = detectBlockTypes(slide);
+    const scripts = [];
+    if (hasChart) {
+        scripts.push('<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>');
+    }
+    if (hasMermaid) {
+        const mermaidTheme = isDarkBg(theme.colors.bg) ? "dark" : "default";
+        scripts.push(`<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script>mermaid.initialize({startOnLoad:true,theme:'${mermaidTheme}'})</script>`);
+    }
+    return scripts.join("\n");
+};
 /** Generate a complete HTML document for a single slide */
 export const generateSlideHTML = (theme, slide) => {
     const content = renderSlideContent(slide);
     const twConfig = buildTailwindConfig(theme);
+    const cdnScripts = buildCdnScripts(theme, slide);
     const slideStyle = slide.style;
     const bgCls = slideStyle?.bgColor ? "" : "bg-d-bg";
     const inlineStyle = slideStyle?.bgColor ? ` style="background-color:#${sanitizeHex(slideStyle.bgColor)}"` : "";
@@ -15,6 +37,7 @@ export const generateSlideHTML = (theme, slide) => {
 <meta name="viewport" content="width=1280">
 <script src="https://cdn.tailwindcss.com"></script>
 <script>tailwind.config = ${twConfig}</script>
+${cdnScripts}
 <style>
   html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
 </style>