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

Add an advertisement card to the blog post category page

Browse Source 
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
This commit is contained in:
sebastjanartic 2026-02-28 18:03:05 +00:00
parent 01f642aea6
commit 301bb9277e
1 changed files with 46 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
client/src/pages/category.tsx
View File

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