mulmocast 2.1.39 → 2.1.40

package/lib/slide/layouts/table.js

@@ -0,0 +1,46 @@
+import { escapeHtml, c, slideHeader, renderCalloutBar } from "../utils.js";
+const resolveCellColor = (cellObj, isRowHeader) => {
+    if (cellObj.color)
+        return `text-${c(cellObj.color)}`;
+    if (isRowHeader)
+        return "text-d-text";
+    return "text-d-muted";
+};
+const renderCellValue = (cell, isRowHeader) => {
+    const cellObj = typeof cell === "object" && cell !== null ? cell : { text: String(cell) };
+    const colorCls = resolveCellColor(cellObj, isRowHeader);
+    const boldCls = cellObj.bold || isRowHeader ? "font-bold" : "";
+    return `<td class="px-4 py-3 text-sm ${colorCls} ${boldCls} font-body border-b border-d-alt">${escapeHtml(cellObj.text)}</td>`;
+};
+export const layoutTable = (data) => {
+    const parts = [slideHeader(data)];
+    const headers = data.headers || [];
+    const rows = data.rows || [];
+    const striped = data.striped !== false;
+    parts.push(`<div class="px-12 mt-5 flex-1 overflow-auto">`);
+    parts.push(`<table class="w-full border-collapse">`);
+    parts.push(`<thead>`);
+    parts.push(`<tr>`);
+    headers.forEach((h) => {
+        parts.push(`  <th class="text-left px-4 py-3 text-sm font-bold text-d-text font-body border-b-2 border-d-alt">${escapeHtml(h)}</th>`);
+    });
+    parts.push(`</tr>`);
+    parts.push(`</thead>`);
+    parts.push(`<tbody>`);
+    rows.forEach((row, ri) => {
+        const bgCls = striped && ri % 2 === 1 ? "bg-d-alt/30" : "";
+        parts.push(`<tr class="${bgCls}">`);
+        (row || []).forEach((cell, ci) => {
+            const isRowHeader = ci === 0 && !!data.rowHeaders;
+            parts.push(`  ${renderCellValue(cell, isRowHeader)}`);
+        });
+        parts.push(`</tr>`);
+    });
+    parts.push(`</tbody>`);
+    parts.push(`</table>`);
+    parts.push(`</div>`);
+    if (data.callout) {
+        parts.push(`<div class="mt-auto pb-4">${renderCalloutBar(data.callout)}</div>`);
+    }
+    return parts.join("\n");
+};

package/lib/slide/layouts/timeline.d.ts

@@ -0,0 +1,2 @@
+import type { TimelineSlide } from "../schema.js";
+export declare const layoutTimeline: (data: TimelineSlide) => string;

package/lib/slide/layouts/timeline.js

@@ -0,0 +1,24 @@
+import { escapeHtml, nl2br, c, slideHeader } from "../utils.js";
+export const layoutTimeline = (data) => {
+    const parts = [slideHeader(data)];
+    const items = data.items || [];
+    parts.push(`<div class="flex items-start px-12 mt-8 flex-1 relative">`);
+    parts.push(`<div class="absolute left-16 right-16 top-[52px] h-[2px] bg-d-alt"></div>`);
+    items.forEach((item) => {
+        const color = item.color || data.accentColor || "primary";
+        const dotBorder = item.done ? `bg-${c(color)}` : `bg-d-alt`;
+        const dotInner = item.done ? "bg-d-text" : `bg-${c(color)}`;
+        parts.push(`<div class="flex-1 flex flex-col items-center text-center relative z-10">`);
+        parts.push(`  <div class="w-10 h-10 rounded-full ${dotBorder} flex items-center justify-center shadow-lg">`);
+        parts.push(`    <div class="w-4 h-4 rounded-full ${dotInner}"></div>`);
+        parts.push(`  </div>`);
+        parts.push(`  <p class="text-sm font-bold text-${c(color)} font-body mt-4">${escapeHtml(item.date)}</p>`);
+        parts.push(`  <p class="text-base font-bold text-d-text font-body mt-2">${escapeHtml(item.title)}</p>`);
+        if (item.description) {
+            parts.push(`  <p class="text-sm text-d-muted font-body mt-1 px-3">${nl2br(item.description)}</p>`);
+        }
+        parts.push(`</div>`);
+    });
+    parts.push(`</div>`);
+    return parts.join("\n");
+};

package/lib/slide/layouts/title.d.ts

@@ -0,0 +1,2 @@
+import type { TitleSlide } from "../schema.js";
+export declare const layoutTitle: (data: TitleSlide) => string;

package/lib/slide/layouts/title.js

@@ -0,0 +1,17 @@
+import { nl2br } from "../utils.js";
+export const layoutTitle = (data) => {
+    return [
+        `<div class="h-[3px] bg-d-primary"></div>`,
+        `<div class="absolute -top-20 -right-8 w-[360px] h-[360px] rounded-full bg-d-primary opacity-10"></div>`,
+        `<div class="absolute -bottom-12 -left-16 w-[280px] h-[280px] rounded-full bg-d-accent opacity-10"></div>`,
+        `<div class="flex flex-col justify-center h-full px-16 relative z-10">`,
+        `  <h1 class="text-[60px] leading-tight font-title font-bold text-d-text">${nl2br(data.title)}</h1>`,
+        data.subtitle ? `  <p class="text-2xl text-d-muted mt-6 font-body">${nl2br(data.subtitle)}</p>` : "",
+        data.author ? `  <p class="text-lg text-d-dim mt-10 font-body">${nl2br(data.author)}</p>` : "",
+        data.note ? `  <div class="bg-d-card px-4 py-2 mt-6 inline-block rounded"><p class="text-sm text-d-dim font-body">${nl2br(data.note)}</p></div>` : "",
+        `</div>`,
+        `<div class="absolute bottom-0 left-0 right-0 h-[3px] bg-d-accent"></div>`,
+    ]
+        .filter(Boolean)
+        .join("\n");
+};

package/lib/slide/render.d.ts

@@ -0,0 +1,3 @@
+import type { SlideTheme, SlideLayout } from "./schema.js";
+/** Generate a complete HTML document for a single slide */
+export declare const generateSlideHTML: (theme: SlideTheme, slide: SlideLayout) => string;

package/lib/slide/render.js

@@ -0,0 +1,29 @@
+import { escapeHtml, buildTailwindConfig, sanitizeHex } from "./utils.js";
+import { renderSlideContent } from "./layouts/index.js";
+/** Generate a complete HTML document for a single slide */
+export const generateSlideHTML = (theme, slide) => {
+    const content = renderSlideContent(slide);
+    const twConfig = buildTailwindConfig(theme);
+    const slideStyle = slide.style;
+    const bgCls = slideStyle?.bgColor ? "" : "bg-d-bg";
+    const inlineStyle = slideStyle?.bgColor ? ` style="background-color:#${sanitizeHex(slideStyle.bgColor)}"` : "";
+    const footer = slideStyle?.footer ? `<p class="absolute bottom-2 right-4 text-xs text-d-dim font-body">${escapeHtml(slideStyle.footer)}</p>` : "";
+    return `<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<script src="https://cdn.tailwindcss.com"></script>
+<script>tailwind.config = ${twConfig}</script>
+<style>
+  html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
+</style>
+</head>
+<body class="h-full">
+<div class="relative overflow-hidden ${bgCls} w-full h-full flex flex-col"${inlineStyle}>
+${content}
+${footer}
+</div>
+</body>
+</html>`;
+};