retro-portfolio-engine 1.0.0

package/js/manifest-loader.js

@@ -0,0 +1,313 @@
+/**
+ * Manifest Loader - Site-as-a-Package
+ * Loads distributed manifest and orchestrates data fetching
+ */
+
+const ManifestLoader = {
+    manifest: null,
+    buildInfo: null,
+    loaded: false,
+
+    /**
+     * Initialize and load the manifest
+     */
+    async init(manifestUrl) {
+        try {
+            console.log('📦 Loading manifest...');
+
+            // Try to load build-time manifest first (for static builds)
+            const buildInfo = await this.loadBuildInfo();
+
+            if (buildInfo) {
+                console.log('✅ Using build-time configuration');
+                this.buildInfo = buildInfo;
+                return this.loadFromBuildInfo();
+            }
+
+            // Fallback to runtime loading (for development)
+            console.log('🔄 Loading manifest at runtime...');
+            return this.loadManifestRuntime(manifestUrl);
+        } catch (error) {
+            console.error('❌ Failed to initialize manifest:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Load build info (created by build.sh)
+     */
+    async loadBuildInfo() {
+        try {
+            const response = await fetch('build-info.json');
+            if (!response.ok) return null;
+            return await response.json();
+        } catch (error) {
+            return null;
+        }
+    },
+
+    /**
+     * Load from pre-built files (build.sh already downloaded everything)
+     */
+    async loadFromBuildInfo() {
+        // When using build.sh, all files are already local
+        // Just use local paths
+        this.manifest = {
+            source: 'build',
+            paths: {
+                configDir: 'config',
+                dataDir: 'data',
+                langDir: 'lang'
+            }
+        };
+
+        this.loaded = true;
+        return this.manifest;
+    },
+
+    /**
+     * Load manifest at runtime (development mode)
+     */
+    async loadManifestRuntime(manifestUrl) {
+        const response = await fetch(manifestUrl);
+
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${manifestUrl}`);
+        }
+
+        const manifest = await response.json();
+
+        // Validate manifest
+        this.validateManifest(manifest);
+
+        this.manifest = {
+            source: 'runtime',
+            data: manifest,
+            paths: {
+                configDir: manifest.dataRepository.baseUrl + 'config',
+                dataDir: manifest.dataRepository.baseUrl + 'data',
+                langDir: manifest.dataRepository.baseUrl + 'lang'
+            }
+        };
+
+        this.loaded = true;
+        return this.manifest;
+    },
+
+    /**
+     * Validate manifest structure
+     */
+    validateManifest(manifest) {
+        const required = ['version', 'dataRepository', 'structure'];
+
+        for (const field of required) {
+            if (!manifest[field]) {
+                throw new Error(`Invalid manifest: missing "${field}"`);
+            }
+        }
+
+        if (!manifest.dataRepository.baseUrl) {
+            throw new Error('Invalid manifest: missing dataRepository.baseUrl');
+        }
+    },
+
+    /**
+     * Get configuration file URL
+     */
+    getConfigUrl(configName) {
+        if (!this.loaded) {
+            throw new Error('Manifest not loaded');
+        }
+
+        const { paths } = this.manifest;
+
+        if (this.manifest.source === 'build') {
+            // Local files (after build.sh)
+            return `${paths.configDir}/${configName}.json`;
+        } else {
+            // Remote files (runtime)
+            const relativePath = this.manifest.data.structure.config[configName];
+            return `${this.manifest.data.dataRepository.baseUrl}${relativePath}`;
+        }
+    },
+
+    /**
+     * Get data file URL
+     */
+    getDataUrl(dataName) {
+        if (!this.loaded) {
+            throw new Error('Manifest not loaded');
+        }
+
+        const { paths } = this.manifest;
+
+        if (this.manifest.source === 'build') {
+            // Local files (after build.sh)
+            return `${paths.dataDir}/${dataName}.json`;
+        } else {
+            // Remote files (runtime)
+            const relativePath = this.manifest.data.structure.data[dataName];
+            return `${this.manifest.data.dataRepository.baseUrl}${relativePath}`;
+        }
+    },
+
+    /**
+     * Get language file URL
+     */
+    getLangUrl(langCode) {
+        if (!this.loaded) {
+            throw new Error('Manifest not loaded');
+        }
+
+        const { paths } = this.manifest;
+
+        if (this.manifest.source === 'build') {
+            // Local files (after build.sh)
+            return `${paths.langDir}/${langCode}.json`;
+        } else {
+            // Remote files (runtime)
+            const relativePath = this.manifest.data.structure.lang[langCode];
+            return `${this.manifest.data.dataRepository.baseUrl}${relativePath}`;
+        }
+    },
+
+    /**
+     * Get all available languages from manifest
+     */
+    getAvailableLanguages() {
+        if (!this.loaded) return [];
+
+        if (this.manifest.source === 'build') {
+            // Parse from build info or config
+            return ['en', 'fr', 'mx', 'ht'];
+        } else {
+            return Object.keys(this.manifest.data.structure.lang);
+        }
+    },
+
+    /**
+     * Get all available data categories
+     */
+    getAvailableCategories() {
+        if (!this.loaded) return [];
+
+        if (this.manifest.source === 'build') {
+            return ['painting', 'drawing', 'photography', 'sculpting', 'music', 'projects'];
+        } else {
+            return Object.keys(this.manifest.data.structure.data);
+        }
+    }
+};
+
+/**
+ * Enhanced AppConfig that uses ManifestLoader
+ */
+const AppConfig = {
+    app: null,
+    languages: null,
+    categories: null,
+    mediaTypes: null,
+    loaded: false,
+    source: 'manifest',
+
+    /**
+     * Load all configuration files using manifest
+     */
+    async load(manifestUrl = './manifest.json') {
+        try {
+            // Initialize manifest loader
+            await ManifestLoader.init(manifestUrl);
+
+            // Load all config files
+            const [app, languages, categories, mediaTypes] = await Promise.all([
+                this.fetchJson(ManifestLoader.getConfigUrl('app')),
+                this.fetchJson(ManifestLoader.getConfigUrl('languages')),
+                this.fetchJson(ManifestLoader.getConfigUrl('categories')),
+                this.fetchJson(ManifestLoader.getConfigUrl('mediaTypes'))
+            ]);
+
+            this.app = app;
+            this.languages = languages;
+            this.categories = categories;
+            this.mediaTypes = mediaTypes;
+            this.loaded = true;
+
+            console.log(`✅ Configuration loaded (source: ${ManifestLoader.manifest.source})`);
+            return true;
+        } catch (error) {
+            console.error('❌ Failed to load configuration:', error);
+            return false;
+        }
+    },
+
+    /**
+     * Fetch JSON with error handling
+     */
+    async fetchJson(url) {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${url}`);
+        }
+        return response.json();
+    },
+
+    /**
+     * Get API base URL
+     */
+    getApiUrl() {
+        return this.app?.api?.baseUrl || 'http://127.0.0.1:5001';
+    },
+
+    /**
+     * Get supported language codes
+     */
+    getLanguageCodes() {
+        return this.languages?.supportedLanguages.map(l => l.code) || ['en'];
+    },
+
+    /**
+     * Get default language
+     */
+    getDefaultLanguage() {
+        return this.languages?.defaultLanguage || 'en';
+    },
+
+    /**
+     * Get all content types
+     */
+    getAllContentTypes() {
+        return this.categories?.contentTypes || this.categories?.categories || [];
+    },
+
+    /**
+     * Get content type configuration by ID
+     */
+    getContentType(contentTypeId) {
+        return this.getAllContentTypes().find(c => c.id === contentTypeId);
+    },
+
+    /**
+     * Get all media types
+     */
+    getAllMediaTypes() {
+        return this.mediaTypes?.mediaTypes || [];
+    },
+
+    /**
+     * Get media type configuration by ID
+     */
+    getMediaType(mediaTypeId) {
+        return this.getAllMediaTypes().find(m => m.id === mediaTypeId);
+    },
+
+    /**
+     * Get data file path for a category (using manifest)
+     */
+    getCategoryDataFile(categoryId) {
+        return ManifestLoader.getDataUrl(categoryId);
+    }
+};
+
+// Export for use in other modules
+window.AppConfig = AppConfig;
+window.ManifestLoader = ManifestLoader;

package/manifest.json

@@ -0,0 +1,74 @@
+{
+  "_comment": "Manifest distribué - Point d'entrée pour Site-as-a-Package",
+  "version": "1.0.0",
+  "name": "Retro Portfolio",
+  "engine": {
+    "minVersion": "1.0.0",
+    "repository": "https://github.com/mtldev514/retro-portfolio-engine"
+  },
+  "dataRepository": {
+    "type": "github",
+    "owner": "YOUR_USERNAME",
+    "repo": "retro-portfolio-data",
+    "branch": "main",
+    "baseUrl": "https://raw.githubusercontent.com/YOUR_USERNAME/retro-portfolio-data/main/"
+  },
+  "structure": {
+    "config": {
+      "app": "config/app.json",
+      "languages": "config/languages.json",
+      "categories": "config/categories.json",
+      "mediaTypes": "config/media-types.json"
+    },
+    "data": {
+      "painting": "data/painting.json",
+      "drawing": "data/drawing.json",
+      "photography": "data/photography.json",
+      "sculpting": "data/sculpting.json",
+      "music": "data/music.json",
+      "projects": "data/projects.json"
+    },
+    "lang": {
+      "en": "lang/en.json",
+      "fr": "lang/fr.json",
+      "mx": "lang/mx.json",
+      "ht": "lang/ht.json"
+    },
+    "assets": {
+      "styles": ["style.css", "fonts.css"],
+      "scripts": [
+        "js/config-loader.js",
+        "js/i18n.js",
+        "js/themes.js",
+        "js/render.js",
+        "js/router.js",
+        "js/media.js",
+        "js/sparkle.js",
+        "js/effects.js",
+        "js/counter.js",
+        "js/init.js"
+      ]
+    }
+  },
+  "build": {
+    "cache": {
+      "enabled": true,
+      "directory": ".cache",
+      "ttl": 3600
+    },
+    "output": {
+      "directory": "dist",
+      "clean": true
+    }
+  },
+  "deployment": {
+    "target": "github-pages",
+    "autoUpdate": true,
+    "schedule": "0 0 * * *"
+  },
+  "metadata": {
+    "author": "Alex",
+    "buildDate": "2026-02-12",
+    "lastUpdate": "2026-02-12T00:00:00Z"
+  }
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "retro-portfolio-engine",
+  "version": "1.0.0",
+  "description": "Site-as-a-Package engine for retro portfolio",
+  "scripts": {
+    "build": "./build.sh",
+    "build:force": "./build.sh --force",
+    "dev": "cd dist && python3 -m http.server 8000",
+    "admin:setup": "./setup-admin.sh",
+    "admin:sync": "./sync-after-admin.sh"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/YOUR_USERNAME/retro-portfolio-engine"
+  },
+  "keywords": [
+    "portfolio",
+    "site-as-a-package",
+    "static-site",
+    "retro"
+  ],
+  "author": "Alex",
+  "license": "MIT"
+}

package/setup-admin.sh

@@ -0,0 +1,134 @@
+#!/bin/bash
+
+##############################################################################
+# Admin Setup Script for Site-as-a-Package
+# Sets up local admin to work with the data repository
+##############################################################################
+
+set -e
+
+# Colors
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+YELLOW='\033[1;33m'
+NC='\033[0m'
+
+echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo -e "${BLUE}  🔧 Admin Setup for Site-as-a-Package${NC}"
+echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo ""
+
+# Check if data repo path is provided
+if [ -z "$1" ]; then
+    echo -e "${YELLOW}Usage:${NC} ./setup-admin.sh <path-to-retro-portfolio-data>"
+    echo ""
+    echo "Example:"
+    echo "  ./setup-admin.sh ../retro-portfolio-data"
+    echo ""
+    exit 1
+fi
+
+DATA_REPO_PATH="$1"
+
+# Validate data repo exists
+if [ ! -d "$DATA_REPO_PATH" ]; then
+    echo -e "${YELLOW}⚠${NC} Data repository not found at: $DATA_REPO_PATH"
+    echo ""
+    echo "Please clone it first:"
+    echo "  git clone https://github.com/YOUR_USERNAME/retro-portfolio-data.git $DATA_REPO_PATH"
+    exit 1
+fi
+
+# Validate required directories exist
+for dir in "config" "data" "lang"; do
+    if [ ! -d "$DATA_REPO_PATH/$dir" ]; then
+        echo -e "${YELLOW}⚠${NC} Missing directory: $DATA_REPO_PATH/$dir"
+        exit 1
+    fi
+done
+
+echo -e "${GREEN}✓${NC} Data repository found at: $DATA_REPO_PATH"
+echo ""
+
+# Create admin-local directory
+ADMIN_DIR="admin-local"
+if [ -d "$ADMIN_DIR" ]; then
+    echo -e "${YELLOW}⚠${NC} $ADMIN_DIR already exists. Remove it first or use a different name."
+    exit 1
+fi
+
+mkdir -p "$ADMIN_DIR"
+echo -e "${GREEN}✓${NC} Created $ADMIN_DIR directory"
+
+# Create symbolic links to data repo directories
+ln -s "$(realpath $DATA_REPO_PATH)/config" "$ADMIN_DIR/config"
+ln -s "$(realpath $DATA_REPO_PATH)/data" "$ADMIN_DIR/data"
+ln -s "$(realpath $DATA_REPO_PATH)/lang" "$ADMIN_DIR/lang"
+
+echo -e "${GREEN}✓${NC} Linked config, data, and lang directories"
+
+# Create README
+cat > "$ADMIN_DIR/README.md" << 'EOF'
+# Admin Local
+
+This directory contains the admin interface for managing your portfolio data.
+
+## Usage
+
+1. Start the admin API:
+   ```bash
+   python3 admin_api.py
+   ```
+
+2. Open admin interface:
+   ```
+   http://localhost:5001/admin.html
+   ```
+
+3. After making changes, commit and push:
+   ```bash
+   cd ../retro-portfolio-data
+   git add data/ lang/
+   git commit -m "Update content via admin"
+   git push
+   ```
+
+The site will rebuild automatically on push.
+
+## Directory Structure
+
+- `admin.html` - Admin interface
+- `admin_api.py` - Backend API
+- `config/` → symlink to data repo
+- `data/` → symlink to data repo
+- `lang/` → symlink to data repo
+EOF
+
+echo -e "${GREEN}✓${NC} Created README"
+
+# Create instructions
+echo ""
+echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo -e "${GREEN}✓ Setup Complete!${NC}"
+echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo ""
+echo "Next steps:"
+echo ""
+echo "  1. Copy your existing admin files:"
+echo "     ${YELLOW}cp ../retro-portfolio/admin.html $ADMIN_DIR/${NC}"
+echo "     ${YELLOW}cp ../retro-portfolio/admin.css $ADMIN_DIR/${NC}"
+echo "     ${YELLOW}cp ../retro-portfolio/admin_api.py $ADMIN_DIR/${NC}"
+echo "     ${YELLOW}cp -r ../retro-portfolio/scripts $ADMIN_DIR/${NC}"
+echo "     ${YELLOW}cp ../retro-portfolio/.env $ADMIN_DIR/${NC}"
+echo ""
+echo "  2. Start the admin:"
+echo "     ${YELLOW}cd $ADMIN_DIR${NC}"
+echo "     ${YELLOW}python3 admin_api.py${NC}"
+echo ""
+echo "  3. Open in browser:"
+echo "     ${YELLOW}http://localhost:5001/admin.html${NC}"
+echo ""
+echo "  4. After changes, commit and push from data repo:"
+echo "     ${YELLOW}cd $DATA_REPO_PATH${NC}"
+echo "     ${YELLOW}git add . && git commit -m 'Update via admin' && git push${NC}"
+echo ""

package/sync-after-admin.sh

@@ -0,0 +1,58 @@
+#!/bin/bash
+
+##############################################################################
+# Quick Sync Script
+# Commits and pushes data changes after using admin
+##############################################################################
+
+set -e
+
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+NC='\033[0m'
+
+# Default data repo path (can be overridden)
+DATA_REPO="${DATA_REPO:-../retro-portfolio-data}"
+
+if [ ! -d "$DATA_REPO" ]; then
+    echo "❌ Data repository not found at: $DATA_REPO"
+    echo "Set DATA_REPO environment variable or pass path as argument"
+    exit 1
+fi
+
+cd "$DATA_REPO"
+
+echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo -e "${BLUE}  📤 Syncing Data Changes${NC}"
+echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo ""
+
+# Check if there are changes
+if git diff --quiet && git diff --cached --quiet; then
+    echo "✓ No changes to commit"
+    exit 0
+fi
+
+# Show what changed
+echo "Changes detected:"
+git status --short
+
+echo ""
+read -p "Commit message (or press Enter for default): " MESSAGE
+
+if [ -z "$MESSAGE" ]; then
+    MESSAGE="Update content via admin - $(date '+%Y-%m-%d %H:%M')"
+fi
+
+# Commit and push
+git add config/ data/ lang/
+git commit -m "$MESSAGE"
+git push
+
+echo ""
+echo -e "${GREEN}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo -e "${GREEN}✓ Changes pushed successfully!${NC}"
+echo -e "${GREEN}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo ""
+echo "Your site will rebuild automatically within a few moments."
+echo ""