From 82aa204b2c07e58991d96ae2e4d3d5c80c4067c1 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sun, 8 Mar 2026 07:13:49 +0000
Subject: [PATCH] Add advertisements to articles every three paragraphs

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
---
 client/src/pages/article.tsx | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/client/src/pages/article.tsx b/client/src/pages/article.tsx
index b99f327..f32a546 100644
--- a/client/src/pages/article.tsx
+++ b/client/src/pages/article.tsx
@@ -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() {
                 }
               });
             }}>
-              <article
-                className={proseClasses}
-                dangerouslySetInnerHTML={{ __html: firstHalf }}
-                data-testid="article-content"
-              />
-              <InArticleAd />
-              <article
-                className={proseClasses}
-                dangerouslySetInnerHTML={{ __html: secondHalf }}
-                data-testid="article-content-continued"
-              />
+              {segments.map((html, idx) => (
+                <div key={idx}>
+                  <article
+                    className={proseClasses}
+                    dangerouslySetInnerHTML={{ __html: html }}
+                    data-testid={idx === 0 ? "article-content" : `article-content-${idx}`}
+                  />
+                  {idx < segments.length - 1 && <InArticleAd />}
+                </div>
+              ))}
             </div>
           );
         })()}