feat: app icon and readme
This commit is contained in:
@@ -1,163 +0,0 @@
|
|||||||
# 🎨 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! 🎨
|
|
||||||
Reference in New Issue
Block a user