Upload 3 files

js/pages/AreaPage.js

@@ -150,13 +150,50 @@ export function renderAreaPage(areaId) {
         init: () => {
             // Initialize artifact carousels for each sub-area with a small delay
             // to ensure DOM elements are fully rendered
-            setTimeout(() => {
-                subAreas.forEach(subArea => {
-                    // For now, show all artifacts in each carousel
-                    // Later this will be filtered by the backend
-                    const carouselId = `${subArea.id}-artifacts-carousel`;
-                    createArtifactCarousel(featuredArtifacts, carouselId);
-                });
+            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}`);
+                    }
+                    const allArtifacts = await response.json();
+                    console.log('Artifacts loaded:', allArtifacts.length, 'items');
+                    
+                    subAreas.forEach(subArea => {
+                        try {
+                            // Filter artifacts by topics (subAreaTags in JSON)
+                            const filteredArtifacts = allArtifacts.filter(artifact => 
+                                artifact.topics && artifact.topics.includes(subArea.id)
+                            );
+                            
+                            // Transform field names to match expected format
+                            const transformedArtifacts = filteredArtifacts.map(artifact => ({
+                                ...artifact,
+                                areaTags: artifact.areas,
+                                subAreaTags: artifact.topics,
+                                sourceUrl: artifact.url
+                            }));
+                            
+                            console.log(`Filtered artifacts for ${subArea.id}:`, transformedArtifacts.length);
+                            const carouselId = `${subArea.id}-artifacts-carousel`;
+                            createArtifactCarousel(transformedArtifacts, carouselId);
+                        } catch (error) {
+                            console.error(`Error creating carousel for ${subArea.id}:`, error);
+                            // Fallback to featured artifacts if filtering fails
+                            const carouselId = `${subArea.id}-artifacts-carousel`;
+                            createArtifactCarousel(featuredArtifacts, carouselId);
+                        }
+                    });
+                } catch (error) {
+                    console.error('Error loading artifacts from JSON:', error);
+                    // Fallback to featured artifacts for all carousels
+                    subAreas.forEach(subArea => {
+                        const carouselId = `${subArea.id}-artifacts-carousel`;
+                        createArtifactCarousel(featuredArtifacts, carouselId);
+                    });
+                }
             }, 50);
             
             // Initialize resource cards

js/pages/HomePage.js

@@ -148,7 +148,7 @@ function getAreaShortDescription(areaId) {
         efficiency: 'Costs, energy, sustainability',
         personal: 'Personal interactions, agency',
         rights: 'Legal frameworks, compliance',
-        ecosystems: 'Markets, labor, power dynamics'
+        ecosystems: 'Markets, labor, and adoption dynamics'
     };
     return descriptions[areaId] || '';
 }