164 lines
3.8 KiB
Markdown
164 lines
3.8 KiB
Markdown
# 🎨 Kompose Visual Assets Guide
|
|
|
|
## Adding a Logo
|
|
|
|
To add a logo to the README:
|
|
|
|
1. **Create or get a logo:**
|
|
- Design a logo (suggestions: musical conductor, orchestra, Docker whale with a baton)
|
|
- Recommended size: 400px width
|
|
- Format: PNG with transparency
|
|
|
|
2. **Add to repository:**
|
|
```bash
|
|
mkdir -p .github/assets
|
|
mv your-logo.png .github/assets/logo.png
|
|
```
|
|
|
|
3. **Update README.md:**
|
|
Replace the ASCII art with:
|
|
```markdown
|
|
<p align="center">
|
|
<img src=".github/assets/logo.png" alt="Kompose Logo" width="400">
|
|
</p>
|
|
```
|
|
|
|
## Adding Screenshots
|
|
|
|
Showcase your project with screenshots:
|
|
|
|
```bash
|
|
# Create assets directory
|
|
mkdir -p .github/assets
|
|
|
|
# Add screenshots
|
|
# - screenshot-1-list.png - ./kompose.sh --list output
|
|
# - screenshot-2-export.png - Database export in action
|
|
# - screenshot-3-traefik.png - Traefik dashboard
|
|
```
|
|
|
|
Update README with:
|
|
```markdown
|
|
## 📸 Screenshots
|
|
|
|
### Stack Management
|
|
|
|
|
|
### Database Operations
|
|
|
|
|
|
### Traefik Dashboard
|
|
|
|
```
|
|
|
|
## Badge Customization
|
|
|
|
Update badges in README.md:
|
|
|
|
```markdown
|
|
[](https://github.com/yourusername/kompose/actions)
|
|
[](https://github.com/yourusername/kompose/releases)
|
|
[](https://github.com/yourusername/kompose/releases)
|
|
[](https://github.com/yourusername/kompose)
|
|
```
|
|
|
|
## GIF Demos
|
|
|
|
Create animated GIFs showing Kompose in action:
|
|
|
|
1. **Install asciinema:**
|
|
```bash
|
|
pip install asciinema
|
|
```
|
|
|
|
2. **Record terminal session:**
|
|
```bash
|
|
asciinema rec demo.cast
|
|
# Run your commands
|
|
# Press Ctrl+D when done
|
|
```
|
|
|
|
3. **Convert to GIF:**
|
|
```bash
|
|
# Use https://github.com/asciinema/agg
|
|
agg demo.cast demo.gif
|
|
```
|
|
|
|
4. **Add to README:**
|
|
```markdown
|
|
## 🎬 Demo
|
|
|
|
|
|
```
|
|
|
|
## Social Preview
|
|
|
|
Create a social preview image (1200x630px) for GitHub:
|
|
|
|
1. Create image with:
|
|
- Kompose logo
|
|
- Tagline: "Your Docker Compose Symphony Conductor"
|
|
- Visual: Musical notes + Docker containers
|
|
|
|
2. Upload to GitHub:
|
|
- Repository Settings → Social preview → Upload image
|
|
|
|
## Emoji Guide
|
|
|
|
Current emoji usage in README:
|
|
- 🎼 🎻 🎵 - Musical theme
|
|
- 🚀 ✨ - Success/Features
|
|
- 💾 🗄️ - Database operations
|
|
- 🪝 - Hooks system
|
|
- 🌐 - Network
|
|
- 🔧 ⚙️ - Configuration
|
|
- 🎯 - Advanced features
|
|
- 🔍 - Troubleshooting
|
|
- 🤝 - Contributing
|
|
- ☕ ❤️ - Community
|
|
|
|
Feel free to adjust for your preferred style!
|
|
|
|
## Color Scheme Suggestion
|
|
|
|
Kompose brand colors (suggestion):
|
|
- Primary: `#2496ED` (Docker blue)
|
|
- Secondary: `#FFB700` (Music gold)
|
|
- Accent: `#41B883` (Success green)
|
|
- Dark: `#2C3E50`
|
|
|
|
Use in badges, diagrams, and visual assets.
|
|
|
|
## Architecture Diagrams
|
|
|
|
Create detailed diagrams using:
|
|
- **Mermaid** (built into GitHub)
|
|
- **Draw.io** (diagrams.net)
|
|
- **Excalidraw** (hand-drawn style)
|
|
|
|
Example Mermaid diagram in README:
|
|
```markdown
|
|
\`\`\`mermaid
|
|
graph TB
|
|
A[Kompose CLI] --> B{Pattern Match}
|
|
B --> C[Stack 1]
|
|
B --> D[Stack 2]
|
|
B --> E[Stack N]
|
|
C --> F[Docker Compose]
|
|
D --> F
|
|
E --> F
|
|
\`\`\`
|
|
```
|
|
|
|
## Repository Extras
|
|
|
|
Enhance your repo with:
|
|
- **CONTRIBUTING.md** - Contribution guidelines
|
|
- **CODE_OF_CONDUCT.md** - Community standards
|
|
- **CHANGELOG.md** - Version history
|
|
- **.github/ISSUE_TEMPLATE/** - Issue templates
|
|
- **.github/PULL_REQUEST_TEMPLATE.md** - PR template
|
|
- **LICENSE** - MIT License file
|
|
|
|
Happy decorating! 🎨
|