luke
d39cb3f3d4
Website: - Add persistent top nav across all pages - Add skip-to-content links, focus-visible styles, ARIA on audio player - Fix text contrast for WCAG AA compliance - Add 600px breakpoint, mobile typography scaling - Extract shared footer.js, player.js, episode.js components - Episode pagination (10 + Load More), featured clip dedup - Worker meta injection for social crawler OG tags - Unify Plausible analytics proxy across all pages - Sanitize innerHTML for XSS safety - Custom 404 page, enhanced llms.txt, fix sitemap - Bump cache versions to v=4 Reaper: - Add dual silence threshold: 2.5s for speaker transitions, 6s for same-speaker gaps Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
96 lines
3.0 KiB
JavaScript
96 lines
3.0 KiB
JavaScript
const CLIPS_JSON_URL = '/data/clips.json';
|
|
|
|
const clipPlaySVG = '<svg viewBox="0 0 24 24" fill="#fff"><path d="M8 5v14l11-7z"/></svg>';
|
|
|
|
function escapeHTML(str) {
|
|
const el = document.createElement('span');
|
|
el.textContent = str;
|
|
return el.innerHTML;
|
|
}
|
|
|
|
function renderClipCard(clip, featured) {
|
|
const card = document.createElement('div');
|
|
card.className = 'clip-card' + (featured ? ' clip-card-featured' : '');
|
|
|
|
const youtubeId = (clip.youtube_id || '').replace(/[^a-zA-Z0-9_-]/g, '');
|
|
if (youtubeId) card.dataset.youtubeId = youtubeId;
|
|
const hasVideo = !!youtubeId;
|
|
const epLabel = clip.episode_number ? `Episode ${Number(clip.episode_number)}` : '';
|
|
const title = escapeHTML(clip.title || '');
|
|
const desc = escapeHTML(clip.description || '');
|
|
|
|
const thumbImg = clip.thumbnail && /^[\w\/.-]+$/.test(clip.thumbnail)
|
|
? `<img class="clip-card-thumb" src="/${clip.thumbnail}" alt="${title}" loading="lazy">`
|
|
: '';
|
|
|
|
card.innerHTML = `
|
|
<div class="clip-card-inner">
|
|
${thumbImg}
|
|
<div class="clip-card-overlay">
|
|
<span class="clip-episode-label">${epLabel}</span>
|
|
<h3 class="clip-card-title">${title}</h3>
|
|
<p class="clip-card-desc">${desc}</p>
|
|
${hasVideo ? `<button class="clip-play-btn" aria-label="Play clip">${clipPlaySVG}</button>` : ''}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
if (hasVideo) {
|
|
card.querySelector('.clip-play-btn').addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const inner = card.querySelector('.clip-card-inner');
|
|
inner.innerHTML = `<iframe src="https://www.youtube-nocookie.com/embed/${youtubeId}?autoplay=1&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>`;
|
|
});
|
|
}
|
|
|
|
return card;
|
|
}
|
|
|
|
async function fetchClips() {
|
|
try {
|
|
const res = await fetch(CLIPS_JSON_URL);
|
|
if (!res.ok) throw new Error('Failed to fetch clips');
|
|
return await res.json();
|
|
} catch (err) {
|
|
console.error('Error loading clips:', err);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
async function initClipsPage() {
|
|
const clips = await fetchClips();
|
|
if (!clips.length) return;
|
|
|
|
const featuredContainer = document.querySelector('.clips-featured');
|
|
const gridContainer = document.querySelector('.clips-grid');
|
|
|
|
if (featuredContainer) {
|
|
clips.filter(c => c.featured).forEach(clip => {
|
|
featuredContainer.appendChild(renderClipCard(clip, true));
|
|
});
|
|
}
|
|
|
|
if (gridContainer) {
|
|
clips.filter(c => !c.featured).forEach(clip => {
|
|
gridContainer.appendChild(renderClipCard(clip, false));
|
|
});
|
|
}
|
|
}
|
|
|
|
async function renderFeaturedClipsInline(containerId) {
|
|
const container = document.getElementById(containerId);
|
|
if (!container) return;
|
|
|
|
const clips = await fetchClips();
|
|
const featured = clips.filter(c => c.featured);
|
|
|
|
featured.forEach(clip => {
|
|
container.appendChild(renderClipCard(clip, true));
|
|
});
|
|
}
|
|
|
|
// Auto-init if clips page containers exist
|
|
if (document.querySelector('.clips-featured') || document.querySelector('.clips-grid')) {
|
|
initClipsPage();
|
|
}
|