single_area_pagesd

js/components/Card.js

@@ -33,7 +33,7 @@ export function createCard(type, data, options = {}) {
  * Renders an artifact card (for carousels)
  */
 function renderArtifactCard(artifact, options = {}) {
-    const { index = 0 } = options;
+    const { index = 0, containerId = 'default' } = options;
     
     // Handle both old and new field names
     const title = artifact.title;
@@ -64,7 +64,8 @@ function renderArtifactCard(artifact, options = {}) {
     // Render tags
     const { areaTagsHtml, topicTagsHtml } = renderTagSet(areaTags, subAreaTags);
     
-    const cardId = `artifact-card-${index}`;
+    // Generate unique card ID by including container ID to avoid duplicates across multiple carousels
+    const cardId = `artifact-card-${containerId}-${index}`;
     
     return `
         <div class="flex-none w-80 h-60 border border-gray-300 rounded-lg overflow-hidden bg-white/95 shadow-sm relative group hover:shadow-lg transition-shadow duration-200">

js/components/Carousel.js

@@ -6,7 +6,7 @@ export function createArtifactCarousel(artifacts, containerId) {
     if (!container) return;
     
     const cardsHtml = artifacts.map((artifact, index) => 
-        renderArtifactCard(artifact, { index })
+        renderArtifactCard(artifact, { index, containerId })
     ).join('');
     
     container.innerHTML = `

js/components/PageNavigation.js

@@ -56,12 +56,12 @@ export function renderAreaNavigation(areaId, areaTitle, topics, currentTopicId =
     const items = [
         { 
             text: 'Overview', 
-            href: `/${areaId}`,
-            active: currentTopicId === null
+            href: `/${areaId}#overview`,
+            active: currentTopicId === null || currentTopicId === 'overview'
         },
         ...topics.map(topic => ({
             text: topic.navName,
-            href: `/${areaId}/${topic.id}`,
+            href: `/${areaId}#${topic.id}`,
             active: topic.id === currentTopicId
         }))
     ];

js/pages/AreaPage.js

@@ -16,24 +16,11 @@ export function renderAreaPage(areaId, topicId = null) {
         };
     }
 
-    // If no topic specified, show overview of the area
-    if (!topicId) {
-        return renderAreaOverview(area, areaId);
-    }
-
-    // Show specific topic
-    const topic = area.topics[topicId];
-    if (!topic) {
-        return {
-            content: `<div class="bg-white/90 backdrop-blur-md rounded-lg shadow-sm p-8 mx-4"><h1 class="text-2xl font-bold text-red-600">Topic not found</h1></div>`,
-            init: () => {}
-        };
-    }
-
-    return renderTopicView(area, areaId, topic, topicId);
+    // Always render full page with all topics (single scrollable page)
+    return renderFullAreaPage(area, areaId, topicId);
 }
 
-function renderAreaOverview(area, areaId) {
+function renderFullAreaPage(area, areaId, initialTopicId = null) {
     // Get topics as array
     const topics = Object.entries(area.topics).map(([key, value]) => ({
         id: key,
@@ -47,8 +34,9 @@ function renderAreaOverview(area, areaId) {
         <!-- Top spacing -->
         <div class="mb-8"></div>
         
-        ${renderAreaNavigation(areaId, area.navTitle, topics, null)}
+        ${renderAreaNavigation(areaId, area.navTitle, topics, initialTopicId)}
         
+        <!-- Overview Section -->
         ${renderContentSection('overview', `
             <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">${area.title}</h1>
             
@@ -92,7 +80,7 @@ function renderAreaOverview(area, areaId) {
                         const titleAttr = shortDesc ? ` title="${shortDesc}"` : '';
                         
                         return `
-                            <a href="/${areaId}/${topic.id}" class="inline-block px-3 py-1.5 text-sm font-semibold ${bgColor} ${textColor} ${borderColor} border rounded hover:opacity-90 transition-opacity"${titleAttr}>
+                            <a href="/${areaId}#${topic.id}" class="inline-block px-3 py-1.5 text-sm font-semibold ${bgColor} ${textColor} ${borderColor} border rounded hover:opacity-90 transition-opacity"${titleAttr}>
                                 ${topic.navName}
                             </a>
                         `;
@@ -108,89 +96,52 @@ function renderAreaOverview(area, areaId) {
                 </div>
             </div>
         `)}
+        
+        <!-- Topic Sections (each as a separate content section) -->
+        ${topics.map(topic => renderTopicSection(area, areaId, topic)).join('')}
     `;
 
     return {
         content,
         init: () => {
             initializeAreaArtifactsCarousel(areaId);
+            // Initialize artifact carousels for all topics
+            topics.forEach(topic => {
+                initializeTopicArtifactsCarousel(areaId, topic.id);
+            });
         }
     };
 }
 
-function renderTopicView(area, areaId, topic, topicId) {
+function renderTopicSection(area, areaId, topic) {
+    const topicId = topic.id;
     const topicName = topic.navName || topic.name;
     const topicDescription = topic.description?.paragraphs 
         ? topic.description.paragraphs.map(p => `<p class="text-gray-900 leading-relaxed mb-4">${p}</p>`).join('')
         : (topic.description?.short || topic.description || '');
     
-    // Get all topics for navigation
-    const allTopics = Object.entries(area.topics).map(([key, value]) => ({
-        id: key,
-        navName: typeof value === 'string' ? value : (value.navName || value.name)
-    }));
+    return renderContentSection(topicId, `
+        <!-- Breadcrumb -->
+        <div class="mb-4 text-sm text-gray-600">
+            <a href="/${areaId}#overview" class="hover:text-blue-600 transition-colors">${area.navTitle}</a>
+            <span class="mx-2">›</span>
+            <span class="text-gray-900 font-medium">${topicName}</span>
+        </div>
 
-    const content = `
-        <!-- Top spacing -->
-        <div class="mb-8"></div>
+        <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-6">${topic.name}</h2>
         
-        ${renderAreaNavigation(areaId, area.navTitle, allTopics, topicId)}
-        
-        ${renderContentSection(topicId, `
-            <!-- Breadcrumb -->
-            <div class="mb-4 text-sm text-gray-600">
-                <a href="/${areaId}" class="hover:text-blue-600 transition-colors">${area.navTitle}</a>
-                <span class="mx-2">›</span>
-                <span class="text-gray-900 font-medium">${topicName}</span>
-            </div>
-
-            <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">${topic.name}</h1>
-            
-            <!-- Topic Description -->
-            ${topicDescription ? `
-            <div class="mb-8 text-gray-900">
-                ${topicDescription}
-            </div>
-            ` : ''}
-
-            <h3 class="text-xl md:text-2xl font-bold text-gray-900 mb-6">Related Research & Resources</h3>
-            <div id="${topicId}-artifacts-carousel" class="overflow-x-auto -mx-2">
-                <!-- Carousel will be inserted here -->
-            </div>
-        `)}
-    `;
+        <!-- Topic Description -->
+        ${topicDescription ? `
+        <div class="mb-8 text-gray-900">
+            ${topicDescription}
+        </div>
+        ` : ''}
 
-    return {
-        content,
-        init: () => {
-            // Initialize artifact carousel for this topic
-            setTimeout(async () => {
-                try {
-                    const allArtifacts = window.allArtifacts || [];
-                    
-                    // Filter artifacts by this specific topic
-                    const filteredArtifacts = allArtifacts.filter(artifact => 
-                        artifact.topics && artifact.topics.includes(topicId)
-                    );
-                    
-                    // Transform field names to match expected format
-                    const transformedArtifacts = filteredArtifacts.map(artifact => ({
-                        ...artifact,
-                        areaTags: artifact.areas,
-                        subAreaTags: artifact.topics,
-                        sourceUrl: artifact.url
-                    }));
-                    
-                    const carouselId = `${topicId}-artifacts-carousel`;
-                    createArtifactCarousel(transformedArtifacts.length > 0 ? transformedArtifacts : getFeaturedArtifacts(), carouselId);
-                } catch (error) {
-                    console.error(`Error creating carousel for ${topicId}:`, error);
-                    const carouselId = `${topicId}-artifacts-carousel`;
-                    createArtifactCarousel(getFeaturedArtifacts(), carouselId);
-                }
-            }, 50);
-        }
-    };
+        <h3 class="text-xl md:text-2xl font-bold text-gray-900 mb-6">Related Research & Resources</h3>
+        <div id="${topicId}-artifacts-carousel" class="overflow-x-auto -mx-2">
+            <!-- Carousel will be inserted here -->
+        </div>
+    `);
 }
 
 // Helper function to initialize area artifacts carousel
@@ -222,3 +173,32 @@ function initializeAreaArtifactsCarousel(areaId) {
         }
     }, 50);
 }
+
+// Helper function to initialize topic artifacts carousel
+function initializeTopicArtifactsCarousel(areaId, topicId) {
+    setTimeout(() => {
+        try {
+            const allArtifacts = window.allArtifacts || [];
+            
+            // Filter artifacts by this specific topic
+            const filteredArtifacts = allArtifacts.filter(artifact => 
+                artifact.topics && artifact.topics.includes(topicId)
+            );
+            
+            // Transform field names to match expected format
+            const transformedArtifacts = filteredArtifacts.map(artifact => ({
+                ...artifact,
+                areaTags: artifact.areas,
+                subAreaTags: artifact.topics,
+                sourceUrl: artifact.url
+            }));
+            
+            const carouselId = `${topicId}-artifacts-carousel`;
+            createArtifactCarousel(transformedArtifacts.length > 0 ? transformedArtifacts : getFeaturedArtifacts(), carouselId);
+        } catch (error) {
+            console.error(`Error creating carousel for ${topicId}:`, error);
+            const carouselId = `${topicId}-artifacts-carousel`;
+            createArtifactCarousel(getFeaturedArtifacts(), carouselId);
+        }
+    }, 50);
+}

js/utils/router.js

@@ -29,8 +29,10 @@ class Router {
     }
 
     init() {
-        // Handle initial page load
-        this.loadPage(window.location.pathname);
+        // Handle initial page load with hash support
+        const initialPath = window.location.pathname;
+        const initialHash = window.location.hash.substring(1);
+        this.loadPage(initialPath, initialHash);
         
         // Handle browser back/forward
         window.addEventListener('popstate', (e) => {
@@ -52,7 +54,6 @@ class Router {
         });
         
         // Handle initial hash if present
-        const initialHash = window.location.hash.substring(1);
         if (initialHash) {
             setTimeout(() => scrollToSection(initialHash), 200);
         }
@@ -61,7 +62,7 @@ class Router {
         this.initializeNavigation();
     }
 
-    async loadPage(path) {
+    async loadPage(path, topicFromHash = null) {
         // Parse path to support /area/topic format
         const pathParts = path.split('/').filter(p => p);
         let route, area, topic;
@@ -74,12 +75,18 @@ class Router {
             route = this.routes[path] || 'home';
             if (this.areas.includes(pathParts[0])) {
                 area = pathParts[0];
+                topic = topicFromHash; // Use topic from hash for area pages
             }
         } else if (pathParts.length === 2 && this.areas.includes(pathParts[0])) {
-            // Two segments: /efficiency/environment
+            // Two segments: /sustainability/climate - redirect to hash-based navigation
             area = pathParts[0];
             topic = pathParts[1];
-            route = area;
+            
+            // Redirect to new hash-based format
+            const newUrl = `/${area}#${topic}`;
+            window.history.replaceState({}, '', newUrl);
+            this.navigateToUrl(newUrl, false);
+            return;
         } else {
             // Unknown route, default to home
             route = 'home';
@@ -363,8 +370,13 @@ class Router {
             window.history.pushState({}, '', fullUrl);
         }
         
-        // Load page and then handle hash
-        this.loadPage(path).then(() => {
+        // Extract topic from hash for area pages
+        const pathParts = path.split('/').filter(p => p);
+        const isAreaPage = pathParts.length === 1 && this.areas.includes(pathParts[0]);
+        const topicFromHash = isAreaPage && hash ? hash : null;
+        
+        // Load page with topic from hash
+        this.loadPage(path, topicFromHash).then(() => {
             if (hash) {
                 setTimeout(() => scrollToSection(hash), 100);
             } else {