Upload 2 files

js/main.js

@@ -1,11 +1,11 @@
+// main.js
+import { createHomeAreaCard } from './cards/HomeAreaCard.js';
+import { createArtifactSummaryCard, createArtifactCarousel } from './cards/ArtifactSummaryCard.js';
+import { teamMembers, teamTagData } from './data/team.js';
+import { router } from './router.js';
+
 // Team member component
-function createTeamMember(name, role, hfUsername, tags) {
-    const tagData = {
-        'efficiency': { name: 'Efficiency, Costs & Environment', id: 'efficiency' },
-        'personal': { name: 'Consent & Personal Interactions', id: 'personal' },
-        'rights': { name: 'Rights & Regulation', id: 'rights' },
-        'ecosystems': { name: 'Socio-economic & Technical Ecosystems', id: 'ecosystems' }
-    };
+export function createTeamMember(name, role, hfUsername, tags) {
 
     const colors = ['blue', 'green', 'purple', 'orange', 'indigo', 'pink'];
     const colorIndex = name.length % colors.length;
@@ -14,8 +14,8 @@ function createTeamMember(name, role, hfUsername, tags) {
     const initials = name.split(' ').map(n => n[0]).join('');
     
     const tagElements = tags.map(tag => {
-        const tagInfo = tagData[tag];
-        return `<span class="inline-block px-2 py-0.5 text-xs bg-gray-100 text-gray-700 rounded-full hover:bg-blue-100 hover:text-blue-800 cursor-pointer transition-colors whitespace-nowrap" onclick="scrollToSection('${tagInfo.id}')">${tagInfo.name}</span>`;
+        const tagInfo = teamTagData[tag];
+        return `<span class="inline-block px-2 py-0.5 text-xs bg-gray-100 text-gray-700 rounded-full hover:bg-blue-100 hover:text-blue-800 cursor-pointer transition-colors whitespace-nowrap" onclick="window.scrollToSection('${tagInfo.id}')">${tagInfo.name}</span>`;
     }).join('');
 
     return `
@@ -46,170 +46,83 @@ function createTeamMember(name, role, hfUsername, tags) {
     `;
 }
 
-// Area card component
-function createAreaCard(id, title, description, openness, subAreas, imagePosition = 'left', imageAttribution = null, imageAltText = null, imageSourceUrl = 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 = imageAltText || 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-4 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 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">
-                        <a href="${imageSourceUrl}" target="_blank" class="text-xs text-gray-500 mt-2 text-center">${attribution}</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    `;
-}
-
-// Unified scroll function - used by both team tags and left navigation
-function scrollToSection(sectionId) {
+// Make router's scrollToSection globally available for onclick handlers
+window.scrollToSection = (sectionId) => {
     const element = document.getElementById(sectionId);
     if (element) {
-        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        const elementRect = element.getBoundingClientRect();
+        const absoluteElementTop = elementRect.top + window.pageYOffset;
+        const offset = 120; // Account for fixed header + some padding
+        
+        window.scrollTo({
+            top: absoluteElementTop - offset,
+            behavior: 'smooth'
+        });
     }
+};
+
+// Scroll to top functionality
+function scrollToTop() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+    });
 }
 
+// Make scrollToTop globally available
+window.scrollToTop = scrollToTop;
+
 // Initialize team members
 function initializeTeamMembers() {
     const teamContainer = document.getElementById('team-grid');
     if (!teamContainer) return;
 
-    const teamMembers = [
-        { name: 'Yacine Jernite', role: 'Head of ML & Society', username: 'yjernite', tags: ['rights', 'ecosystems'] },
-        { name: 'Sasha Luccioni', role: 'AI & Climate Lead', username: 'sasha', tags: ['efficiency'] },
-        { name: 'Giada Pistilli', role: 'Principal Ethicist', username: 'giadap', tags: ['personal'] },
-        { name: 'Lucie-Aimée Kaffee', role: 'Applied Policy Researcher, EU Policy', username: 'frimelle', tags: ['ecosystems', 'rights'] }
-    ];
-
     teamContainer.innerHTML = teamMembers.map(member => 
         createTeamMember(member.name, member.role, member.username, member.tags)
     ).join('');
 }
 
-// Initialize area cards
-function initializeAreaCards() {
-    const areasContainer = document.getElementById('research-areas');
-    if (!areasContainer) return;
+// Note: Navigation handling moved to router.js for unified control
 
-    const areas = [
-        {
-            id: 'efficiency',
-            title: 'Efficiency, Costs, and Environment',
-            description: 'The question of costs is essential to understanding and managing the impact of AI technology; it determines who gets to develop it, use it, and how externalized costs are borne by people who do not choose or benefit from the technology.',
-            openness: 'Open development of AI systems greatly facilitates transparency on the training and deployment costs. Users and developers of open models typically have stronger incentives to favor and invest in efficiency.',
-            subAreas: [
-                'Environmental impact across the supply chains',
-                'Measuring energy and financial costs',
-                'Making AI less compute-intensive'
-            ],
-            imagePosition: 'left',
-            imageAttribution: 'Hanna Barakat  & Archival Images of AI + AIxDESIGN | BetterImagesOfAI, CC-BY-4.0',
-            imageAltText: 'The image shows a surreal landscape with vast green fields extending toward distant mountains under a cloudy sky. Embedded in the fields are digital circuit patterns, resembling an intricate network of blue lines, representing a technological infrastructure. Five large computer monitors with keyboards are placed in a row, each with a Navajo woman sitting in front, weaving the computers. In the far distance, a cluster of teepees is visible.',
-            imageSourceUrl: 'https://betterimagesofai.org/images?artist=HannaBarakat&title=WeavingWires2',
-        },
-        {
-            id: 'personal',
-            title: 'Consent and Personal Interactions in the Age of AI',
-            description: 'Individuals\' experiences of AI systems are shaped both by their personal interactions and by the ways the systems interact with their digital identities - often without our awareness or ability to meaningfully consent.',
-            openness: 'Openness at the level of a model\'s training data and of its inputs are necessary to support informed consent, and research on characterizing the different companionship and value dynamics of AI systems enables replicable research into those characteristics.',
-            subAreas: [
-                'Characterizing personal and parasocial AI interactions',
-                'Consent and privacy'
-            ],
-            imagePosition: 'right',
-            imageAttribution: 'Kathryn Conrad | BetterImagesOfAI, CC-BY-4.0',
-            imageAltText: 'Students at computers with screens that include a representation of a retinal scanner with pixelation and binary data overlays and a brightly coloured datawave heatmap at the top.',
-            imageSourceUrl: 'https://betterimagesofai.org/images?artist=KathrynConrad&title=Datafication',
-        },
-        {
-            id: 'rights',
-            title: 'Rights and Regulations',
-            description: 'AI is not exempt from regulation; but understanding how new and existing rules apply to technical paradigms involving unprecedented scales of data and automation can present unique challenges.',
-            openness: 'Applications of existing regulation as well as the design of new ones to meet the challenges of AI technology require understanding how it works, the trade-offs it entails, and the space of technical interventions that are feasible. Open access to the technology supports independent research from stakeholders with different incentives from those of the largest developers.',
-            subAreas: [
-                'How does existing regulation apply to AI',
-                'Navigating new AI-specific regulation',
-                'The place of open-source in regulation'
-            ],
-            imagePosition: 'left',
-            imageAttribution: 'Emily Rand & LOTI | BetterImagesOfAI, CC-BY-4.0',
-            imageAltText: 'Building blocks are overlayed with digital squares that highlight people living their day-to-day lives through windows. Some of the squares are accompanied by cursors.',
-            imageSourceUrl: 'https://betterimagesofai.org/images?artist=EmilyRand&title=AICity',
-        },
-        {
-            id: 'ecosystems',
-            title: 'Socio-economic and Technical Ecosystems',
-            description: 'While discussions of the impact of AI often focus on technical characteristics of individual systems, the trajectory and impact of the technology are often better explained by looking to broader dynamics of market power and economic incentives.',
-            openness: 'Openness is an important factor in the diffusion of the technology, and enables a greater variety of actors to reliably assess its suitability and to adapt it to their specific contexts and requirements; as well as to understand the role of different resources and the consequences of their concentration among a few actors.',
-            subAreas: [
-                'Labor impacts of AI',
-                'Power, monopolies, and sovereignty',
-                'How and where is (open) AI used'
-            ],
-            imagePosition: 'right',
-            imageAttribution: 'Lone Thomasky & Bits&Bäume | BetterImagesOfAI, CC-BY-4.0',
-            imageAltText: 'A simplified illustration of urban life near the sea showing groups of people, buildings and bridges, as well as polluting power plants, opencast mining, exploitative work, data centres and wind power stations on a hill. Several small icons indicate destructive processes.',
-            imageSourceUrl: 'https://betterimagesofai.org/images?artist=LoneThomasky&title=DigitalSocietyBell',
-        }
-    ];
+// Initialize scroll to top button functionality
+function initializeScrollToTop() {
+    const scrollToTopBtn = document.getElementById('scroll-to-top');
+    if (!scrollToTopBtn) return;
 
-    areasContainer.innerHTML = areas.map(area => 
-        createAreaCard(area.id, area.title, area.description, area.openness, area.subAreas, area.imagePosition, area.imageAttribution, area.imageAltText, area.imageSourceUrl)
-    ).join('');
-}
+    // Add click event listener
+    scrollToTopBtn.addEventListener('click', scrollToTop);
 
-// Initialize left navigation with click handlers
-function initializeNavigation() {
-    const navLinks = document.querySelectorAll('.page-nav-link');
+    // Show/hide button based on scroll position
+    function toggleScrollToTopButton() {
+        const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+        const showThreshold = 300; // Show button after scrolling 300px
+
+        if (scrollPosition > showThreshold) {
+            scrollToTopBtn.classList.remove('opacity-0', 'invisible');
+            scrollToTopBtn.classList.add('opacity-100', 'visible');
+        } else {
+            scrollToTopBtn.classList.remove('opacity-100', 'visible');
+            scrollToTopBtn.classList.add('opacity-0', 'invisible');
+        }
+    }
+
+    // Listen for scroll events
+    window.addEventListener('scroll', toggleScrollToTopButton);
     
-    navLinks.forEach(link => {
-        link.addEventListener('click', function(e) {
-            e.preventDefault();
-            const href = this.getAttribute('href');
-            if (href && href.startsWith('#')) {
-                const sectionId = href.substring(1);
-                scrollToSection(sectionId);
-            }
-        });
-    });
+    // Initial check
+    toggleScrollToTopButton();
 }
 
 // Main initialization
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize components
-    initializeTeamMembers();
-    initializeAreaCards();
-    initializeNavigation();
+    // Navigation now handled by router.js
+    
+    // Initialize scroll to top functionality
+    initializeScrollToTop();
+    
+    // The router will handle page-specific component initialization
+    // No need to call initializeTeamMembers, initializeHomeAreaCards, etc. here
+    // as they will be called by the router when loading the home page
     
     // Sidebar toggle functionality
     const searchToggle = document.getElementById('search-toggle');

js/router.js

@@ -0,0 +1,292 @@
+// router.js - Simple SPA router
+import { renderHomePage, getHomePageSidebar } from './pages/HomePage.js';
+import { renderAreaPage, getAreaPageSidebar } from './pages/AreaPage.js';
+import { renderResourcesPage, getResourcesPageSidebar } from './pages/ResourcesPage.js';
+
+class Router {
+    constructor() {
+        this.routes = {
+            '/': 'home',
+            '/home': 'home',
+            '/efficiency': 'efficiency',
+            '/personal': 'personal', 
+            '/rights': 'rights',
+            '/ecosystems': 'ecosystems',
+            '/about': 'resources'
+        };
+        
+        this.currentPage = null;
+        this.init();
+    }
+
+    init() {
+        // Handle initial page load
+        this.loadPage(window.location.pathname);
+        
+        // Handle browser back/forward
+        window.addEventListener('popstate', (e) => {
+            const path = window.location.pathname;
+            const hash = window.location.hash;
+            const fullUrl = path + hash;
+            
+            // Use navigateToUrl to ensure proper scroll behavior
+            this.navigateToUrl(fullUrl);
+        });
+        
+        // Handle hash changes for navigation
+        window.addEventListener('hashchange', (e) => {
+            const hash = window.location.hash.substring(1);
+            if (hash) {
+                // Scroll to the section after a short delay to ensure content is loaded
+                setTimeout(() => this.scrollToSection(hash), 100);
+            }
+        });
+        
+        // Handle initial hash if present
+        const initialHash = window.location.hash.substring(1);
+        if (initialHash) {
+            setTimeout(() => this.scrollToSection(initialHash), 200);
+        }
+        
+        // Initialize unified navigation handling
+        this.initializeNavigation();
+    }
+
+    async loadPage(path) {
+        const route = this.routes[path] || 'home';
+        
+        if (this.currentPage === route) {
+            // Same page, no need to reload
+            return;
+        }
+        
+        this.currentPage = route;
+
+        try {
+            switch (route) {
+                case 'home':
+                    await this.loadHomePage();
+                    break;
+                case 'efficiency':
+                case 'personal':
+                case 'rights':
+                case 'ecosystems':
+                    await this.loadAreaPage(route);
+                    break;
+                case 'resources':
+                    await this.loadResourcesPage();
+                    break;
+                default:
+                    await this.loadHomePage();
+            }
+            
+        } catch (error) {
+            console.error('Error loading page:', error);
+            // Fallback to home page
+            await this.loadHomePage();
+        }
+        
+        return Promise.resolve();
+    }
+
+    async loadHomePage() {
+        const mainContent = document.getElementById('main-content');
+        const leftSidebar = document.getElementById('left-sidebar');
+        
+        if (!mainContent) {
+            return;
+        }
+
+        try {
+            // Get page content and sidebar
+            const homePage = renderHomePage();
+            
+            // Update content
+            const contentContainer = mainContent.querySelector('.max-w-4xl') || mainContent;
+            contentContainer.innerHTML = homePage.content;
+            
+            // Update sidebar if it exists
+            if (leftSidebar) {
+                leftSidebar.innerHTML = getHomePageSidebar();
+            }
+            
+            // Initialize page
+            if (homePage.init) {
+                homePage.init();
+            }
+            
+            // Update navigation state
+            this.updateNavigation('home');
+        } catch (error) {
+            // Fallback to error content
+            const contentContainer = mainContent.querySelector('.max-w-4xl') || mainContent;
+            contentContainer.innerHTML = `
+                <div class="bg-white rounded-lg shadow-sm p-8">
+                    <h1 class="text-3xl font-bold text-red-600 mb-6">Error Loading Page</h1>
+                    <p class="text-gray-700">Sorry, there was an error loading the home page.</p>
+                </div>
+            `;
+        }
+    }
+
+    async loadAreaPage(area) {
+        const mainContent = document.getElementById('main-content');
+        const leftSidebar = document.getElementById('left-sidebar');
+        
+        if (!mainContent) {
+            return;
+        }
+
+        try {
+            // Get area page content and sidebar
+            const areaPage = renderAreaPage(area);
+            
+            // Update content
+            const contentContainer = mainContent.querySelector('.max-w-4xl') || mainContent;
+            contentContainer.innerHTML = areaPage.content;
+            
+            // Update sidebar
+            if (leftSidebar) {
+                leftSidebar.innerHTML = getAreaPageSidebar(area);
+            }
+            
+            // Initialize page
+            if (areaPage.init) {
+                areaPage.init();
+            }
+        } catch (error) {
+            console.error(`Error loading ${area} page:`, error);
+            
+            // Fallback content
+            const contentContainer = mainContent.querySelector('.max-w-4xl') || mainContent;
+            contentContainer.innerHTML = `
+                <div class="bg-white rounded-lg shadow-sm p-8">
+                    <h1 class="text-3xl font-bold text-red-600 mb-6">Error Loading Page</h1>
+                    <p class="text-gray-700">Sorry, there was an error loading the ${area} page.</p>
+                </div>
+            `;
+        }
+        
+        this.updateNavigation(area);
+    }
+
+    async loadResourcesPage() {
+        const mainContent = document.getElementById('main-content');
+        const leftSidebar = document.getElementById('left-sidebar');
+        
+        if (!mainContent) return;
+
+        try {
+            // Get resources page content and sidebar
+            const resourcesPage = renderResourcesPage();
+            
+            // Update content
+            const contentContainer = mainContent.querySelector('.max-w-4xl') || mainContent;
+            contentContainer.innerHTML = resourcesPage.content;
+            
+            // Update sidebar
+            if (leftSidebar) {
+                leftSidebar.innerHTML = getResourcesPageSidebar();
+            }
+            
+            // Initialize page
+            if (resourcesPage.init) {
+                resourcesPage.init();
+            }
+        } catch (error) {
+            // Fallback content
+            const contentContainer = mainContent.querySelector('.max-w-4xl') || mainContent;
+            contentContainer.innerHTML = `
+                <div class="bg-white rounded-lg shadow-sm p-8">
+                    <h1 class="text-3xl font-bold text-red-600 mb-6">Error Loading Page</h1>
+                    <p class="text-gray-700">Sorry, there was an error loading the resources page.</p>
+                </div>
+            `;
+        }
+        
+        this.updateNavigation('resources');
+    }
+
+    updateNavigation(currentPage) {
+        // Update header navigation active states
+        const navLinks = document.querySelectorAll('header nav a');
+        navLinks.forEach(link => {
+            link.classList.remove('text-blue-600', 'bg-blue-50');
+            link.classList.add('text-gray-700');
+            
+            const href = link.getAttribute('href');
+            if ((currentPage === 'home' && (href === '/' || href === '/home')) ||
+                (currentPage === 'resources' && href === '/about') ||
+                (currentPage !== 'home' && currentPage !== 'resources' && href === `/${currentPage}`)) {
+                link.classList.remove('text-gray-700');
+                link.classList.add('text-blue-600', 'bg-blue-50');
+            }
+        });
+    }
+
+
+    initializeNavigation() {
+        // Use event delegation to handle all navigation links
+        document.addEventListener('click', (e) => {
+            const link = e.target.closest('a');
+            if (!link) return;
+            
+            const href = link.getAttribute('href');
+            if (!href) return;
+            
+            // Handle different types of links
+            if (href.startsWith('/') && !href.startsWith('/js/') && !href.startsWith('/css/') && !href.startsWith('/images/')) {
+                // Check if this is a known SPA route
+                const path = href.split('#')[0];
+                if (this.routes[path]) {
+                    e.preventDefault();
+                    this.navigateToUrl(href);
+                }
+            } else if (href.startsWith('#')) {
+                // Same-page hash navigation
+                e.preventDefault();
+                this.scrollToSection(href.substring(1));
+            }
+            // External links are handled normally by browser
+        });
+    }
+
+    navigateToUrl(fullUrl) {
+        // Parse URL into path and hash
+        const [path, hash] = fullUrl.split('#');
+        
+        // Update browser URL
+        window.history.pushState({}, '', fullUrl);
+        
+        // Load page and then handle hash
+        this.loadPage(path).then(() => {
+            if (hash) {
+                setTimeout(() => this.scrollToSection(hash), 100);
+            } else {
+                // No hash - scroll to top of page with a delay to ensure content is rendered
+                setTimeout(() => {
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                }, 100);
+            }
+        });
+    }
+
+    scrollToSection(sectionId) {
+        const element = document.getElementById(sectionId);
+        if (element) {
+            // Scroll to element with offset to show title
+            const elementRect = element.getBoundingClientRect();
+            const absoluteElementTop = elementRect.top + window.pageYOffset;
+            const offset = 120; // Account for fixed header + some padding
+            
+            window.scrollTo({
+                top: absoluteElementTop - offset,
+                behavior: 'smooth'
+            });
+        }
+    }
+
+}
+
+// Export router instance
+export const router = new Router();