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

Add advertisements to articles every three paragraphs

Browse Source 
Update client-side rendering logic in `article.tsx` to split article content into segments and insert `InArticleAd` components between them, with an advertisement appearing every 3 content blocks.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 17c64ef5-e314-45f6-800b-ff02825074f0
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/OPD8Ro3
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-08 07:13:49 +00:00
parent 57d7e80aa7
commit 82aa204b2c
1 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/pages/article.tsx
View File

@ -298,9 +298,11 @@ export default function ArticlePage() {
{(() => {
const sanitized = sanitizeContent(article.content);
const blocks = sanitized.split(/(?=<(?:p|h[2-4]|div)[\s>])/i).filter(Boolean);
const midPoint = Math.max(2, Math.floor(blocks.length / 2));
const firstHalf = blocks.slice(0, midPoint).join("");
const secondHalf = blocks.slice(midPoint).join("");
const AD_INTERVAL = 3;
const segments: string[] = [];
for (let i = 0; i < blocks.length; i += AD_INTERVAL) {
segments.push(blocks.slice(i, i + AD_INTERVAL).join(""));
}
const proseClasses = `prose prose-base dark:prose-invert max-w-none
prose-headings:text-foreground prose-headings:font-semibold prose-headings:text-lg
prose-p:text-foreground/85 prose-p:leading-relaxed prose-p:text-[15px]
@ -324,17 +326,16 @@ export default function ArticlePage() {
}
});
}}>
{segments.map((html, idx) => (
<div key={idx}>
<article
className={proseClasses}
dangerouslySetInnerHTML={{ __html: firstHalf }}
data-testid="article-content"
/>
<InArticleAd />
<article
className={proseClasses}
dangerouslySetInnerHTML={{ __html: secondHalf }}
data-testid="article-content-continued"
dangerouslySetInnerHTML={{ __html: html }}
data-testid={idx === 0 ? "article-content" : `article-content-${idx}`}
/>
{idx < segments.length - 1 && <InArticleAd />}
</div>
))}
</div>
);
})()}