moreminimore-vibe/README-LOGO-INTEGRATION.md

MoreMinimore Logo Integration Guide

🎯 Overview

The MoreMinimore update and debranding script now includes comprehensive logo replacement functionality that automatically converts your custom logo into all required formats for the Electron application.

📁 Logo Files Generated

Source Logo

• assets/moreminimorelogo.png - Your original PNG logo (source for all conversions)

Web Assets

• assets/logo.svg - SVG version for web components (TitleBar, etc.)
• assets/logo.png - Optimized 24x24 PNG for TitleBar

Electron Icons

• assets/icon/logo.png - Main icon file
• assets/icon/logo.ico - Windows application icon
• assets/icon/logo.icns - macOS application icon
• assets/icon/logo_16x16.png through assets/icon/logo_1024x1024.png - Multi-resolution icons

Test Fixtures

• e2e-tests/fixtures/images/logo.png - Logo for automated testing

🔄 Automatic Conversion Process

Image Processing Tools

The script automatically installs required tools:

• macOS: ImageMagick via Homebrew
• Linux: ImageMagick via apt-get/yum
• Windows: Manual installation required

Conversion Steps

1. PNG to SVG: Creates SVG wrapper with embedded base64 PNG data
2. Multi-size Generation: Creates icons in all required sizes (16x16 to 1024x1024)
3. Platform Icons: Generates ICO (Windows) and ICNS (macOS) files
4. Optimization: Creates 24x24 version for TitleBar display
5. Test Updates: Updates test fixtures with new logo

🚀 Usage

Full Update (Recommended)

./scripts/update-and-debrand.sh

This runs the complete debranding process including logo updates.

Logo-Only Update

bash -c 'source scripts/update-and-debrand.sh && update_logos'

This updates only the logos without running the full debranding.

📋 Requirements

Source Logo

• Place your logo at assets/moreminimorelogo.png
• Recommended size: 512x512px or larger
• Format: PNG with transparency support
• Square aspect ratio works best

System Requirements

• macOS: Homebrew (auto-installed if needed)
• Linux: apt-get or yum package manager
• Windows: ImageMagick must be manually installed

🔧 Technical Details

SVG Generation

The script creates an SVG wrapper that embeds the PNG as base64 data:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <image href="data:image/png;base64,..." width="128" height="128"/>
</svg>

Icon Sizes

• 16x16: Taskbar, small UI elements
• 32x32: Desktop icons, medium UI elements
• 48x48: Control panel, larger UI elements
• 64x64: High-DPI small icons
• 128x128: Standard application icons
• 256x256: High-DPI application icons
• 512x512: App Store, high-resolution displays
• 1024x1024: Retina displays, future-proofing

Platform-Specific Formats

• ICO (Windows): Multi-resolution icon file
• ICNS (macOS): Native macOS icon format with iconset

🛠️ Troubleshooting

ImageMagick Issues

# Check if ImageMagick is installed
convert --version

# Install manually if needed
# macOS
brew install imagemagick

# Ubuntu/Debian
sudo apt-get install imagemagick

# CentOS/RHEL
sudo yum install ImageMagick

Base64 Encoding Issues

The script uses cross-platform compatible base64 encoding:

base64 -i input.png -o - | tr -d '\n'

Permission Issues

# Make script executable
chmod +x scripts/update-and-debrand.sh

📝 Backup and Restore

Automatic Backups

The script automatically creates backups of all original files:

• assets/logo.svg.backup
• assets/logo.png.backup
• assets/icon/logo.png.backup
• assets/icon/logo.ico.backup
• assets/icon/logo.icns.backup
• e2e-tests/fixtures/images/logo.png.backup

Manual Restore

# Restore specific files
cp assets/logo.svg.backup assets/logo.svg
cp assets/icon/logo.ico.backup assets/icon/logo.ico

# Restore all backups
find assets -name "*.backup" -exec sh -c 'mv "$1" "${1%.backup}"' _ {} \;

🎨 Design Guidelines

Logo Requirements

• Format: PNG with transparency
• Size: Minimum 256x256px (recommended 512x512px)
• Aspect Ratio: Square (1:1) works best
• Colors: Works well on both light and dark backgrounds
• Complexity: Simple designs scale better at small sizes

Visibility Testing

Test your logo at different sizes:

• 16x16: Should be recognizable as a small icon
• 24x24: TitleBar display size
• 32x32: Standard icon size
• 128x128: Full detail visible

🔄 Future Updates

When updating the original Dyad codebase:

1. Run ./scripts/update-and-debrand.sh
2. The script will automatically:
   • Apply all custom features
   • Update branding
   • Replace all logos with your MoreMinimore branding
   • Generate required icon formats
   • Update test fixtures

📊 Integration Points

Code References

• src/app/TitleBar.tsx - Uses assets/logo.svg
• forge.config.ts - Uses assets/icon/logo for Electron
• e2e-tests/fixtures/images/logo.png - Test fixtures

Build Process

The generated icons are automatically included in the Electron build process through the forge.config.ts configuration.

🎉 Success Indicators

After successful logo integration:

• ✅ All logo files generated in correct formats
• ✅ TypeScript compilation passes
• ✅ Application builds without errors
• ✅ Logo displays correctly in TitleBar
• ✅ Application icons show MoreMinimore branding
• ✅ Test fixtures updated with new logo

📞 Support

If you encounter issues:

1. Check that assets/moreminimorelogo.png exists
2. Verify ImageMagick is installed (convert --version)
3. Check file permissions
4. Review script output for error messages
5. Test with a simple PNG file first

The logo integration system is designed to be robust and handle edge cases gracefully, with fallbacks when image processing tools are not available.