Merge pull request #95 from R0m1k3/dev

Dev

Dockerfile

@@ -19,7 +19,11 @@ RUN apk add --no-cache \
     giflib \
     pixman \
     vips-dev \
-    pkgconfig
+    pkgconfig \
+    ttf-dejavu \
+    fontconfig \
+    curl \
+    tar
 
 # Copier les fichiers de configuration
 COPY package*.json ./
@@ -30,6 +34,14 @@ RUN npm install --legacy-peer-deps
 # Copier tout le code source
 COPY . .
 
+# Télécharger et installer la police DejaVu Sans pour le rendu de texte
+RUN mkdir -p server/fonts && \
+    cd server/fonts && \
+    curl -L -o dejavu.tar.bz2 "https://sourceforge.net/projects/dejavu/files/dejavu/2.37/dejavu-fonts-ttf-2.37.tar.bz2/download" && \
+    tar -xjf dejavu.tar.bz2 && \
+    cp dejavu-fonts-ttf-2.37/ttf/DejaVuSans.ttf . && \
+    rm -rf dejavu.tar.bz2 dejavu-fonts-ttf-2.37
+
 # Augmenter la mémoire pour le build (résout les problèmes de mémoire avec Vite)
 ENV NODE_OPTIONS="--max-old-space-size=4096"
 

replit.md

@@ -10,6 +10,9 @@ Preferred communication style: Simple, everyday language.
 
 ## Recent Changes
 
+### November 18, 2025
+- **Facebook Story Text Rendering Fix**: Fixed critical issue where text on Facebook Stories appeared as unreadable white squares (missing glyphs). Root cause: node-canvas didn't have access to proper fonts for rendering French characters and special characters. Solution: (1) Added TrueType font support packages to Dockerfile (`ttf-dejavu`, `fontconfig`, `curl`, `tar`), (2) Dockerfile automatically downloads and installs DejaVu Sans font (740KB) during Docker build process from SourceForge, ensuring the font is always available in production, (3) Registered font at module load using `registerFont()` from node-canvas with error handling, (4) Updated text rendering to explicitly use "DejaVu Sans" as primary font family with Arial/sans-serif fallbacks. This ensures all characters (French accents, emoji, special characters) display correctly on both Facebook and Instagram stories. The font is automatically installed in Docker builds and works in both development and production environments. Files modified: `Dockerfile`, `server/services/imageProcessor.ts`.
+
 ### November 17, 2025
 - **Access Token Expiration Tracking**: Added automatic tracking and visual display of Facebook/Instagram access token expiration dates in the "Pages gérées" section. Implementation: (1) Added `tokenExpiresAt` timestamp column to `social_pages` table in database schema, (2) POST endpoint automatically calculates expiration date as current date + 90 days when adding a new page, (3) PUT endpoint recalculates expiration date (current date + 90 days) when updating the access token, (4) UI displays expiration status with color-coded visual indicators in page cards: green (>15 days), orange (7-15 days), red (<7 days or expired), with warning icon for urgent/expired tokens, (5) Shows remaining days and formatted expiration date using date-fns with French locale. This helps users proactively identify and renew expiring tokens before they cause publishing failures. Files modified: `shared/schema.ts`, `server/routes.ts`, `client/src/pages/pages.tsx`.
 - **Story Text Overlay Minimum Font Size Reduction**: Reduced minimum font size in adaptive text overlay system from 24px to 12px for both Instagram and Facebook stories. This allows significantly more text to fit within the story text box (bottom 25% of image) by enabling smaller font sizes when needed. The adaptive sizing algorithm now scales between 12-72px, reducing in 2px increments until text fits or reaches the new 12px minimum. Modified both server-side image generation (`server/services/imageProcessor.ts`) and client-side preview (`client/src/components/preview-modal.tsx`) to maintain consistency between preview and published stories.

server/services/imageProcessor.ts

@@ -21,6 +21,15 @@ const CROP_FORMATS = {
   instagramStory: { width: 1080, height: 1920 } as CropDimensions,
 };
 
+// Register DejaVu Sans font for proper character rendering
+try {
+  const fontPath = path.join(process.cwd(), "server", "fonts", "DejaVuSans.ttf");
+  registerFont(fontPath, { family: 'DejaVu Sans' });
+  console.log('✓ Font DejaVu Sans enregistrée avec succès');
+} catch (error) {
+  console.error('Erreur lors de l\'enregistrement de la police:', error);
+}
+
 export class ImageProcessor {
   private uploadsDir: string;
 
@@ -150,7 +159,7 @@ export class ImageProcessor {
     let totalTextHeight = 0;
 
     while (fontSize >= MIN_FONT_SIZE) {
-      ctx.font = `bold ${fontSize}px Arial, sans-serif`;
+      ctx.font = `bold ${fontSize}px "DejaVu Sans", Arial, sans-serif`;
       
       lines = this.wrapText(ctx, text, maxTextWidth);
       const lineHeight = fontSize * LINE_HEIGHT_MULTIPLIER;
@@ -165,7 +174,7 @@ export class ImageProcessor {
 
     if (fontSize < MIN_FONT_SIZE) {
       fontSize = MIN_FONT_SIZE;
-      ctx.font = `bold ${fontSize}px Arial, sans-serif`;
+      ctx.font = `bold ${fontSize}px "DejaVu Sans", Arial, sans-serif`;
       lines = this.wrapText(ctx, text, maxTextWidth);
       const lineHeight = fontSize * LINE_HEIGHT_MULTIPLIER;
       totalTextHeight = lines.length * lineHeight;