From 301bb9277e978558c99f8fbb76a996937d366c92 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 18:03:05 +0000
Subject: [PATCH] Add an advertisement card to the blog post category page

Integrate `ArticleCardAd` component into the category page's article grid to display an advertisement between posts.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 280e79de-a056-4133-85e8-89539a552ee8
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/igVW4lQ
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/category.tsx | 85 +++++++++++++++++++----------------
 1 file changed, 46 insertions(+), 39 deletions(-)

diff --git a/client/src/pages/category.tsx b/client/src/pages/category.tsx
index b8a99c5..ff73de4 100644
--- a/client/src/pages/category.tsx
+++ b/client/src/pages/category.tsx
@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
+import { ArticleCardAd } from "@/components/adsense";
 
 export default function CategoryPage() {
   const { category } = useParams<{ category: string }>();
@@ -46,47 +47,53 @@ export default function CategoryPage() {
           </div>
         ) : articles && articles.length > 0 ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {articles.map((article) => (
-              <Link key={article.id} href={`/article/${article.slug}`}>
-                <article
-                  className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300"
-                  data-testid={`card-article-${article.id}`}
-                >
-                  <div className="relative rounded-t-md">
-                    <div className="overflow-hidden rounded-t-md">
-                      <img
-                        src={article.coverImage || "/images/article-1.png"}
-                        alt={article.title}
-                        className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
-                        loading="lazy"
-                      />
+            {articles.flatMap((article, index) => {
+              const items = [
+                <Link key={article.id} href={`/article/${article.slug}`}>
+                  <article
+                    className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300 h-full"
+                    data-testid={`card-article-${article.id}`}
+                  >
+                    <div className="relative rounded-t-md">
+                      <div className="overflow-hidden rounded-t-md">
+                        <img
+                          src={article.coverImage || "/images/article-1.png"}
+                          alt={article.title}
+                          className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
+                          loading="lazy"
+                        />
+                      </div>
                     </div>
-                  </div>
-                  <div className="p-4">
-                    <div className="flex items-center gap-2 text-muted-foreground text-xs mb-2">
-                      <span>{article.author}</span>
-                      <span>&middot;</span>
-                      <span>{format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}</span>
+                    <div className="p-4">
+                      <div className="flex items-center gap-2 text-muted-foreground text-xs mb-2">
+                        <span>{article.author}</span>
+                        <span>&middot;</span>
+                        <span>{format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}</span>
+                      </div>
+                      <h3 className="font-semibold text-card-foreground mb-2 line-clamp-2 group-hover:text-primary transition-colors">
+                        {article.title}
+                      </h3>
+                      <p className="text-muted-foreground text-sm line-clamp-3 mb-3">
+                        {article.excerpt}
+                      </p>
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                          <Eye className="w-3.5 h-3.5" />
+                          {article.views.toLocaleString()}
+                        </span>
+                        <Button size="sm" data-testid={`button-read-${article.id}`}>
+                          Weiterlesen
+                        </Button>
+                      </div>
                     </div>
-                    <h3 className="font-semibold text-card-foreground mb-2 line-clamp-2 group-hover:text-primary transition-colors">
-                      {article.title}
-                    </h3>
-                    <p className="text-muted-foreground text-sm line-clamp-3 mb-3">
-                      {article.excerpt}
-                    </p>
-                    <div className="flex items-center justify-between gap-2">
-                      <span className="flex items-center gap-1 text-xs text-muted-foreground">
-                        <Eye className="w-3.5 h-3.5" />
-                        {article.views.toLocaleString()}
-                      </span>
-                      <Button size="sm" data-testid={`button-read-${article.id}`}>
-                        Weiterlesen
-                      </Button>
-                    </div>
-                  </div>
-                </article>
-              </Link>
-            ))}
+                  </article>
+                </Link>,
+              ];
+              if (index === 2) {
+                items.push(<ArticleCardAd key="ad-cat-1" />);
+              }
+              return items;
+            })}
           </div>
         ) : (
           <div className="text-center py-16">