chore: sync main to dev after v1.27.0

CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.27.0](https://github.com/rodrigogs/whats-reader/compare/v1.26.1...v1.27.0) (2026-01-05)
+
+
+### Features
+
+* improve social media preview images with app logo ([f0c4c26](https://github.com/rodrigogs/whats-reader/commit/f0c4c268d18c7728ddcde4e8ab72b2f030464e7c))
+
 ## [1.26.1](https://github.com/rodrigogs/whats-reader/compare/v1.26.0...v1.26.1) (2026-01-05)
 
 

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "whats-reader",
 	"productName": "WhatsApp Backup Reader",
-	"version": "1.26.1",
+	"version": "1.27.0",
 	"description": "A desktop app to read and visualize WhatsApp chat exports",
 	"license": "AGPL-3.0",
 	"author": {

scripts/generate-og-images.sh

@@ -0,0 +1,86 @@
+#!/bin/bash
+# Generate Open Graph images for social media sharing
+# Uses the actual app icon for a professional, recognizable look
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PROJECT_ROOT="$(dirname "$SCRIPT_DIR")"
+STATIC_DIR="$PROJECT_ROOT/static"
+ICON="$STATIC_DIR/icon.png"
+
+# Verify icon exists
+if [ ! -f "$ICON" ]; then
+    echo "Error: icon.png not found at $ICON"
+    exit 1
+fi
+
+cd "$STATIC_DIR"
+
+# Colors (WhatsApp theme)
+BG_DARK="#075e54"      # WhatsApp dark green (header/dark mode)
+BG_TEAL="#128C7E"      # WhatsApp teal
+
+echo "Generating Open Graph images with app icon..."
+
+# =============================================================================
+# Main OG image (1200x630) - Facebook, LinkedIn, Discord, general
+# Layout: Gradient background, icon on left, text on right
+# =============================================================================
+magick -size 1200x630 \
+    -define gradient:direction=east \
+    "gradient:${BG_DARK}-${BG_TEAL}" \
+    \( "$ICON" -resize 280x280 \
+       \( +clone -background black -shadow 60x20+0+10 \) \
+       +swap -background none -layers merge +repage \
+    \) -gravity west -geometry +100+0 -composite \
+    -fill white \
+    -font "Helvetica-Bold" -pointsize 56 \
+    -gravity west -annotate +460-30 "WhatsApp" \
+    -annotate +460+40 "Backup Reader" \
+    -font "Helvetica" -pointsize 26 \
+    -fill "rgba(255,255,255,0.85)" \
+    -annotate +460+110 "Read your chat exports offline • Private & secure" \
+    og-image.png
+
+echo "✅ Created og-image.png (1200x630)"
+
+# =============================================================================
+# WhatsApp square image (800x800) - Avoids cropping on WhatsApp
+# Layout: Icon centered on top, text below
+# =============================================================================
+magick -size 800x800 \
+    -define gradient:direction=south \
+    "gradient:${BG_DARK}-${BG_TEAL}" \
+    \( "$ICON" -resize 260x260 \
+       \( +clone -background black -shadow 60x20+0+10 \) \
+       +swap -background none -layers merge +repage \
+    \) -gravity center -geometry +0-100 -composite \
+    -fill white \
+    -font "Helvetica-Bold" -pointsize 44 \
+    -gravity center -annotate +0+110 "WhatsApp" \
+    -annotate +0+165 "Backup Reader" \
+    -font "Helvetica" -pointsize 22 \
+    -fill "rgba(255,255,255,0.85)" \
+    -annotate +0+230 "Read your chats offline • Private & secure" \
+    og-image-square.png
+
+echo "✅ Created og-image-square.png (800x800)"
+
+# =============================================================================
+# Twitter/X image (copy of main, same dimensions work for Twitter cards)
+# =============================================================================
+cp og-image.png og-image-twitter.png
+echo "✅ Created og-image-twitter.png (copy of og-image.png)"
+
+# Show file sizes
+echo ""
+echo "📊 Generated images:"
+ls -lh og-image*.png
+
+echo ""
+echo "🎯 Usage:"
+echo "  - og-image.png (1200x630): Facebook, LinkedIn, Discord"
+echo "  - og-image-square.png (800x800): WhatsApp (avoids cropping)"
+echo ""
+echo "💡 Test at: https://developers.facebook.com/tools/debug/"

src/app.html

@@ -23,24 +23,28 @@
 		<meta name="mobile-web-app-capable" content="yes" />
 
 		<!-- Open Graph meta tags for social media -->
-		<!-- Note: og-image.png (1200x630px) is located in the static/ directory -->
+		<!-- Primary OG image (1200x630px) for Facebook, LinkedIn, Discord -->
 		<meta property="og:type" content="website" />
 		<meta property="og:url" content="https://rodrigogs.github.io/whats-reader/" />
 		<meta property="og:title" content="WhatsApp Backup Reader - Read Your Chat Exports" />
 		<meta property="og:description" content="Read and browse your WhatsApp chat exports with media support, audio transcription, and bookmarks - 100% offline and private" />
 		<meta property="og:image" content="https://rodrigogs.github.io/whats-reader/og-image.png" />
 		<meta property="og:image:width" content="1200" />
 		<meta property="og:image:height" content="630" />
-		<meta property="og:image:alt" content="WhatsApp Backup Reader screenshot" />
+		<meta property="og:image:alt" content="WhatsApp Backup Reader - Read your chat exports offline, 100% private" />
 		<meta property="og:site_name" content="WhatsApp Backup Reader" />
+		<!-- Secondary square image for WhatsApp and other messaging apps -->
+		<meta property="og:image" content="https://rodrigogs.github.io/whats-reader/og-image-square.png" />
+		<meta property="og:image:width" content="800" />
+		<meta property="og:image:height" content="800" />
 
 		<!-- Twitter Card meta tags -->
 		<meta name="twitter:card" content="summary_large_image" />
 		<meta name="twitter:url" content="https://rodrigogs.github.io/whats-reader/" />
 		<meta name="twitter:title" content="WhatsApp Backup Reader - Read Your Chat Exports" />
 		<meta name="twitter:description" content="Read and browse your WhatsApp chat exports with media support, audio transcription, and bookmarks - 100% offline and private" />
 		<meta name="twitter:image" content="https://rodrigogs.github.io/whats-reader/og-image.png" />
-		<meta name="twitter:image:alt" content="WhatsApp Backup Reader screenshot" />
+		<meta name="twitter:image:alt" content="WhatsApp Backup Reader - Read your chat exports offline, 100% private" />
 
 		<!-- Security -->
 		<meta name="referrer" content="no-referrer" />