Update the rebranding and fix issues
This commit is contained in:
Kunthawat Greethong
198
README-LOGO-INTEGRATION.md
Normal file
198
README-LOGO-INTEGRATION.md
Normal file
@@ -0,0 +1,198 @@
|
||||
# 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)**
|
||||
```bash
|
||||
./scripts/update-and-debrand.sh
|
||||
```
|
||||
This runs the complete debranding process including logo updates.
|
||||
|
||||
### **Logo-Only Update**
|
||||
```bash
|
||||
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:
|
||||
```xml
|
||||
<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**
|
||||
```bash
|
||||
# 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:
|
||||
```bash
|
||||
base64 -i input.png -o - | tr -d '\n'
|
||||
```
|
||||
|
||||
### **Permission Issues**
|
||||
```bash
|
||||
# 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**
|
||||
```bash
|
||||
# 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.
|
||||
Reference in New Issue
Block a user