Update homepage layout with mixed card sizes and integrated advertisements
Refactors the homepage to implement an MSN-style bento grid layout, incorporating mixed-size article cards, video indicators, time-ago formatting, and integrated advertisements. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 224daa43-fab8-420c-8186-62118db05411 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
parent
301bb9277e
commit
a15dea1fe7
BIN
attached_assets/image_1772301812509.png
Normal file
BIN
attached_assets/image_1772301812509.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 799 KiB |
@ -3,219 +3,197 @@ import { Link } from "wouter";
|
|||||||
import { type Article } from "@shared/schema";
|
import { type Article } from "@shared/schema";
|
||||||
import { format } from "date-fns";
|
import { format } from "date-fns";
|
||||||
import { de } from "date-fns/locale";
|
import { de } from "date-fns/locale";
|
||||||
import { Eye, Clock } from "lucide-react";
|
import { Eye, Clock, Play } from "lucide-react";
|
||||||
import { Skeleton } from "@/components/ui/skeleton";
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import Header from "@/components/header";
|
import Header from "@/components/header";
|
||||||
import Footer from "@/components/footer";
|
import Footer from "@/components/footer";
|
||||||
import { ArticleCardAd, SidebarAd, InArticleAd } from "@/components/adsense";
|
import AdSense, { ArticleCardAd } from "@/components/adsense";
|
||||||
import { useState, useEffect, useCallback } from "react";
|
import { useState, useEffect, useCallback } from "react";
|
||||||
|
|
||||||
function FeaturedSection({ articles }: { articles: Article[] }) {
|
|
||||||
const pool = articles.slice(0, 9);
|
|
||||||
const totalPages = Math.ceil(pool.length / 3);
|
|
||||||
const [page, setPage] = useState(0);
|
|
||||||
const [paused, setPaused] = useState(false);
|
|
||||||
|
|
||||||
const next = useCallback(() => {
|
|
||||||
setPage((p) => (p + 1) % totalPages);
|
|
||||||
}, [totalPages]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (paused || totalPages <= 1) return;
|
|
||||||
const timer = setInterval(next, 8000);
|
|
||||||
return () => clearInterval(timer);
|
|
||||||
}, [paused, next, totalPages]);
|
|
||||||
|
|
||||||
if (pool.length === 0) return null;
|
|
||||||
|
|
||||||
const start = page * 3;
|
|
||||||
const visible = pool.slice(start, start + 3);
|
|
||||||
while (visible.length < 3 && pool.length >= 3) {
|
|
||||||
visible.push(pool[visible.length % pool.length]);
|
|
||||||
}
|
|
||||||
|
|
||||||
const hero = visible[0];
|
|
||||||
const side = visible.slice(1, 3);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section
|
|
||||||
className="mb-12"
|
|
||||||
data-testid="featured-carousel"
|
|
||||||
onMouseEnter={() => setPaused(true)}
|
|
||||||
onMouseLeave={() => setPaused(false)}
|
|
||||||
>
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-5">
|
|
||||||
<Link href={`/article/${hero.slug}`} className="lg:col-span-3">
|
|
||||||
<div
|
|
||||||
className="relative group cursor-pointer rounded-md overflow-hidden h-full"
|
|
||||||
data-testid={`card-featured-${hero.id}`}
|
|
||||||
>
|
|
||||||
<div className="relative h-full min-h-[320px] md:min-h-[420px]">
|
|
||||||
<img
|
|
||||||
src={hero.coverImage || "/images/article-1.png"}
|
|
||||||
alt={hero.title}
|
|
||||||
className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105"
|
|
||||||
loading="lazy"
|
|
||||||
/>
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
|
|
||||||
<div className="absolute bottom-0 left-0 right-0 p-5 md:p-7">
|
|
||||||
<span className="text-white/70 text-sm">
|
|
||||||
{format(new Date(hero.publishedAt), "d. MMMM yyyy", { locale: de })}
|
|
||||||
</span>
|
|
||||||
<h3 className="text-white font-bold text-xl md:text-2xl mt-2 leading-tight line-clamp-3">
|
|
||||||
{hero.title}
|
|
||||||
</h3>
|
|
||||||
<p className="text-white/60 text-sm mt-2 line-clamp-2 max-w-lg">
|
|
||||||
{hero.excerpt}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<div className="lg:col-span-2 grid grid-cols-1 gap-5">
|
|
||||||
{side.map((article) => (
|
|
||||||
<Link key={article.id} href={`/article/${article.slug}`}>
|
|
||||||
<div
|
|
||||||
className="relative group cursor-pointer rounded-md overflow-hidden"
|
|
||||||
data-testid={`card-featured-${article.id}`}
|
|
||||||
>
|
|
||||||
<div className="relative min-h-[200px]">
|
|
||||||
<img
|
|
||||||
src={article.coverImage || "/images/article-1.png"}
|
|
||||||
alt={article.title}
|
|
||||||
className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105"
|
|
||||||
loading="lazy"
|
|
||||||
/>
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
|
|
||||||
<div className="absolute bottom-0 left-0 right-0 p-4 md:p-5">
|
|
||||||
<span className="text-white/70 text-xs">
|
|
||||||
{format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}
|
|
||||||
</span>
|
|
||||||
<h3 className="text-white font-semibold text-base mt-1 leading-snug line-clamp-2">
|
|
||||||
{article.title}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{totalPages > 1 && (
|
|
||||||
<div className="flex justify-center gap-2 mt-4" data-testid="carousel-dots">
|
|
||||||
{Array.from({ length: totalPages }).map((_, i) => (
|
|
||||||
<button
|
|
||||||
key={i}
|
|
||||||
onClick={() => setPage(i)}
|
|
||||||
className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
|
|
||||||
i === page ? "bg-primary w-6" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
|
|
||||||
}`}
|
|
||||||
data-testid={`button-carousel-dot-${i}`}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function thumbUrl(src: string | null): string {
|
function thumbUrl(src: string | null): string {
|
||||||
if (!src) return "/images/article-1.png";
|
if (!src) return "/images/article-1.png";
|
||||||
if (src.endsWith(".webp")) return src.replace(".webp", "-thumb.webp");
|
if (src.endsWith(".webp")) return src.replace(".webp", "-thumb.webp");
|
||||||
return src;
|
return src;
|
||||||
}
|
}
|
||||||
|
|
||||||
function ArticleCard({ article }: { article: Article }) {
|
function timeAgo(date: Date): string {
|
||||||
|
const now = new Date();
|
||||||
|
const diffMs = now.getTime() - date.getTime();
|
||||||
|
const diffH = Math.floor(diffMs / 3600000);
|
||||||
|
const diffD = Math.floor(diffMs / 86400000);
|
||||||
|
if (diffH < 1) return "Gerade eben";
|
||||||
|
if (diffH < 24) return `vor ${diffH} Std.`;
|
||||||
|
if (diffD < 7) return `vor ${diffD} T.`;
|
||||||
|
return format(date, "d. MMM yyyy", { locale: de });
|
||||||
|
}
|
||||||
|
|
||||||
|
function HeroCard({ article }: { article: Article }) {
|
||||||
|
const isVideo = article.category === "Video";
|
||||||
return (
|
return (
|
||||||
<Link href={`/article/${article.slug}`}>
|
<Link href={`/article/${article.slug}`}>
|
||||||
<article
|
<div
|
||||||
className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300 h-full flex flex-col"
|
className="relative group cursor-pointer rounded-lg overflow-hidden h-full"
|
||||||
data-testid={`card-article-${article.id}`}
|
data-testid={`card-hero-${article.id}`}
|
||||||
>
|
>
|
||||||
<div className="relative rounded-t-md">
|
<div className="relative h-full min-h-[300px] md:min-h-[380px]">
|
||||||
<div className="overflow-hidden rounded-t-md">
|
|
||||||
<img
|
<img
|
||||||
src={thumbUrl(article.coverImage)}
|
src={article.coverImage || "/images/article-1.png"}
|
||||||
alt={article.title}
|
alt={article.title}
|
||||||
className="w-full aspect-[16/10] object-cover transition-transform duration-500 group-hover:scale-105"
|
className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
|
{isVideo && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center z-10">
|
||||||
|
<div className="w-14 h-14 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors shadow-lg">
|
||||||
|
<Play className="w-6 h-6 text-white ml-0.5" fill="white" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="p-5 flex flex-col flex-1">
|
)}
|
||||||
<div className="flex items-center gap-2 text-muted-foreground text-xs mb-3">
|
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" />
|
||||||
<span>{article.author}</span>
|
<div className="absolute bottom-0 left-0 right-0 p-5">
|
||||||
<span>·</span>
|
<div className="flex items-center gap-2 mb-2">
|
||||||
<span>{format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}</span>
|
<span className="text-xs font-medium text-primary bg-primary/20 px-2 py-0.5 rounded">
|
||||||
</div>
|
{article.category}
|
||||||
<h3 className="font-semibold text-card-foreground mb-2 line-clamp-2 group-hover:text-primary transition-colors text-base leading-snug">
|
</span>
|
||||||
{article.title}
|
<span className="text-white/60 text-xs">
|
||||||
</h3>
|
{timeAgo(new Date(article.publishedAt))}
|
||||||
<p className="text-muted-foreground text-sm line-clamp-3 mb-4 flex-1">
|
|
||||||
{article.excerpt}
|
|
||||||
</p>
|
|
||||||
<div className="flex items-center justify-between gap-2 mt-auto">
|
|
||||||
<div className="flex items-center gap-3 text-xs text-muted-foreground">
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<Eye className="w-3.5 h-3.5" />
|
|
||||||
{article.views.toLocaleString()}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<Button size="sm" data-testid={`button-read-${article.id}`}>
|
<h3 className="text-white font-bold text-lg md:text-xl leading-tight line-clamp-3">
|
||||||
Weiterlesen
|
{article.title}
|
||||||
</Button>
|
</h3>
|
||||||
|
<p className="text-white/50 text-sm mt-1.5 line-clamp-2 max-w-lg hidden md:block">
|
||||||
|
{article.excerpt}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2 mt-2 text-white/40 text-xs">
|
||||||
|
<Eye className="w-3 h-3" />
|
||||||
|
{article.views.toLocaleString()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function PopularSidebar({ articles }: { articles: Article[] }) {
|
function MediumCard({ article }: { article: Article }) {
|
||||||
|
const isVideo = article.category === "Video";
|
||||||
return (
|
return (
|
||||||
<aside className="bg-card rounded-md border border-card-border p-5 sticky top-20" data-testid="sidebar-popular">
|
<Link href={`/article/${article.slug}`}>
|
||||||
<h3 className="font-semibold text-card-foreground mb-5 text-base">
|
|
||||||
Beliebte Artikel
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-5">
|
|
||||||
{articles.map((article, index) => (
|
|
||||||
<Link key={article.id} href={`/article/${article.slug}`}>
|
|
||||||
<div
|
<div
|
||||||
className="flex gap-4 cursor-pointer group"
|
className="relative group cursor-pointer rounded-lg overflow-hidden h-full bg-card border border-card-border"
|
||||||
data-testid={`card-popular-${article.id}`}
|
data-testid={`card-medium-${article.id}`}
|
||||||
>
|
>
|
||||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-bold text-sm">
|
<div className="relative">
|
||||||
{index + 1}
|
<div className="overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={thumbUrl(article.coverImage)}
|
||||||
|
alt={article.title}
|
||||||
|
className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 min-w-0">
|
{isVideo && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div className="w-10 h-10 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors">
|
||||||
|
<Play className="w-4 h-4 text-white ml-0.5" fill="white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="p-3.5">
|
||||||
|
<div className="flex items-center gap-2 mb-1.5">
|
||||||
|
<span className="text-[10px] font-medium text-primary">{article.author}</span>
|
||||||
|
<span className="text-muted-foreground text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-card-foreground text-sm leading-snug line-clamp-2 group-hover:text-primary transition-colors">
|
||||||
|
{article.title}
|
||||||
|
</h3>
|
||||||
|
<div className="flex items-center gap-2 mt-2 text-muted-foreground text-[10px]">
|
||||||
|
<Eye className="w-3 h-3" />
|
||||||
|
{article.views.toLocaleString()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CompactCard({ article }: { article: Article }) {
|
||||||
|
const isVideo = article.category === "Video";
|
||||||
|
return (
|
||||||
|
<Link href={`/article/${article.slug}`}>
|
||||||
|
<div
|
||||||
|
className="flex gap-3 cursor-pointer group bg-card rounded-lg border border-card-border p-3 h-full"
|
||||||
|
data-testid={`card-compact-${article.id}`}
|
||||||
|
>
|
||||||
|
<div className="relative flex-shrink-0 w-24 h-20 rounded overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={thumbUrl(article.coverImage)}
|
||||||
|
alt={article.title}
|
||||||
|
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
{isVideo && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div className="w-7 h-7 rounded-full bg-primary/90 flex items-center justify-center">
|
||||||
|
<Play className="w-3 h-3 text-white ml-px" fill="white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0 flex flex-col">
|
||||||
<h4 className="text-sm font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">
|
<h4 className="text-sm font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">
|
||||||
{article.title}
|
{article.title}
|
||||||
</h4>
|
</h4>
|
||||||
<div className="flex items-center gap-1 text-xs text-muted-foreground mt-1.5">
|
<div className="flex items-center gap-2 mt-auto text-[10px] text-muted-foreground">
|
||||||
<Clock className="w-3 h-3" />
|
<span>{article.author}</span>
|
||||||
{format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}
|
<span>·</span>
|
||||||
|
<span>{timeAgo(new Date(article.publishedAt))}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function TopStoriesList({ articles }: { articles: Article[] }) {
|
||||||
|
return (
|
||||||
|
<div className="bg-card rounded-lg border border-card-border p-4 h-full" data-testid="sidebar-top-stories">
|
||||||
|
<h3 className="font-bold text-card-foreground text-sm mb-3 flex items-center gap-2">
|
||||||
|
<span className="w-1 h-4 bg-primary rounded-full" />
|
||||||
|
Top-Storys
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{articles.slice(0, 5).map((article) => (
|
||||||
|
<Link key={article.id} href={`/article/${article.slug}`}>
|
||||||
|
<div className="group cursor-pointer py-1.5 border-b border-card-border last:border-0" data-testid={`card-top-${article.id}`}>
|
||||||
|
<div className="flex items-center gap-1.5 mb-0.5">
|
||||||
|
<span className="text-[10px] font-medium text-primary">{article.category}</span>
|
||||||
|
<span className="text-muted-foreground text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
|
||||||
|
</div>
|
||||||
|
<h4 className="text-xs font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">
|
||||||
|
{article.title}
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function ArticleCardSkeleton() {
|
function BentoSkeleton() {
|
||||||
return (
|
return (
|
||||||
<div className="bg-card rounded-md border border-card-border">
|
<div className="space-y-4">
|
||||||
<Skeleton className="w-full aspect-[16/10] rounded-t-md" />
|
<div className="grid grid-cols-6 gap-4">
|
||||||
<div className="p-5 space-y-3">
|
<div className="col-span-6 lg:col-span-3"><Skeleton className="w-full h-[380px] rounded-lg" /></div>
|
||||||
<Skeleton className="h-3 w-2/3" />
|
<div className="col-span-6 lg:col-span-3 grid grid-cols-2 gap-4">
|
||||||
<Skeleton className="h-5 w-full" />
|
<Skeleton className="w-full h-[180px] rounded-lg" />
|
||||||
<Skeleton className="h-4 w-full" />
|
<Skeleton className="w-full h-[180px] rounded-lg" />
|
||||||
<Skeleton className="h-4 w-3/4" />
|
<Skeleton className="w-full h-[180px] rounded-lg" />
|
||||||
|
<Skeleton className="w-full h-[180px] rounded-lg" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -226,23 +204,54 @@ export default function Home() {
|
|||||||
queryKey: ["/api/articles"],
|
queryKey: ["/api/articles"],
|
||||||
});
|
});
|
||||||
|
|
||||||
const { data: featured } = useQuery<Article[]>({
|
|
||||||
queryKey: ["/api/articles/featured"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const { data: popular } = useQuery<Article[]>({
|
const { data: popular } = useQuery<Article[]>({
|
||||||
queryKey: ["/api/articles/popular"],
|
queryKey: ["/api/articles/popular"],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (isLoading || !articles) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-background">
|
<div className="min-h-screen bg-background">
|
||||||
<Header />
|
<Header />
|
||||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||||
{featured && featured.length > 0 && (
|
<BentoSkeleton />
|
||||||
<FeaturedSection articles={featured} />
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const all = articles;
|
||||||
|
const row1Hero = all[0];
|
||||||
|
const row1Medium = all.slice(1, 3);
|
||||||
|
const row2Items = all.slice(3, 6);
|
||||||
|
const row3Items = all.slice(6);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background">
|
||||||
|
<Header />
|
||||||
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4">
|
||||||
|
|
||||||
|
{row1Hero && (
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-6 gap-4">
|
||||||
|
<div className="lg:col-span-3">
|
||||||
|
<HeroCard article={row1Hero} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4">
|
||||||
|
{row1Medium.map((a) => (
|
||||||
|
<MediumCard key={a.id} article={a} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="lg:col-span-1">
|
||||||
|
{popular && popular.length > 0 && (
|
||||||
|
<TopStoriesList articles={popular} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="mb-8 rounded-md border border-card-border bg-card overflow-hidden">
|
<div className="rounded-lg border border-card-border bg-card overflow-hidden">
|
||||||
<AdSense
|
<AdSense
|
||||||
slot="auto"
|
slot="auto"
|
||||||
format="horizontal"
|
format="horizontal"
|
||||||
@ -250,39 +259,32 @@ export default function Home() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
{row2Items.length > 0 && (
|
||||||
<div className="lg:col-span-2">
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
{isLoading ? (
|
{row2Items.map((a) => (
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<MediumCard key={a.id} article={a} />
|
||||||
{Array.from({ length: 4 }).map((_, i) => (
|
|
||||||
<ArticleCardSkeleton key={i} />
|
|
||||||
))}
|
))}
|
||||||
</div>
|
<ArticleCardAd key="ad-row2" />
|
||||||
) : (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
||||||
{(articles || []).flatMap((article, index) => {
|
|
||||||
const items = [
|
|
||||||
<ArticleCard key={article.id} article={article} />,
|
|
||||||
];
|
|
||||||
if (index === 1) {
|
|
||||||
items.push(<ArticleCardAd key="ad-feed-1" />);
|
|
||||||
}
|
|
||||||
if (index === 4) {
|
|
||||||
items.push(<ArticleCardAd key="ad-feed-2" />);
|
|
||||||
}
|
|
||||||
return items;
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="lg:col-span-1">
|
{row3Items.length > 0 && (
|
||||||
{popular && popular.length > 0 && (
|
<div className="grid grid-cols-1 lg:grid-cols-6 gap-4">
|
||||||
<PopularSidebar articles={popular} />
|
<div className="lg:col-span-3">
|
||||||
|
{row3Items[0] && <HeroCard article={row3Items[0]} />}
|
||||||
|
</div>
|
||||||
|
<div className="lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
{row3Items.slice(1, 3).map((a) => (
|
||||||
|
<MediumCard key={a.id} article={a} />
|
||||||
|
))}
|
||||||
|
{row3Items.slice(3).map((a) => (
|
||||||
|
<CompactCard key={a.id} article={a} />
|
||||||
|
))}
|
||||||
|
<ArticleCardAd key="ad-row3" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
<SidebarAd />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user