timeline-svg/Makefile

.PHONY: help install test test-watch test-coverage test-ui clean serve lint format deps-check deps-update dist dist-zip

# Default target
help:
	@echo "Timeline SVG Generator - Make Targets"
	@echo "====================================="
	@echo ""
	@echo "Development:"
	@echo "  install       Install development dependencies"
	@echo "  serve         Start local development server"
	@echo "  clean         Clean node_modules and coverage"
	@echo ""
	@echo "Testing:"
	@echo "  test          Run all tests once"
	@echo "  test-watch    Run tests in watch mode (TDD)"
	@echo "  test-coverage Run tests with coverage report"
	@echo "  test-ui       Open browser-based test UI"
	@echo ""
	@echo "Quality:"
	@echo "  lint          Run code linting (if configured)"
	@echo "  format        Format code (if configured)"
	@echo ""
	@echo "Dependencies:"
	@echo "  deps-check    Check for outdated dependencies"
	@echo "  deps-update   Update dependencies"
	@echo "  deps-audit    Security audit of dependencies"
	@echo ""
	@echo "Distribution:"
	@echo "  dist          Build distribution package in dist/"
	@echo "  dist-zip      Build distribution and create ZIP archive"
	@echo ""

# Development setup
install:
	@echo "Installing development dependencies..."
	@# Workaround for Node.js v24 + OpenSSL 3.x in WSL (ERR_SSL_CIPHER_OPERATION_FAILED)
	@export NODE_OPTIONS="--openssl-legacy-provider" && npm install
	@echo "✅ Dependencies installed"

# Testing targets
test:
	@echo "Running tests..."
	@if [ ! -d "node_modules" ]; then \
		echo "❌ Dependencies not installed. Run 'make install' first."; \
		exit 1; \
	fi
	npm test

test-watch:
	@echo "Starting test watch mode (press 'q' to quit)..."
	@if [ ! -d "node_modules" ]; then \
		echo "❌ Dependencies not installed. Run 'make install' first."; \
		exit 1; \
	fi
	npm run test:watch

test-coverage:
	@echo "Running tests with coverage..."
	@if [ ! -d "node_modules" ]; then \
		echo "❌ Dependencies not installed. Run 'make install' first."; \
		exit 1; \
	fi
	npm run test:coverage
	@echo "📊 Coverage report generated in coverage/ directory"

test-ui:
	@echo "Opening test UI in browser..."
	@if [ ! -d "node_modules" ]; then \
		echo "❌ Dependencies not installed. Run 'make install' first."; \
		exit 1; \
	fi
	npm run test:ui

# Development server (simple HTTP server for testing)
serve:
	@if command -v python3 >/dev/null 2>&1; then \
		echo "Starting development server on http://localhost:8000..."; \
		echo "📂 Serving files from current directory"; \
		echo "Press Ctrl+C to stop"; \
		python3 -m http.server 8000; \
	elif command -v python >/dev/null 2>&1; then \
		echo "Starting development server on http://localhost:8000..."; \
		echo "📂 Serving files from current directory"; \
		echo "Press Ctrl+C to stop"; \
		python -m SimpleHTTPServer 8000; \
	elif command -v npx >/dev/null 2>&1; then \
		echo "Starting development server with npx..."; \
		npx serve -l 8000; \
	else \
		echo "❌ No suitable HTTP server found"; \
		echo "Install Python or Node.js to use 'make serve'"; \
		exit 1; \
	fi

# Code quality (placeholder targets for future use)
lint:
	@if [ -f "package.json" ] && npm list eslint >/dev/null 2>&1; then \
		echo "Running ESLint..."; \
		npx eslint *.js; \
	else \
		echo "ℹ️  ESLint not configured. Skipping lint check."; \
		echo "   To add linting: npm install --save-dev eslint"; \
	fi

format:
	@if [ -f "package.json" ] && npm list prettier >/dev/null 2>&1; then \
		echo "Formatting code with Prettier..."; \
		npx prettier --write "*.js" "test/*.js"; \
	else \
		echo "ℹ️  Prettier not configured. Skipping code formatting."; \
		echo "   To add formatting: npm install --save-dev prettier"; \
	fi

# Dependency management
deps-check:
	@echo "Checking for outdated dependencies..."
	npm outdated

deps-update:
	@echo "Updating dependencies..."
	npm update
	@echo "✅ Dependencies updated"

deps-audit:
	@echo "Running security audit..."
	npm audit
	@echo "🔒 Security audit complete"

# Cleanup
clean:
	@echo "Cleaning up..."
	@if [ -d "node_modules" ]; then rm -rf node_modules && echo "🗑️  Removed node_modules/"; fi
	@if [ -d "coverage" ]; then rm -rf coverage && echo "🗑️  Removed coverage/"; fi
	@if [ -d ".vitest" ]; then rm -rf .vitest && echo "🗑️  Removed .vitest/"; fi
	@echo "✅ Cleanup complete"

# Quick setup for new developers
setup: clean install test
	@echo ""
	@echo "🎉 Setup complete! You can now:"
	@echo "   • Run 'make test' to run tests"
	@echo "   • Run 'make test-watch' for TDD"
	@echo "   • Run 'make serve' to start development server"
	@echo "   • Open index.html in browser to use the app"

# Distribution build for deployment/Windows
dist:
	@echo "Building distribution package..."
	@# Create dist directory
	@rm -rf dist
	@mkdir -p dist
	@echo "📦 Created dist/ directory"

	@# Copy core application files
	@cp index.html engine.js generator.js file-editor.js dist/
	@echo "✅ Copied core files (index.html, engine.js, generator.js, file-editor.js)"

	@# Copy project directories
	@cp -r example example-1 my-project dist/
	@echo "✅ Copied project directories (example, example-1, my-project)"

	@# Copy documentation
	@cp README.md LICENSE dist/
	@[ -f TEMPLATE_V2_GUIDE.md ] && cp TEMPLATE_V2_GUIDE.md dist/ || true
	@[ -f TROUBLESHOOTING.md ] && cp TROUBLESHOOTING.md dist/ || true
	@echo "✅ Copied documentation"

	@# Create Windows batch file for serving
	@echo '@echo off' > dist/start-server.bat
	@echo 'echo Starting Timeline SVG Generator...' >> dist/start-server.bat
	@echo 'echo.' >> dist/start-server.bat
	@echo 'echo Opening browser at http://localhost:8000' >> dist/start-server.bat
	@echo 'echo Press Ctrl+C to stop the server' >> dist/start-server.bat
	@echo 'echo.' >> dist/start-server.bat
	@echo 'start http://localhost:8000' >> dist/start-server.bat
	@echo 'python -m http.server 8000 2^>nul || python3 -m http.server 8000 2^>nul || (echo Python not found. Please install Python or open index.html in a browser. ^& pause)' >> dist/start-server.bat
	@echo "✅ Created start-server.bat for Windows"

	@# Create Linux/Mac shell script for serving
	@echo '#!/bin/bash' > dist/start-server.sh
	@echo 'echo "Starting Timeline SVG Generator..."' >> dist/start-server.sh
	@echo 'echo ""' >> dist/start-server.sh
	@echo 'echo "Opening browser at http://localhost:8000"' >> dist/start-server.sh
	@echo 'echo "Press Ctrl+C to stop the server"' >> dist/start-server.sh
	@echo 'echo ""' >> dist/start-server.sh
	@echo 'if command -v xdg-open >/dev/null 2>&1; then' >> dist/start-server.sh
	@echo '  xdg-open http://localhost:8000 &' >> dist/start-server.sh
	@echo 'elif command -v open >/dev/null 2>&1; then' >> dist/start-server.sh
	@echo '  open http://localhost:8000 &' >> dist/start-server.sh
	@echo 'fi' >> dist/start-server.sh
	@echo 'python3 -m http.server 8000 2>/dev/null || python -m SimpleHTTPServer 8000 2>/dev/null || { echo "Python not found. Please install Python or open index.html in a browser."; read -p "Press Enter to exit..."; }' >> dist/start-server.sh
	@chmod +x dist/start-server.sh
	@echo "✅ Created start-server.sh for Linux/Mac"

	@# Create distribution README
	@echo "# Timeline SVG Generator - Distribution Package" > dist/DIST_README.md
	@echo "" >> dist/DIST_README.md
	@echo "This is a standalone distribution of Timeline SVG Generator." >> dist/DIST_README.md
	@echo "" >> dist/DIST_README.md
	@echo "## Quick Start" >> dist/DIST_README.md
	@echo "" >> dist/DIST_README.md
	@echo "### Windows" >> dist/DIST_README.md
	@echo "" >> dist/DIST_README.md
	@echo "1. Double-click \`start-server.bat\`" >> dist/DIST_README.md
	@echo "2. Your browser will open automatically at http://localhost:8000" >> dist/DIST_README.md
	@echo "3. The application will load the example project automatically" >> dist/DIST_README.md
	@echo "4. To load your own project, click **📂 Load Project Folder** and select your project directory" >> dist/DIST_README.md
	@echo "" >> dist/DIST_README.md
	@echo "### Linux / Mac" >> dist/DIST_README.md
	@echo "" >> dist/DIST_README.md
	@echo "1. Run \`./start-server.sh\` (or \`bash start-server.sh\`)" >> dist/DIST_README.md
	@echo "2. Your browser will open automatically at http://localhost:8000" >> dist/DIST_README.md
	@echo "3. The application will load the example project automatically" >> dist/DIST_README.md
	@echo "4. To load your own project, click **📂 Load Project Folder** and select your project directory" >> dist/DIST_README.md
	@echo "" >> dist/DIST_README.md
	@echo "### Alternative: Open Directly" >> dist/DIST_README.md
	@echo "" >> dist/DIST_README.md
	@echo "**Note:** Due to browser security restrictions (CORS), opening index.html directly may prevent loading of project files. Using a local server is recommended." >> dist/DIST_README.md
	@echo "" >> dist/DIST_README.md
	@echo "## Project Structure" >> dist/DIST_README.md
	@echo "" >> dist/DIST_README.md
	@echo "- \`index.html\` - Main application" >> dist/DIST_README.md
	@echo "- \`engine.js\` - Application logic" >> dist/DIST_README.md
	@echo "- \`generator.js\` - SVG generation engine" >> dist/DIST_README.md
	@echo "- \`example/\` - Simple example project" >> dist/DIST_README.md
	@echo "- \`example-1/\` - Enhanced example with styling" >> dist/DIST_README.md
	@echo "- \`my-project/\` - Template for your own projects" >> dist/DIST_README.md
	@echo "- \`README.md\` - Full documentation" >> dist/DIST_README.md
	@echo "- \`TEMPLATE_V2_GUIDE.md\` - Template creation guide" >> dist/DIST_README.md
	@echo "" >> dist/DIST_README.md
	@echo "## Creating Your Own Timeline" >> dist/DIST_README.md
	@echo "" >> dist/DIST_README.md
	@echo "1. Copy one of the example folders (e.g., \`example/\`)" >> dist/DIST_README.md
	@echo "2. Rename it to your project name" >> dist/DIST_README.md
	@echo "3. Edit \`project.json\` to configure your timeline" >> dist/DIST_README.md
	@echo "4. Replace \`sample.csv\` with your data" >> dist/DIST_README.md
	@echo "5. Customize \`style.css\` and \`template-v2.svg\` as needed" >> dist/DIST_README.md
	@echo "6. Click **📂 Load Project Folder** and select your project folder - all files load automatically!" >> dist/DIST_README.md
	@echo "" >> dist/DIST_README.md
	@echo "**Tip:** The folder picker loads all files (JSON, CSV, SVG, CSS) in one click. You can also load files individually using the separate upload buttons if needed." >> dist/DIST_README.md
	@echo "" >> dist/DIST_README.md
	@echo "See README.md and TEMPLATE_V2_GUIDE.md for detailed instructions." >> dist/DIST_README.md
	@echo "" >> dist/DIST_README.md
	@echo "## Troubleshooting" >> dist/DIST_README.md
	@echo "" >> dist/DIST_README.md
	@echo "If you encounter issues, see TROUBLESHOOTING.md for solutions to common problems." >> dist/DIST_README.md
	@echo "✅ Created DIST_README.md"

	@echo ""
	@echo "🎉 Distribution package created in dist/"
	@echo ""
	@echo "Contents:"
	@echo "  • Core application files (HTML, JS)"
	@echo "  • Example projects (example, example-1, my-project)"
	@echo "  • Documentation (README.md, TEMPLATE_V2_GUIDE.md, etc.)"
	@echo "  • Server startup scripts (start-server.bat, start-server.sh)"
	@echo ""
	@echo "To use on Windows:"
	@echo "  1. Copy the dist/ folder to your Windows machine"
	@echo "  2. Double-click start-server.bat to run"
	@echo ""
	@echo "Or create a ZIP archive with: make dist-zip"

# Create ZIP archive of distribution
dist-zip: dist
	@echo "Creating distribution archive..."
	@if command -v zip >/dev/null 2>&1; then \
		cd dist && zip -r ../timeline-svg-dist.zip . -x "*.git*" -x "*.DS_Store" && cd ..; \
		echo "✅ Created timeline-svg-dist.zip"; \
		echo ""; \
		echo "📦 Distribution archive ready: timeline-svg-dist.zip"; \
		echo "   Transfer this file to Windows and extract to use the application."; \
	else \
		tar --exclude=".git*" --exclude=".DS_Store" -czf timeline-svg-dist.tar.gz -C dist .; \
		echo "✅ Created timeline-svg-dist.tar.gz (zip not available)"; \
		echo ""; \
		echo "📦 Distribution archive ready: timeline-svg-dist.tar.gz"; \
		echo "   Transfer this file to Windows, extract with 7-Zip or similar tool."; \
		echo "   Or install zip: sudo apt-get install zip"; \
	fi