// pages/ResourcesPage.js - Resources page functionality for SPA import { pressMentions } from '../data/press.js'; import { renderTagSet } from '../utils/tags.js'; import { renderContentSection } from '../components/ContentSection.js'; // Use global data (loaded in index.html ) const areasData = window.areasData; const homeBackgroundImage = window.homeBackgroundImage; export function renderResourcesPage() { const content = ` ${renderContentSection('press-mentions', `

Press Mentions

${pressMentions.map((article, index) => { // Get the primary area for this article const primaryArea = areasData[article.areaTags[0]]; const primaryColor = primaryArea?.primaryColor || 'gray'; // Determine alignment (alternating) const isLeftAligned = index % 2 === 0; const alignment = isLeftAligned ? 'justify-start' : 'justify-end'; const borderSide = isLeftAligned ? 'border-l-2' : 'border-r-2'; const borderColor = `border-${primaryColor}-200`; // Format date const formattedDate = new Date(article.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }); // Generate tags using the utility const { areaTagsHtml, topicTagsHtml: subAreaTagsHtml } = renderTagSet(article.areaTags, article.subAreaTags); return `

"${article.title}"

${article.source} ${formattedDate}

${areaTagsHtml} ${subAreaTagsHtml}

`; }).join('')}

`, { className: 'mb-12' })} `; return { content, init: () => { // Initialize background attribution initializeResourcesBackgroundAttribution(); } }; } function initializeResourcesBackgroundAttribution() { const backgroundContainer = document.getElementById('resources-background-container'); const attribution = document.getElementById('resources-bg-attribution'); if (!backgroundContainer || !attribution) { return; } // Show attribution on hover over the background container backgroundContainer.addEventListener('mouseenter', () => { attribution.style.opacity = '1'; }); backgroundContainer.addEventListener('mouseleave', () => { attribution.style.opacity = '0'; }); }