simple-photo-gallery 2.0.17 → 2.0.18

package/dist/index.js

@@ -76,6 +76,30 @@ async function generateBlurHash(imagePath, componentX = 4, componentY = 3) {
 }
 
 // src/modules/build/utils/index.ts
+function wrapText(text, maxCharsPerLine) {
+  const words = text.split(" ");
+  const lines = [];
+  let currentLine = "";
+  for (const word of words) {
+    const testLine = currentLine ? `${currentLine} ${word}` : word;
+    if (word.length > maxCharsPerLine) {
+      if (currentLine) {
+        lines.push(currentLine);
+        currentLine = "";
+      }
+      lines.push(word);
+    } else if (testLine.length > maxCharsPerLine && currentLine) {
+      lines.push(currentLine);
+      currentLine = word;
+    } else {
+      currentLine = testLine;
+    }
+  }
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+  return lines;
+}
 async function createGallerySocialMediaCardImage(headerPhotoPath, title, ouputPath, ui) {
   ui?.start(`Creating social media card image`);
   const headerBasename = path7.basename(headerPhotoPath, path7.extname(headerPhotoPath));
@@ -87,14 +111,38 @@ async function createGallerySocialMediaCardImage(headerPhotoPath, title, ouputPa
   const resizedImageBuffer = await image.resize(1200, 631, { fit: "cover" }).jpeg({ quality: 90 }).toBuffer();
   const outputPath = ouputPath;
   await sharp2(resizedImageBuffer).toFile(outputPath);
+  const CANVAS_WIDTH = 1200;
+  const CANVAS_HEIGHT = 631;
+  const FONT_SIZE = 72;
+  const MARGIN = 50;
+  const CHAR_WIDTH_RATIO = 0.6;
+  const usableWidth = CANVAS_WIDTH - 2 * MARGIN;
+  const maxCharsPerLine = Math.floor(usableWidth / (FONT_SIZE * CHAR_WIDTH_RATIO));
+  const lines = wrapText(title, maxCharsPerLine);
+  const lineHeight = FONT_SIZE * 1.2;
+  const totalTextHeight = FONT_SIZE + (lines.length - 1) * lineHeight;
+  const startY = CANVAS_HEIGHT - MARGIN - totalTextHeight + FONT_SIZE;
+  const leftX = MARGIN;
+  const tspanElements = lines.map((line, index) => {
+    const yPosition = startY + index * lineHeight;
+    const escapedLine = line.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+    return `<tspan x="${leftX}" y="${yPosition}">${escapedLine}</tspan>`;
+  }).join("\n      ");
   const svgText = `
-    <svg width="1200" height="631" xmlns="http://www.w3.org/2000/svg">
+    <svg width="${CANVAS_WIDTH}" height="${CANVAS_HEIGHT}" xmlns="http://www.w3.org/2000/svg">
       <defs>
+        <linearGradient id="darkGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
+          <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:0.65" />
+        </linearGradient>
         <style>
-          .title { font-family: 'Arial, sans-serif'; font-size: 96px; font-weight: bold; fill: white; stroke: black; stroke-width: 5; paint-order: stroke; text-anchor: middle; }
+          .title { font-family: 'Arial, sans-serif'; font-size: ${FONT_SIZE}px; font-weight: bold; fill: white; text-anchor: start; }
         </style>
       </defs>
-      <text x="600" y="250" class="title">${title}</text>
+      <rect x="0" y="0" width="${CANVAS_WIDTH}" height="${CANVAS_HEIGHT}" fill="url(#darkGradient)" />
+      <text x="${leftX}" class="title">
+      ${tspanElements}
+      </text>
     </svg>
   `;
   const finalImageBuffer = await sharp2(resizedImageBuffer).composite([{ input: Buffer.from(svgText), top: 0, left: 0 }]).jpeg({ quality: 90 }).toBuffer();
@@ -1172,7 +1220,7 @@ async function waitForUpdateCheck(checkPromise) {
 // package.json
 var package_default = {
   name: "simple-photo-gallery",
-  version: "2.0.17"};
+  version: "2.0.18"};
 
 // src/index.ts
 var program = new Command();