Skip to content

Commit 05b5174

Browse files
wanforgewanforge
committed
✨ Add asset generation script and related assets
- Introduced `generate_assets.sh` to automate the asset generation process. - Added `generate_assets.py` for converting SVG icons to PNG, ICO, and OpenGraph formats. - Implemented asset generation for various sizes of PNG and favicon files. - Created README.md for documentation of generated assets. - Added requirements.txt for necessary Python packages (CairoSVG and Pillow). - Included new PNG assets (icon_64x64.png, icon_96x96.png) for web usage.
1 parent 374445f commit 05b5174

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+785
-0
lines changed

‎.github/workflows/generate-assets.yml‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
name: Generate Assets
2+
3+
on:
4+
push:
5+
branches: [ main ]
6+
paths:
7+
- 'v2/icon.svg'
8+
- 'v2/icon-animate.svg'
9+
- '.github/workflows/generate-assets.yml'
10+
- 'scripts/generate_assets.py'
11+
pull_request:
12+
branches: [ main ]
13+
paths:
14+
- 'v2/icon.svg'
15+
- 'v2/icon-animate.svg'
16+
- '.github/workflows/generate-assets.yml'
17+
- 'scripts/generate_assets.py'
18+
workflow_dispatch:
19+
20+
jobs:
21+
generate-assets:
22+
runs-on: ubuntu-latest
23+
24+
steps:
25+
- name: Checkout repository
26+
uses: actions/checkout@v4
27+
28+
- name: Set up Python
29+
uses: actions/setup-python@v4
30+
with:
31+
python-version: '3.11'
32+
33+
- name: Install system dependencies
34+
run: |
35+
sudo apt-get update
36+
sudo apt-get install -y librsvg2-bin imagemagick
37+
38+
- name: Install Python dependencies
39+
run: |
40+
python -m pip install --upgrade pip
41+
pip install cairosvg pillow
42+
43+
- name: Create output directories
44+
run: |
45+
mkdir -p assets/png
46+
mkdir -p assets/favicon
47+
mkdir -p assets/opengraph
48+
49+
- name: Generate assets
50+
run: python scripts/generate_assets.py
51+
52+
- name: Commit and push changes
53+
run: |
54+
git config --local user.email "[email protected]"
55+
git config --local user.name "Sugeng Sulistiyawan"
56+
git add assets/
57+
if git diff --staged --quiet; then
58+
echo "No changes to commit"
59+
else
60+
git commit -m "Auto-generate assets from SVG icons"
61+
git push
62+
fi

‎.gitignore‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Python
2+
__pycache__/
3+
*.py[cod]
4+
*$py.class
5+
*.so
6+
.Python
7+
build/
8+
develop-eggs/
9+
dist/
10+
downloads/
11+
eggs/
12+
.eggs/
13+
lib/
14+
lib64/
15+
parts/
16+
sdist/
17+
var/
18+
wheels/
19+
pip-wheel-metadata/
20+
share/python-wheels/
21+
*.egg-info/
22+
.installed.cfg
23+
*.egg
24+
MANIFEST
25+
26+
# Virtual environments
27+
.venv/
28+
venv/
29+
ENV/
30+
env/
31+
32+
# IDE
33+
.vscode/
34+
.idea/
35+
*.swp
36+
*.swo
37+
*~
38+
39+
# OS
40+
.DS_Store
41+
.DS_Store?
42+
._*
43+
.Spotlight-V100
44+
.Trashes
45+
ehthumbs.db
46+
Thumbs.db
47+
48+
# Assets (auto-generated, will be committed by GitHub Action)
49+
# Uncomment the following line if you want to ignore generated assets locally
50+
# assets/

‎ASSET_GENERATION.md‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
# Asset Generation Guide
2+
3+
## Overview
4+
5+
This project automatically generates multiple asset formats from SVG icons for use across different platforms and contexts.
6+
7+
## What Gets Generated
8+
9+
### 📱 PNG Assets (11 sizes)
10+
11+
- 16x16, 24x24, 32x32, 48x48, 64x64
12+
- 96x96, 128x128, 192x192, 256x256
13+
- 512x512, 1024x1024
14+
15+
### 🔖 Favicon Assets
16+
17+
- **favicon.ico** - Multi-size ICO file
18+
- Individual PNG files for modern browsers
19+
- Perfect cross-browser compatibility
20+
21+
### 🌐 OpenGraph Assets
22+
23+
- **1200x630** - Standard OpenGraph
24+
- **1200x1200** - Square social media
25+
- **800x800** - Instagram square
26+
- **1080x1080** - Instagram post
27+
- **1200x675** - Twitter card
28+
29+
## How to Use
30+
31+
### 🚀 Automatic (GitHub Action)
32+
33+
- Push changes to `main` branch
34+
- Assets are automatically generated
35+
- No manual intervention required
36+
37+
### 🛠️ Manual Generation
38+
39+
```bash
40+
# Method 1: Shell script (recommended)
41+
./generate_assets.sh
42+
43+
# Method 2: Direct Python
44+
python scripts/generate_assets.py
45+
46+
# Method 3: With virtual environment
47+
python -m venv .venv
48+
source .venv/bin/activate
49+
pip install -r requirements.txt
50+
python scripts/generate_assets.py
51+
```
52+
53+
## HTML Implementation
54+
55+
### Favicon
56+
57+
```html
58+
<link rel="icon" type="image/x-icon" href="assets/favicon/favicon.ico">
59+
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/icon-32x32.png">
60+
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/icon-16x16.png">
61+
```
62+
63+
### OpenGraph
64+
65+
```html
66+
<meta property="og:image" content="assets/opengraph/icon-1200x630.png">
67+
<meta property="og:image:width" content="1200">
68+
<meta property="og:image:height" content="630">
69+
<meta property="og:image:type" content="image/png">
70+
```
71+
72+
### Standard Images
73+
74+
```html
75+
<img src="assets/png/icon-64x64.png" alt="Die Coding Technology" width="64">
76+
```
77+
78+
### CSS Background
79+
80+
```css
81+
.logo {
82+
background-image: url('assets/png/icon-128x128.png');
83+
background-size: contain;
84+
background-repeat: no-repeat;
85+
}
86+
```
87+
88+
## Technical Details
89+
90+
### Dependencies
91+
92+
- **Python 3.8+**
93+
- **cairosvg** - SVG to PNG conversion
94+
- **Pillow** - Image processing and ICO creation
95+
- **librsvg2-bin** (system) - SVG rendering
96+
- **imagemagick** (system) - Image manipulation
97+
98+
### Input Filtering
99+
100+
- Only processes `icon.svg` (static version)
101+
- Skips `icon-animate.svg` to avoid issues with animations
102+
- Maintains clean, consistent output
103+
104+
### Output Structure
105+
106+
```
107+
assets/
108+
├── png/
109+
│ ├── icon-16x16.png
110+
│ ├── icon-24x24.png
111+
│ └── ... (all sizes)
112+
├── favicon/
113+
│ ├── favicon.ico
114+
│ ├── icon.ico
115+
│ └── individual PNGs
116+
├── opengraph/
117+
│ ├── icon-1200x630.png
118+
│ └── ... (all social formats)
119+
└── README.md
120+
```
121+
122+
## Customization
123+
124+
To modify generated sizes, edit `scripts/generate_assets.py`:
125+
126+
```python
127+
# PNG sizes
128+
self.png_sizes = [16, 24, 32, 48, 64, 96, 128, 192, 256, 512, 1024]
129+
130+
# Favicon sizes
131+
self.favicon_sizes = [16, 24, 32, 48, 64]
132+
133+
# OpenGraph sizes
134+
self.opengraph_sizes = [
135+
(1200, 630), # OpenGraph standard
136+
(1200, 1200), # Square
137+
# Add more as needed...
138+
]
139+
```
140+
141+
## Troubleshooting
142+
143+
### Common Issues
144+
145+
1. **Permission denied on shell script**
146+
147+
```bash
148+
chmod +x generate_assets.sh
149+
```
150+
151+
2. **Missing system dependencies**
152+
153+
```bash
154+
# Ubuntu/Debian
155+
sudo apt-get install librsvg2-bin imagemagick
156+
157+
# macOS
158+
brew install librsvg imagemagick
159+
```
160+
161+
3. **Python module not found**
162+
163+
```bash
164+
pip install cairosvg pillow
165+
```
166+
167+
### Verification
168+
169+
Check if assets were generated correctly:
170+
171+
```bash
172+
ls -la assets/
173+
ls assets/png/ | wc -l # Should show 11 files
174+
ls assets/favicon/ # Should show ICO and PNG files
175+
ls assets/opengraph/ # Should show 5 social media formats
176+
```
177+
178+
---
179+
180+
*This documentation is automatically maintained. For issues or suggestions, please open a GitHub issue.*

‎README.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,63 @@ Welcome to the Die Coding Technology Logo repository! This repository contains t
1414

1515
![Die Coding Technology Animated Icon](v2/icon-animate.svg)
1616

17+
## Asset Generation
18+
19+
This repository includes automated asset generation that converts the SVG icons into various formats suitable for different use cases.
20+
21+
### Generated Assets
22+
23+
The asset generator creates the following formats:
24+
25+
#### PNG Files (`assets/png/`)
26+
27+
- **16x16** to **1024x1024** pixels
28+
- Perfect for web usage, app icons
29+
- High-quality rasterized versions
30+
31+
#### Favicon Files (`assets/favicon/`)
32+
33+
- **favicon.ico** - Multi-size ICO file (16, 24, 32, 48, 64px)
34+
- Individual PNG files for modern browsers
35+
- Cross-browser compatible
36+
37+
#### OpenGraph Images (`assets/opengraph/`)
38+
39+
- **1200x630** - Standard OpenGraph for social media
40+
- **1200x1200** - Square format for social platforms
41+
- **800x800** - Instagram square posts
42+
- **1080x1080** - Instagram standard posts
43+
- **1200x675** - Twitter card format
44+
45+
### Asset Generation Usage
46+
47+
#### Manual Generation
48+
49+
Run the asset generator locally:
50+
51+
```bash
52+
# Using the shell script (recommended)
53+
./generate_assets.sh
54+
55+
# Or directly with Python
56+
python scripts/generate_assets.py
57+
```
58+
59+
#### GitHub Action
60+
61+
Assets are automatically generated when SVG files change:
62+
63+
- Triggers on push to `main` branch
64+
- Generates all asset formats
65+
- Commits results back to repository
66+
- Zero-configuration deployment
67+
68+
#### Requirements
69+
70+
- Python 3.8+
71+
- Libraries: `cairosvg`, `pillow`
72+
- System: `librsvg2-bin`, `imagemagick` (Linux/macOS)
73+
1774
## Files
1875

1976
- `v2/icon.svg` - Static version of the Die Coding Technology logo

0 commit comments

Comments
 (0)