@mtldev514/retro-portfolio-maker 1.0.10 → 1.0.12

package/engine/admin/admin_api.py

@@ -234,6 +234,135 @@ def save_config(config_name):
     except Exception as e:
         return jsonify({"error": str(e)}), 500
 
+@app.route('/api/content/delete', methods=['POST'])
+def delete_content():
+    """Delete content item from both cloud storage and JSON"""
+    try:
+        data = request.json
+        category = data.get('category')
+        item_id = data.get('id')
+
+        if not category or not item_id:
+            return jsonify({"error": "Category and ID are required"}), 400
+
+        # Use manager's delete function
+        result = manager.delete_item(category, item_id)
+        return jsonify(result)
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)}), 500
+
+@app.route('/api/content/update', methods=['POST'])
+def update_content():
+    """Update content item fields"""
+    try:
+        data = request.json
+        category = data.get('category')
+        item_id = data.get('id')
+        updates = data.get('updates', {})
+
+        if not category or not item_id:
+            return jsonify({"error": "Category and ID are required"}), 400
+
+        data_file = os.path.join(USER_DATA_DIR, f'{category}.json')
+        if not os.path.exists(data_file):
+            return jsonify({"error": f"Data file not found for category '{category}'"}), 404
+
+        # Load existing data
+        with open(data_file, 'r', encoding='utf-8') as f:
+            content = f.read().strip()
+            items = json.loads(content) if content else []
+
+        # Find and update the item
+        item_found = False
+        for item in items:
+            item_title = item.get("title")
+            if isinstance(item_title, dict):
+                item_title = item_title.get("en", "")
+
+            if item.get("id") == item_id or item_title == item_id:
+                # Update fields
+                for key, value in updates.items():
+                    item[key] = value
+                item_found = True
+                break
+
+        if not item_found:
+            return jsonify({"error": f"Item '{item_id}' not found"}), 404
+
+        # Save updated data
+        with open(data_file, 'w', encoding='utf-8') as f:
+            json.dump(items, f, indent=2, ensure_ascii=False)
+
+        return jsonify({"success": True})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/content/move-to-pile', methods=['POST'])
+def move_to_pile():
+    """Move an item's images into another item's gallery (pile feature)"""
+    try:
+        data = request.json
+        category = data.get('category')
+        source_id = data.get('sourceId')
+        target_id = data.get('targetId')
+
+        if not all([category, source_id, target_id]):
+            return jsonify({"error": "Category, sourceId, and targetId are required"}), 400
+
+        data_file = os.path.join(USER_DATA_DIR, f'{category}.json')
+        if not os.path.exists(data_file):
+            return jsonify({"error": f"Data file not found for category '{category}'"}), 404
+
+        # Load existing data
+        with open(data_file, 'r', encoding='utf-8') as f:
+            content = f.read().strip()
+            items = json.loads(content) if content else []
+
+        source_item = None
+        target_item = None
+        remaining_items = []
+
+        # Find source and target items
+        for item in items:
+            item_title = item.get("title")
+            if isinstance(item_title, dict):
+                item_title = item_title.get("en", "")
+
+            item_identifier = item.get("id") or item_title
+
+            if item_identifier == source_id:
+                source_item = item
+            elif item_identifier == target_id:
+                target_item = item
+                remaining_items.append(item)
+            else:
+                remaining_items.append(item)
+
+        if not source_item or not target_item:
+            return jsonify({"error": "Source or target item not found"}), 404
+
+        # Move images from source to target's gallery
+        if 'gallery' not in target_item:
+            target_item['gallery'] = []
+
+        # Add source's main URL
+        target_item['gallery'].append(source_item['url'])
+
+        # Add source's gallery images
+        if 'gallery' in source_item:
+            target_item['gallery'].extend(source_item['gallery'])
+
+        # Save updated data (without source item)
+        with open(data_file, 'w', encoding='utf-8') as f:
+            json.dump(remaining_items, f, indent=2, ensure_ascii=False)
+
+        return jsonify({
+            "success": True,
+            "targetGalleryCount": len(target_item['gallery'])
+        })
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
 if __name__ == '__main__':
     print(f"🔧 Admin API starting...")
     print(f"   Data dir: {os.path.abspath(USER_DATA_DIR)}")

package/engine/admin/scripts/manager.py

@@ -291,6 +291,183 @@ def save_from_url(url, title, category, medium=None, genre=None, description=Non
     update_site_timestamp()
     return new_entry
 
+
+def extract_cloudinary_public_id(url):
+    """Extract the public_id from a Cloudinary URL.
+    Example: https://res.cloudinary.com/demo/image/upload/v1234567890/portfolio/painting/sample.jpg
+    Returns: portfolio/painting/sample"""
+    if "cloudinary.com" not in url:
+        return None
+
+    # Split by /upload/ and take the part after it
+    parts = url.split("/upload/")
+    if len(parts) < 2:
+        return None
+
+    # Remove version (v1234567890) and file extension
+    path = parts[1]
+    path = re.sub(r'^v\d+/', '', path)  # Remove version prefix
+    path = re.sub(r'\.[^.]+$', '', path)  # Remove extension
+
+    return path
+
+
+def delete_from_cloudinary(url):
+    """Delete a media file from Cloudinary using its URL."""
+    public_id = extract_cloudinary_public_id(url)
+    if not public_id:
+        print(f"Skipping Cloudinary delete: URL is not a Cloudinary URL ({url})")
+        return False
+
+    try:
+        print(f"Deleting from Cloudinary: {public_id}")
+        result = cloudinary.uploader.destroy(public_id, resource_type="image")
+
+        # Also try as video if image deletion failed
+        if result.get("result") != "ok":
+            result = cloudinary.uploader.destroy(public_id, resource_type="video")
+
+        if result.get("result") == "ok":
+            print(f"Successfully deleted from Cloudinary: {public_id}")
+            return True
+        else:
+            print(f"Cloudinary deletion returned: {result.get('result')} for {public_id}")
+            return False
+    except Exception as e:
+        print(f"Error deleting from Cloudinary: {e}")
+        return False
+
+
+def delete_from_github_release(url):
+    """Delete a media file from GitHub Release using its URL."""
+    if "github.com" not in url and "githubusercontent.com" not in url:
+        return False
+
+    # Extract filename from URL
+    filename = url.split("/")[-1]
+
+    try:
+        release = get_or_create_release()
+        assets = release.get("assets", [])
+
+        # Find the asset with matching name
+        for asset in assets:
+            if asset["name"] == filename:
+                headers = {
+                    "Authorization": f"token {GITHUB_TOKEN}",
+                    "Accept": "application/vnd.github.v3+json",
+                }
+
+                print(f"Deleting from GitHub Release: {filename}")
+                r = requests.delete(
+                    f"https://api.github.com/repos/{GITHUB_REPO}/releases/assets/{asset['id']}",
+                    headers=headers
+                )
+
+                if r.status_code == 204:
+                    print(f"Successfully deleted from GitHub Release: {filename}")
+                    return True
+                else:
+                    print(f"GitHub deletion failed with status {r.status_code}")
+                    return False
+
+        print(f"Asset not found in GitHub Release: {filename}")
+        return False
+    except Exception as e:
+        print(f"Error deleting from GitHub Release: {e}")
+        return False
+
+
+def delete_item(category, item_id):
+    """Delete an item from both cloud storage and JSON database.
+
+    Args:
+        category: The category (painting, music, etc.)
+        item_id: The item ID or title to delete
+
+    Returns:
+        dict: Result with success status and message
+    """
+    print(f"--- Deleting: {item_id} from {category} ---")
+
+    json_path = JSON_MAP.get(category)
+    if not json_path:
+        return {"success": False, "error": f"Category '{category}' is invalid"}
+
+    if not os.path.exists(json_path):
+        return {"success": False, "error": f"Data file not found for category '{category}'"}
+
+    # Load existing data
+    try:
+        with open(json_path, "r", encoding="utf-8") as f:
+            content = f.read().strip()
+            data = json.loads(content) if content else []
+    except json.JSONDecodeError:
+        return {"success": False, "error": "Invalid JSON in data file"}
+
+    # Find the item to delete
+    item_to_delete = None
+    new_data = []
+
+    for item in data:
+        # Match by ID or by title (for backward compatibility)
+        item_title = item.get("title")
+        if isinstance(item_title, dict):
+            item_title = item_title.get("en", "")
+
+        if item.get("id") == item_id or item_title == item_id:
+            item_to_delete = item
+        else:
+            new_data.append(item)
+
+    if not item_to_delete:
+        return {"success": False, "error": f"Item '{item_id}' not found in {category}"}
+
+    # Delete from cloud storage
+    deleted_urls = []
+    failed_urls = []
+
+    # Delete main URL
+    main_url = item_to_delete.get("url")
+    if main_url:
+        if delete_from_cloudinary(main_url):
+            deleted_urls.append(main_url)
+        elif delete_from_github_release(main_url):
+            deleted_urls.append(main_url)
+        else:
+            failed_urls.append(main_url)
+
+    # Delete gallery images if present
+    gallery = item_to_delete.get("gallery", [])
+    for gallery_url in gallery:
+        if delete_from_cloudinary(gallery_url):
+            deleted_urls.append(gallery_url)
+        else:
+            failed_urls.append(gallery_url)
+
+    # Save updated data back to JSON
+    try:
+        with open(json_path, "w", encoding="utf-8") as f:
+            json.dump(new_data, f, indent=4, ensure_ascii=False)
+        print(f"Removed item from {json_path}")
+    except Exception as e:
+        return {"success": False, "error": f"Failed to update JSON: {str(e)}"}
+
+    # Update site timestamp
+    update_site_timestamp()
+
+    result = {
+        "success": True,
+        "message": f"Deleted '{item_id}' from {category}",
+        "deleted_urls": len(deleted_urls),
+        "failed_urls": len(failed_urls)
+    }
+
+    if failed_urls:
+        result["warning"] = f"Some cloud files could not be deleted: {failed_urls}"
+
+    return result
+
 if __name__ == "__main__":
     parser = argparse.ArgumentParser(description="Alex's Portfolio Content Manager")
     parser.add_argument("--file", required=True, help="Path to the media file or directory (with --pile)")

package/engine/admin.html

@@ -127,11 +127,11 @@
             <p style="font-size: 12px;">Need high-res uploads? Make sure your .env is active.</p>
 
             <div class="field-row" style="margin-top: 20px;">
-                <button onclick="const configTab = document.querySelectorAll('.tab')[4]; if(configTab) showTab('config', configTab);" style="width: 100%; height: 50px; font-weight: bold; cursor: pointer; background: linear-gradient(to bottom, #0080ff, #0060c0); color: white; border: 2px outset #fff;">
+                <button onclick="window.location.href='config-manager.html';" style="width: 100%; height: 50px; font-weight: bold; cursor: pointer; background: linear-gradient(to bottom, #0080ff, #0060c0); color: white; border: 2px outset #fff;">
                     ⚙️ CONFIGURATION MANAGER
                 </button>
                 <p class="admin-muted" style="margin-top: 5px;">
-                    * Manage site settings, media types, and content categories through the Configuration tab
+                    * Edit JSON configuration files (app, languages, categories, media-types)
                 </p>
             </div>
 

package/engine/config-manager.html

@@ -0,0 +1,703 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>CONFIG MANAGER - PORTFOLIO V2.0</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="admin.css">
+    <link rel="stylesheet" href="fonts.css">
+    <script src="js/config.js"></script>
+    <style>
+        .config-section {
+            background: var(--admin-win-bg);
+            border: 2px outset var(--admin-win-border-light);
+            padding: 15px;
+            margin-bottom: 20px;
+        }
+
+        .config-section-header {
+            font-weight: bold;
+            font-size: 13px;
+            margin-bottom: 10px;
+            padding-bottom: 5px;
+            border-bottom: 2px solid var(--admin-win-border-dark);
+        }
+
+        .config-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 15px;
+            margin-top: 15px;
+        }
+
+        .config-card {
+            background: white;
+            border: 2px inset var(--admin-win-border-dark);
+            padding: 12px;
+            position: relative;
+        }
+
+        .config-card-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 10px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid #ccc;
+        }
+
+        .config-card-icon {
+            font-size: 24px;
+        }
+
+        .config-card-title {
+            font-weight: bold;
+            font-size: 12px;
+            flex: 1;
+        }
+
+        .config-card-body {
+            font-size: 11px;
+        }
+
+        .config-field {
+            margin-bottom: 8px;
+            padding: 4px;
+            background: #f0f0f0;
+            border-radius: 2px;
+        }
+
+        .config-field-label {
+            font-weight: bold;
+            color: #000080;
+        }
+
+        .config-badge {
+            display: inline-block;
+            padding: 2px 6px;
+            background: #000080;
+            color: white;
+            border-radius: 2px;
+            font-size: 10px;
+            margin-right: 4px;
+        }
+
+        .config-actions {
+            margin-top: 10px;
+            display: flex;
+            gap: 5px;
+        }
+
+        .btn-small {
+            padding: 4px 10px;
+            font-size: 11px;
+        }
+
+        .add-new-section {
+            text-align: center;
+            padding: 30px;
+            background: #f0f0f0;
+            border: 2px dashed var(--admin-win-border-dark);
+        }
+
+        .add-new-section button {
+            font-size: 14px;
+            padding: 10px 20px;
+        }
+
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .modal.active {
+            display: flex;
+        }
+
+        .modal-content {
+            background: var(--admin-win-bg);
+            border: 3px outset var(--admin-win-border-light);
+            min-width: 500px;
+            max-width: 700px;
+            max-height: 80vh;
+            overflow-y: auto;
+        }
+
+        .modal-header {
+            background: var(--admin-win-title-bg);
+            color: white;
+            padding: 4px 8px;
+            font-weight: bold;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .modal-body {
+            padding: 20px;
+        }
+
+        .form-row {
+            margin-bottom: 15px;
+        }
+
+        .form-row label {
+            display: block;
+            font-weight: bold;
+            margin-bottom: 4px;
+            font-size: 11px;
+        }
+
+        .form-row input,
+        .form-row select,
+        .form-row textarea {
+            width: 100%;
+            padding: 4px;
+            font-family: 'MS Sans Serif', sans-serif;
+            font-size: 11px;
+            border: 2px inset var(--admin-win-border-dark);
+        }
+
+        .field-list {
+            border: 2px inset var(--admin-win-border-dark);
+            padding: 10px;
+            background: white;
+            max-height: 200px;
+            overflow-y: auto;
+        }
+
+        .field-item {
+            background: #f0f0f0;
+            padding: 8px;
+            margin-bottom: 5px;
+            border: 1px solid #ccc;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+    </style>
+</head>
+
+<body class="admin-page">
+    <div class="window">
+        <div class="title-bar">
+            <span>CONFIGURATION MANAGER V2.0</span>
+            <div class="title-bar-controls">
+                <button>_</button>
+                <button>[]</button>
+                <button onclick="window.location.href='admin.html'">X</button>
+            </div>
+        </div>
+
+        <div class="menu-bar">
+            <button onclick="location.href='admin.html'">« Back to Admin</button>
+            <button onclick="saveAllConfigurations()">💾 Save All</button>
+            <button onclick="reloadConfigurations()">🔄 Reload</button>
+            <button onclick="exportConfigurations()">📤 Export</button>
+        </div>
+
+        <div class="admin-body">
+            <!-- Media Types Section -->
+            <div class="config-section">
+                <div class="config-section-header">
+                    🎬 MEDIA TYPES (How content is displayed)
+                </div>
+                <p style="font-size: 11px; margin: 10px 0; color: #666;">
+                    Media types define how different kinds of content are rendered (image viewer, audio player, video player, etc.)
+                </p>
+                <div id="mediaTypesGrid" class="config-grid"></div>
+                <div class="add-new-section">
+                    <button onclick="openMediaTypeModal()">➕ Add New Media Type</button>
+                </div>
+            </div>
+
+            <!-- Content Types Section -->
+            <div class="config-section">
+                <div class="config-section-header">
+                    📂 CONTENT TYPES (What you create)
+                </div>
+                <p style="font-size: 11px; margin: 10px 0; color: #666;">
+                    Content types define categories of work (painting, photography, music, etc.) and their custom fields
+                </p>
+                <div id="contentTypesGrid" class="config-grid"></div>
+                <div class="add-new-section">
+                    <button onclick="openContentTypeModal()">➕ Add New Content Type</button>
+                </div>
+            </div>
+
+            <div class="status-bar">
+                <span id="statusText">Ready</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Media Type Modal -->
+    <div id="mediaTypeModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <span id="mediaTypeModalTitle">Add Media Type</span>
+                <button onclick="closeMediaTypeModal()">×</button>
+            </div>
+            <div class="modal-body">
+                <form id="mediaTypeForm">
+                    <div class="form-row">
+                        <label>ID (unique identifier):</label>
+                        <input type="text" id="mtId" required placeholder="e.g., image, audio, video">
+                    </div>
+                    <div class="form-row">
+                        <label>Name:</label>
+                        <input type="text" id="mtName" required placeholder="e.g., Image, Audio">
+                    </div>
+                    <div class="form-row">
+                        <label>Icon (emoji):</label>
+                        <input type="text" id="mtIcon" required placeholder="e.g., 🖼️, 🎵">
+                    </div>
+                    <div class="form-row">
+                        <label>Viewer Component:</label>
+                        <input type="text" id="mtViewer" required placeholder="e.g., ImageViewer, AudioPlayer">
+                    </div>
+                    <div class="form-row">
+                        <label>
+                            <input type="checkbox" id="mtSupportsGallery"> Supports Gallery
+                        </label>
+                    </div>
+                    <div class="form-row">
+                        <label>
+                            <input type="checkbox" id="mtSupportsMetadata"> Supports Per-Item Metadata
+                        </label>
+                    </div>
+                    <div class="form-row">
+                        <label>Accepted Formats (comma-separated):</label>
+                        <input type="text" id="mtFormats" placeholder="e.g., .jpg, .png, .webp">
+                    </div>
+                    <div class="form-row">
+                        <label>Upload Destination:</label>
+                        <select id="mtDestination">
+                            <option value="cloudinary">Cloudinary</option>
+                            <option value="github">GitHub Releases</option>
+                            <option value="none">None (URL only)</option>
+                        </select>
+                    </div>
+                    <div class="form-row">
+                        <label>Description:</label>
+                        <textarea id="mtDescription" rows="3"></textarea>
+                    </div>
+                    <div class="form-row" style="text-align: right;">
+                        <button type="button" onclick="closeMediaTypeModal()">Cancel</button>
+                        <button type="submit">Save Media Type</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- Content Type Modal -->
+    <div id="contentTypeModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <span id="contentTypeModalTitle">Add Content Type</span>
+                <button onclick="closeContentTypeModal()">×</button>
+            </div>
+            <div class="modal-body">
+                <form id="contentTypeForm">
+                    <div class="form-row">
+                        <label>ID (unique identifier):</label>
+                        <input type="text" id="ctId" required placeholder="e.g., painting, photography">
+                    </div>
+                    <div class="form-row">
+                        <label>Name:</label>
+                        <input type="text" id="ctName" required placeholder="e.g., Painting, Photography">
+                    </div>
+                    <div class="form-row">
+                        <label>Icon (emoji):</label>
+                        <input type="text" id="ctIcon" required placeholder="e.g., 🎨, 📷">
+                    </div>
+                    <div class="form-row">
+                        <label>Media Type:</label>
+                        <select id="ctMediaType" required></select>
+                    </div>
+                    <div class="form-row">
+                        <label>Data File Path:</label>
+                        <input type="text" id="ctDataFile" required placeholder="e.g., data/painting.json">
+                    </div>
+                    <div class="form-row">
+                        <label>Description:</label>
+                        <textarea id="ctDescription" rows="2"></textarea>
+                    </div>
+
+                    <div class="form-row">
+                        <label>Custom Fields:</label>
+                        <div id="fieldsList" class="field-list"></div>
+                        <button type="button" onclick="addField()" style="margin-top: 5px;">+ Add Field</button>
+                    </div>
+
+                    <div class="form-row" style="text-align: right;">
+                        <button type="button" onclick="closeContentTypeModal()">Cancel</button>
+                        <button type="submit">Save Content Type</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const API_URL = 'http://127.0.0.1:5001';
+        let currentMediaTypes = [];
+        let currentContentTypes = [];
+        let editingMediaTypeIndex = null;
+        let editingContentTypeIndex = null;
+        let currentFields = [];
+
+        // Load configuration on page load
+        async function init() {
+            await AppConfig.load();
+            await loadConfigurations();
+            renderMediaTypes();
+            renderContentTypes();
+            populateMediaTypeSelect();
+        }
+
+        async function loadConfigurations() {
+            try {
+                // Load media-types.json
+                const mediaTypesResponse = await fetch(`${API_URL}/api/config/media-types`);
+                const mediaTypesData = await mediaTypesResponse.json();
+                currentMediaTypes = mediaTypesData.mediaTypes || [];
+
+                // Load categories.json
+                const categoriesResponse = await fetch(`${API_URL}/api/config/categories`);
+                const categoriesData = await categoriesResponse.json();
+                currentContentTypes = categoriesData.contentTypes || categoriesData.categories || [];
+
+                document.getElementById('statusText').textContent = 'Configuration loaded';
+            } catch (error) {
+                console.error('Error loading config:', error);
+                document.getElementById('statusText').textContent = 'Error loading configuration';
+            }
+        }
+
+        function renderMediaTypes() {
+            const grid = document.getElementById('mediaTypesGrid');
+            grid.innerHTML = currentMediaTypes.map((mt, index) => `
+                <div class="config-card">
+                    <div class="config-card-header">
+                        <span class="config-card-icon">${mt.icon}</span>
+                        <span class="config-card-title">${mt.name}</span>
+                    </div>
+                    <div class="config-card-body">
+                        <div class="config-field">
+                            <span class="config-field-label">ID:</span> ${mt.id}
+                        </div>
+                        <div class="config-field">
+                            <span class="config-field-label">Viewer:</span> ${mt.viewer}
+                        </div>
+                        <div class="config-field">
+                            ${mt.supportsGallery ? '<span class="config-badge">Gallery</span>' : ''}
+                            ${mt.supportsMetadata ? '<span class="config-badge">Metadata</span>' : ''}
+                        </div>
+                        <div class="config-field">
+                            <span class="config-field-label">Formats:</span> ${mt.acceptedFormats.join(', ')}
+                        </div>
+                        <div class="config-actions">
+                            <button class="btn-small" onclick="editMediaType(${index})">Edit</button>
+                            <button class="btn-small" onclick="deleteMediaType(${index})">Delete</button>
+                        </div>
+                    </div>
+                </div>
+            `).join('');
+        }
+
+        function renderContentTypes() {
+            const grid = document.getElementById('contentTypesGrid');
+            grid.innerHTML = currentContentTypes.map((ct, index) => {
+                const mediaType = AppConfig.getMediaType(ct.mediaType);
+                const fieldCount = (ct.fields?.optional || []).length;
+
+                return `
+                    <div class="config-card">
+                        <div class="config-card-header">
+                            <span class="config-card-icon">${ct.icon}</span>
+                            <span class="config-card-title">${ct.name}</span>
+                        </div>
+                        <div class="config-card-body">
+                            <div class="config-field">
+                                <span class="config-field-label">ID:</span> ${ct.id}
+                            </div>
+                            <div class="config-field">
+                                <span class="config-field-label">Media Type:</span>
+                                ${mediaType?.icon || ''} ${ct.mediaType}
+                            </div>
+                            <div class="config-field">
+                                <span class="config-field-label">Data File:</span> ${ct.dataFile}
+                            </div>
+                            <div class="config-field">
+                                <span class="config-field-label">Custom Fields:</span> ${fieldCount} field(s)
+                            </div>
+                            <div class="config-actions">
+                                <button class="btn-small" onclick="editContentType(${index})">Edit</button>
+                                <button class="btn-small" onclick="deleteContentType(${index})">Delete</button>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            }).join('');
+        }
+
+        function populateMediaTypeSelect() {
+            const select = document.getElementById('ctMediaType');
+            select.innerHTML = currentMediaTypes.map(mt =>
+                `<option value="${mt.id}">${mt.icon} ${mt.name}</option>`
+            ).join('');
+        }
+
+        // Modal handlers
+        function openMediaTypeModal(index = null) {
+            editingMediaTypeIndex = index;
+            const modal = document.getElementById('mediaTypeModal');
+            const form = document.getElementById('mediaTypeForm');
+
+            if (index !== null) {
+                const mt = currentMediaTypes[index];
+                document.getElementById('mediaTypeModalTitle').textContent = 'Edit Media Type';
+                document.getElementById('mtId').value = mt.id;
+                document.getElementById('mtName').value = mt.name;
+                document.getElementById('mtIcon').value = mt.icon;
+                document.getElementById('mtViewer').value = mt.viewer;
+                document.getElementById('mtSupportsGallery').checked = mt.supportsGallery;
+                document.getElementById('mtSupportsMetadata').checked = mt.supportsMetadata;
+                document.getElementById('mtFormats').value = mt.acceptedFormats.join(', ');
+                document.getElementById('mtDestination').value = mt.uploadDestination;
+                document.getElementById('mtDescription').value = mt.description || '';
+                document.getElementById('mtId').disabled = true;
+            } else {
+                document.getElementById('mediaTypeModalTitle').textContent = 'Add Media Type';
+                form.reset();
+                document.getElementById('mtId').disabled = false;
+            }
+
+            modal.classList.add('active');
+        }
+
+        function closeMediaTypeModal() {
+            document.getElementById('mediaTypeModal').classList.remove('active');
+            editingMediaTypeIndex = null;
+        }
+
+        function openContentTypeModal(index = null) {
+            editingContentTypeIndex = index;
+            const modal = document.getElementById('contentTypeModal');
+            const form = document.getElementById('contentTypeForm');
+
+            if (index !== null) {
+                const ct = currentContentTypes[index];
+                document.getElementById('contentTypeModalTitle').textContent = 'Edit Content Type';
+                document.getElementById('ctId').value = ct.id;
+                document.getElementById('ctName').value = ct.name;
+                document.getElementById('ctIcon').value = ct.icon;
+                document.getElementById('ctMediaType').value = ct.mediaType;
+                document.getElementById('ctDataFile').value = ct.dataFile;
+                document.getElementById('ctDescription').value = ct.description || '';
+                currentFields = ct.fields?.optional || [];
+                document.getElementById('ctId').disabled = true;
+            } else {
+                document.getElementById('contentTypeModalTitle').textContent = 'Add Content Type';
+                form.reset();
+                currentFields = [];
+                document.getElementById('ctId').disabled = false;
+            }
+
+            renderFields();
+            modal.classList.add('active');
+        }
+
+        function closeContentTypeModal() {
+            document.getElementById('contentTypeModal').classList.remove('active');
+            editingContentTypeIndex = null;
+            currentFields = [];
+        }
+
+        // Field management
+        function addField() {
+            currentFields.push({
+                name: '',
+                type: 'text',
+                label: '',
+                placeholder: ''
+            });
+            renderFields();
+        }
+
+        function removeField(index) {
+            currentFields.splice(index, 1);
+            renderFields();
+        }
+
+        function renderFields() {
+            const list = document.getElementById('fieldsList');
+            list.innerHTML = currentFields.map((field, index) => `
+                <div class="field-item">
+                    <div>
+                        <input type="text" placeholder="Field Name (e.g., medium)"
+                               value="${field.name}"
+                               onchange="currentFields[${index}].name = this.value"
+                               style="width: 120px; margin-right: 5px;">
+                        <select onchange="currentFields[${index}].type = this.value"
+                                style="width: 100px; margin-right: 5px;">
+                            <option value="text" ${field.type === 'text' ? 'selected' : ''}>Text</option>
+                            <option value="textarea" ${field.type === 'textarea' ? 'selected' : ''}>Textarea</option>
+                        </select>
+                        <input type="text" placeholder="Label"
+                               value="${field.label}"
+                               onchange="currentFields[${index}].label = this.value"
+                               style="width: 120px;">
+                    </div>
+                    <button type="button" onclick="removeField(${index})">×</button>
+                </div>
+            `).join('');
+        }
+
+        // Form submissions
+        document.getElementById('mediaTypeForm').onsubmit = (e) => {
+            e.preventDefault();
+
+            const mediaType = {
+                id: document.getElementById('mtId').value,
+                name: document.getElementById('mtName').value,
+                icon: document.getElementById('mtIcon').value,
+                viewer: document.getElementById('mtViewer').value,
+                supportsGallery: document.getElementById('mtSupportsGallery').checked,
+                supportsMetadata: document.getElementById('mtSupportsMetadata').checked,
+                acceptedFormats: document.getElementById('mtFormats').value.split(',').map(f => f.trim()),
+                uploadDestination: document.getElementById('mtDestination').value,
+                description: document.getElementById('mtDescription').value
+            };
+
+            if (editingMediaTypeIndex !== null) {
+                currentMediaTypes[editingMediaTypeIndex] = mediaType;
+            } else {
+                currentMediaTypes.push(mediaType);
+            }
+
+            renderMediaTypes();
+            populateMediaTypeSelect();
+            closeMediaTypeModal();
+            document.getElementById('statusText').textContent = 'Media type saved (click Save All to persist)';
+        };
+
+        document.getElementById('contentTypeForm').onsubmit = (e) => {
+            e.preventDefault();
+
+            const contentType = {
+                id: document.getElementById('ctId').value,
+                name: document.getElementById('ctName').value,
+                icon: document.getElementById('ctIcon').value,
+                mediaType: document.getElementById('ctMediaType').value,
+                dataFile: document.getElementById('ctDataFile').value,
+                description: document.getElementById('ctDescription').value,
+                fields: {
+                    required: ['title', 'url'],
+                    optional: currentFields
+                }
+            };
+
+            if (editingContentTypeIndex !== null) {
+                currentContentTypes[editingContentTypeIndex] = contentType;
+            } else {
+                currentContentTypes.push(contentType);
+            }
+
+            renderContentTypes();
+            closeContentTypeModal();
+            document.getElementById('statusText').textContent = 'Content type saved (click Save All to persist)';
+        };
+
+        // CRUD operations
+        function editMediaType(index) {
+            openMediaTypeModal(index);
+        }
+
+        function deleteMediaType(index) {
+            if (confirm(`Delete media type "${currentMediaTypes[index].name}"?`)) {
+                currentMediaTypes.splice(index, 1);
+                renderMediaTypes();
+                document.getElementById('statusText').textContent = 'Media type deleted (click Save All to persist)';
+            }
+        }
+
+        function editContentType(index) {
+            openContentTypeModal(index);
+        }
+
+        function deleteContentType(index) {
+            if (confirm(`Delete content type "${currentContentTypes[index].name}"?`)) {
+                currentContentTypes.splice(index, 1);
+                renderContentTypes();
+                document.getElementById('statusText').textContent = 'Content type deleted (click Save All to persist)';
+            }
+        }
+
+        // Save/Export
+        async function saveAllConfigurations() {
+            if (!confirm('Save all configuration changes? This will update your config files.')) return;
+
+            try {
+                // Save media-types.json
+                const mtResponse = await fetch(`${API_URL}/api/config/media-types`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ mediaTypes: currentMediaTypes })
+                });
+
+                // Save categories.json
+                const ctResponse = await fetch(`${API_URL}/api/config/categories`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ contentTypes: currentContentTypes })
+                });
+
+                if (mtResponse.ok && ctResponse.ok) {
+                    document.getElementById('statusText').textContent = 'Configuration saved successfully!';
+                    alert('Configuration saved! Reload the page to see changes.');
+                } else {
+                    throw new Error('Failed to save configuration');
+                }
+            } catch (error) {
+                console.error('Save error:', error);
+                alert('Error saving configuration: ' + error.message);
+            }
+        }
+
+        function reloadConfigurations() {
+            if (confirm('Reload configurations from server? Unsaved changes will be lost.')) {
+                location.reload();
+            }
+        }
+
+        function exportConfigurations() {
+            const config = {
+                mediaTypes: { mediaTypes: currentMediaTypes },
+                contentTypes: { contentTypes: currentContentTypes }
+            };
+
+            const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `portfolio-config-${new Date().toISOString().split('T')[0]}.json`;
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+
+        // Initialize on page load
+        init();
+    </script>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mtldev514/retro-portfolio-maker",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Retro portfolio maker - Site-as-a-Package. Install the engine, provide your data, build your 90s-aesthetic portfolio.",
   "main": "index.js",
   "bin": {