File size: 5,693 Bytes
930894d 8ed13f7 930894d 8ed13f7 930894d 8ed13f7 930894d cddcbaf 930894d 8ed13f7 930894d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
// 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 <head>)
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: () => {
// 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';
});
}
|