sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clanek: napis pod sliko stoji tik pod naslovnico, ne za prvim oglasom

Browse Source
This commit is contained in:
folx bot
2026-08-29 21:32:01 +02:00
parent b9b2a6c1f2
commit fd9121e8db
1 changed files with 36 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/article.tsx
+36 -11
View File
@@ -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 = /<p[^>]*>\s*(?:<em>)?\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() {
</Link>
{article.coverImage && (
<div className="relative overflow-hidden rounded-md mb-5 max-h-[420px]">
<img
src={article.coverImage}
alt={article.title}
className="w-full h-full object-cover"
style={{ maxHeight: "420px", objectPosition: objectPositionFor(article.coverImage, focalPoints) }}
data-testid="img-article-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
</div>
<figure className="mb-5">
<div className="relative overflow-hidden rounded-md max-h-[420px]">
<img
src={article.coverImage}
alt={article.title}
className="w-full h-full object-cover"
style={{ maxHeight: "420px", objectPosition: objectPositionFor(article.coverImage, focalPoints) }}
data-testid="img-article-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
</div>
{coverCaption && (
<figcaption
className="mt-2 text-xs text-muted-foreground leading-snug [&_p]:m-0 [&_em]:not-italic"
data-testid="text-cover-caption"
dangerouslySetInnerHTML={{ __html: sanitizeContent(coverCaption) }}
/>
)}
</figure>
)}
<div className="mb-5">
@@ -388,7 +413,7 @@ export default function ArticlePage() {
<InContentDisplayAd />
{(() => {
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[] = [];