diff --git a/client/src/pages/article.tsx b/client/src/pages/article.tsx index dc740d5..9841546 100644 --- a/client/src/pages/article.tsx +++ b/client/src/pages/article.tsx @@ -28,6 +28,17 @@ const ALLOWED_IFRAME_DOMAINS = [ "player.vimeo.com", ]; +/** Napis pod sliko (»Auf dem Bild: …« / »Foto: …«) locimo od besedila, da stoji + * tik pod naslovnico in ne sele za prvim oglasom. */ +function splitCaption(html: string): { caption: string; body: string } { + const re = /]*>\s*(?:)?\s*(?:Auf dem Bild|Foto)\s*:[\s\S]*?<\/p>/gi; + const found = html.match(re); + if (!found || found.length === 0) return { caption: "", body: html }; + let body = html; + for (const f of found) body = body.replace(f, ""); + return { caption: found.join(" "), body }; +} + function sanitizeContent(html: string): string { return DOMPurify.sanitize(html, { ADD_TAGS: ["iframe", "blockquote"], @@ -138,6 +149,11 @@ export default function ArticlePage() { if (targetUrl) navigate(targetUrl, { replace: true }); }, [targetUrl, navigate]); + const { caption: coverCaption, body: articleBody } = useMemo( + () => splitCaption(article?.content || ""), + [article?.content], + ); + const articleUrl = article ? `${window.location.origin}/article/${article.slug}` : ""; const articleImage = article?.coverImage ? (article.coverImage.startsWith("http") ? article.coverImage : `${window.location.origin}${article.coverImage}`) @@ -338,16 +354,25 @@ export default function ArticlePage() { {article.coverImage && ( -
- {article.title} -
-
+
+
+ {article.title} +
+
+ {coverCaption && ( +
+ )} +
)}
@@ -388,7 +413,7 @@ export default function ArticlePage() { {(() => { - const sanitized = sanitizeContent(article.content); + const sanitized = sanitizeContent(articleBody || article.content); const blocks = sanitized.split(/(?=<(?:p|h[2-4]|div)[\s>])/i).filter(Boolean); const AD_INTERVAL = isMobile ? 2 : 3; const segments: string[] = [];