@hasna/skills 0.0.2 → 0.0.4

package/skills/skill-generate-slides/src/render.ts

@@ -1,711 +0,0 @@
-/**
- * Rendering logic for different output formats
- */
-
-import { readFile } from "node:fs/promises";
-import { extname } from "node:path";
-import PptxGenJS from "pptxgenjs";
-import { Presentation, Slide, SlideOptions } from "./parse.js";
-import { THEME_COLORS, getThemeColors, getLogoPosition } from "./layout.js";
-import { escapeHTML } from "./parse.js";
-
-export async function renderPPTX(presentation: Presentation, options: SlideOptions): Promise<Buffer> {
-  console.log("📊 Generating PPTX...");
-
-  const pptx = new PptxGenJS();
-  const theme = getThemeColors(options.theme, options.primaryColor, options.secondaryColor);
-  const themeData = THEME_COLORS[options.theme] || THEME_COLORS.minimal;
-
-  // Set presentation properties
-  pptx.title = presentation.title;
-  pptx.author = presentation.author || "skills.md";
-  pptx.subject = presentation.title;
-  pptx.company = "Generated by skills.md";
-
-  // Set layout
-  if (options.aspectRatio === "16:9") {
-    pptx.layout = "LAYOUT_WIDE";
-  } else if (options.aspectRatio === "4:3") {
-    pptx.layout = "LAYOUT_4x3";
-  }
-
-  // Define master slide
-  pptx.defineSlideMaster({
-    title: "MASTER_SLIDE",
-    background: { color: themeData.background },
-    objects: [
-      // Footer
-      ...(options.footer
-        ? [
-            {
-              text: {
-                text: options.footer,
-                options: {
-                  x: 0.5,
-                  y: "92%",
-                  w: "40%",
-                  h: 0.3,
-                  fontSize: 10,
-                  color: themeData.text,
-                  align: "left" as const,
-                },
-              },
-            },
-          ]
-        : []),
-      // Slide number placeholder
-      ...(options.slideNumbers
-        ? [
-            {
-              text: {
-                text: "SLIDE_NUMBER",
-                options: {
-                  x: "90%",
-                  y: "92%",
-                  w: 0.5,
-                  h: 0.3,
-                  fontSize: 10,
-                  color: themeData.text,
-                  align: "right" as const,
-                },
-              },
-            },
-          ]
-        : []),
-    ],
-  });
-
-  // Process each slide
-  for (let i = 0; i < presentation.slides.length; i++) {
-    const slideData = presentation.slides[i];
-    const slide = pptx.addSlide({ masterName: "MASTER_SLIDE" });
-
-    // Add slide number
-    if (options.slideNumbers && i > 0) {
-      slide.addText(`${i + 1}`, {
-        x: "92%",
-        y: "92%",
-        w: 0.5,
-        h: 0.3,
-        fontSize: 10,
-        color: themeData.text,
-        align: "right",
-      });
-    }
-
-    renderSlide(slide, slideData, i, presentation, options, theme, themeData);
-  }
-
-  // Add logo if specified
-  if (options.logo) {
-    await addLogoToSlides(pptx, options);
-  }
-
-  // Generate buffer
-  const buffer = await pptx.write({ outputType: "nodebuffer" });
-  return buffer as Buffer;
-}
-
-function renderSlide(
-  slide: any,
-  slideData: Slide,
-  index: number,
-  presentation: Presentation,
-  options: SlideOptions,
-  theme: ReturnType<typeof getThemeColors>,
-  themeData: typeof THEME_COLORS.minimal
-) {
-  switch (slideData.type) {
-    case "title":
-      renderTitleSlide(slide, slideData, presentation, theme);
-      break;
-    case "bullets":
-    case "content":
-      renderContentSlide(slide, slideData, theme, themeData);
-      break;
-    case "two-column":
-      renderTwoColumnSlide(slide, slideData, theme, themeData);
-      break;
-    case "quote":
-      renderQuoteSlide(slide, slideData, presentation, theme, themeData);
-      break;
-    case "code":
-      renderCodeSlide(slide, slideData, options, theme, themeData);
-      break;
-    case "image":
-      renderImageSlide(slide, slideData, theme, themeData);
-      break;
-  }
-
-  // Add speaker notes
-  if (slideData.notes && options.notes) {
-    slide.addNotes(slideData.notes);
-  }
-}
-
-function renderTitleSlide(
-  slide: any,
-  slideData: Slide,
-  presentation: Presentation,
-  theme: ReturnType<typeof getThemeColors>
-) {
-  slide.addText(slideData.title || presentation.title, {
-    x: 0.5,
-    y: "35%",
-    w: "90%",
-    h: 1.5,
-    fontSize: 44,
-    bold: true,
-    color: theme.primary,
-    align: "center",
-  });
-
-  if (slideData.subtitle || presentation.subtitle) {
-    slide.addText(slideData.subtitle || presentation.subtitle || "", {
-      x: 0.5,
-      y: "55%",
-      w: "90%",
-      h: 0.8,
-      fontSize: 24,
-      color: theme.secondary,
-      align: "center",
-    });
-  }
-
-  if (presentation.author) {
-    slide.addText(presentation.author, {
-      x: 0.5,
-      y: "70%",
-      w: "90%",
-      h: 0.5,
-      fontSize: 18,
-      color: theme.text,
-      align: "center",
-    });
-  }
-
-  slide.addText(presentation.date, {
-    x: 0.5,
-    y: "78%",
-    w: "90%",
-    h: 0.4,
-    fontSize: 14,
-    color: theme.text,
-    align: "center",
-  });
-}
-
-function renderContentSlide(
-  slide: any,
-  slideData: Slide,
-  theme: ReturnType<typeof getThemeColors>,
-  themeData: typeof THEME_COLORS.minimal
-) {
-  if (slideData.title) {
-    slide.addText(slideData.title, {
-      x: 0.5,
-      y: 0.5,
-      w: "90%",
-      h: 0.8,
-      fontSize: 32,
-      bold: true,
-      color: theme.primary,
-    });
-  }
-
-  if (slideData.content.length > 0) {
-    const bullets = slideData.content.map((text) => ({
-      text,
-      options: { bullet: { type: "bullet" as const }, indentLevel: 0 },
-    }));
-
-    slide.addText(bullets, {
-      x: 0.5,
-      y: slideData.title ? 1.5 : 0.5,
-      w: "90%",
-      h: 4,
-      fontSize: 20,
-      color: themeData.text,
-      valign: "top",
-      paraSpaceAfter: 12,
-    });
-  }
-}
-
-function renderTwoColumnSlide(
-  slide: any,
-  slideData: Slide,
-  theme: ReturnType<typeof getThemeColors>,
-  themeData: typeof THEME_COLORS.minimal
-) {
-  if (slideData.title) {
-    slide.addText(slideData.title, {
-      x: 0.5,
-      y: 0.5,
-      w: "90%",
-      h: 0.8,
-      fontSize: 32,
-      bold: true,
-      color: theme.primary,
-    });
-  }
-
-  if (slideData.columns) {
-    // Left column
-    const leftBullets = slideData.columns.left.map((text) => ({
-      text,
-      options: { bullet: { type: "bullet" as const }, indentLevel: 0 },
-    }));
-    slide.addText(leftBullets, {
-      x: 0.5,
-      y: 1.5,
-      w: "44%",
-      h: 3.5,
-      fontSize: 18,
-      color: themeData.text,
-      valign: "top",
-      paraSpaceAfter: 10,
-    });
-
-    // Right column
-    const rightBullets = slideData.columns.right.map((text) => ({
-      text,
-      options: { bullet: { type: "bullet" as const }, indentLevel: 0 },
-    }));
-    slide.addText(rightBullets, {
-      x: "52%",
-      y: 1.5,
-      w: "44%",
-      h: 3.5,
-      fontSize: 18,
-      color: themeData.text,
-      valign: "top",
-      paraSpaceAfter: 10,
-    });
-  }
-}
-
-function renderQuoteSlide(
-  slide: any,
-  slideData: Slide,
-  presentation: Presentation,
-  theme: ReturnType<typeof getThemeColors>,
-  themeData: typeof THEME_COLORS.minimal
-) {
-  if (slideData.title) {
-    slide.addText(slideData.title, {
-      x: 0.5,
-      y: 0.5,
-      w: "90%",
-      h: 0.8,
-      fontSize: 28,
-      bold: true,
-      color: theme.primary,
-    });
-  }
-
-  const quoteText = slideData.content.join(" ");
-  slide.addText(`"${quoteText}"`, {
-    x: 1,
-    y: "35%",
-    w: "80%",
-    h: 2,
-    fontSize: 28,
-    italic: true,
-    color: theme.secondary,
-    align: "center",
-    valign: "middle",
-  });
-}
-
-function renderCodeSlide(
-  slide: any,
-  slideData: Slide,
-  options: SlideOptions,
-  theme: ReturnType<typeof getThemeColors>,
-  themeData: typeof THEME_COLORS.minimal
-) {
-  if (slideData.title) {
-    slide.addText(slideData.title, {
-      x: 0.5,
-      y: 0.5,
-      w: "90%",
-      h: 0.8,
-      fontSize: 32,
-      bold: true,
-      color: theme.primary,
-    });
-  }
-
-  const codeContent = slideData.content.join("\n");
-  slide.addText(codeContent, {
-    x: 0.5,
-    y: 1.5,
-    w: "90%",
-    h: 4,
-    fontSize: 12,
-    fontFace: "Courier New",
-    color: options.theme === "dark" ? "EAEAEA" : "333333",
-    fill: { color: options.theme === "dark" ? "2D2D2D" : "F5F5F5" },
-    valign: "top",
-  });
-}
-
-function renderImageSlide(
-  slide: any,
-  slideData: Slide,
-  theme: ReturnType<typeof getThemeColors>,
-  themeData: typeof THEME_COLORS.minimal
-) {
-  if (slideData.title) {
-    slide.addText(slideData.title, {
-      x: 0.5,
-      y: 0.5,
-      w: "90%",
-      h: 0.8,
-      fontSize: 32,
-      bold: true,
-      color: theme.primary,
-    });
-  }
-
-  // Placeholder for image
-  slide.addText("[Image: " + (slideData.imageUrl || slideData.imagePrompt || "Insert image here") + "]", {
-    x: 1,
-    y: 1.5,
-    w: "80%",
-    h: 3.5,
-    fontSize: 16,
-    color: themeData.text,
-    align: "center",
-    valign: "middle",
-    fill: { color: "EEEEEE" },
-  });
-}
-
-async function addLogoToSlides(pptx: PptxGenJS, options: SlideOptions) {
-  try {
-    const logoData = await readFile(options.logo!);
-    const logoBase64 = logoData.toString("base64");
-    const ext = extname(options.logo!).toLowerCase().replace(".", "");
-    const logoPos = getLogoPosition(options.logoPosition);
-
-    for (let i = 0; i < pptx.slides.length; i++) {
-      pptx.slides[i].addImage({
-        data: `image/${ext};base64,${logoBase64}`,
-        x: logoPos.x,
-        y: logoPos.y,
-        w: 1,
-        h: 0.5,
-      });
-    }
-  } catch (error) {
-    console.warn("   ⚠️  Could not add logo:", (error as Error).message);
-  }
-}
-
-export function renderHTML(presentation: Presentation, options: SlideOptions): string {
-  const theme = getThemeColors(options.theme, options.primaryColor, options.secondaryColor);
-  const themeData = THEME_COLORS[options.theme] || THEME_COLORS.minimal;
-
-  const slidesHTML = presentation.slides
-    .map((slide, index) => generateSlideHTML(slide, index, presentation, options, theme, themeData))
-    .join("\n");
-
-  const css = generateCSS(options, theme, themeData);
-
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${escapeHTML(presentation.title)}</title>
-  <style>${css}</style>
-</head>
-<body>
-  ${slidesHTML}
-</body>
-</html>`;
-}
-
-function generateSlideHTML(
-  slide: Slide,
-  index: number,
-  presentation: Presentation,
-  options: SlideOptions,
-  theme: ReturnType<typeof getThemeColors>,
-  themeData: typeof THEME_COLORS.minimal
-): string {
-  switch (slide.type) {
-    case "title":
-      return `
-        <div class="slide slide-title">
-          <h1>${escapeHTML(slide.title || presentation.title)}</h1>
-          ${slide.subtitle || presentation.subtitle ? `<h2>${escapeHTML(slide.subtitle || presentation.subtitle || "")}</h2>` : ""}
-          ${presentation.author ? `<p class="author">${escapeHTML(presentation.author)}</p>` : ""}
-          <p class="date">${escapeHTML(presentation.date)}</p>
-        </div>
-      `;
-
-    case "two-column":
-      return `
-        <div class="slide">
-          ${slide.title ? `<h2>${escapeHTML(slide.title)}</h2>` : ""}
-          <div class="two-column">
-            <div class="column">
-              <ul>${slide.columns?.left.map((item) => `<li>${escapeHTML(item)}</li>`).join("") || ""}</ul>
-            </div>
-            <div class="column">
-              <ul>${slide.columns?.right.map((item) => `<li>${escapeHTML(item)}</li>`).join("") || ""}</ul>
-            </div>
-          </div>
-          ${options.slideNumbers ? `<div class="slide-number">${index + 1}</div>` : ""}
-        </div>
-      `;
-
-    case "quote":
-      return `
-        <div class="slide slide-quote">
-          ${slide.title ? `<h2>${escapeHTML(slide.title)}</h2>` : ""}
-          <blockquote>"${escapeHTML(slide.content.join(" "))}"</blockquote>
-          ${options.slideNumbers ? `<div class="slide-number">${index + 1}</div>` : ""}
-        </div>
-      `;
-
-    case "code":
-      return `
-        <div class="slide">
-          ${slide.title ? `<h2>${escapeHTML(slide.title)}</h2>` : ""}
-          <pre><code class="language-${escapeHTML(slide.codeLanguage || "text")}">${escapeHTML(slide.content.join("\n"))}</code></pre>
-          ${options.slideNumbers ? `<div class="slide-number">${index + 1}</div>` : ""}
-        </div>
-      `;
-
-    default:
-      return `
-        <div class="slide">
-          ${slide.title ? `<h2>${escapeHTML(slide.title)}</h2>` : ""}
-          <ul>${slide.content.map((item) => `<li>${escapeHTML(item)}</li>`).join("")}</ul>
-          ${options.slideNumbers ? `<div class="slide-number">${index + 1}</div>` : ""}
-        </div>
-      `;
-  }
-}
-
-function generateCSS(
-  options: SlideOptions,
-  theme: ReturnType<typeof getThemeColors>,
-  themeData: typeof THEME_COLORS.minimal
-): string {
-  return `
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-
-    body {
-      font-family: ${options.font || "system-ui"}, -apple-system, sans-serif;
-      background: #${themeData.background};
-      color: #${themeData.text};
-      line-height: 1.6;
-    }
-
-    .slide {
-      width: 100vw;
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      padding: 4rem 6rem;
-      page-break-after: always;
-    }
-
-    .slide-title {
-      text-align: center;
-      align-items: center;
-    }
-
-    .slide-title h1 {
-      font-size: 3.5rem;
-      color: #${theme.primary};
-      margin-bottom: 1rem;
-    }
-
-    .slide-title h2 {
-      font-size: 1.8rem;
-      color: #${theme.secondary};
-      font-weight: normal;
-      margin-bottom: 2rem;
-    }
-
-    .slide-title .author { font-size: 1.3rem; margin-bottom: 0.5rem; }
-    .slide-title .date { font-size: 1rem; opacity: 0.7; }
-
-    .slide h2 {
-      font-size: 2.5rem;
-      color: #${theme.primary};
-      margin-bottom: 2rem;
-    }
-
-    .slide ul {
-      font-size: 1.5rem;
-      margin-left: 2rem;
-    }
-
-    .slide li {
-      margin-bottom: 1rem;
-      line-height: 1.8;
-    }
-
-    .two-column {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 3rem;
-      flex: 1;
-    }
-
-    .slide-quote blockquote {
-      font-size: 2rem;
-      font-style: italic;
-      color: #${theme.secondary};
-      text-align: center;
-      max-width: 80%;
-      margin: 0 auto;
-    }
-
-    pre {
-      background: ${options.theme === "dark" ? "#2d2d2d" : "#f5f5f5"};
-      padding: 1.5rem;
-      border-radius: 8px;
-      overflow-x: auto;
-      font-size: 1rem;
-    }
-
-    code { font-family: 'Monaco', 'Courier New', monospace; }
-
-    .slide-number {
-      position: absolute;
-      bottom: 2rem;
-      right: 2rem;
-      font-size: 0.9rem;
-      opacity: 0.6;
-    }
-
-    @media print {
-      .slide { page-break-after: always; }
-    }
-  `;
-}
-
-// Validate transition values to prevent XSS in JavaScript interpolation
-const VALID_TRANSITIONS = ["none", "fade", "slide", "convex", "concave", "zoom"];
-const VALID_TRANSITION_SPEEDS = ["slow", "default", "fast"];
-
-function sanitizeTransition(value: string): string {
-  return VALID_TRANSITIONS.includes(value) ? value : "fade";
-}
-
-function sanitizeTransitionSpeed(value: string): string {
-  return VALID_TRANSITION_SPEEDS.includes(value) ? value : "default";
-}
-
-export function renderRevealJS(presentation: Presentation, options: SlideOptions): string {
-  const theme = getThemeColors(options.theme, options.primaryColor, options.secondaryColor);
-  const themeData = THEME_COLORS[options.theme] || THEME_COLORS.minimal;
-
-  const slidesHTML = presentation.slides
-    .map((slide) => generateRevealSlideHTML(slide, presentation, options))
-    .join("\n");
-
-  const revealTheme = options.theme === "dark" || options.theme === "tech" ? "black" : "white";
-
-  // Sanitize transition values to prevent XSS
-  const safeTransition = sanitizeTransition(options.transition);
-  const safeTransitionSpeed = sanitizeTransitionSpeed(options.transitionSpeed);
-
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${escapeHTML(presentation.title)}</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/theme/${revealTheme}.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/highlight/monokai.css">
-  <style>
-    .reveal h1, .reveal h2 { color: #${theme.primary}; }
-    .reveal blockquote { font-style: italic; border-left: 4px solid #${theme.secondary}; }
-  </style>
-</head>
-<body>
-  <div class="reveal">
-    <div class="slides">
-      ${slidesHTML}
-    </div>
-  </div>
-  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/notes/notes.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/highlight/highlight.js"></script>
-  <script>
-    Reveal.initialize({
-      hash: true,
-      transition: '${safeTransition}',
-      transitionSpeed: '${safeTransitionSpeed}',
-      slideNumber: ${options.slideNumbers},
-      plugins: [RevealHighlight, RevealNotes]
-    });
-  </script>
-</body>
-</html>`;
-}
-
-function generateRevealSlideHTML(slide: Slide, presentation: Presentation, options: SlideOptions): string {
-  switch (slide.type) {
-    case "title":
-      return `
-        <section>
-          <h1>${escapeHTML(slide.title || presentation.title)}</h1>
-          ${slide.subtitle || presentation.subtitle ? `<h3>${escapeHTML(slide.subtitle || presentation.subtitle || "")}</h3>` : ""}
-          ${presentation.author ? `<p>${escapeHTML(presentation.author)}</p>` : ""}
-          <p><small>${escapeHTML(presentation.date)}</small></p>
-          ${slide.notes && options.notes ? `<aside class="notes">${escapeHTML(slide.notes)}</aside>` : ""}
-        </section>
-      `;
-
-    case "two-column":
-      return `
-        <section>
-          ${slide.title ? `<h2>${escapeHTML(slide.title)}</h2>` : ""}
-          <div style="display: flex; gap: 2rem;">
-            <div style="flex: 1;"><ul>${slide.columns?.left.map((item) => `<li>${escapeHTML(item)}</li>`).join("") || ""}</ul></div>
-            <div style="flex: 1;"><ul>${slide.columns?.right.map((item) => `<li>${escapeHTML(item)}</li>`).join("") || ""}</ul></div>
-          </div>
-          ${slide.notes && options.notes ? `<aside class="notes">${escapeHTML(slide.notes)}</aside>` : ""}
-        </section>
-      `;
-
-    case "quote":
-      return `
-        <section>
-          ${slide.title ? `<h2>${escapeHTML(slide.title)}</h2>` : ""}
-          <blockquote>"${escapeHTML(slide.content.join(" "))}"</blockquote>
-          ${slide.notes && options.notes ? `<aside class="notes">${escapeHTML(slide.notes)}</aside>` : ""}
-        </section>
-      `;
-
-    case "code":
-      return `
-        <section>
-          ${slide.title ? `<h2>${escapeHTML(slide.title)}</h2>` : ""}
-          <pre><code data-trim data-noescape class="language-${escapeHTML(slide.codeLanguage || "text")}">${escapeHTML(slide.content.join("\n"))}</code></pre>
-          ${slide.notes && options.notes ? `<aside class="notes">${escapeHTML(slide.notes)}</aside>` : ""}
-        </section>
-      `;
-
-    default:
-      return `
-        <section>
-          ${slide.title ? `<h2>${escapeHTML(slide.title)}</h2>` : ""}
-          <ul>${slide.content.map((item) => `<li class="fragment">${escapeHTML(item)}</li>`).join("")}</ul>
-          ${slide.notes && options.notes ? `<aside class="notes">${escapeHTML(slide.notes)}</aside>` : ""}
-        </section>
-      `;
-  }
-}