Add article thumbnails (first image, max 256x256, bounded by teaser height) to post cards

2026-08-28 14:02:11 +02:00
parent 1664e55e4e
commit 9a20dfa2e1
3 changed files with 55 additions and 2 deletions
@@ -101,6 +101,15 @@ function run() {
        return SHARE_BASE + "/" + encodeURIComponent("tag-" + slugifyTag(t));
    }

+    function firstImageSrc(a) {
+        try {
+            const m = String(a.getContent() || "").match(/<img[^>]+src="([^"]+)"/);
+            return m ? m[1] : "";
+        } catch (e) {
+            return "";
+        }
+    }
+
    function renderArticles(list) {
        const lines = [];
        for (const a of list) {
@@ -109,6 +118,7 @@ function run() {
            const summary = a.getLabelValue("summary") || "";
            const link = `${SHARE_BASE}/${encodeURIComponent(a.getLabelValue("shareAlias") || a.noteId)}`;
            const tags = tagList(a);
+            const thumb = firstImageSrc(a);

            lines.push('<article class="blog-post">');
            lines.push('  <header class="blog-post-header">');
@@ -118,8 +128,21 @@ function run() {
            if (cat) lines.push(`      <span class="blog-post-category">${escapeHtml(cat)}</span>`);
            lines.push('    </div>');
            lines.push('  </header>');
-            if (summary) lines.push(`  <p class="blog-post-summary">${escapeHtml(summary)}</p>`);
-            if (tags.length) {
+            if (summary || thumb) {
+                lines.push('  <div class="blog-post-inner">');
+                if (thumb) {
+                    lines.push(`    <a class="blog-thumb-link" href="${escapeHtml(link)}" tabindex="-1" aria-hidden="true">`);
+                    lines.push(`      <img class="blog-thumb" src="${escapeHtml(thumb)}" alt="" loading="lazy">`);
+                    lines.push('    </a>');
+                }
+                lines.push('    <div class="blog-post-body">');
+                if (summary) lines.push(`      <p class="blog-post-summary">${escapeHtml(summary)}</p>`);
+                if (tags.length) {
+                    lines.push('      <div class="blog-post-tags">' + tags.map(t => `<a class="tag" href="${tagHref(t)}">#${escapeHtml(t)}</a>`).join(" ") + '</div>');
+                }
+                lines.push('    </div>');
+                lines.push('  </div>');
+            } else if (tags.length) {
                lines.push('  <div class="blog-post-tags">' + tags.map(t => `<a class="tag" href="${tagHref(t)}">#${escapeHtml(t)}</a>`).join(" ") + '</div>');
            }
            lines.push('</article>');