Thumbnails: prefer *_thumb child note, fallback to first image; round embedded images and inline code; theme figcaptions

README.md

@@ -27,7 +27,9 @@ no external dependencies (except `highlight.js`, vendored in `lib/`).
 - Gruvbox light/dark theme for the share, with a theme toggle in the header.
 - Blog index, category pages, sub-categories, tags and tag overview.
 - **Article thumbnails**: each post card shows the first image of the article on the left
-  (max 256×256, bounded by the teaser height), summary on the right, lazy-loaded.
+  (bounded by the teaser height), summary on the right, lazy-loaded. If an article has a child
+  note named `*_thumb.*` (e.g. `ngc281_thumb.jpg`), that image is used instead – ideal for
+  serving small pre-made thumbnails.
 - **Pagination**: 10 posts per page on the index and category pages, with prev/next
   navigation between the pages; article prev/next links stay within the article's category.
 - Article metadata: date, category, summary, tags, prev/next navigation, reading time.

blog_generator.js

@@ -101,7 +101,11 @@ function run() {
         return SHARE_BASE + "/" + encodeURIComponent("tag-" + slugifyTag(t));
     }
 
-    function firstImageSrc(a) {
+    function thumbSrc(a) {
+        try {
+            const thumbs = (a.getChildNotes() || []).filter(n => /_thumb\.[A-Za-z0-9]+$/i.test(n.title));
+            if (thumbs.length) return "api/notes/" + thumbs[0].noteId + "/download";
+        } catch (e) {}
         try {
             const m = String(a.getContent() || "").match(/<img[^>]+src="([^"]+)"/);
             return m ? m[1] : "";
@@ -118,7 +122,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);
+            const thumb = thumbSrc(a);
 
             lines.push('<article class="blog-post">');
             lines.push('  <header class="blog-post-header">');

theme/blog_share_theme.css

@@ -780,6 +780,8 @@ html.theme-light {
     background-color: #3c3836;
     color: #ebdbb2;
     border-color: #504945;
+    border-radius: 4px;
+    padding: 0.1em 0.35em;
 }
 
 html.theme-light .ck-content pre,
@@ -796,6 +798,21 @@ html.theme-light #content code {
     border-color: #bdae93;
 }
 
+/* ---------- Eingebettete Bilder: Radius wie Inline-Code ---------- */
+#content figure img,
+#content img:not(.blog-thumb) {
+    border-radius: 4px;
+}
+
+/* ---------- Bildunterschriften (Gruvbox) ---------- */
+#content figcaption {
+    font-size: 0.85em;
+    font-style: italic;
+    color: var(--text-menu);
+    text-align: center;
+    margin-top: 6px;
+}
+
 .hljs {
     background: #282828;
     color: #ebdbb2;