- Fix slug typo: "firberops" → "fiberops" - Update splash backgroundColor to brand #F8FAFC (was Expo default #2563EB) - Update android adaptiveIcon backgroundColor to brand cyan #0891B2 - Add assets/ASSETS.md with full brand guidelines (colors, fonts, dimensions) - Add scripts/generate-assets.sh to regenerate PNGs from SVG sources via inkscape/rsvg-convert
143 lines
4.9 KiB
Bash
Executable File
143 lines
4.9 KiB
Bash
Executable File
#!/usr/bin/env bash
|
||
# generate-assets.sh — Generate FiberOps PNG assets from SVG sources
|
||
#
|
||
# Requirements (install one):
|
||
# brew install inkscape (macOS / Linux)
|
||
# brew install librsvg (lighter: rsvg-convert)
|
||
# apt-get install librsvg2-bin (Debian/Ubuntu)
|
||
#
|
||
# Usage:
|
||
# ./scripts/generate-assets.sh
|
||
#
|
||
# Output: assets/*.png (overwrites existing files)
|
||
|
||
set -euo pipefail
|
||
|
||
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||
REPO_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
|
||
ASSETS="$REPO_ROOT/assets"
|
||
SVGS="$SCRIPT_DIR/svg"
|
||
|
||
# ---------------------------------------------------------------------------
|
||
# Check for a suitable SVG renderer
|
||
# ---------------------------------------------------------------------------
|
||
if command -v inkscape &>/dev/null; then
|
||
RENDERER="inkscape"
|
||
elif command -v rsvg-convert &>/dev/null; then
|
||
RENDERER="rsvg"
|
||
else
|
||
echo "ERROR: Install inkscape or librsvg (rsvg-convert) first." >&2
|
||
echo " macOS: brew install inkscape OR brew install librsvg" >&2
|
||
echo " Linux: apt-get install inkscape OR apt-get install librsvg2-bin" >&2
|
||
exit 1
|
||
fi
|
||
|
||
export_png() {
|
||
local svg="$1" out="$2" w="$3" h="$4"
|
||
echo " → $out (${w}×${h})"
|
||
if [[ "$RENDERER" == "inkscape" ]]; then
|
||
inkscape --export-type=png \
|
||
--export-filename="$out" \
|
||
--export-width="$w" \
|
||
--export-height="$h" \
|
||
"$svg" 2>/dev/null
|
||
else
|
||
rsvg-convert -w "$w" -h "$h" -o "$out" "$svg"
|
||
fi
|
||
}
|
||
|
||
mkdir -p "$SVGS"
|
||
|
||
# ---------------------------------------------------------------------------
|
||
# Inline SVG sources (written to scripts/svg/ so they can be edited)
|
||
# ---------------------------------------------------------------------------
|
||
|
||
# 1. icon-bg.svg — opaque cyan square with "FO" (used for icon.png)
|
||
cat > "$SVGS/icon-bg.svg" <<'SVG'
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
|
||
<rect width="1024" height="1024" rx="230" ry="230" fill="#0891B2"/>
|
||
<text x="512" y="590"
|
||
font-family="'Fira Sans', 'Inter', sans-serif"
|
||
font-weight="700"
|
||
font-size="460"
|
||
text-anchor="middle"
|
||
fill="#FFFFFF">FO</text>
|
||
</svg>
|
||
SVG
|
||
|
||
# 2. icon-fg.svg — transparent background, white "FO" (adaptive icon foreground)
|
||
cat > "$SVGS/icon-fg.svg" <<'SVG'
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
|
||
<text x="512" y="590"
|
||
font-family="'Fira Sans', 'Inter', sans-serif"
|
||
font-weight="700"
|
||
font-size="460"
|
||
text-anchor="middle"
|
||
fill="#FFFFFF">FO</text>
|
||
</svg>
|
||
SVG
|
||
|
||
# 3. splash.svg — transparent, centered logo for splash (composited over #F8FAFC)
|
||
cat > "$SVGS/splash.svg" <<'SVG'
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
|
||
<!-- Circle backdrop -->
|
||
<circle cx="512" cy="430" r="220" fill="#0891B2"/>
|
||
<!-- "FO" inside circle -->
|
||
<text x="512" y="505"
|
||
font-family="'Fira Sans', 'Inter', sans-serif"
|
||
font-weight="700"
|
||
font-size="200"
|
||
text-anchor="middle"
|
||
fill="#FFFFFF">FO</text>
|
||
<!-- "FiberOps" wordmark below -->
|
||
<text x="512" y="730"
|
||
font-family="'Fira Sans', 'Inter', sans-serif"
|
||
font-weight="600"
|
||
font-size="110"
|
||
text-anchor="middle"
|
||
fill="#0891B2">FiberOps</text>
|
||
</svg>
|
||
SVG
|
||
|
||
# 4. favicon.svg — tiny "F" on cyan
|
||
cat > "$SVGS/favicon.svg" <<'SVG'
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
||
<rect width="48" height="48" rx="8" fill="#0891B2"/>
|
||
<text x="24" y="36"
|
||
font-family="'Fira Sans', 'Inter', sans-serif"
|
||
font-weight="700"
|
||
font-size="30"
|
||
text-anchor="middle"
|
||
fill="#FFFFFF">F</text>
|
||
</svg>
|
||
SVG
|
||
|
||
# 5. monochrome.svg — white "FO" on transparent (Android 13 themed icon)
|
||
cat > "$SVGS/monochrome.svg" <<'SVG'
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
|
||
<text x="512" y="590"
|
||
font-family="'Fira Sans', 'Inter', sans-serif"
|
||
font-weight="700"
|
||
font-size="460"
|
||
text-anchor="middle"
|
||
fill="#FFFFFF">FO</text>
|
||
</svg>
|
||
SVG
|
||
|
||
# ---------------------------------------------------------------------------
|
||
# Export PNGs
|
||
# ---------------------------------------------------------------------------
|
||
echo "Exporting PNGs..."
|
||
|
||
export_png "$SVGS/icon-bg.svg" "$ASSETS/icon.png" 1024 1024
|
||
export_png "$SVGS/icon-fg.svg" "$ASSETS/adaptive-icon.png" 1024 1024
|
||
export_png "$SVGS/icon-fg.svg" "$ASSETS/android-icon-foreground.png" 1024 1024
|
||
export_png "$SVGS/icon-bg.svg" "$ASSETS/android-icon-background.png" 1024 1024
|
||
export_png "$SVGS/monochrome.svg" "$ASSETS/android-icon-monochrome.png" 1024 1024
|
||
export_png "$SVGS/splash.svg" "$ASSETS/splash-icon.png" 1024 1024
|
||
export_png "$SVGS/favicon.svg" "$ASSETS/favicon.png" 48 48
|
||
|
||
echo ""
|
||
echo "Done. Files written to assets/"
|
||
echo "Verify with: ls -lh assets/*.png"
|