|
|
|
|
|
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'; |
|
|
}); |
|
|
} |
|
|
|
