generated from coulomb/repo-seed
tegwick
39037587ba
- Add 'make dist' target to build distribution package in dist/ - Add 'make dist-zip' target to create distributable archive (ZIP or tar.gz) - Create start-server.bat for Windows users (auto-opens browser, starts Python server) - Create start-server.sh for Linux/Mac users with same functionality - Generate DIST_README.md with quick start instructions for all platforms - Add WINDOWS_USAGE.md with comprehensive guide for WSL → Windows deployment - Update .gitignore to exclude dist/ and distribution archives - Update CLAUDE.md with distribution build documentation Distribution package includes: - Core application files (index.html, engine.js, generator.js) - All example projects (example/, example-1/, my-project/) - Documentation (README.md, TEMPLATE_V2_GUIDE.md, TROUBLESHOOTING.md) - Cross-platform server startup scripts The distribution is self-contained and works on Windows filesystems without modification. Paths use forward slashes which browsers handle correctly on all platforms. Users can simply extract and double-click start-server.bat (Windows) or run ./start-server.sh (Linux/Mac) to launch the application. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
276 lines
11 KiB
Makefile
276 lines
11 KiB
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 dist/
|
||
@echo "✅ Copied core files (index.html, engine.js, generator.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 "" >> 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 "" >> 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. Load your project in the application using the file upload controls" >> 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
|