const express = require("express"); const cors = require("cors"); const { createCanvas, registerFont } = require("canvas"); const path = require("path"); const fs = require("fs"); const app = express(); app.use(cors()); app.use(express.json()); app.use(express.static("public")); // Create fonts directory if it doesn't exist const fontsDir = path.join(__dirname, "fonts"); if (!fs.existsSync(fontsDir)) { fs.mkdirSync(fontsDir); } // Store available fonts and their variations const availableFonts = new Map(); function initializeFonts() { if (!fs.existsSync(fontsDir)) { console.log( "Created fonts directory. Please add font files (.ttf or .otf) to the fonts folder." ); return; } const fontFiles = fs .readdirSync(fontsDir) .filter( (file) => file.toLowerCase().endsWith(".ttf") || file.toLowerCase().endsWith(".otf") ); fontFiles.forEach((file) => { const fontPath = path.join(fontsDir, file); const fontName = file.replace(/\.(ttf|otf)$/i, ""); // Parse font variations (Regular, Bold, Italic, etc.) let weight = "normal"; let style = "normal"; const lowerFontName = fontName.toLowerCase(); if (lowerFontName.includes("bold")) weight = "bold"; if (lowerFontName.includes("light")) weight = "light"; if (lowerFontName.includes("medium")) weight = "medium"; if (lowerFontName.includes("italic")) style = "italic"; // Register font with canvas registerFont(fontPath, { family: fontName.split("-")[0], // Get base font name weight, style, }); // Store font info const familyName = fontName.split("-")[0]; if (!availableFonts.has(familyName)) { availableFonts.set(familyName, []); } availableFonts.get(familyName).push({ fullName: fontName, weight, style, }); }); console.log("Available font families:", Array.from(availableFonts.keys())); } // Initialize fonts initializeFonts(); // Store requests history let requestsHistory = []; function generateQuoteImage(ctx, canvas, data) { const { text, author, bgColor, barColor, textColor, authorColor, quoteFontFamily, quoteFontWeight, quoteFontStyle, authorFontFamily, authorFontWeight, authorFontStyle, barWidth = 4, } = data; // Constants for layout const margin = 80; const quoteMarkSize = 120; const padding = 30; const lineHeight = 50; // Clear canvas ctx.fillStyle = bgColor; ctx.fillRect(0, 0, canvas.width, canvas.height); // Draw bars ctx.fillStyle = barColor; ctx.fillRect(margin, margin, barWidth, canvas.height - margin * 2); ctx.fillRect( canvas.width - margin - barWidth, margin, barWidth, canvas.height - margin * 2 ); // Set up quote font ctx.fillStyle = barColor; const quoteMarkFont = []; if (quoteFontStyle === "italic") quoteMarkFont.push("italic"); quoteMarkFont.push(quoteFontWeight); quoteMarkFont.push(`${quoteMarkSize}px`); quoteMarkFont.push(`"${quoteFontFamily}"`); ctx.font = quoteMarkFont.join(" "); ctx.textBaseline = "top"; // Calculate quote mark metrics const quoteMarkWidth = ctx.measureText('"').width; const textStartX = margin + barWidth + padding + quoteMarkWidth + padding; const textEndX = canvas.width - margin - barWidth - padding * 2; const maxWidth = textEndX - textStartX; // Set up quote text font ctx.fillStyle = textColor; const quoteFont = []; if (quoteFontStyle === "italic") quoteFont.push("italic"); quoteFont.push(quoteFontWeight); quoteFont.push("36px"); quoteFont.push(`"${quoteFontFamily}"`); ctx.font = quoteFont.join(" "); // Word wrap text const words = text.split(" "); const lines = []; let currentLine = ""; for (let word of words) { const testLine = currentLine + (currentLine ? " " : "") + word; const metrics = ctx.measureText(testLine); if (metrics.width > maxWidth) { if (currentLine) { lines.push(currentLine); currentLine = word; } else { currentLine = word; } } else { currentLine = testLine; } } if (currentLine) { lines.push(currentLine); } // Calculate total height of text block const totalTextHeight = lines.length * lineHeight; const authorHeight = 60; // Space reserved for author const availableHeight = canvas.height - margin * 2; // Calculate starting Y position to center text block let startY = margin + (availableHeight - (totalTextHeight + authorHeight)) / 2; // Draw quote mark at the same vertical position as first line ctx.fillStyle = barColor; ctx.font = quoteMarkFont.join(" "); ctx.fillText('"', margin + barWidth + padding, startY); // Draw quote lines ctx.fillStyle = textColor; ctx.font = quoteFont.join(" "); lines.forEach((line, index) => { ctx.fillText(line.trim(), textStartX, startY + index * lineHeight); }); // Draw author below the quote ctx.fillStyle = authorColor; const authorFont = []; if (authorFontStyle === "italic") authorFont.push("italic"); authorFont.push(authorFontWeight); authorFont.push("28px"); authorFont.push(`"${authorFontFamily}"`); ctx.font = authorFont.join(" "); // Ensure author doesn't overflow let authorText = `- ${author}`; let authorMetrics = ctx.measureText(authorText); if (authorMetrics.width > maxWidth) { const ellipsis = "..."; while (authorMetrics.width > maxWidth && author.length > 0) { author = author.slice(0, -1); authorText = `- ${author}${ellipsis}`; authorMetrics = ctx.measureText(authorText); } } // Position author text below quote with spacing const authorY = startY + totalTextHeight + 40; ctx.fillText(authorText, textStartX, authorY); } // API Endpoints app.get("/api/fonts", (req, res) => { const fontDetails = Array.from(availableFonts.entries()).map( ([family, variations]) => ({ family, variations: variations.map((v) => ({ weight: v.weight, style: v.style, fullName: v.fullName, })), }) ); res.json(fontDetails); }); app.post("/api/generate-quote", (req, res) => { try { const data = req.body; // Validate fonts exist if (!availableFonts.has(data.quoteFontFamily)) { throw new Error("Selected quote font is not available"); } if (!availableFonts.has(data.authorFontFamily)) { throw new Error("Selected author font is not available"); } // Store request requestsHistory.unshift({ timestamp: new Date(), request: data, }); // Keep only last 10 requests requestsHistory = requestsHistory.slice(0, 10); // Create canvas const canvas = createCanvas(1200, 675); // 16:9 ratio const ctx = canvas.getContext("2d"); // Generate quote image generateQuoteImage(ctx, canvas, data); // Send response res.json({ success: true, imageUrl: canvas.toDataURL(), timestamp: new Date().toISOString(), }); } catch (error) { console.error("Error generating quote:", error); res.status(500).json({ success: false, error: error.message, }); } }); app.get("/api/requests-history", (req, res) => { res.json(requestsHistory); }); // Start server const PORT = process.env.PORT || 3000; app.listen(PORT, () => { console.log(`Server running on port ${PORT}`); console.log(`View the application at http://localhost:${PORT}`); console.log("Available fonts:", Array.from(availableFonts.keys())); });