Spaces:

hfmlsoc
/

overview

Running

App Files Files Community

Yacine Jernite commited on Oct 10

Commit

803ec5a

1 Parent(s): 8ed13f7

components

Browse files

Files changed (3) hide show

js/components/Card.js +246 -0
js/components/ContentSection.js +43 -0
js/components/PageNavigation.js +71 -0

js/components/Card.js ADDED Viewed

	@@ -0,0 +1,246 @@

+// Card.js - Unified card component
+// Uses template strings for HTML generation (simple, clear, and efficient for our use case)
+// All card types are defined here for consistency and maintainability
+import { renderTagSet } from '../utils/tags.js';
+// Use global areasData (loaded in index.html <head>)
+const areasData = window.areasData;
+/**
+ * Main card creation function
+ * @param {string} type - Card type: 'artifact', 'area'
+ * @param {object} data - Card data
+ * @param {object} options - Additional options
+ * @returns {string} HTML string for the card
+ */
+export function createCard(type, data, options = {}) {
+    const renderers = {
+        artifact: renderArtifactCard,
+        area: renderAreaCard
+    };
+    const renderer = renderers[type];
+    if (!renderer) {
+        console.warn(`Unknown card type: ${type}`);
+        return '';
+    }
+    return renderer(data, options);
+}
+/**
+ * Renders an artifact card (for carousels)
+ */
+function renderArtifactCard(artifact, options = {}) {
+    const { index = 0 } = options;
+    // Handle both old and new field names
+    const title = artifact.title;
+    const date = artifact.date;
+    const type = artifact.type;
+    const description = artifact.description;
+    const areaTags = artifact.areas || artifact.areaTags || [];
+    const subAreaTags = artifact.topics || artifact.subAreaTags || [];
+    const sourceUrl = artifact.url || artifact.sourceUrl || '';
+    // Type-based styling
+    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'];
+    // Get area data for background
+    const primaryArea = areaTags[0];
+    const primaryAreaData = areasData[primaryArea];
+    const backgroundImage = primaryAreaData?.image || '';
+    const imageCredit = primaryAreaData?.imageAttribution || '';
+    // Render tags
+    const { areaTagsHtml, topicTagsHtml } = renderTagSet(areaTags, subAreaTags);
+    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">
+                                ${topicTagsHtml}
+                            </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>
+    `;
+}
+/**
+ * Renders an area card (for homepage)
+ */
+function renderAreaCard(area, options = {}) {
+    // Get short description
+    const shortDesc = area.description?.short || area.description.split('.')[0] + '.';
+    // Get topic names and colors from the topics
+    const topics = Object.values(area.topics).map(topic => {
+        const topicName = topic.navName || topic.name;
+        let bgColor = 'bg-gray-200';
+        let textColor = 'text-gray-700';
+        // Extract background and text color from the topic color class
+        if (topic.color) {
+            const bgMatch = topic.color.match(/bg-(\w+)-(\d+)/);
+            const textMatch = topic.color.match(/text-(\w+)-(\d+)/);
+            if (bgMatch) {
+                bgColor = `bg-${bgMatch[1]}-${bgMatch[2]}`;
+            }
+            if (textMatch) {
+                textColor = `text-${textMatch[1]}-700`;
+            }
+        }
+        return {
+            name: topicName,
+            bgColor,
+            textColor
+        };
+    });
+    return `
+        <a href="/${area.id}"
+           class="group relative block border border-gray-200 rounded-lg overflow-hidden bg-white hover:shadow-lg transition-all duration-200 h-64">
+            <!-- Background image with low opacity -->
+            ${area.image ? `
+            <div class="absolute inset-0 opacity-15 group-hover:opacity-30 transition-opacity">
+                <img src="/images/${area.image}" alt="" class="w-full h-full object-cover">
+            </div>
+            ` : ''}
+            <!-- Content -->
+            <div class="relative p-5 h-full flex flex-col">
+                <!-- Header -->
+                <div class="flex justify-between items-start mb-3 flex-shrink-0">
+                    <h3 class="text-lg font-bold text-gray-900 leading-tight">${area.navTitle}</h3>
+                    <svg class="w-5 h-5 text-gray-400 group-hover:text-blue-600 transition-colors flex-shrink-0 ml-2" 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>
+                </div>
+                <!-- Description - scrollable -->
+                <div class="text-md text-gray-700 mb-4 flex-grow overflow-y-auto pr-2">
+                    <p class="leading-relaxed">${shortDesc}</p>
+                </div>
+                <!-- Topics with colors from subAreas -->
+                <div class="flex-shrink-0">
+                    <p class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-2">Topics:</p>
+                    <div class="flex flex-wrap gap-2">
+                        ${topics.map(topic => `
+                            <span class="inline-block px-2 py-0.5 text-sm ${topic.bgColor} ${topic.textColor} rounded">
+                                ${topic.name}
+                            </span>
+                        `).join('')}
+                    </div>
+                </div>
+                <!-- Image Attribution -->
+                ${area.imageAttribution ? `
+                    <p class="text-xs text-gray-500 mt-3 pt-2 border-t border-gray-100 flex-shrink-0">${area.imageAttribution}</p>
+                ` : ''}
+            </div>
+        </a>
+    `;
+}
+// Export individual renderers for backward compatibility
+export { renderArtifactCard, renderAreaCard };

js/components/ContentSection.js ADDED Viewed

	@@ -0,0 +1,43 @@

+// ContentSection.js - Reusable content section container
+// Provides consistent frosted glass styling across all content sections
+/**
+ * Wraps content in a frosted glass container
+ * @param {string} id - Section ID
+ * @param {string} content - Inner HTML content
+ * @param {object} options - Additional options
+ * @returns {string} HTML string for the section
+ */
+export function renderContentSection(id, content, options = {}) {
+    const {
+        className = 'mb-16',
+        opacity = '40', // Default 40% opacity like About section
+        blur = 'sm',    // sm, md, lg
+        padding = 'p-6 md:p-10'
+    } = options;
+    return `
+        <section id="${id}" class="${className} relative z-20 px-4 sm:px-6 lg:px-8">
+            <div class="bg-white/${opacity} backdrop-blur-${blur} shadow-sm rounded-lg ${padding} w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
+                ${content}
+            </div>
+        </section>
+    `;
+}
+/**
+ * Creates the standard "Role of Openness" callout box
+ * @param {string} text - The openness text content
+ * @returns {string} HTML string for the callout
+ */
+export function renderOpennessCallout(text) {
+    if (!text) return '';
+    return `
+        <div class="px-4 sm:px-6 py-5 bg-gradient-to-r from-orange-50/95 to-yellow-50/95 backdrop-blur-sm border-l-4 border-orange-400 rounded-r-lg mb-8">
+            <p class="font-bold text-orange-900 mb-3 text-lg">🤗 The Role of Openness</p>
+            <p class="text-orange-800 italic leading-relaxed">${text}</p>
+        </div>
+    `;
+}

js/components/PageNavigation.js ADDED Viewed

	@@ -0,0 +1,71 @@

+// PageNavigation.js - Reusable page navigation component
+// Creates the "On this page" / breadcrumb navigation card
+/**
+ * Renders a page navigation card
+ * @param {string} label - Label for the navigation (e.g., "On this page:", "Area Name:")
+ * @param {Array} items - Array of navigation items: { text, href, active }
+ * @returns {string} HTML string for the navigation card
+ */
+export function renderPageNavigation(label, items) {
+    if (!items || items.length === 0) {
+        return '';
+    }
+    return `
+        <section class="mb-8 relative z-20 px-4 sm:px-6 lg:px-8">
+            <div class="bg-white/70 backdrop-blur-sm shadow-sm rounded-lg px-6 py-4 w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
+                <div class="flex items-center gap-3 overflow-x-auto">
+                    <span class="text-gray-600 font-semibold whitespace-nowrap">${label}</span>
+                    ${items.map((item, index) => {
+                        const activeClasses = item.active
+                            ? 'text-blue-600 font-semibold underline decoration-2 underline-offset-2'
+                            : 'text-gray-700 hover:text-blue-600';
+                        return `
+                            ${index > 0 ? '<span class="text-gray-300">•</span>' : ''}
+                            <a href="${item.href}" class="px-3 py-1.5 text-sm font-medium ${activeClasses} hover:bg-blue-50 rounded transition-colors whitespace-nowrap">${item.text}</a>
+                        `;
+                    }).join('')}
+                </div>
+            </div>
+        </section>
+    `;
+}
+/**
+ * Convenience function for home page navigation
+ */
+export function renderHomeNavigation() {
+    return renderPageNavigation('On this page:', [
+        { text: 'About', href: '/#about' },
+        { text: 'Recent Works', href: '/#recent-works' },
+        { text: 'Research Areas', href: '/#research-areas' },
+        { text: 'Team Members', href: '/#team' }
+    ]);
+}
+/**
+ * Convenience function for area page navigation
+ * @param {string} areaId - Area identifier
+ * @param {string} areaTitle - Area display title
+ * @param {Array} topics - Array of topics: { id, navName }
+ * @param {string} currentTopicId - Current topic ID (if any)
+ */
+export function renderAreaNavigation(areaId, areaTitle, topics, currentTopicId = null) {
+    const items = [
+        {
+            text: 'Overview',
+            href: `/${areaId}`,
+            active: currentTopicId === null
+        },
+        ...topics.map(topic => ({
+            text: topic.navName,
+            href: `/${areaId}/${topic.id}`,
+            active: topic.id === currentTopicId
+        }))
+    ];
+    return renderPageNavigation(`${areaTitle}:`, items);
+}