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

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

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