Upload 3 files

js/pages/AreaPage.js

@@ -4,6 +4,7 @@ import { featuredArtifacts } from '../data/artifacts.js';
 import { createArtifactCarousel } from '../cards/ArtifactSummaryCard.js';
 import { sampleResources } from '../data/resources.js';
 import { createResourceCard, initializeResourceCards } from '../cards/ResourceCard.js';
+import { renderSidebar } from '../utils/sidebar.js'; // Import the new sidebar component
 
 export function renderAreaPage(areaId) {
     const area = areasData[areaId];
@@ -29,17 +30,6 @@ export function renderAreaPage(areaId) {
     }));
 
     const content = `
-        <!-- Page Background Image for Main Content -->
-        <div class="fixed opacity-40 z-0" style="top: 104px; left: 256px; right: 0; bottom: 0;" id="area-background-container">
-            <img src="images/${area.image}" alt="" class="w-full h-full object-cover pointer-events-none">
-            <!-- Attribution Tooltip -->
-            <div id="area-bg-attribution" class="absolute bottom-4 right-4 bg-black bg-opacity-75 text-white text-xs px-2 py-1 rounded opacity-0 transition-opacity duration-200 max-w-xs z-50">
-                <a href="${area.imageSourceUrl}" target="_blank" class="text-blue-300 hover:text-blue-100">
-                    ${area.imageAttribution}
-                </a>
-            </div>
-        </div>
-
         <!-- Overview Section -->
         <section id="overview" class="mb-12 relative z-20">
             <!-- Overview Background Image -->
@@ -152,14 +142,12 @@ export function renderAreaPage(areaId) {
             // to ensure DOM elements are fully rendered
             setTimeout(async () => {
                 try {
-                    console.log('Loading artifacts from JSON...');
-                    // Load artifacts from JSON file
-                    const response = await fetch('/data/artifacts.json');
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! status: ${response.status}`);
+                    console.log('Accessing artifacts from global scope...');
+                    // Access artifacts from global scope
+                    const allArtifacts = window.allArtifacts || [];
+                    if (allArtifacts.length === 0) {
+                        console.warn('Global artifacts data not available or empty. Falling back to featuredArtifacts.');
                     }
-                    const allArtifacts = await response.json();
-                    console.log('Artifacts loaded:', allArtifacts.length, 'items');
                     
                     subAreas.forEach(subArea => {
                         try {
@@ -187,7 +175,7 @@ export function renderAreaPage(areaId) {
                         }
                     });
                 } catch (error) {
-                    console.error('Error loading artifacts from JSON:', error);
+                    console.error('Error accessing global artifacts data:', error);
                     // Fallback to featured artifacts for all carousels
                     subAreas.forEach(subArea => {
                         const carouselId = `${subArea.id}-artifacts-carousel`;
@@ -221,22 +209,32 @@ export function getAreaPageSidebar(areaId) {
         name: typeof value === 'string' ? value : value.name
     }));
 
-    return `
-        <nav class="p-4">
-            <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">On This Page</h3>
-            <ul class="space-y-1">
-                <li><a href="#overview" class="page-nav-link block px-3 py-2 text-sm text-blue-600 bg-blue-50 rounded-md">Overview</a></li>
-                <li class="ml-4">
-                    <ul class="space-y-1">
-                        ${subAreas.map(subArea => `
-                            <li><a href="#${subArea.id}" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">${subArea.name}</a></li>
-                        `).join('')}
-                    </ul>
-                </li>
-                <li><a href="#resources" class="page-nav-link block px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors">Resources</a></li>
-            </ul>
-        </nav>
-    `;
+    const sidebarItems = [
+        {
+            label: 'Overview',
+            href: '#overview',
+            isNested: false,
+            isActive: window.location.hash === '#overview',
+        },
+        {
+            label: 'Topics',
+            isHeader: true,
+            isNested: true,
+            subItems: subAreas.map(subArea => ({
+                label: subArea.name,
+                href: `#${subArea.id}`,
+                isActive: window.location.hash === `#${subArea.id}`,
+            })),
+        },
+        {
+            label: 'Resources',
+            href: '#resources',
+            isNested: false,
+            isActive: window.location.hash === '#resources',
+        },
+    ];
+
+    return renderSidebar('On This Page', sidebarItems);
 }
 
 function initializeAreaResourceCarousel(resources) {

js/pages/HomePage.js

@@ -5,20 +5,10 @@ import { createArtifactCarousel } from '../cards/ArtifactSummaryCard.js';
 import { areasData, homeBackgroundImage } from '../data/areas.js';
 import { featuredArtifacts } from '../data/artifacts.js';
 import { teamMembers } from '../data/team.js';
+import { renderSidebar } from '../utils/sidebar.js'; // Import the new sidebar component
 
 export function renderHomePage() {
     const content = `
-        <!-- Page Background Image for Main Content -->
-        <div class="fixed opacity-40 z-0" style="top: 104px; left: 256px; right: 0; bottom: 0;" id="home-background-container">
-            <img src="images/${homeBackgroundImage.image}" alt="" class="w-full h-full object-cover pointer-events-none">
-            <!-- Attribution Tooltip -->
-            <div id="home-bg-attribution" class="absolute bottom-4 right-4 bg-black bg-opacity-75 text-white text-xs px-2 py-1 rounded opacity-0 transition-opacity duration-200 max-w-xs z-50">
-                <a href="${homeBackgroundImage.sourceUrl}" target="_blank" class="text-blue-300 hover:text-blue-100">
-                    ${homeBackgroundImage.attribution}
-                </a>
-            </div>
-        </div>
-        
         <!-- Team Introduction Section -->
         <section id="intro" class="mb-12 relative z-20">
             <!-- Part 1: Team Introduction and Research Areas -->
@@ -107,29 +97,56 @@ export function renderHomePage() {
 }
 
 export function getHomePageSidebar() {
-    return `
-        <nav class="p-4">
-            <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">On This Page</h3>
-            <ul class="space-y-1">
-                <li><a href="#intro" class="page-nav-link block px-3 py-2 text-sm text-blue-600 bg-blue-50 rounded-md">Team Introduction</a></li>
-                <li class="ml-4">
-                    <ul class="space-y-1">
-                        <li><a href="#recent-featured-works" class="page-nav-link block px-3 py-2 text-xs text-blue-600 bg-blue-50 rounded-md">Recent & Featured Works</a></li>
-                        <li><a href="#team-members" class="page-nav-link block px-3 py-2 text-xs text-blue-600 bg-blue-50 rounded-md">Team Members</a></li>        
-                    </ul>
-                </li>
-                <li><a href="#research-areas-header" class="page-nav-link block px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors">Research Areas</a></li>
-                <li class="ml-4">
-                    <ul class="space-y-1">
-                        <li><a href="#efficiency" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Efficiency & Environment</a></li>
-                        <li><a href="#personal" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Consent & Personal Interactions</a></li>
-                        <li><a href="#rights" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Rights & Regulation</a></li>
-                        <li><a href="#ecosystems" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Socio-Economic & Technical Ecosystems</a></li>
-                    </ul>
-                </li>
-            </ul>
-        </nav>
-    `;
+    const sidebarItems = [
+        {
+            label: 'Team Introduction',
+            href: '#intro',
+            isNested: false,
+            isActive: window.location.hash === '#intro',
+            subItems: [
+                {
+                    label: 'Recent & Featured Works',
+                    href: '#recent-featured-works',
+                    isActive: window.location.hash === '#recent-featured-works',
+                },
+                {
+                    label: 'Team Members',
+                    href: '#team-members',
+                    isActive: window.location.hash === '#team-members',
+                },
+            ],
+        },
+        {
+            label: 'Research Areas',
+            href: '#research-areas-header',
+            isNested: false,
+            isActive: window.location.hash === '#research-areas-header',
+            subItems: [
+                {
+                    label: 'Efficiency & Environment',
+                    href: '#efficiency',
+                    isActive: window.location.hash === '#efficiency',
+                },
+                {
+                    label: 'Consent & Personal Interactions',
+                    href: '#personal',
+                    isActive: window.location.hash === '#personal',
+                },
+                {
+                    label: 'Rights & Regulation',
+                    href: '#rights',
+                    isActive: window.location.hash === '#rights',
+                },
+                {
+                    label: 'Socio-Economic & Technical Ecosystems',
+                    href: '#ecosystems',
+                    isActive: window.location.hash === '#ecosystems',
+                },
+            ],
+        },
+    ];
+
+    return renderSidebar('On This Page', sidebarItems);
 }
 
 function initializeTeamMembers() {
@@ -159,7 +176,7 @@ function initializeHomeAreaCards() {
 
     const areas = Object.values(areasData);
     areasContainer.innerHTML = areas.map(area => 
-        createHomeAreaCard(area.id, area.title, area.description, area.openness, Object.values(area.subAreas).map(sub => typeof sub === 'string' ? sub : sub.name), area.imagePosition, area.imageAttribution, area.imageAltText)
+        createHomeAreaCard(area.id, area.title, area.description, area.openness, Object.values(area.subAreas).map(sub => typeof sub === 'string' ? sub : sub.name), area.image, area.imagePosition, area.imageAttribution, area.imageAltText)
     ).join('');
 }
 

js/pages/ResourcesPage.js

@@ -3,20 +3,10 @@ import { homeBackgroundImage, areasData } from '../data/areas.js';
 import { pressMentions } from '../data/press.js';
 import { sampleResources } from '../data/resources.js';
 import { createResourceCard, initializeResourceCards } from '../cards/ResourceCard.js';
+import { renderSidebar } from '../utils/sidebar.js'; // Import the new sidebar component
 
 export function renderResourcesPage() {
     const content = `
-        <!-- Page Background Image for Main Content -->
-        <div class="fixed opacity-40 z-0" style="top: 104px; left: 256px; right: 0; bottom: 0;" id="resources-background-container">
-            <img src="images/${homeBackgroundImage.image}" alt="" class="w-full h-full object-cover pointer-events-none">
-            <!-- Attribution Tooltip -->
-            <div id="resources-bg-attribution" class="absolute bottom-4 right-4 bg-black bg-opacity-75 text-white text-xs px-2 py-1 rounded opacity-0 transition-opacity duration-200 max-w-xs z-50">
-                <a href="${homeBackgroundImage.sourceUrl}" target="_blank" class="text-blue-300 hover:text-blue-100">
-                    ${homeBackgroundImage.attribution}
-                </a>
-            </div>
-        </div>
-
         <!-- Technical Resources Section -->
         <section id="technical-resources" class="mb-12 relative z-20">
             <div class="bg-white bg-opacity-90 backdrop-blur-sm rounded-lg shadow-sm p-8">
@@ -167,15 +157,22 @@ export function renderResourcesPage() {
 }
 
 export function getResourcesPageSidebar() {
-    return `
-        <nav class="p-4">
-            <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Resources</h3>
-            <ul class="space-y-1">
-                <li><a href="#technical-resources" class="page-nav-link block px-3 py-2 text-sm text-blue-600 bg-blue-50 rounded-md">Technical Resources</a></li>
-                <li><a href="#press-mentions" class="page-nav-link block px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors">Press Mentions</a></li>
-            </ul>
-        </nav>
-    `;
+    const sidebarItems = [
+        {
+            label: 'Technical Resources',
+            href: '#technical-resources',
+            isNested: false,
+            isActive: window.location.hash === '#technical-resources',
+        },
+        {
+            label: 'Press Mentions',
+            href: '#press-mentions',
+            isNested: false,
+            isActive: window.location.hash === '#press-mentions',
+        },
+    ];
+
+    return renderSidebar('Resources', sidebarItems);
 }
 
 function initializeResourcesBackgroundAttribution() {