@mtldev514/retro-portfolio-engine 1.0.0 → 1.1.2

package/build.sh

@@ -0,0 +1,326 @@
+#!/bin/bash
+
+##############################################################################
+# Site-as-a-Package Build Script
+# Fetches content from remote data repository and builds static site
+##############################################################################
+
+set -e  # Exit on error
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Configuration
+MANIFEST_URL="${MANIFEST_URL:-https://raw.githubusercontent.com/YOUR_USERNAME/retro-portfolio-data/main/manifest.json}"
+CACHE_DIR=".cache"
+DIST_DIR="dist"
+FORCE_DOWNLOAD=false
+
+##############################################################################
+# Helper Functions
+##############################################################################
+
+print_header() {
+    echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo -e "${BLUE}  🎨 Site-as-a-Package Builder${NC}"
+    echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+}
+
+print_step() {
+    echo -e "\n${GREEN}▶${NC} $1"
+}
+
+print_warning() {
+    echo -e "${YELLOW}⚠${NC} $1"
+}
+
+print_error() {
+    echo -e "${RED}✗${NC} $1"
+}
+
+print_success() {
+    echo -e "${GREEN}✓${NC} $1"
+}
+
+##############################################################################
+# Parse Arguments
+##############################################################################
+
+parse_args() {
+    while [[ $# -gt 0 ]]; do
+        case $1 in
+            -f|--force)
+                FORCE_DOWNLOAD=true
+                shift
+                ;;
+            -m|--manifest)
+                MANIFEST_URL="$2"
+                shift 2
+                ;;
+            -c|--cache-dir)
+                CACHE_DIR="$2"
+                shift 2
+                ;;
+            -o|--output)
+                DIST_DIR="$2"
+                shift 2
+                ;;
+            -h|--help)
+                show_help
+                exit 0
+                ;;
+            *)
+                print_error "Unknown option: $1"
+                show_help
+                exit 1
+                ;;
+        esac
+    done
+}
+
+show_help() {
+    cat << EOF
+Usage: ./build.sh [OPTIONS]
+
+Options:
+    -f, --force             Force re-download of all files (ignore cache)
+    -m, --manifest URL      Specify custom manifest URL
+    -c, --cache-dir DIR     Cache directory (default: .cache)
+    -o, --output DIR        Output directory (default: dist)
+    -h, --help              Show this help message
+
+Examples:
+    ./build.sh                          # Build with cache
+    ./build.sh --force                  # Force fresh download
+    ./build.sh --manifest https://...   # Use custom manifest
+
+EOF
+}
+
+##############################################################################
+# Cache Management
+##############################################################################
+
+check_cache() {
+    local file_path="$1"
+    local cached_file="${CACHE_DIR}/${file_path}"
+
+    if [[ "$FORCE_DOWNLOAD" == true ]]; then
+        return 1  # Don't use cache
+    fi
+
+    if [[ -f "$cached_file" ]]; then
+        # Check if cache is still valid (less than 1 hour old)
+        local cache_age=$(($(date +%s) - $(date -r "$cached_file" +%s)))
+        if [[ $cache_age -lt 3600 ]]; then
+            return 0  # Cache is valid
+        fi
+    fi
+
+    return 1  # Cache invalid or doesn't exist
+}
+
+##############################################################################
+# Download Functions
+##############################################################################
+
+download_file() {
+    local url="$1"
+    local output_path="$2"
+    local use_cache="${3:-true}"
+
+    # Create directory if needed
+    mkdir -p "$(dirname "$output_path")"
+
+    # Check cache first
+    if [[ "$use_cache" == true ]] && check_cache "$output_path"; then
+        local cached_file="${CACHE_DIR}/${output_path}"
+        cp "$cached_file" "$output_path"
+        echo -e "  ${BLUE}↻${NC} $(basename "$output_path") (cached)"
+        return 0
+    fi
+
+    # Download file
+    if curl -sfL "$url" -o "$output_path" 2>/dev/null; then
+        # Save to cache
+        if [[ "$use_cache" == true ]]; then
+            local cache_file="${CACHE_DIR}/${output_path}"
+            mkdir -p "$(dirname "$cache_file")"
+            cp "$output_path" "$cache_file"
+        fi
+        echo -e "  ${GREEN}↓${NC} $(basename "$output_path")"
+        return 0
+    else
+        print_error "Failed to download: $url"
+        return 1
+    fi
+}
+
+##############################################################################
+# Build Process
+##############################################################################
+
+load_manifest() {
+    print_step "Loading manifest from remote..."
+
+    local temp_manifest=$(mktemp)
+
+    if ! curl -sfL "$MANIFEST_URL" -o "$temp_manifest"; then
+        print_error "Failed to download manifest from: $MANIFEST_URL"
+        rm -f "$temp_manifest"
+        exit 1
+    fi
+
+    # Validate JSON
+    if ! jq empty "$temp_manifest" 2>/dev/null; then
+        print_error "Invalid JSON in manifest"
+        rm -f "$temp_manifest"
+        exit 1
+    fi
+
+    # Parse manifest
+    DATA_REPO_BASE=$(jq -r '.dataRepository.baseUrl' "$temp_manifest")
+
+    if [[ "$DATA_REPO_BASE" == "null" || -z "$DATA_REPO_BASE" ]]; then
+        print_error "Invalid manifest: missing dataRepository.baseUrl"
+        rm -f "$temp_manifest"
+        exit 1
+    fi
+
+    # Store manifest for later use
+    MANIFEST_FILE="$temp_manifest"
+
+    print_success "Manifest loaded successfully"
+    echo "  Data source: $DATA_REPO_BASE"
+}
+
+download_structure() {
+    local section="$1"
+    local use_cache="$2"
+
+    print_step "Downloading $section files..."
+
+    # Get files from manifest
+    local files=$(jq -r ".structure.${section} | to_entries[] | .value" "$MANIFEST_FILE")
+
+    while IFS= read -r file_path; do
+        if [[ -n "$file_path" && "$file_path" != "null" ]]; then
+            local url="${DATA_REPO_BASE}${file_path}"
+            download_file "$url" "${DIST_DIR}/${file_path}" "$use_cache"
+        fi
+    done <<< "$files"
+}
+
+copy_engine_files() {
+    print_step "Copying engine files..."
+
+    # Copy index.html
+    if [[ -f "index.html" ]]; then
+        cp index.html "${DIST_DIR}/"
+        echo -e "  ${GREEN}✓${NC} index.html"
+    fi
+
+    # Copy local JS files
+    if [[ -d "js" ]]; then
+        mkdir -p "${DIST_DIR}/js"
+        cp -r js/* "${DIST_DIR}/js/"
+        echo -e "  ${GREEN}✓${NC} js/ ($(ls -1 js | wc -l) files)"
+    fi
+
+    # Copy local CSS files
+    for css_file in style.css fonts.css; do
+        if [[ -f "$css_file" ]]; then
+            cp "$css_file" "${DIST_DIR}/"
+            echo -e "  ${GREEN}✓${NC} $css_file"
+        fi
+    done
+}
+
+create_build_info() {
+    print_step "Creating build info..."
+
+    cat > "${DIST_DIR}/build-info.json" << EOF
+{
+  "buildDate": "$(date -u +"%Y-%m-%dT%H:%M:%SZ")",
+  "manifestUrl": "$MANIFEST_URL",
+  "dataSource": "$DATA_REPO_BASE",
+  "cacheUsed": $([ "$FORCE_DOWNLOAD" == true ] && echo "false" || echo "true"),
+  "version": "$(jq -r '.version' "$MANIFEST_FILE")"
+}
+EOF
+
+    print_success "Build info created"
+}
+
+##############################################################################
+# Main Build Process
+##############################################################################
+
+main() {
+    print_header
+
+    # Parse arguments
+    parse_args "$@"
+
+    # Show build configuration
+    echo ""
+    echo "Configuration:"
+    echo "  Manifest URL: $MANIFEST_URL"
+    echo "  Cache dir:    $CACHE_DIR"
+    echo "  Output dir:   $DIST_DIR"
+    echo "  Force reload: $FORCE_DOWNLOAD"
+    echo ""
+
+    # Check dependencies
+    if ! command -v jq &> /dev/null; then
+        print_error "jq is required but not installed. Install with: apt-get install jq"
+        exit 1
+    fi
+
+    # Clean output directory if needed
+    if [[ -d "$DIST_DIR" ]]; then
+        print_step "Cleaning output directory..."
+        rm -rf "$DIST_DIR"
+    fi
+    mkdir -p "$DIST_DIR"
+
+    # Create cache directory
+    mkdir -p "$CACHE_DIR"
+
+    # Load manifest
+    load_manifest
+
+    # Download data files
+    local use_cache=$([ "$FORCE_DOWNLOAD" == true ] && echo "false" || echo "true")
+
+    download_structure "config" "$use_cache"
+    download_structure "data" "$use_cache"
+    download_structure "lang" "$use_cache"
+
+    # Copy engine files
+    copy_engine_files
+
+    # Create build info
+    create_build_info
+
+    # Cleanup
+    rm -f "$MANIFEST_FILE"
+
+    # Success!
+    echo ""
+    echo -e "${GREEN}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    print_success "Build completed successfully!"
+    echo -e "${GREEN}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo ""
+    echo "Next steps:"
+    echo "  1. Test locally:  cd ${DIST_DIR} && python3 -m http.server 8000"
+    echo "  2. Deploy:        Deploy the ${DIST_DIR}/ folder to GitHub Pages"
+    echo ""
+}
+
+# Run main function
+main "$@"

package/index.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title data-i18n="header_title">Retro Portfolio</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="fonts.css">
+
+    <!-- Load manifest-based config loader -->
+    <script src="js/manifest-loader.js"></script>
+
+    <!-- Load application modules -->
+    <script src="js/i18n.js" defer></script>
+    <script src="js/themes.js" defer></script>
+    <script src="js/render.js" defer></script>
+    <script src="js/router.js" defer></script>
+    <script src="js/media.js" defer></script>
+    <script src="js/sparkle.js" defer></script>
+    <script src="js/effects.js" defer></script>
+
+    <!-- Initialize app after all modules loaded -->
+    <script src="js/init.js" defer></script>
+</head>
+<body>
+    <!-- Votre contenu HTML existant ici -->
+    <div id="rotate-overlay">
+        <div class="rotate-content">
+            <div class="rotate-icon">📺↩️</div>
+            <h2>ROTATE YOUR DEVICE!</h2>
+            <p>This website was designed for<br><b>DESKTOP COMPUTERS</b></p>
+            <p class="rotate-sub">Please turn your phone sideways<br>for the full retro experience!</p>
+        </div>
+    </div>
+
+    <div class="container">
+        <header>
+            <div class="settings-switcher">
+                <button class="settings-btn">⚙</button>
+                <div class="settings-dropdown">
+                    <div class="settings-section-label">Theme</div>
+                    <div class="settings-option" onclick="themes.changeTheme('jr16')">
+                        <span class="theme-icon">🌿</span> JR-16
+                    </div>
+                    <div class="settings-divider"></div>
+                    <div class="settings-section-label">Language</div>
+                    <div class="settings-option" onclick="i18n.changeLang('en')">
+                        <span class="lang-flag">🇬🇧</span> English
+                    </div>
+                    <div class="settings-option" onclick="i18n.changeLang('fr')">
+                        <span class="lang-flag">🇫🇷</span> Français
+                    </div>
+                </div>
+            </div>
+            <h1 id="page-title" data-i18n="header_title">Portfolio</h1>
+        </header>
+
+        <div class="content">
+            <main id="app">
+                <div class="loading-screen">
+                    <div class="loading-spinner"></div>
+                    <p>Loading site engine...</p>
+                </div>
+            </main>
+        </div>
+
+        <footer class="footer-terminal">
+            <div class="terminal-window">
+                <div class="terminal-titlebar">
+                    <span class="terminal-titlebar-text">Built with Site-as-a-Package</span>
+                </div>
+                <div class="terminal-body">
+                    <div class="terminal-line">
+                        <span class="terminal-prompt">$</span>
+                        <span data-i18n="footer_copy">&copy; 2026</span>
+                        <span class="terminal-cursor">█</span>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    </div>
+
+    <script src="js/counter.js"></script>
+</body>
+</html>