| |
| import { pressMentions } from '../data/press.js'; |
| import { renderTagSet } from '../utils/tags.js'; |
| import { renderContentSection } from '../components/ContentSection.js'; |
|
|
| |
| const areasData = window.areasData; |
| const homeBackgroundImage = window.homeBackgroundImage; |
|
|
| export function renderResourcesPage() { |
| const content = ` |
| ${renderContentSection('press-mentions', ` |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">Press Mentions</h2> |
| |
| <div class="space-y-3"> |
| ${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 ` |
| <!-- Press Article ${index + 1} - ${isLeftAligned ? 'Left' : 'Right'} aligned --> |
| <div class="flex items-center ${alignment}"> |
| <div class="flex-1 max-w-2xl"> |
| <div class="bg-gray-50 rounded-lg p-4 ${borderSide} ${borderColor} relative overflow-hidden"> |
| <!-- Background image for this article --> |
| <div class="absolute inset-0 opacity-5 pointer-events-none"> |
| <img src="/images/${primaryArea?.image || 'ai.png'}" alt="" class="w-full h-full object-cover"> |
| </div> |
| |
| <div class="relative z-10"> |
| <h3 class="text-base font-medium text-gray-900 mb-2"> |
| <a href="${article.sourceUrl}" target="_blank" class="text-gray-900 hover:text-blue-600 transition-colors"> |
| "${article.title}" |
| </a> |
| </h3> |
| |
| <div class="flex items-center text-sm text-gray-600 mb-2"> |
| <span class="bg-gray-600 text-white px-3 py-1 rounded-md text-xs font-semibold mr-3 shadow-sm">${article.source}</span> |
| <span class="mr-3">${formattedDate}</span> |
| <a href="${article.sourceUrl}" target="_blank" class="text-gray-400 hover:text-blue-600 transition-colors"> |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> |
| </svg> |
| </a> |
| </div> |
| |
| <!-- Tags --> |
| <div class="flex flex-wrap gap-1"> |
| ${areaTagsHtml} |
| ${subAreaTagsHtml} |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| `; |
| }).join('')} |
| </div> |
| `, { className: 'mb-12' })} |
| `; |
|
|
| return { |
| content, |
| init: () => { |
| |
| initializeResourcesBackgroundAttribution(); |
| } |
| }; |
| } |
|
|
| function initializeResourcesBackgroundAttribution() { |
| const backgroundContainer = document.getElementById('resources-background-container'); |
| const attribution = document.getElementById('resources-bg-attribution'); |
| |
| if (!backgroundContainer || !attribution) { |
| return; |
| } |
|
|
| |
| backgroundContainer.addEventListener('mouseenter', () => { |
| attribution.style.opacity = '1'; |
| }); |
|
|
| backgroundContainer.addEventListener('mouseleave', () => { |
| attribution.style.opacity = '0'; |
| }); |
| } |
|
|
