<% // Post list item — MOBILE-FIRST. // // <768px (default): // Vertical stack — full-bleed 16:9 cover on top, content below. // Whole card is tappable (one big wrapping everything). // Active state: scale(0.985) + opacity dim. // // ≥768px (desktop): // v9 pattern — 120px square cover left, content right. // Hover state on cover. Tap-target stays large. const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : ''; const _external = post.external_url || null; const _href = _external || (_base + '/' + post.slug); const _ext = !!_external; const _src = post.source_name || ''; const _realCover = !!post.cover_image_url || !!post.cover_video_url; // Content-derived fallback (see post-tile.ejs): a C2S post's media lives in // its content, and the card fronts it from there. let _cVideo = null, _cPoster = null, _cImg = null, _cAudio = false, _cWave = null; if (!_realCover && post.content) { const vm = String(post.content).match(/]*\ssrc="([^"]+)"[^>]*>/i); if (vm) { _cVideo = vm[1]; const pm = vm[0].match(/poster="([^"]+)"/i); if (pm) _cPoster = pm[1]; } else { const im = String(post.content).match(/]*\ssrc="([^"]+)"/i); if (im) _cImg = im[1]; else { // An audio post (Robins vraag, 30-7): the upload leg drew a waveform // (data-poster on the tag); the card fronts it like a cover. const am = String(post.content).match(/]*>/i); if (am) { _cAudio = true; const wm = am[0].match(/data-poster="([^"]+)"/i); if (wm) _cWave = wm[1]; } } } } const _hasCover = _realCover || !!_cVideo || !!_cImg || !!_cWave; // A C2S post has no title: fall back to the post's own words, then to a // friendly type label instead of "(zonder titel)". let _title = post.title || ''; if (!_title && post.content) { const _txt = String(post.content).replace(/<[^>]*>/g, ' ').replace(/&[a-zA-Z#0-9]+;/g, ' ').replace(/\s+/g, ' ').trim(); if (_txt) _title = _txt.length > 64 ? _txt.slice(0, 63).replace(/\s+\S*$/, '') + '…' : _txt; } if (!_title) _title = _cAudio ? '♪ audio' : _cVideo ? '▶ video' : '(zonder titel)'; const _typeLabel = (post.type && post.type !== 'overig' && post.type !== 'post') ? post.type : ''; const _isPinned = !!post.pinned; const _isBoost = !!post.isBoost; const _isDraft = post.status && post.status !== 'published'; function _ddmmyyyy(iso) { if (!iso) return ''; const d = new Date(iso); if (isNaN(d.getTime())) return ''; const pad = n => String(n).padStart(2, '0'); return pad(d.getDate()) + '-' + pad(d.getMonth() + 1) + '-' + d.getFullYear(); } let _tags = []; if (post.tags) { if (Array.isArray(post.tags)) _tags = post.tags; else if (typeof post.tags === 'string') { try { const parsed = JSON.parse(post.tags); _tags = Array.isArray(parsed) ? parsed : post.tags.split(',').map(t => t.trim()).filter(Boolean); } catch (e) { _tags = post.tags.split(',').map(t => t.trim()).filter(Boolean); } } } %>

<% if (_hasCover) { %> target="_blank" rel="noopener"<% } else { %>hx-get="<%= _href %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="<%= _href %>" hx-indicator="#pcms-loading"<% } %> aria-label="<%= _title %>" tabindex="-1"> <% if (post.cover_image_url) { %>

data-ios-mp4="<%= post.cover_video_url %>"<% } %>> <% } else if (post.cover_video_url) { %>

<% } else if (_cVideo) { %>

<% } else if (_cImg) { %>

<% } else if (_cWave) { %>

<% } %> <% if (post.nsfw) { %><%- include('nsfw-veil', { cw: post.content_warning }) %><% } %> <% } else if (post.nsfw) { %> target="_blank" rel="noopener"<% } else { %>hx-get="<%= _href %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="<%= _href %>" hx-indicator="#pcms-loading"<% } %> aria-label="<%= _title %>" tabindex="-1"> <%- include('nsfw-veil', { cw: post.content_warning }) %> <% } %>

<% if (_isBoost) { %><% } else if (_isPinned) { %><% } %> <%= _ddmmyyyy(post.published_at || post.created_at) %> <% if (_src) { %>· via <%= _src %><% } %> <% if (_typeLabel) { %> · <%= _typeLabel.charAt(0).toUpperCase() + _typeLabel.slice(1) %> <% } %> <% if (_isDraft) { %> · concept <% } %>

target="_blank" rel="noopener"<% } else { %>hx-get="<%= _href %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="<%= _href %>" hx-indicator="#pcms-loading"<% } %>> <%= _title %>

<% if (post.excerpt) { %>

<%= post.excerpt %>

<% } %> <% if (_tags.length) { %> <% } %>