#!/bin/bash # Generate an HTML gallery from screenshots in a directory. # Usage: gallery.sh [title] # Reads screen metadata from screens.yaml in the same directory. set -euo pipefail SCREENS_DIR="${1:?Usage: gallery.sh [title]}" TITLE="${2:-App Screen Flow}" OUTPUT="$SCREENS_DIR/index.html" YAML="$SCREENS_DIR/screens.yaml" if [ ! -f "$YAML" ]; then echo "Error: $YAML not found. Create it with screen metadata." >&2 echo "Example:" >&2 cat >&2 <<'EXAMPLE' screens: - file: 01-home.png label: Home desc: Main screen action: Tap item - file: 02-detail.png label: Detail desc: Detail view EXAMPLE exit 1 fi FILES=(); LABELS=(); DESCS=(); ACTIONS=() cf=""; cl=""; cd=""; ca="" flush() { if [ -n "$cf" ]; then FILES+=("$cf"); LABELS+=("$cl"); DESCS+=("$cd"); ACTIONS+=("$ca") fi cf=""; cl=""; cd=""; ca="" } while IFS= read -r line; do [[ "$line" =~ ^[[:space:]]*# ]] && continue [[ "$line" =~ ^[[:space:]]*$ ]] && continue if [[ "$line" =~ ^[[:space:]]*-[[:space:]]*file:[[:space:]]*(.*) ]]; then flush; cf="${BASH_REMATCH[1]}" elif [[ "$line" =~ ^[[:space:]]*label:[[:space:]]*(.*) ]]; then cl="${BASH_REMATCH[1]}" elif [[ "$line" =~ ^[[:space:]]*desc:[[:space:]]*(.*) ]]; then cd="${BASH_REMATCH[1]}" elif [[ "$line" =~ ^[[:space:]]*action:[[:space:]]*(.*) ]]; then ca="${BASH_REMATCH[1]}" fi done < "$YAML" flush COUNT=${#FILES[@]} [ "$COUNT" -eq 0 ] && { echo "No screens in $YAML" >&2; exit 1; } DATE=$(date +"%B %-d, %Y") cat > "$OUTPUT" < ${TITLE}

${TITLE}

Screen flow — captured ${DATE}

HTML for ((i=0; i> "$OUTPUT" <

${LABELS[$i]}

${DESCS[$i]}

SCREEN if [ -n "${ACTIONS[$i]}" ] && [ $((i+1)) -lt "$COUNT" ]; then cat >> "$OUTPUT" <

→

${ACTIONS[$i]}

ARROW fi done cat >> "$OUTPUT" < FOOT echo "Generated: $OUTPUT"