@mtldev514/retro-portfolio-maker 1.0.14 → 1.0.15

package/README.md

@@ -3,8 +3,11 @@
 [![npm version](https://badge.fury.io/js/%40retro-portfolio%2Fengine.svg)](https://www.npmjs.com/package/@mtldev514/retro-portfolio-maker)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-Hello! 
-**Site-as-a-Package** 🎨 Un moteur de portfolio rétro que vous installez via NPM. Vous fournissez vos données, le package fournit tout le reste.
+This is what I always wanted. As someone with multiple interests, I always wanted to have a portfolio to display my many, many, many projects. I also have a very soft spot for the early 2000s.
+
+I hope this portfolio manager will help you have a personal presence that speaks to your soul. Fully customizable. You can easily support many languages, and play with the theme to make it your own.
+
+---
 
 ## 🎯 Concept
 

package/bin/cli.js

@@ -83,6 +83,39 @@ program
     }
   });
 
+// Validate command - Check configuration files
+program
+  .command('validate')
+  .description('Validate all configuration and data files')
+  .option('--path <dir>', 'Portfolio content directory', '.')
+  .action(async (options) => {
+    try {
+      const { spawn } = require('child_process');
+      const enginePath = path.join(__dirname, '..', 'engine', 'admin', 'scripts');
+      const validatorPath = path.join(enginePath, 'validate_config.py');
+
+      console.log(chalk.cyan('🔍 Running configuration validator...\n'));
+
+      const python = spawn('python3', [validatorPath, '--path', options.path], {
+        stdio: 'inherit',
+        env: { ...process.env, PORTFOLIO_CONTENT_ROOT: options.path }
+      });
+
+      python.on('close', (code) => {
+        process.exit(code);
+      });
+
+      python.on('error', (err) => {
+        console.error(chalk.red('Error running validator:'), err.message);
+        console.log(chalk.yellow('\nMake sure Python 3 is installed and in your PATH'));
+        process.exit(1);
+      });
+    } catch (error) {
+      console.error(chalk.red('Error:'), error.message);
+      process.exit(1);
+    }
+  });
+
 // Deploy command - Deploy to GitHub Pages
 program
   .command('deploy')

package/engine/admin/scripts/manager.py

@@ -11,7 +11,14 @@ from datetime import datetime
 import cloudinary
 import cloudinary.uploader
 import requests
+import sys
 from dotenv import load_dotenv
+
+# Ensure the current directory is in the path so we can import local modules
+current_dir = os.path.dirname(os.path.abspath(__file__))
+if current_dir not in sys.path:
+    sys.path.append(current_dir)
+
 from config_loader import config
 
 # Load environment variables

package/engine/admin/scripts/validate_config.py

@@ -0,0 +1,364 @@
+#!/usr/bin/env python3
+"""
+Portfolio Configuration Validator
+Validates all config files, data files, and translations for consistency and correctness.
+"""
+
+import sys
+import os
+import json
+from pathlib import Path
+from typing import Dict, List, Tuple, Any
+
+# Ensure the current directory is in the path so we can import local modules
+current_dir = os.path.dirname(os.path.abspath(__file__))
+if current_dir not in sys.path:
+    sys.path.append(current_dir)
+
+from config_loader import ConfigLoader
+
+# ANSI color codes for terminal output
+class Colors:
+    HEADER = '\033[95m'
+    OKBLUE = '\033[94m'
+    OKCYAN = '\033[96m'
+    OKGREEN = '\033[92m'
+    WARNING = '\033[93m'
+    FAIL = '\033[91m'
+    ENDC = '\033[0m'
+    BOLD = '\033[1m'
+    UNDERLINE = '\033[4m'
+
+
+class ConfigValidator:
+    def __init__(self, content_root=None):
+        self.content_root = Path(content_root) if content_root else Path('.')
+        self.config_dir = self.content_root / 'config'
+        self.data_dir = self.content_root / 'data'
+        self.lang_dir = self.content_root / 'lang'
+
+        self.errors = []
+        self.warnings = []
+        self.info = []
+
+        self.config_loader = ConfigLoader(content_root)
+
+    def add_error(self, message: str):
+        """Add an error message"""
+        self.errors.append(f"{Colors.FAIL}✗ ERROR:{Colors.ENDC} {message}")
+
+    def add_warning(self, message: str):
+        """Add a warning message"""
+        self.warnings.append(f"{Colors.WARNING}⚠ WARNING:{Colors.ENDC} {message}")
+
+    def add_info(self, message: str):
+        """Add an info message"""
+        self.info.append(f"{Colors.OKBLUE}ℹ INFO:{Colors.ENDC} {message}")
+
+    def validate_json_file(self, file_path: Path) -> Tuple[bool, Any]:
+        """Validate that a file contains valid JSON"""
+        if not file_path.exists():
+            self.add_error(f"File not found: {file_path}")
+            return False, None
+
+        try:
+            with open(file_path, 'r', encoding='utf-8') as f:
+                data = json.load(f)
+            return True, data
+        except json.JSONDecodeError as e:
+            self.add_error(f"Invalid JSON in {file_path.name}: {e}")
+            return False, None
+        except Exception as e:
+            self.add_error(f"Error reading {file_path.name}: {e}")
+            return False, None
+
+    def validate_media_types(self) -> bool:
+        """Validate media-types.json"""
+        print(f"\n{Colors.HEADER}📋 Validating Media Types...{Colors.ENDC}")
+
+        file_path = self.config_dir / 'media-types.json'
+        valid, data = self.validate_json_file(file_path)
+
+        if not valid:
+            return False
+
+        if 'mediaTypes' not in data:
+            self.add_error("media-types.json missing 'mediaTypes' array")
+            return False
+
+        media_types = data['mediaTypes']
+        required_fields = ['id', 'name', 'icon', 'viewer', 'acceptedFormats']
+
+        for i, mt in enumerate(media_types):
+            for field in required_fields:
+                if field not in mt:
+                    self.add_error(f"Media type #{i} missing required field: {field}")
+
+            # Validate acceptedFormats is an array
+            if 'acceptedFormats' in mt and not isinstance(mt['acceptedFormats'], list):
+                self.add_error(f"Media type '{mt.get('id', i)}': acceptedFormats must be an array")
+
+        print(f"{Colors.OKGREEN}✓ Found {len(media_types)} media types{Colors.ENDC}")
+        return True
+
+    def validate_categories(self) -> bool:
+        """Validate categories.json (content types)"""
+        print(f"\n{Colors.HEADER}📁 Validating Content Types...{Colors.ENDC}")
+
+        file_path = self.config_dir / 'categories.json'
+        valid, data = self.validate_json_file(file_path)
+
+        if not valid:
+            return False
+
+        # Support both 'contentTypes' and 'categories' keys
+        content_types = data.get('contentTypes', data.get('categories', []))
+
+        if not content_types:
+            self.add_error("categories.json missing content types array")
+            return False
+
+        required_fields = ['id', 'name', 'icon', 'mediaType', 'dataFile']
+
+        for i, ct in enumerate(content_types):
+            ct_id = ct.get('id', f'#{i}')
+
+            for field in required_fields:
+                if field not in ct:
+                    self.add_error(f"Content type '{ct_id}' missing required field: {field}")
+
+            # Validate fields structure
+            if 'fields' in ct:
+                if 'required' not in ct['fields']:
+                    self.add_warning(f"Content type '{ct_id}': missing 'fields.required' array")
+                if 'optional' not in ct['fields']:
+                    self.add_warning(f"Content type '{ct_id}': missing 'fields.optional' array")
+
+        print(f"{Colors.OKGREEN}✓ Found {len(content_types)} content types{Colors.ENDC}")
+        return True
+
+    def validate_languages(self) -> bool:
+        """Validate languages.json"""
+        print(f"\n{Colors.HEADER}🌐 Validating Languages...{Colors.ENDC}")
+
+        file_path = self.config_dir / 'languages.json'
+        valid, data = self.validate_json_file(file_path)
+
+        if not valid:
+            return False
+
+        if 'supportedLanguages' not in data:
+            self.add_error("languages.json missing 'supportedLanguages' array")
+            return False
+
+        if 'defaultLanguage' not in data:
+            self.add_error("languages.json missing 'defaultLanguage' field")
+            return False
+
+        languages = data['supportedLanguages']
+        required_fields = ['code', 'name']
+
+        for lang in languages:
+            for field in required_fields:
+                if field not in lang:
+                    self.add_error(f"Language entry missing required field: {field}")
+
+        print(f"{Colors.OKGREEN}✓ Found {len(languages)} supported languages{Colors.ENDC}")
+        return True
+
+    def validate_app_config(self) -> bool:
+        """Validate app.json"""
+        print(f"\n{Colors.HEADER}⚙️  Validating App Configuration...{Colors.ENDC}")
+
+        file_path = self.config_dir / 'app.json'
+        valid, data = self.validate_json_file(file_path)
+
+        if not valid:
+            return False
+
+        # Check recommended fields
+        recommended_fields = ['name', 'author', 'api', 'github']
+
+        for field in recommended_fields:
+            if field not in data:
+                self.add_warning(f"app.json missing recommended field: {field}")
+
+        print(f"{Colors.OKGREEN}✓ App configuration valid{Colors.ENDC}")
+        return True
+
+    def validate_data_files(self) -> bool:
+        """Validate all data files match category definitions"""
+        print(f"\n{Colors.HEADER}📊 Validating Data Files...{Colors.ENDC}")
+
+        # Load config first
+        if not self.config_loader.load_all():
+            self.add_error("Failed to load configuration")
+            return False
+
+        content_types = self.config_loader.get_content_types()
+
+        for ct in content_types:
+            ct_id = ct['id']
+            data_file = self.config_loader.get_category_data_file(ct_id)
+
+            # Check if data file exists
+            if not os.path.exists(data_file):
+                self.add_warning(f"Data file not found for '{ct_id}': {data_file}")
+                continue
+
+            # Validate JSON
+            valid, data = self.validate_json_file(Path(data_file))
+            if not valid:
+                continue
+
+            # Data can be array or object with 'items' key
+            if isinstance(data, dict) and 'items' in data:
+                items = data['items']
+            elif isinstance(data, list):
+                items = data
+            else:
+                self.add_error(f"Data file '{ct_id}' must be an array or object with 'items' key")
+                continue
+
+            # Validate required fields in each item
+            required_fields = ct.get('fields', {}).get('required', ['title', 'url'])
+
+            for i, item in enumerate(items):
+                for field in required_fields:
+                    if field not in item:
+                        self.add_warning(f"{ct_id}.json item #{i}: missing required field '{field}'")
+
+                # Check for ID field (recommended)
+                if 'id' not in item:
+                    self.add_info(f"{ct_id}.json item #{i}: missing 'id' field (recommended)")
+
+            print(f"{Colors.OKGREEN}✓ {ct['icon']} {ct['name']}: {len(items)} items{Colors.ENDC}")
+
+        return True
+
+    def validate_translations(self) -> bool:
+        """Validate translation files"""
+        print(f"\n{Colors.HEADER}🔤 Validating Translations...{Colors.ENDC}")
+
+        # Get language codes
+        lang_codes = self.config_loader.get_language_codes()
+
+        if not lang_codes:
+            self.add_error("No language codes found")
+            return False
+
+        # Load all translation files
+        translations = {}
+        for code in lang_codes:
+            lang_file = self.lang_dir / f'{code}.json'
+            valid, data = self.validate_json_file(lang_file)
+
+            if valid:
+                translations[code] = data
+                print(f"{Colors.OKGREEN}✓ {code}.json: {len(data)} keys{Colors.ENDC}")
+            else:
+                self.add_error(f"Failed to load translation file: {code}.json")
+
+        # Check for missing keys across languages
+        if len(translations) > 1:
+            all_keys = set()
+            for keys in translations.values():
+                all_keys.update(keys.keys())
+
+            for code, keys in translations.items():
+                missing = all_keys - set(keys.keys())
+                if missing:
+                    self.add_warning(f"Language '{code}' missing {len(missing)} translation keys")
+                    if len(missing) <= 5:
+                        for key in missing:
+                            self.add_info(f"  Missing in '{code}': {key}")
+
+        return True
+
+    def validate_cross_references(self) -> bool:
+        """Validate cross-references between configs"""
+        print(f"\n{Colors.HEADER}🔗 Validating Cross-References...{Colors.ENDC}")
+
+        content_types = self.config_loader.get_content_types()
+        media_types = self.config_loader.get_media_types()
+
+        media_type_ids = {mt['id'] for mt in media_types}
+
+        for ct in content_types:
+            # Check if mediaType exists
+            if ct.get('mediaType') not in media_type_ids:
+                self.add_error(f"Content type '{ct['id']}' references unknown media type: {ct.get('mediaType')}")
+
+        print(f"{Colors.OKGREEN}✓ Cross-references valid{Colors.ENDC}")
+        return True
+
+    def run_validation(self) -> bool:
+        """Run all validations"""
+        print(f"\n{Colors.BOLD}{Colors.HEADER}{'='*60}{Colors.ENDC}")
+        print(f"{Colors.BOLD}{Colors.HEADER}🔍 Portfolio Configuration Validator{Colors.ENDC}")
+        print(f"{Colors.BOLD}{Colors.HEADER}{'='*60}{Colors.ENDC}")
+        print(f"Content root: {self.content_root.absolute()}")
+
+        # Run all validations
+        validations = [
+            self.validate_media_types,
+            self.validate_categories,
+            self.validate_languages,
+            self.validate_app_config,
+            self.validate_data_files,
+            self.validate_translations,
+            self.validate_cross_references
+        ]
+
+        for validation in validations:
+            try:
+                validation()
+            except Exception as e:
+                self.add_error(f"Validation failed: {e}")
+
+        # Print summary
+        print(f"\n{Colors.BOLD}{Colors.HEADER}{'='*60}{Colors.ENDC}")
+        print(f"{Colors.BOLD}{Colors.HEADER}📝 Validation Summary{Colors.ENDC}")
+        print(f"{Colors.BOLD}{Colors.HEADER}{'='*60}{Colors.ENDC}\n")
+
+        # Print all messages
+        for msg in self.errors:
+            print(msg)
+        for msg in self.warnings:
+            print(msg)
+        for msg in self.info:
+            print(msg)
+
+        # Print totals
+        print(f"\n{Colors.BOLD}Results:{Colors.ENDC}")
+        print(f"{Colors.FAIL}  Errors:   {len(self.errors)}{Colors.ENDC}")
+        print(f"{Colors.WARNING}  Warnings: {len(self.warnings)}{Colors.ENDC}")
+        print(f"{Colors.OKBLUE}  Info:     {len(self.info)}{Colors.ENDC}")
+
+        if len(self.errors) == 0 and len(self.warnings) == 0:
+            print(f"\n{Colors.BOLD}{Colors.OKGREEN}✓ All validations passed! Your configuration is perfect! 🎉{Colors.ENDC}\n")
+            return True
+        elif len(self.errors) == 0:
+            print(f"\n{Colors.BOLD}{Colors.OKGREEN}✓ No critical errors found (warnings can be addressed later){Colors.ENDC}\n")
+            return True
+        else:
+            print(f"\n{Colors.BOLD}{Colors.FAIL}✗ Validation failed with {len(self.errors)} error(s){Colors.ENDC}\n")
+            return False
+
+
+def main():
+    import argparse
+
+    parser = argparse.ArgumentParser(description='Validate portfolio configuration files')
+    parser.add_argument('--path', help='Path to portfolio content directory', default='.')
+
+    args = parser.parse_args()
+
+    validator = ConfigValidator(args.path)
+    success = validator.run_validation()
+
+    sys.exit(0 if success else 1)
+
+
+if __name__ == '__main__':
+    main()

package/engine/admin.html

@@ -128,6 +128,17 @@
 
             <hr style="margin: 20px 0;">
 
+            <div class="field-row" style="margin-top: 20px;">
+                <button onclick="window.location.href='validator.html?auto=true';" style="width: 100%; height: 50px; font-weight: bold; cursor: pointer; background: linear-gradient(to bottom, #00aa00, #008800); color: white; border: 2px outset #fff;">
+                    🔍 VALIDATE CONFIGURATION
+                </button>
+                <p class="admin-muted" style="margin-top: 5px;">
+                    * Check all config files, data files, and translations for errors
+                </p>
+            </div>
+
+            <hr style="margin: 20px 0;">
+
             <div class="field-row" style="margin-top: 20px;">
                 <button onclick="syncGitHub()" style="width: 100%; height: 40px; font-weight: bold; cursor: pointer;">
                     <img src="https://github.githubassets.com/favicons/favicon.svg" width="16"

package/engine/validator.html

@@ -0,0 +1,438 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>CONFIG VALIDATOR - PORTFOLIO</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="admin.css">
+    <link rel="stylesheet" href="fonts.css">
+    <script src="js/config-loader.js"></script>
+    <style>
+        .validator-container {
+            padding: 20px;
+            max-height: calc(100vh - 200px);
+            overflow-y: auto;
+        }
+
+        .validation-section {
+            background: white;
+            border: 2px inset var(--admin-win-border-dark);
+            padding: 15px;
+            margin-bottom: 15px;
+        }
+
+        .validation-section h3 {
+            margin: 0 0 10px 0;
+            padding-bottom: 8px;
+            border-bottom: 2px solid var(--admin-win-border-dark);
+            font-size: 13px;
+        }
+
+        .validation-result {
+            margin: 8px 0;
+            padding: 8px;
+            font-size: 11px;
+            border-left: 4px solid #ccc;
+            background: #f9f9f9;
+        }
+
+        .validation-result.success {
+            border-left-color: #00aa00;
+            background: #f0fff0;
+        }
+
+        .validation-result.error {
+            border-left-color: #cc0000;
+            background: #fff0f0;
+        }
+
+        .validation-result.warning {
+            border-left-color: #ff8800;
+            background: #fffaf0;
+        }
+
+        .validation-result.info {
+            border-left-color: #0080ff;
+            background: #f0f8ff;
+        }
+
+        .icon {
+            display: inline-block;
+            width: 16px;
+            font-weight: bold;
+            margin-right: 5px;
+        }
+
+        .summary {
+            background: var(--admin-win-bg);
+            border: 2px outset var(--admin-win-border-light);
+            padding: 15px;
+            margin-bottom: 20px;
+            font-weight: bold;
+        }
+
+        .summary.all-good {
+            background: linear-gradient(to bottom, #90ff90, #60ff60);
+        }
+
+        .summary.has-errors {
+            background: linear-gradient(to bottom, #ff9090, #ff6060);
+        }
+
+        .summary.has-warnings {
+            background: linear-gradient(to bottom, #ffdd90, #ffcc60);
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 20px;
+            background: white;
+            border: 2px inset var(--admin-win-border-dark);
+            margin: 10px 0;
+        }
+
+        .progress-bar-fill {
+            height: 100%;
+            background: linear-gradient(to right, #0080ff, #00a0ff);
+            transition: width 0.3s;
+        }
+    </style>
+</head>
+
+<body class="admin-page">
+    <div class="window">
+        <div class="title-bar">
+            <span>CONFIGURATION VALIDATOR</span>
+            <div class="title-bar-controls">
+                <button>_</button>
+                <button>[]</button>
+                <button onclick="window.location.href='admin.html#config'">X</button>
+            </div>
+        </div>
+
+        <div class="menu-bar">
+            <button onclick="location.href='admin.html#config'">« Back to Admin</button>
+            <button onclick="runValidation()" id="validateBtn">🔍 Run Validation</button>
+            <button onclick="exportReport()">📄 Export Report</button>
+        </div>
+
+        <div id="summary" class="summary" style="display: none;"></div>
+
+        <div id="progress" style="display: none; padding: 0 20px;">
+            <div class="progress-bar">
+                <div class="progress-bar-fill" id="progressBar" style="width: 0%"></div>
+            </div>
+            <p id="progressText" style="text-align: center; font-size: 11px;"></p>
+        </div>
+
+        <div class="validator-container" id="results">
+            <p align="center" style="color: #666; font-size: 12px;">
+                Click "Run Validation" to check your configuration files
+            </p>
+        </div>
+
+        <div class="status-bar">
+            <span id="statusText">Ready</span>
+        </div>
+    </div>
+
+    <script>
+        const API_URL = 'http://127.0.0.1:5001';
+
+        let validationResults = {
+            errors: [],
+            warnings: [],
+            info: [],
+            success: []
+        };
+
+        async function runValidation() {
+            const btn = document.getElementById('validateBtn');
+            const results = document.getElementById('results');
+            const progress = document.getElementById('progress');
+            const progressBar = document.getElementById('progressBar');
+            const progressText = document.getElementById('progressText');
+            const summary = document.getElementById('summary');
+
+            // Reset
+            validationResults = { errors: [], warnings: [], info: [], success: [] };
+            results.innerHTML = '';
+            summary.style.display = 'none';
+            progress.style.display = 'block';
+            btn.disabled = true;
+
+            const validations = [
+                { name: 'Media Types', fn: validateMediaTypes },
+                { name: 'Content Types', fn: validateContentTypes },
+                { name: 'Languages', fn: validateLanguages },
+                { name: 'App Config', fn: validateAppConfig },
+                { name: 'Data Files', fn: validateDataFiles },
+                { name: 'Cross-References', fn: validateCrossReferences }
+            ];
+
+            for (let i = 0; i < validations.length; i++) {
+                const validation = validations[i];
+                progressText.textContent = `Validating ${validation.name}...`;
+                progressBar.style.width = `${((i + 1) / validations.length) * 100}%`;
+
+                await validation.fn();
+                await new Promise(resolve => setTimeout(resolve, 200)); // Brief pause for UX
+            }
+
+            progress.style.display = 'none';
+            btn.disabled = false;
+
+            displayResults();
+        }
+
+        async function validateMediaTypes() {
+            const section = createSection('🎬 Media Types');
+
+            try {
+                await AppConfig.load();
+                const mediaTypes = AppConfig.getAllMediaTypes();
+
+                if (!mediaTypes || mediaTypes.length === 0) {
+                    addError(section, 'No media types found');
+                    return;
+                }
+
+                const requiredFields = ['id', 'name', 'icon', 'viewer', 'acceptedFormats'];
+
+                mediaTypes.forEach((mt, i) => {
+                    requiredFields.forEach(field => {
+                        if (!mt[field]) {
+                            addError(section, `Media type #${i} missing required field: ${field}`);
+                        }
+                    });
+
+                    if (mt.acceptedFormats && !Array.isArray(mt.acceptedFormats)) {
+                        addError(section, `Media type '${mt.id}': acceptedFormats must be an array`);
+                    }
+                });
+
+                addSuccess(section, `Found ${mediaTypes.length} media types`);
+            } catch (err) {
+                addError(section, `Failed to validate media types: ${err.message}`);
+            }
+        }
+
+        async function validateContentTypes() {
+            const section = createSection('📁 Content Types');
+
+            try {
+                const contentTypes = AppConfig.getAllContentTypes();
+
+                if (!contentTypes || contentTypes.length === 0) {
+                    addError(section, 'No content types found');
+                    return;
+                }
+
+                const requiredFields = ['id', 'name', 'icon', 'mediaType', 'dataFile'];
+
+                contentTypes.forEach((ct, i) => {
+                    requiredFields.forEach(field => {
+                        if (!ct[field]) {
+                            addError(section, `Content type '${ct.id || `#${i}`}' missing required field: ${field}`);
+                        }
+                    });
+
+                    if (ct.fields) {
+                        if (!ct.fields.required) {
+                            addWarning(section, `Content type '${ct.id}': missing 'fields.required' array`);
+                        }
+                        if (!ct.fields.optional) {
+                            addWarning(section, `Content type '${ct.id}': missing 'fields.optional' array`);
+                        }
+                    }
+                });
+
+                addSuccess(section, `Found ${contentTypes.length} content types`);
+            } catch (err) {
+                addError(section, `Failed to validate content types: ${err.message}`);
+            }
+        }
+
+        async function validateLanguages() {
+            const section = createSection('🌐 Languages');
+
+            try {
+                const langCodes = AppConfig.getLanguageCodes();
+
+                if (!langCodes || langCodes.length === 0) {
+                    addError(section, 'No language codes found');
+                    return;
+                }
+
+                addSuccess(section, `Found ${langCodes.length} supported languages: ${langCodes.join(', ')}`);
+
+                const defaultLang = AppConfig.getDefaultLanguage();
+                if (!defaultLang) {
+                    addError(section, 'No default language specified');
+                } else {
+                    addInfo(section, `Default language: ${defaultLang}`);
+                }
+            } catch (err) {
+                addError(section, `Failed to validate languages: ${err.message}`);
+            }
+        }
+
+        async function validateAppConfig() {
+            const section = createSection('⚙️ App Configuration');
+
+            try {
+                const appName = AppConfig.getSetting('name');
+                const author = AppConfig.getSetting('author');
+
+                if (!appName) addWarning(section, 'App name not set in app.json');
+                if (!author) addWarning(section, 'Author not set in app.json');
+
+                addSuccess(section, 'App configuration loaded');
+            } catch (err) {
+                addError(section, `Failed to validate app config: ${err.message}`);
+            }
+        }
+
+        async function validateDataFiles() {
+            const section = createSection('📊 Data Files');
+
+            try {
+                const res = await fetch(`${API_URL}/api/content`);
+                const allContent = await res.json();
+
+                const contentTypes = AppConfig.getAllContentTypes();
+
+                for (const ct of contentTypes) {
+                    const items = allContent[ct.id] || [];
+                    const requiredFields = ct.fields?.required || ['title', 'url'];
+
+                    if (items.length === 0) {
+                        addInfo(section, `${ct.icon} ${ct.name}: No items yet`);
+                        continue;
+                    }
+
+                    // Validate items
+                    items.forEach((item, i) => {
+                        requiredFields.forEach(field => {
+                            if (!item[field]) {
+                                addWarning(section, `${ct.id}.json item #${i}: missing required field '${field}'`);
+                            }
+                        });
+
+                        if (!item.id) {
+                            addInfo(section, `${ct.id}.json item #${i}: missing 'id' field (recommended)`);
+                        }
+                    });
+
+                    addSuccess(section, `${ct.icon} ${ct.name}: ${items.length} items`);
+                }
+            } catch (err) {
+                addError(section, `Failed to validate data files: ${err.message}`);
+            }
+        }
+
+        async function validateCrossReferences() {
+            const section = createSection('🔗 Cross-References');
+
+            try {
+                const contentTypes = AppConfig.getAllContentTypes();
+                const mediaTypes = AppConfig.getAllMediaTypes();
+
+                const mediaTypeIds = new Set(mediaTypes.map(mt => mt.id));
+
+                contentTypes.forEach(ct => {
+                    if (!mediaTypeIds.has(ct.mediaType)) {
+                        addError(section, `Content type '${ct.id}' references unknown media type: ${ct.mediaType}`);
+                    }
+                });
+
+                addSuccess(section, 'All cross-references valid');
+            } catch (err) {
+                addError(section, `Failed to validate cross-references: ${err.message}`);
+            }
+        }
+
+        function createSection(title) {
+            const section = document.createElement('div');
+            section.className = 'validation-section';
+            section.innerHTML = `<h3>${title}</h3>`;
+            document.getElementById('results').appendChild(section);
+            return section;
+        }
+
+        function addResult(section, type, message) {
+            const result = document.createElement('div');
+            result.className = `validation-result ${type}`;
+
+            const icons = {
+                success: '✓',
+                error: '✗',
+                warning: '⚠',
+                info: 'ℹ'
+            };
+
+            result.innerHTML = `<span class="icon">${icons[type]}</span>${message}`;
+            section.appendChild(result);
+
+            validationResults[type === 'success' ? 'success' : type + 's'].push(message);
+        }
+
+        function addSuccess(section, message) { addResult(section, 'success', message); }
+        function addError(section, message) { addResult(section, 'error', message); }
+        function addWarning(section, message) { addResult(section, 'warning', message); }
+        function addInfo(section, message) { addResult(section, 'info', message); }
+
+        function displayResults() {
+            const summary = document.getElementById('summary');
+            const errorCount = validationResults.errors.length;
+            const warningCount = validationResults.warnings.length;
+
+            summary.style.display = 'block';
+
+            if (errorCount === 0 && warningCount === 0) {
+                summary.className = 'summary all-good';
+                summary.innerHTML = '✓ ALL VALIDATIONS PASSED! Your configuration is perfect! 🎉';
+            } else if (errorCount > 0) {
+                summary.className = 'summary has-errors';
+                summary.innerHTML = `✗ ${errorCount} ERROR${errorCount > 1 ? 'S' : ''} FOUND${warningCount > 0 ? ` (${warningCount} warning${warningCount > 1 ? 's' : ''})` : ''}`;
+            } else {
+                summary.className = 'summary has-warnings';
+                summary.innerHTML = `⚠ ${warningCount} WARNING${warningCount > 1 ? 'S' : ''} (no critical errors)`;
+            }
+
+            document.getElementById('statusText').textContent = `Validation complete: ${errorCount} errors, ${warningCount} warnings`;
+        }
+
+        function exportReport() {
+            const report = {
+                timestamp: new Date().toISOString(),
+                summary: {
+                    errors: validationResults.errors.length,
+                    warnings: validationResults.warnings.length,
+                    info: validationResults.info.length,
+                    success: validationResults.success.length
+                },
+                results: validationResults
+            };
+
+            const blob = new Blob([JSON.stringify(report, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `validation-report-${new Date().toISOString().split('T')[0]}.json`;
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+
+        // Auto-run on load if ?auto=true
+        window.addEventListener('DOMContentLoaded', async () => {
+            await AppConfig.load();
+
+            const urlParams = new URLSearchParams(window.location.search);
+            if (urlParams.get('auto') === 'true') {
+                runValidation();
+            }
+        });
+    </script>
+</body>
+</html>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mtldev514/retro-portfolio-maker",
-  "version": "1.0.14",
-  "description": "Retro portfolio maker - Site-as-a-Package. Install the engine, provide your data, build your 90s-aesthetic portfolio.",
+  "version": "1.0.15",
+  "description": "A portfolio manager for multi-passionate creators with a soft spot for early 2000s aesthetics. Display your many projects with soul.",
   "main": "index.js",
   "bin": {
     "retro-portfolio": "./bin/cli.js"