// pages/AreaPage.js - Single-topic view for area pages import { getFeaturedArtifacts } from '../init.js'; import { createArtifactCarousel } from '../components/Carousel.js'; import { renderAreaNavigation } from '../components/PageNavigation.js'; import { renderContentSection, renderOpennessCallout } from '../components/ContentSection.js'; import { initializeStickyNavigation } from '../utils/stickyNavigation.js'; // Use global areasData (loaded in index.html ) const areasData = window.areasData; export function renderAreaPage(areaId, topicId = null) { const area = areasData[areaId]; if (!area) { return { content: `

Area not found

`, init: () => {} }; } // Always render full page with all topics (single scrollable page) return renderFullAreaPage(area, areaId, topicId); } function renderFullAreaPage(area, areaId, initialTopicId = null) { // Get topics as array const topics = Object.entries(area.topics).map(([key, value]) => ({ id: key, name: typeof value === 'string' ? value : value.name, navName: typeof value === 'string' ? value : (value.navName || value.name), description: typeof value === 'string' ? '' : (value.description || ''), color: typeof value === 'object' ? value.color : 'bg-gray-200 text-gray-700' })); const content = `
${renderAreaNavigation(areaId, area.navTitle, topics, initialTopicId)} ${renderContentSection('overview', `

${area.title}

${area.description.paragraphs ? area.description.paragraphs.map(p => `

${p}

`).join('') : `

${area.description.short || area.description}

` }

Topics in this area:

${topics.map(topic => { // Extract colors from topic.color and enhance them let bgColor = 'bg-gray-200'; let textColor = 'text-gray-800'; let borderColor = 'border-gray-300'; if (topic.color) { const bgMatch = topic.color.match(/bg-(\w+)-(\d+)/); const textMatch = topic.color.match(/text-(\w+)-(\d+)/); if (bgMatch) { const colorName = bgMatch[1]; const shade = parseInt(bgMatch[2]); // Increase saturation: 100 → 200, 200 → 300, etc. const newShade = Math.min(shade + 100, 300); bgColor = `bg-${colorName}-${newShade}`; borderColor = `border-${colorName}-${Math.min(newShade + 100, 400)}`; } if (textMatch) { const colorName = textMatch[1]; textColor = `text-${colorName}-900`; } } // Get short description for tooltip const shortDesc = topic.description?.short || (typeof topic.description === 'string' ? topic.description.split('.')[0] + '.' : ''); const titleAttr = shortDesc ? ` title="${shortDesc}"` : ''; return ` ${topic.navName} `; }).join('')}

Research and Resources:

`)} ${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); }); initializeStickyNavigation('nav-container'); } }; } 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}

`).join('') : (topic.description?.short || topic.description || ''); return renderContentSection(topicId, `
${area.navTitle} › ${topicName}

${topic.name}

${topicDescription ? `
${topicDescription}
` : ''}

Related Research & Resources

`); } // Helper function to initialize area artifacts carousel function initializeAreaArtifactsCarousel(areaId) { // Wait for DOM to be ready setTimeout(() => { try { const allArtifacts = window.allArtifacts || []; // Filter artifacts by area const filteredArtifacts = allArtifacts.filter(artifact => artifact.areas && artifact.areas.includes(areaId) ); // Transform field names to match what the carousel expects const transformedArtifacts = filteredArtifacts.map(artifact => ({ ...artifact, areaTags: artifact.areas, subAreaTags: artifact.topics, sourceUrl: artifact.url })); const carouselId = `area-artifacts-carousel-${areaId}`; createArtifactCarousel(transformedArtifacts.length > 0 ? transformedArtifacts : getFeaturedArtifacts(), carouselId); } catch (error) { console.error(`Error creating carousel for area ${areaId}:`, error); const carouselId = `area-artifacts-carousel-${areaId}`; createArtifactCarousel(getFeaturedArtifacts(), carouselId); } }, 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); }