Upload 3 files

js/cards/ArtifactSummaryCard.js

@@ -0,0 +1,225 @@
+// ArtifactSummaryCard.js - Summary card component for artifacts
+import { areasData } from '../data/areas.js';
+import { featuredArtifacts } from '../data/artifacts.js';
+
+export function createArtifactSummaryCard(artifact, index) {
+    const { title, date, type, description, areaTags, subAreaTags, sourceUrl } = artifact;
+    
+    // Type-based styling (simplified - just icon and text color)
+    const typeStyles = {
+        'blog': { 
+            icon: '📝',
+            textColor: 'text-blue-700'
+        },
+        'paper': { 
+            icon: '📄',
+            textColor: 'text-green-700'
+        },
+        'dataset': { 
+            icon: '📊',
+            textColor: 'text-purple-700'
+        },
+        'space': { 
+            icon: '🚀',
+            textColor: 'text-orange-700'
+        },
+        'external': { 
+            icon: '🔗',
+            textColor: 'text-gray-700'
+        }
+    };
+    
+    const style = typeStyles[type] || typeStyles['external'];
+    
+    // Use imported areas data
+    const areaData = areasData;
+    
+    const primaryArea = areaTags[0];
+    const primaryAreaData = areaData[primaryArea];
+    const backgroundImage = primaryAreaData?.image || '';
+    const imageCredit = primaryAreaData?.imageAttribution || '';
+    
+    const areaTagsHtml = areaTags.map(tag => {
+        const area = areaData[tag];
+        return area ? `<span class="inline-block px-2 py-1 text-xs rounded-full ${area.color}">${area.name}</span>` : '';
+    }).join('');
+    
+    const subAreaTagsHtml = subAreaTags.map(subAreaKey => {
+        // Find the sub-area name and color by looking through all areas
+        let subAreaName = subAreaKey; // fallback to key if not found
+        let textColor = 'text-gray-700'; // fallback color
+        
+        for (const areaKey in areaData) {
+            const area = areaData[areaKey];
+            if (area.subAreas && area.subAreas[subAreaKey]) {
+                const subArea = area.subAreas[subAreaKey];
+                subAreaName = typeof subArea === 'string' ? subArea : subArea.name;
+                // Extract just the text color from the sub-area color
+                if (typeof subArea === 'object' && subArea.color) {
+                    const colorMatch = subArea.color.match(/text-(\w+)-(\d+)/);
+                    if (colorMatch) {
+                        textColor = `text-${colorMatch[1]}-700`; // Use consistent 700 shade
+                    }
+                }
+                break;
+            }
+        }
+        return `<span class="inline-block px-2 py-0.5 text-xs bg-gray-200 ${textColor} rounded">${subAreaName}</span>`;
+    }).join('');
+    
+    const cardId = `artifact-card-${index}`;
+    
+    return `
+        <div class="flex-none w-80 h-60 border border-gray-200 rounded-lg overflow-hidden bg-white relative group hover:shadow-lg transition-shadow duration-200">
+            <!-- Background image -->
+            ${backgroundImage ? `
+            <div class="absolute inset-0 opacity-10">
+                <img src="images/${backgroundImage}" alt="" class="w-full h-full object-cover">
+            </div>
+            ` : ''}
+            
+            <!-- Toggle indicator -->
+            <div class="absolute top-2 right-2 z-10">
+                <button class="toggle-btn w-6 h-6 bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full flex items-center justify-center text-gray-600 hover:text-gray-800 transition-all shadow-sm" onclick="toggleCardView('${cardId}')">
+                    <svg class="w-3 h-3 expand-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                    </svg>
+                    <svg class="w-3 h-3 collapse-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
+                    </svg>
+                </button>
+            </div>
+            
+            <!-- Content -->
+            <div class="relative p-4 h-full flex flex-col overflow-hidden" id="${cardId}">
+                <!-- Default view -->
+                <div class="default-view">
+                    <!-- Header: Type and Date -->
+                    <div class="flex justify-between items-start mb-3 pr-8">
+                        <div class="flex items-center space-x-2">
+                            <span class="text-lg">${style.icon}</span>
+                            <span class="text-xs font-medium font-bold uppercase tracking-wide">${type}</span>
+                        </div>
+                        <span class="text-xs text-gray-600">${date}</span>
+                    </div>
+                    
+                    <!-- Title -->
+                    <div class="mb-4 flex-grow min-h-0">
+                        <h3 class="font-semibold text-gray-900 text-sm leading-tight line-clamp-3">${title}</h3>
+                    </div>
+                    
+                    <!-- Bottom section with tags and image -->
+                    <div class="flex justify-between items-end">
+                        <!-- Left: Tags -->
+                        <div class="flex-1 mr-4">
+                            <!-- Area Tags -->
+                            <div class="flex flex-wrap gap-1 mb-2">
+                                ${areaTagsHtml}
+                            </div>
+                            
+                            <!-- Sub-area Tags -->
+                            ${subAreaTags.length > 0 ? `
+                            <div class="flex flex-wrap gap-1">
+                                ${subAreaTagsHtml}
+                            </div>
+                            ` : ''}
+                        </div>
+                        
+                        <!-- Right: Area image with credit on hover -->
+                        ${backgroundImage ? `
+                        <div class="relative group/image">
+                            <div class="w-12 h-12 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center cursor-help" title="${imageCredit}">
+                                <img src="images/${backgroundImage}" alt="${primaryAreaData.name}" class="w-full h-full object-cover opacity-80">
+                            </div>
+                        </div>
+                        ` : ''}
+                    </div>
+                </div>
+                
+                <!-- Description view (hidden by default) -->
+                <div class="description-view hidden h-full flex flex-col min-h-0">
+                    <!-- Title (single line with overflow) -->
+                    <div class="mb-3 flex-shrink-0">
+                        <h3 class="font-semibold text-gray-900 text-sm leading-tight truncate" title="${title}">${title}</h3>
+                    </div>
+                    
+                    <!-- Description (scrollable, takes remaining space) -->
+                    <div class="flex-grow overflow-y-auto min-h-0">
+                        <p class="text-xs text-gray-700 leading-relaxed">${description}</p>
+                    </div>
+                </div>
+                
+                <!-- URL link (always visible) -->
+                ${sourceUrl ? `
+                <div class="absolute bottom-2 right-2">
+                    <a href="${sourceUrl}" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-blue-600 transition-colors">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                        </svg>
+                    </a>
+                </div>
+                ` : ''}
+            </div>
+        </div>
+    `;
+}
+
+export function createArtifactCarousel(artifacts, containerId) {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+    
+    const cardsHtml = artifacts.map((artifact, index) => createArtifactSummaryCard(artifact, index)).join('');
+    
+    container.innerHTML = `
+        <div class="relative">
+            <!-- Carousel container -->
+            <div class="flex overflow-x-auto scrollbar-hide space-x-4 pb-4" id="${containerId}-scroll">
+                ${cardsHtml}
+            </div>
+            
+            <!-- Navigation arrows -->
+            <button class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-white shadow-lg rounded-full p-2 hover:bg-gray-50 transition-colors z-10" onclick="scrollCarousel('${containerId}-scroll', -320)">
+                <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+                </svg>
+            </button>
+            <button class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-white shadow-lg rounded-full p-2 hover:bg-gray-50 transition-colors z-10" onclick="scrollCarousel('${containerId}-scroll', 320)">
+                <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                </svg>
+            </button>
+        </div>
+    `;
+}
+
+
+// Utility function for carousel navigation
+window.scrollCarousel = function(containerId, scrollAmount) {
+    const container = document.getElementById(containerId);
+    if (container) {
+        container.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+    }
+};
+
+// Add toggle function
+window.toggleCardView = function(cardId) {
+    const card = document.getElementById(cardId);
+    const defaultView = card.querySelector('.default-view');
+    const descriptionView = card.querySelector('.description-view');
+    const expandIcon = card.parentElement.querySelector('.expand-icon');
+    const collapseIcon = card.parentElement.querySelector('.collapse-icon');
+    
+    if (defaultView.classList.contains('hidden')) {
+        // Show default view
+        defaultView.classList.remove('hidden');
+        descriptionView.classList.add('hidden');
+        expandIcon.classList.remove('hidden');
+        collapseIcon.classList.add('hidden');
+    } else {
+        // Show description view
+        defaultView.classList.add('hidden');
+        descriptionView.classList.remove('hidden');
+        expandIcon.classList.add('hidden');
+        collapseIcon.classList.remove('hidden');
+    }
+};

js/cards/HomeAreaCard.js

@@ -0,0 +1,46 @@
+// HomeAreaCard.js - Area card component for homepage
+import { areasData } from '../data/areas.js';
+
+export function createHomeAreaCard(id, title, description, openness, subAreas, imagePosition = 'left', imageAttribution = null, altText = null) {
+    const flexDirection = imagePosition === 'left' ? 'lg:flex-row' : 'lg:flex-row-reverse';
+    
+    const subAreasList = subAreas.map(area => `<li>${area}</li>`).join('');
+    
+    // Use provided alt text or fallback to title
+    const imgAlt = altText || title;
+    
+    // Create attribution text if provided
+    const attribution = imageAttribution ? 
+        `<p class="text-xs text-gray-500 mt-2 text-center">${imageAttribution}</p>` : '';
+    
+    return `
+        <div id="${id}" class="bg-white rounded-lg shadow-sm overflow-hidden" style="min-height: 300px;">
+            <div class="flex flex-col ${flexDirection}">
+                <div class="lg:w-2/3 p-8">
+                    <h2 class="text-2xl font-bold text-gray-900 mb-4">${title}</h2>
+                    <p class="text-gray-700 mb-6">${description}</p>
+                    
+                    ${openness ? `
+                    <div class="mb-6 px-6 pt-4 pb-6 bg-gradient-to-r from-orange-50 to-yellow-50 border-l-4 border-orange-300 rounded-r-lg">
+                        <p class="font-bold text-orange-900 mb-3">The Role of Openness</p>
+                        <p class="text-orange-800 italic leading-relaxed">${openness}</p>
+                    </div>
+                    ` : ''}
+
+                    <div class="mb-6">
+                        <h3 class="text-lg font-semibold text-gray-900 mb-3">Sub-areas</h3>
+                        <ul class="list-disc list-inside text-gray-700 space-y-1">
+                            ${subAreasList}
+                        </ul>
+                    </div>
+                </div>
+                <div class="lg:w-1/3 bg-gray-100">
+                    <div class="h-full flex flex-col items-center justify-center p-8">
+                        <img src="images/${id}.png" alt="${imgAlt}" class="max-w-full max-h-full object-contain">
+                        ${attribution}
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+}

js/cards/ResourceCard.js

@@ -0,0 +1,130 @@
+// cards/ResourceCard.js - Resource card component for SPA
+import { areasData } from '../data/areas.js';
+
+export function createResourceCard(resource) {
+    // Get the primary area for this resource
+    const primaryArea = areasData[resource.areaTags[0]];
+    const primaryColor = primaryArea?.primaryColor || 'gray';
+    
+    // Format date
+    const formattedDate = new Date(resource.date).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+    });
+    
+    // Generate area tags
+    const areaTagsHtml = resource.areaTags.map(areaId => {
+        const area = areasData[areaId];
+        if (!area) return '';
+        return `<span class="px-2 py-1 rounded-full text-xs font-medium ${area.colors.medium}">${area.name}</span>`;
+    }).join('');
+    
+    // Generate sub-area tags
+    const subAreaTagsHtml = resource.subAreaTags.map(subAreaKey => {
+        // Find the sub-area name and color by looking through all areas
+        let subAreaName = subAreaKey; // fallback to key if not found
+        let textColor = 'text-gray-700'; // fallback color
+        
+        for (const areaKey in areasData) {
+            const area = areasData[areaKey];
+            if (area.subAreas && area.subAreas[subAreaKey]) {
+                const subArea = area.subAreas[subAreaKey];
+                subAreaName = typeof subArea === 'string' ? subArea : subArea.name;
+                // Extract just the text color from the sub-area color
+                if (typeof subArea === 'object' && subArea.color) {
+                    const colorMatch = subArea.color.match(/text-(\w+)-(\d+)/);
+                    if (colorMatch) {
+                        textColor = `text-${colorMatch[1]}-700`; // Use consistent 700 shade
+                    }
+                }
+                break;
+            }
+        }
+        return `<span class="inline-block px-2 py-0.5 text-xs bg-gray-200 ${textColor} rounded">${subAreaName}</span>`;
+    }).join('');
+    
+    // Type badge
+    const typeBadge = resource.type === 'dataset' ? 'Dataset' : 'Tool';
+    const typeColor = resource.type === 'dataset' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800';
+    
+    return `
+        <div class="resource-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden flex-shrink-0 relative" style="height: 600px; width: 600px;">
+            <!-- Top Section - Single view with all information -->
+            <div class="resource-card-top h-48 bg-gradient-to-br from-${primaryColor}-50 to-${primaryColor}-100 relative overflow-hidden">
+                <!-- Background image for top section -->
+                <div class="absolute inset-0 opacity-10">
+                    <img src="images/${primaryArea?.image || 'ai.png'}" alt="" class="w-full h-full object-cover">
+                </div>
+                
+                <div class="relative z-10 p-4 h-full flex flex-col">
+                    <!-- Header with type, link, and date -->
+                    <div class="flex items-center justify-between mb-3">
+                        <div class="flex items-center gap-2">
+                            <span class="px-2 py-1 rounded-full text-xs font-medium ${typeColor}">${typeBadge}</span>
+                            <a href="${resource.url}" target="_blank" class="text-xs text-blue-600 hover:text-blue-800 flex items-center">
+                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                                </svg>
+                                View Resource
+                            </a>
+                        </div>
+                        <span class="text-xs text-gray-600">${formattedDate}</span>
+                    </div>
+                    
+                    <!-- Title -->
+                    <h3 class="text-lg font-semibold text-gray-900 mb-3 leading-tight">${resource.title}</h3>
+                    
+                    <!-- Description -->
+                    <p class="text-sm text-gray-700 mb-3 flex-1 overflow-hidden" style="display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;">
+                        ${resource.description}
+                    </p>
+                    
+                    <!-- Footer with tags and area image -->
+                    <div class="flex items-center justify-between">
+                        <div class="flex flex-wrap gap-1 flex-1">
+                            ${areaTagsHtml}
+                            ${subAreaTagsHtml}
+                        </div>
+                        <div class="w-8 h-8 rounded-full bg-white bg-opacity-50 flex items-center justify-center ml-3 flex-shrink-0">
+                            <img src="images/${primaryArea?.image || 'ai.png'}" alt="" class="w-6 h-6 rounded-full object-cover">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Bottom Section - 70% of height -->
+            <div class="resource-card-bottom relative" style="height: 420px;">
+                ${resource.embedUrl ? `
+                    <!-- Iframe embed -->
+                    <iframe 
+                        src="${resource.embedUrl}" 
+                        class="w-full h-full border-0"
+                        loading="lazy"
+                        title="${resource.title}"
+                    ></iframe>
+                ` : `
+                    <!-- Fallback with background image and text -->
+                    <div class="w-full h-full relative overflow-hidden">
+                        <div class="absolute inset-0 opacity-50">
+                            <img src="images/${primaryArea?.image || 'ai.png'}" alt="" class="w-full h-full object-cover">
+                        </div>
+                        <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center">
+                            <div class="text-center text-white">
+                                <div class="text-lg font-semibold mb-2">Iframe not available</div>
+                                <a href="${resource.url}" target="_blank" class="text-sm text-blue-200 hover:text-blue-100 underline">
+                                    View on external site
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                `}
+            </div>
+        </div>
+    `;
+}
+
+export function initializeResourceCards() {
+    // Resource cards now have a single view, no toggle functionality needed
+    // This function is kept for consistency with the calling code
+}