feat: optional image captions using markdown title attribute

Images with title attribute are wrapped in <figure> with <figcaption>.
Standard markdown syntax: ![alt](image.png "caption text")
Title attribute kept on img for tooltips.

Author: JohannesHoppe

shared/jekyll-markdown-parser.spec.ts

@@ -66,7 +66,7 @@ export <span class="hljs-class"><span class="hljs-keyword">class</span> <span cl
 &lt;/<span class="hljs-symbol">div</span>&gt;
 </code></pre><h2 id="images">Images</h2>
 <p>Local image: <img src="https://example.com/blog/my-post/screenshot.png" alt="Screenshot"></p>
-<p>Image with title: <img src="https://example.com/blog/my-post/logo.png" alt="Logo" title="Company Logo"></p>
+<p>Image with title: <figure><img src="https://example.com/blog/my-post/logo.png" alt="Logo" title="Company Logo"><figcaption>Company Logo</figcaption></figure></p>
 <p>External image: <img src="https://example.com/external.png" alt="External"></p>
 <h2 id="links">Links</h2>
 <p>Check out <a href="https://angular-buch.com/docs">our documentation</a> for more info.</p>
@@ -425,6 +425,7 @@ describe('JekyllMarkdownParser', () => {
       // === Images with URL transformation ===
       expect(html).toContain(`src="${baseUrl}screenshot.png"`);
       expect(html).toContain(`src="${baseUrl}logo.png"`);
+      expect(html).toContain('<figcaption>Company Logo</figcaption>');
       expect(html).toContain('title="Company Logo"');
       expect(html).toContain('src="https://example.com/external.png"'); // external unchanged
 
@@ -525,6 +526,8 @@ title: Test
       const parser = new JekyllMarkdownParser(baseUrl);
       const result = parser.parse(input);
 
+      expect(result.html).toContain('<figure>');
+      expect(result.html).toContain('<figcaption>Image Title</figcaption>');
       expect(result.html).toContain('title="Image Title"');
       expect(result.html).toContain(`src="${baseUrl}image.png"`);
       expect(result.html).toContain('alt="Alt text"');

shared/jekyll-markdown-parser.ts

@@ -103,6 +103,10 @@ export class JekyllMarkdownParser {
    *
    * NOTE: In marked v17, the token contains RAW unescaped text.
    * We MUST escape special characters to prevent broken HTML.
+   *
+   * FEATURE: If a title is provided, the image is wrapped in a <figure> element
+   * with a <figcaption> containing the title text. This allows optional captions
+   * using standard Markdown syntax: ![alt](image.png "caption text")
    */
   private imageRenderer(token: Tokens.Image): string {
     let src = token.href;
@@ -112,12 +116,14 @@ export class JekyllMarkdownParser {
     }
 
     const escapedAlt = this.escapeHtml(token.text);
-    let out = `<img src="${src}" alt="${escapedAlt}"`;
+
     if (token.title) {
-      out += ` title="${this.escapeHtml(token.title)}"`;
+      const escapedTitle = this.escapeHtml(token.title);
+      const imgTag = `<img src="${src}" alt="${escapedAlt}" title="${escapedTitle}">`;
+      return `<figure>${imgTag}<figcaption>${escapedTitle}</figcaption></figure>`;
     }
-    out += '>';
-    return out;
+
+    return `<img src="${src}" alt="${escapedAlt}">`;
   }
 
   // Transform relative paths in raw HTML <img> tags to absolute URLs