releasebird-javascript-sdk 1.0.61 → 1.0.63

package/.claude/settings.local.json

@@ -33,7 +33,10 @@
       "Bash(node test-java-backend.js:*)",
       "Read(//Users/christianzillmann/IdeaProjects/releasebook-backend/src/main/java/io/releasebook/backend/web/rest/papi/**)",
       "Read(//Users/christianzillmann/IdeaProjects/releasebook-backend/**)",
-      "Bash(node test-full-flow.js:*)"
+      "Bash(node test-full-flow.js:*)",
+      "Bash(node test-emoji-simple.js:*)",
+      "Bash(node:*)",
+      "WebFetch(domain:app.raisenext.de)"
     ],
     "deny": [],
     "ask": []

package/backend-image-service/DEPLOYMENT.md

@@ -3,7 +3,7 @@
 ## 🎯 Deine Environment
 
 - **Application:** `releasebird-image-service`
-- **Environment:** `Releasebird-image-service-env-1`
+- **Environment:** `Releasebird-image-service-env`
 - **Region:** `eu-central-1` (Standard)
 
 ## 🚀 Quick Deployment (Empfohlen)
@@ -19,7 +19,7 @@ Das Script:
 - ✅ Baut Docker Image
 - ✅ Erstellt Deployment Package
 - ✅ Uploaded zu S3
-- ✅ Deployed zu `Releasebird-image-service-env-1`
+- ✅ Deployed zu `Releasebird-image-service-env`
 - ✅ Wartet auf Completion
 - ✅ Testet Health Endpoint
 
@@ -34,7 +34,7 @@ Mit Standard Script (mit Prompts):
 ./deploy-to-eb.sh
 
 # Oder explizit:
-./deploy-to-eb.sh Releasebird-image-service-env-1
+./deploy-to-eb.sh Releasebird-image-service-env
 ```
 
 ## 🧪 Vor dem Deployment testen
@@ -58,7 +58,7 @@ curl http://localhost:3000/health
 
 ```bash
 aws elasticbeanstalk describe-environments \
-  --environment-names Releasebird-image-service-env-1 \
+  --environment-names Releasebird-image-service-env \
   --query 'Environments[0].[EnvironmentName,Status,Health,CNAME]' \
   --output table
 ```
@@ -68,10 +68,10 @@ aws elasticbeanstalk describe-environments \
 ```bash
 # Aktuelle Logs
 aws elasticbeanstalk logs \
-  --environment-name Releasebird-image-service-env-1
+  --environment-name Releasebird-image-service-env
 
 # Logs streamen (mit EB CLI)
-eb logs --stream -e Releasebird-image-service-env-1
+eb logs --stream -e Releasebird-image-service-env
 ```
 
 ### Health Check
@@ -79,7 +79,7 @@ eb logs --stream -e Releasebird-image-service-env-1
 ```bash
 # Environment URL holen
 ENV_URL=$(aws elasticbeanstalk describe-environments \
-  --environment-names Releasebird-image-service-env-1 \
+  --environment-names Releasebird-image-service-env \
   --query 'Environments[0].CNAME' \
   --output text)
 
@@ -103,19 +103,19 @@ curl -X POST http://$ENV_URL/render \
 ```bash
 # Environment Events anschauen
 aws elasticbeanstalk describe-events \
-  --environment-name Releasebird-image-service-env-1 \
+  --environment-name Releasebird-image-service-env \
   --max-items 20
 
 # Logs holen
 aws elasticbeanstalk logs \
-  --environment-name Releasebird-image-service-env-1
+  --environment-name Releasebird-image-service-env
 ```
 
 ### Health Check schlägt fehl
 
 ```bash
 # SSH in Instance (mit EB CLI)
-eb ssh -e Releasebird-image-service-env-1
+eb ssh -e Releasebird-image-service-env
 
 # Docker Logs anschauen
 sudo docker logs $(sudo docker ps -q)
@@ -137,7 +137,7 @@ aws elasticbeanstalk describe-application-versions \
 # Zu Version rollback
 aws elasticbeanstalk update-environment \
   --application-name releasebird-image-service \
-  --environment-name Releasebird-image-service-env-1 \
+  --environment-name Releasebird-image-service-env \
   --version-label v20251028-143000  # Ersetze mit gewünschter Version
 ```
 
@@ -168,19 +168,19 @@ Nach dem Deployment:
 
 # Status
 aws elasticbeanstalk describe-environments \
-  --environment-names Releasebird-image-service-env-1
+  --environment-names Releasebird-image-service-env
 
 # Logs
 aws elasticbeanstalk logs \
-  --environment-name Releasebird-image-service-env-1
+  --environment-name Releasebird-image-service-env
 
 # Restart Environment
 aws elasticbeanstalk restart-app-server \
-  --environment-name Releasebird-image-service-env-1
+  --environment-name Releasebird-image-service-env
 
 # Health
 curl http://$(aws elasticbeanstalk describe-environments \
-  --environment-names Releasebird-image-service-env-1 \
+  --environment-names Releasebird-image-service-env \
   --query 'Environments[0].CNAME' \
   --output text)/health
 ```

package/backend-image-service/DEPLOYMENT_SUMMARY.txt

@@ -13,7 +13,7 @@
   Name: releasebird-image-service
   
 🌍 ENVIRONMENT  
-  Name: Releasebird-image-service-env-1
+  Name: Releasebird-image-service-env
   Region: eu-central-1 ⭐
 
 🚀 QUICK DEPLOYMENT
@@ -31,7 +31,7 @@
   2. Creates deployment package (.zip)
   3. Uploads to S3 (eu-central-1)
   4. Creates new application version
-  5. Deploys to Releasebird-image-service-env-1
+  5. Deploys to Releasebird-image-service-env
   6. Waits for deployment completion
   7. Tests health endpoint
 
@@ -40,7 +40,7 @@
   ✓ AWS CLI installed (aws configure done)
   ✓ Docker running
   ✓ Region: eu-central-1
-  ✓ Environment exists: Releasebird-image-service-env-1
+  ✓ Environment exists: Releasebird-image-service-env
   ✓ Application exists: releasebird-image-service
 
 🧪 TEST LOCALLY FIRST
@@ -52,7 +52,7 @@
 
   # Check Environment Status
   aws elasticbeanstalk describe-environments \
-    --environment-names Releasebird-image-service-env-1 \
+    --environment-names Releasebird-image-service-env \
     --region eu-central-1 \
     --query 'Environments[0].[Status,Health,HealthStatus]'
 
@@ -66,7 +66,7 @@
 
   # View Logs
   aws elasticbeanstalk logs \
-    --environment-name Releasebird-image-service-env-1 \
+    --environment-name Releasebird-image-service-env \
     --region eu-central-1
 
 🔧 ECR (Docker Registry)

package/backend-image-service/analyze-payload-size.js

@@ -0,0 +1,69 @@
+/**
+ * Simulates the payload size when inlining all resources
+ */
+
+// Example: A typical web app might have:
+const assumptions = {
+    htmlSize: 50000,              // 50 KB base HTML
+    cssFiles: 3,                  // 3 external CSS files
+    avgCssSize: 100000,           // 100 KB per CSS file
+    images: 10,                   // 10 images
+    avgImageSize: 50000,          // 50 KB per image
+    fonts: 2,                     // 2 web fonts
+    avgFontSize: 100000,          // 100 KB per font
+    backgroundImages: 5,          // 5 background images in CSS
+    avgBgImageSize: 30000         // 30 KB per background image
+};
+
+// Calculate base64 overhead (33% increase)
+const base64Overhead = 1.33;
+
+const totalCSS = assumptions.cssFiles * assumptions.avgCssSize;
+const totalImages = assumptions.images * assumptions.avgImageSize;
+const totalFonts = assumptions.fonts * assumptions.avgFontSize;
+const totalBgImages = assumptions.backgroundImages * assumptions.avgBgImageSize;
+
+const totalBinaryData = totalImages + totalFonts + totalBgImages;
+const totalBinaryDataBase64 = totalBinaryData * base64Overhead;
+
+const totalPayload = assumptions.htmlSize + totalCSS + totalBinaryDataBase64;
+
+console.log('=== Payload Size Estimation ===\n');
+console.log('Base HTML:', (assumptions.htmlSize / 1024).toFixed(1), 'KB');
+console.log('CSS files:', assumptions.cssFiles, 'x', (assumptions.avgCssSize / 1024).toFixed(1), 'KB =', (totalCSS / 1024).toFixed(1), 'KB');
+console.log('Images:', assumptions.images, 'x', (assumptions.avgImageSize / 1024).toFixed(1), 'KB =', (totalImages / 1024).toFixed(1), 'KB');
+console.log('Fonts:', assumptions.fonts, 'x', (assumptions.avgFontSize / 1024).toFixed(1), 'KB =', (totalFonts / 1024).toFixed(1), 'KB');
+console.log('Background images:', assumptions.backgroundImages, 'x', (assumptions.avgBgImageSize / 1024).toFixed(1), 'KB =', (totalBgImages / 1024).toFixed(1), 'KB');
+console.log('\nBase64 overhead (33%):', ((totalBinaryDataBase64 - totalBinaryData) / 1024).toFixed(1), 'KB');
+console.log('\n--- TOTAL UNCOMPRESSED ---');
+console.log('Total payload:', (totalPayload / 1024).toFixed(1), 'KB');
+console.log('Total payload:', (totalPayload / 1024 / 1024).toFixed(2), 'MB');
+
+// With gzip compression (typically 70-90% for HTML/CSS, 0% for already compressed images)
+const htmlCssCompression = 0.3; // 70% reduction
+const htmlCssSize = assumptions.htmlSize + totalCSS;
+const htmlCssCompressed = htmlCssSize * htmlCssCompression;
+const imagesNoCompression = totalBinaryDataBase64; // Already base64, minimal compression
+
+const totalCompressed = htmlCssCompressed + imagesNoCompression;
+
+console.log('\n--- WITH GZIP COMPRESSION ---');
+console.log('HTML+CSS compressed (70%):', (htmlCssCompressed / 1024).toFixed(1), 'KB');
+console.log('Images (no compression):', (imagesNoCompression / 1024).toFixed(1), 'KB');
+console.log('Total compressed:', (totalCompressed / 1024).toFixed(1), 'KB');
+console.log('Total compressed:', (totalCompressed / 1024 / 1024).toFixed(2), 'MB');
+
+console.log('\n--- COMPARISON ---');
+if (totalCompressed < 50 * 1024 * 1024) {
+    console.log('✅ Fits within 50MB nginx limit');
+} else {
+    console.log('❌ EXCEEDS 50MB nginx limit!');
+}
+
+if (totalCompressed < 10 * 1024 * 1024) {
+    console.log('✅ Reasonable payload size (< 10MB)');
+} else if (totalCompressed < 25 * 1024 * 1024) {
+    console.log('⚠️  Large payload (10-25MB) - may be slow');
+} else {
+    console.log('❌ Very large payload (> 25MB) - will be very slow!');
+}

package/backend-image-service/deploy-to-eb.sh

@@ -5,7 +5,7 @@
 
 set -e  # Exit on error
 
-ENVIRONMENT_NAME=${1:-Releasebird-image-service-env-1}
+ENVIRONMENT_NAME=${1:-Releasebird-image-service-env}
 APPLICATION_NAME="releasebird-image-service"
 REGION=${AWS_REGION:-eu-central-1}
 VERSION_LABEL="v$(date +%Y%m%d-%H%M%S)"

package/backend-image-service/image-service/Dockerfile

@@ -12,6 +12,8 @@ RUN apt-get update && apt-get install -y \
     fonts-noto-color-emoji \
     fonts-noto-cjk \
     fonts-noto-cjk-extra \
+    fonts-dejavu-core \
+    fontconfig \
     libasound2 \
     libatk-bridge2.0-0 \
     libatk1.0-0 \
@@ -44,6 +46,12 @@ RUN npm ci --only=production
 # Copy application
 COPY server.js ./
 
+# Copy font configuration
+COPY fonts.conf /etc/fonts/local.conf
+
+# Rebuild font cache
+RUN fc-cache -fv
+
 # Expose port
 EXPOSE 3000
 

package/backend-image-service/image-service/fonts.conf

@@ -0,0 +1,39 @@
+<?xml version="1.0"?>
+<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
+<fontconfig>
+    <!-- Enable emoji rendering -->
+    <match target="pattern">
+        <test qual="any" name="family">
+            <string>sans-serif</string>
+        </test>
+        <edit name="family" mode="append" binding="weak">
+            <string>Noto Color Emoji</string>
+        </edit>
+    </match>
+
+    <match target="pattern">
+        <test qual="any" name="family">
+            <string>serif</string>
+        </test>
+        <edit name="family" mode="append" binding="weak">
+            <string>Noto Color Emoji</string>
+        </edit>
+    </match>
+
+    <match target="pattern">
+        <test qual="any" name="family">
+            <string>monospace</string>
+        </test>
+        <edit name="family" mode="append" binding="weak">
+            <string>Noto Color Emoji</string>
+        </edit>
+    </match>
+
+    <!-- Always prefer color emoji -->
+    <alias>
+        <family>emoji</family>
+        <prefer>
+            <family>Noto Color Emoji</family>
+        </prefer>
+    </alias>
+</fontconfig>

package/backend-image-service/image-service/server.js

@@ -34,7 +34,10 @@ async function initBrowser() {
                 '--disable-accelerated-2d-canvas',
                 '--no-first-run',
                 '--no-zygote',
-                '--disable-gpu'
+                '--disable-gpu',
+                '--font-render-hinting=none',
+                '--enable-font-antialiasing',
+                '--disable-lcd-text'
             ]
         });
         console.log('[Puppeteer] Browser launched successfully');
@@ -108,21 +111,37 @@ app.post('/render', async (req, res) => {
 
         console.log(`[Screenshot] Viewport set to ${viewportWidth}x${viewportHeight}`);
 
-        // Set content (using decompressed htmlContent)
-        await page.setContent(htmlContent, {
+        // Inject emoji font CSS into HTML
+        const emojiCSS = `
+            <style>
+                * {
+                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
+                }
+            </style>
+        `;
+
+        // Insert emoji CSS into HTML
+        let enhancedHTML = htmlContent;
+        if (htmlContent.includes('<head>')) {
+            enhancedHTML = htmlContent.replace('<head>', '<head>' + emojiCSS);
+        } else if (htmlContent.includes('<html>')) {
+            enhancedHTML = htmlContent.replace('<html>', '<html><head>' + emojiCSS + '</head>');
+        }
+
+        // Set content (using enhanced htmlContent with emoji fonts)
+        await page.setContent(enhancedHTML, {
             waitUntil: 'networkidle0', // Wait for network to be idle
             timeout: 30000
         });
 
-        console.log('[Screenshot] HTML content loaded');
+        console.log('[Screenshot] HTML content loaded with emoji font support');
 
         // Wait a bit for any animations/transitions
         await new Promise(resolve => setTimeout(resolve, 500));
 
-        // Take screenshot
+        // Take screenshot (PNG for better emoji support)
         const screenshot = await page.screenshot({
-            type: 'jpeg',
-            quality: 90,
+            type: 'png',
             fullPage: false, // Only visible viewport
             encoding: 'base64'
         });
@@ -130,7 +149,7 @@ app.post('/render', async (req, res) => {
         console.log('[Screenshot] Screenshot captured successfully');
 
         // Return as data URL
-        const dataUrl = `data:image/jpeg;base64,${screenshot}`;
+        const dataUrl = `data:image/png;base64,${screenshot}`;
 
         res.json({
             screenshot: dataUrl,

package/backend-image-service/quick-deploy.sh

@@ -5,7 +5,7 @@
 
 set -e  # Exit on error
 
-ENVIRONMENT_NAME="Releasebird-image-service-env-1"
+ENVIRONMENT_NAME="Releasebird-image-service-env"
 APPLICATION_NAME="releasebird-image-service"
 REGION=${AWS_REGION:-eu-central-1}
 VERSION_LABEL="v$(date +%Y%m%d-%H%M%S)"

package/backend-image-service/test-emoji-detailed.js

@@ -0,0 +1,119 @@
+const zlib = require('zlib');
+const https = require('https');
+const fs = require('fs');
+
+// Test 1: Simple text emoji
+const test1 = `<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+</head>
+<body style="font-size: 100px; padding: 50px;">
+    😀 🎉 🚀
+</body>
+</html>`;
+
+// Test 2: With explicit font-family
+const test2 = `<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <style>
+        body { 
+            font-family: "Noto Color Emoji", sans-serif;
+            font-size: 100px; 
+            padding: 50px;
+        }
+    </style>
+</head>
+<body>
+    😀 🎉 🚀
+</body>
+</html>`;
+
+// Test 3: Unicode emoji codes
+const test3 = `<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+</head>
+<body style="font-size: 100px; padding: 50px;">
+    &#x1F600; &#x1F389; &#x1F680;
+</body>
+</html>`;
+
+async function testEmoji(html, testName) {
+    return new Promise((resolve) => {
+        const compressed = zlib.gzipSync(Buffer.from(html, 'utf-8'));
+        const base64 = compressed.toString('base64');
+
+        const data = JSON.stringify({
+            htmlCompressed: base64,
+            compressed: true,
+            width: 600,
+            height: 400
+        });
+
+        const options = {
+            hostname: 'api.releasebird.com',
+            path: '/papi/images/screenshot/render',
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Content-Length': Buffer.byteLength(data)
+            }
+        };
+
+        console.log(`\n=== ${testName} ===`);
+
+        const req = https.request(options, (res) => {
+            let result = '';
+            res.on('data', (chunk) => { result += chunk; });
+            res.on('end', () => {
+                try {
+                    const parsed = JSON.parse(result);
+                    if (parsed.screenshot) {
+                        console.log('✅ Screenshot generated');
+                        console.log('Length:', parsed.screenshot.length);
+                        
+                        const filename = `emoji-${testName.replace(/\s+/g, '-').toLowerCase()}.png`;
+                        const base64Data = parsed.screenshot.replace(/^data:image\/\w+;base64,/, '');
+                        fs.writeFileSync(filename, Buffer.from(base64Data, 'base64'));
+                        console.log(`Saved to ${filename}`);
+                        
+                        resolve(true);
+                    } else {
+                        console.log('❌ Error:', parsed.error);
+                        resolve(false);
+                    }
+                } catch (e) {
+                    console.log('❌ Parse error:', e.message);
+                    resolve(false);
+                }
+            });
+        });
+
+        req.on('error', (err) => {
+            console.log('❌ Request failed:', err.message);
+            resolve(false);
+        });
+
+        req.write(data);
+        req.end();
+    });
+}
+
+(async () => {
+    console.log('Testing emoji rendering with different approaches...\n');
+    
+    await testEmoji(test1, 'Test 1 Simple');
+    await new Promise(r => setTimeout(r, 2000));
+    
+    await testEmoji(test2, 'Test 2 Font Family');
+    await new Promise(r => setTimeout(r, 2000));
+    
+    await testEmoji(test3, 'Test 3 Unicode');
+    
+    console.log('\n\nPlease check the generated PNG files to see if emojis are visible.');
+    console.log('If they appear as boxes or missing, the font issue is confirmed.');
+})();

package/backend-image-service/test-emoji-simple.js

@@ -0,0 +1,68 @@
+const zlib = require('zlib');
+const https = require('https');
+
+// Very simple HTML with emojis
+const html = `<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <style>
+        body { 
+            font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+            font-size: 48px; 
+            padding: 40px;
+        }
+    </style>
+</head>
+<body>
+    <p>Hello 🎉 World 🚀</p>
+    <p>✅ ❌ ⚠️ 💡 🔥</p>
+    <p>😀 😃 😄 😁 😆</p>
+</body>
+</html>`;
+
+const compressed = zlib.gzipSync(Buffer.from(html, 'utf-8'));
+const base64 = compressed.toString('base64');
+
+const data = JSON.stringify({
+    htmlCompressed: base64,
+    compressed: true,
+    width: 800,
+    height: 600
+});
+
+const options = {
+    hostname: 'api.releasebird.com',
+    path: '/papi/images/screenshot/render',
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json',
+        'Content-Length': Buffer.byteLength(data)
+    }
+};
+
+console.log('Testing emoji rendering with explicit font family...');
+
+const req = https.request(options, (res) => {
+    let result = '';
+    res.on('data', (chunk) => { result += chunk; });
+    res.on('end', () => {
+        const parsed = JSON.parse(result);
+        if (parsed.screenshot) {
+            console.log('✅ Screenshot generated');
+            console.log('Length:', parsed.screenshot.length);
+            
+            // Save to file for inspection
+            const fs = require('fs');
+            const base64Data = parsed.screenshot.replace(/^data:image\/\w+;base64,/, '');
+            fs.writeFileSync('emoji-test.png', Buffer.from(base64Data, 'base64'));
+            console.log('Saved to emoji-test.png - please check if emojis are visible');
+        } else {
+            console.log('Error:', parsed);
+        }
+    });
+});
+
+req.on('error', (err) => console.error('Error:', err.message));
+req.write(data);
+req.end();

package/backend-image-service/test-emoji.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            padding: 40px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .emoji-test {
+            background: white;
+            padding: 30px;
+            border-radius: 20px;
+            margin: 20px 0;
+        }
+        h1 { font-size: 48px; color: #333; }
+        .emoji-large { font-size: 64px; }
+        .emoji-row { margin: 20px 0; font-size: 32px; }
+    </style>
+</head>
+<body>
+    <div class="emoji-test">
+        <h1>🎨 Emoji Test 🚀</h1>
+        
+        <div class="emoji-large">
+            😀 😃 😄 😁 😆 😅 🤣 😂
+        </div>
+        
+        <div class="emoji-row">
+            ❤️ 💙 💚 💛 🧡 💜 🖤 🤍
+        </div>
+        
+        <div class="emoji-row">
+            ✅ ❌ ⚠️ ℹ️ 🔥 💡 🎉 🎊
+        </div>
+        
+        <div class="emoji-row">
+            🚀 🛸 ✈️ 🚁 🚂 🚗 🏍️ 🚲
+        </div>
+        
+        <div class="emoji-row">
+            🍎 🍊 🍋 🍌 🍉 🍇 🍓 🫐
+        </div>
+        
+        <div class="emoji-row">
+            👍 👎 👏 🙌 🤝 💪 🦾 🫶
+        </div>
+    </div>
+</body>
+</html>