From 39f825581df5f01e25299426b99c182ace073157 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sun, 1 Mar 2026 18:40:33 +0000
Subject: [PATCH] Place ads in the middle of articles for better visibility

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

diff --git a/client/src/pages/article.tsx b/client/src/pages/article.tsx
index 45479e8..84c919a 100644
--- a/client/src/pages/article.tsx
+++ b/client/src/pages/article.tsx
@@ -10,7 +10,7 @@ import Header from "@/components/header";
 import Footer from "@/components/footer";
 import { InArticleAd } from "@/components/adsense";
 import DOMPurify from "dompurify";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 
 const ALLOWED_IFRAME_DOMAINS = [
   "iframe.mediadelivery.net",
@@ -201,8 +201,13 @@ export default function ArticlePage() {
           </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-p:text-foreground/85 prose-p:leading-relaxed
             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
             [&_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
-            [&_.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) }}
-          data-testid="article-content"
-        />
-
-        <InArticleAd />
+            [&_.instagram-media]:!bg-transparent [&_.instagram-media]:!border-0 [&_.instagram-media]:!shadow-none [&_.instagram-media]:!p-0 [&_.instagram-media]:mx-auto`;
+          return (
+            <>
+              <article
+                className={proseClasses}
+                dangerouslySetInnerHTML={{ __html: firstHalf }}
+                data-testid="article-content"
+              />
+              <InArticleAd />
+              <article
+                className={proseClasses}
+                dangerouslySetInnerHTML={{ __html: secondHalf }}
+                data-testid="article-content-continued"
+              />
+            </>
+          );
+        })()}
 
         <RelatedArticles currentSlug={slug || ""} />
       </main>