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
) : (
;
+
+function injectDimensions(html: string, dims?: ImageDims): string {
+ if (!dims) return html;
+ return html.replace(/
![]()
]*?)\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 `

`;
+ });
+}
+
+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
;
}
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';
}