From 2ace527c9f63f40b23213ca9aab89dbf25fec184 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Thu, 14 May 2026 18:07:08 +0200
Subject: [PATCH] added image size

---
 frontend/src/components/react/PostList.tsx |  6 ++++++
 frontend/src/lib/markdown.ts               | 18 ++++++++++++++++--
 frontend/src/pages/index.astro             |  2 ++
 frontend/src/pages/posts/[slug].astro      |  5 +++--
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/react/PostList.tsx b/frontend/src/components/react/PostList.tsx
index 5c3e8f1..9688bdf 100644
--- a/frontend/src/components/react/PostList.tsx
+++ b/frontend/src/components/react/PostList.tsx
@@ -6,6 +6,8 @@ const PAGE_SIZE = 9;
 interface CoverImage {
   url: string;
   alt: string;
+  w?: number;
+  h?: number;
 }
 
 interface Post {
@@ -135,7 +137,11 @@ export default function PostList({ posts: initialPosts, isAdmin = false }: Props
                   <img
                     src={post.cover_image!.url}
                     alt={post.cover_image!.alt || displayTitle}
+                    width={post.cover_image!.w}
+                    height={post.cover_image!.h}
                     loading={idx < 3 ? 'eager' : 'lazy'}
+                    decoding={idx === 0 ? 'sync' : 'async'}
+                    fetchPriority={idx === 0 ? 'high' : undefined}
                   />
                 ) : (
                   <div
diff --git a/frontend/src/lib/markdown.ts b/frontend/src/lib/markdown.ts
index 75d0327..dd01406 100644
--- a/frontend/src/lib/markdown.ts
+++ b/frontend/src/lib/markdown.ts
@@ -79,8 +79,22 @@ const KATEX_TAGS = [
   'mpadded', 'menclose',
 ];
 
-export function renderMarkdown(src: string): string {
-  const html = renderer.parse(src, { async: false }) as string;
+export interface ImageDim { w: number; h: number }
+export type ImageDims = Record<string, ImageDim>;
+
+function injectDimensions(html: string, dims?: ImageDims): string {
+  if (!dims) return html;
+  return html.replace(/<img\s+src="([^"]+)"([^>]*?)\s*\/?>/g, (match, src, rest) => {
+    const d = dims[src];
+    if (!d) return match;
+    if (/\swidth\s*=/.test(rest) || /\sheight\s*=/.test(rest)) return match;
+    return `<img src="${src}" width="${d.w}" height="${d.h}"${rest} />`;
+  });
+}
+
+export function renderMarkdown(src: string, dims?: ImageDims): string {
+  let html = renderer.parse(src, { async: false }) as string;
+  html = injectDimensions(html, dims);
   return DOMPurify.sanitize(html, {
     ADD_TAGS: [...KATEX_TAGS, 'figure', 'figcaption'],
     ADD_ATTR: ['aria-hidden', 'style', 'id', 'class', 'encoding', 'mathvariant', 'displaystyle', 'scriptlevel', 'loading'],
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index f1dae2f..0991fef 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -9,6 +9,8 @@ const API_URL = process.env.PUBLIC_API_URL || 'http://localhost:3000';
 interface CoverImage {
 	url: string;
 	alt: string;
+	w?: number;
+	h?: number;
 }
 
 interface Post {
diff --git a/frontend/src/pages/posts/[slug].astro b/frontend/src/pages/posts/[slug].astro
index ad255d7..f5f0551 100644
--- a/frontend/src/pages/posts/[slug].astro
+++ b/frontend/src/pages/posts/[slug].astro
@@ -8,7 +8,7 @@ import { renderMarkdown } from '../../lib/markdown';
 const { slug } = Astro.params;
 const API_URL = (typeof process !== 'undefined' ? process.env.PUBLIC_API_URL : import.meta.env.PUBLIC_API_URL) || 'http://localhost:3000';
 
-interface CoverImage { url: string; alt: string }
+interface CoverImage { url: string; alt: string; w?: number; h?: number }
 interface PostNeighbor {
   slug: string;
   title?: string;
@@ -26,6 +26,7 @@ interface PostDetail {
   image_count: number;
   prev?: PostNeighbor;
   next?: PostNeighbor;
+  dimensions?: Record<string, { w: number; h: number }>;
 }
 
 function formatDate(d: string) {
@@ -45,7 +46,7 @@ try {
   const postRes = await fetch(`${API_URL}/api/posts/${encodeURIComponent(slug ?? '')}`);
   if (postRes.ok) {
     post = await postRes.json();
-    html = renderMarkdown(post!.content);
+    html = renderMarkdown(post!.content, post!.dimensions);
   } else {
     error = 'Work not found in the catalogue';
   }