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

Place ads in the middle of articles for better visibility

Browse Source 
Modify the article display logic to split content and insert an AdSense InArticleAd component in the middle of the article body.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 22f71caf-1d79-45de-9f19-6c2e31b1cfff
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/VgutZ7W
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-01 18:40:33 +00:00
parent 64edf696ff
commit 39f825581d
1 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@ import Header from "@/components/header";
import Footer from "@/components/footer"; import Footer from "@/components/footer";
import { InArticleAd } from "@/components/adsense"; import { InArticleAd } from "@/components/adsense";
import DOMPurify from "dompurify"; import DOMPurify from "dompurify";
import { useEffect } from "react"; import { useEffect, useMemo } from "react";
const ALLOWED_IFRAME_DOMAINS = [ const ALLOWED_IFRAME_DOMAINS = [
"iframe.mediadelivery.net", "iframe.mediadelivery.net",
@ -201,8 +201,13 @@ export default function ArticlePage() {
</div> </div>
</div> </div>
<article {(() => {
className="prose prose-lg dark:prose-invert max-w-none 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 proseClasses = `prose prose-lg dark:prose-invert max-w-none
prose-headings:text-foreground prose-headings:font-semibold prose-headings:text-foreground prose-headings:font-semibold
prose-p:text-foreground/85 prose-p:leading-relaxed prose-p:text-foreground/85 prose-p:leading-relaxed
prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-a:text-primary prose-a:no-underline hover:prose-a:underline
@ -211,12 +216,23 @@ export default function ArticlePage() {
[&_iframe]:rounded-md [&_iframe]:my-6 [&_iframe]:max-w-full [&_iframe]:rounded-md [&_iframe]:my-6 [&_iframe]:max-w-full
[&_div[style]]:flex [&_div[style]]:justify-center [&_div[style]]:flex [&_div[style]]:justify-center
[&_blockquote:not(.instagram-media)]:border-l-primary [&_blockquote:not(.instagram-media)]:bg-accent/50 [&_blockquote:not(.instagram-media)]:rounded-r-md [&_blockquote:not(.instagram-media)]:py-1 [&_blockquote:not(.instagram-media)]:border-l-primary [&_blockquote:not(.instagram-media)]:bg-accent/50 [&_blockquote:not(.instagram-media)]:rounded-r-md [&_blockquote:not(.instagram-media)]:py-1
[&_.instagram-media]:!bg-transparent [&_.instagram-media]:!border-0 [&_.instagram-media]:!shadow-none [&_.instagram-media]:!p-0 [&_.instagram-media]:mx-auto" [&_.instagram-media]:!bg-transparent [&_.instagram-media]:!border-0 [&_.instagram-media]:!shadow-none [&_.instagram-media]:!p-0 [&_.instagram-media]:mx-auto`;
dangerouslySetInnerHTML={{ __html: sanitizeContent(article.content) }} return (
data-testid="article-content" <>
/> <article
className={proseClasses}
<InArticleAd /> dangerouslySetInnerHTML={{ __html: firstHalf }}
data-testid="article-content"
/>
<InArticleAd />
<article
className={proseClasses}
dangerouslySetInnerHTML={{ __html: secondHalf }}
data-testid="article-content-continued"
/>
</>
);
})()}
<RelatedArticles currentSlug={slug || ""} /> <RelatedArticles currentSlug={slug || ""} />
</main> </main>