<% // @license MIT // @copyright 2026 Mickaël Canouil // @author Mickaël Canouil

function renderThumb(item, klass) { const inner = item.image ? <img src="${item.image}" alt="" loading="lazy"> : <span class="blog-thumb-fallback" aria-hidden="true">M</span>; return <a class="${klass}" href="${item.path}" aria-hidden="true" tabindex="-1">${inner}</a>; }

function renderCategories(item) { if (!item.categories || !item.categories.length) return ““; const chips = item.categories .map((c) => <span class="blog-category" onclick="window.quartoListingCategory('${utils.b64encode(c)}'); return false;">${c}</span>) .join(”“); return <div class="blog-categories">${chips}</div>; } %>

<% items.forEach((item, i) => { %> <% if (i === 0) { %>
> <%= renderThumb(item, "blog-hero-thumb") %>
Latest

<%= item.title %>

<% if (item.description) { %>

<%= item.description %>

<% } %> <%= renderCategories(item) %>
<% } else { %>
> <%= renderThumb(item, "blog-thumb") %>

<%= item.title %>

<% if (item.description) { %>

<%= item.description %>

<% } %> <%= renderCategories(item) %>
<% } %> <% }) %>
Back to top