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 { format } from "date-fns";
|
||||
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 { Button } from "@/components/ui/button";
|
||||
import Header from "@/components/header";
|
||||
import Footer from "@/components/footer";
|
||||
import { ArticleCardAd, SidebarAd, InArticleAd } from "@/components/adsense";
|
||||
import AdSense, { ArticleCardAd } from "@/components/adsense";
|
||||
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 {
|
||||
if (!src) return "/images/article-1.png";
|
||||
if (src.endsWith(".webp")) return src.replace(".webp", "-thumb.webp");
|
||||
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 (
|
||||
<Link href={`/article/${article.slug}`}>
|
||||
<article
|
||||
className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300 h-full flex flex-col"
|
||||
data-testid={`card-article-${article.id}`}
|
||||
<div
|
||||
className="relative group cursor-pointer rounded-lg overflow-hidden h-full"
|
||||
data-testid={`card-hero-${article.id}`}
|
||||
>
|
||||
<div className="relative rounded-t-md">
|
||||
<div className="overflow-hidden rounded-t-md">
|
||||
<div className="relative h-full min-h-[300px] md:min-h-[380px]">
|
||||
<img
|
||||
src={thumbUrl(article.coverImage)}
|
||||
src={article.coverImage || "/images/article-1.png"}
|
||||
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"
|
||||
/>
|
||||
{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 className="p-5 flex flex-col flex-1">
|
||||
<div className="flex items-center gap-2 text-muted-foreground text-xs mb-3">
|
||||
<span>{article.author}</span>
|
||||
<span>·</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 text-base leading-snug">
|
||||
{article.title}
|
||||
</h3>
|
||||
<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()}
|
||||
)}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 p-5">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-xs font-medium text-primary bg-primary/20 px-2 py-0.5 rounded">
|
||||
{article.category}
|
||||
</span>
|
||||
<span className="text-white/60 text-xs">
|
||||
{timeAgo(new Date(article.publishedAt))}
|
||||
</span>
|
||||
</div>
|
||||
<Button size="sm" data-testid={`button-read-${article.id}`}>
|
||||
Weiterlesen
|
||||
</Button>
|
||||
<h3 className="text-white font-bold text-lg md:text-xl leading-tight line-clamp-3">
|
||||
{article.title}
|
||||
</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>
|
||||
</article>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function PopularSidebar({ articles }: { articles: Article[] }) {
|
||||
function MediumCard({ article }: { article: Article }) {
|
||||
const isVideo = article.category === "Video";
|
||||
return (
|
||||
<aside className="bg-card rounded-md border border-card-border p-5 sticky top-20" data-testid="sidebar-popular">
|
||||
<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}`}>
|
||||
<Link href={`/article/${article.slug}`}>
|
||||
<div
|
||||
className="flex gap-4 cursor-pointer group"
|
||||
data-testid={`card-popular-${article.id}`}
|
||||
className="relative group cursor-pointer rounded-lg overflow-hidden h-full bg-card border border-card-border"
|
||||
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">
|
||||
{index + 1}
|
||||
<div className="relative">
|
||||
<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 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">
|
||||
{article.title}
|
||||
</h4>
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground mt-1.5">
|
||||
<Clock className="w-3 h-3" />
|
||||
{format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}
|
||||
<div className="flex items-center gap-2 mt-auto text-[10px] text-muted-foreground">
|
||||
<span>{article.author}</span>
|
||||
<span>·</span>
|
||||
<span>{timeAgo(new Date(article.publishedAt))}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ArticleCardSkeleton() {
|
||||
function BentoSkeleton() {
|
||||
return (
|
||||
<div className="bg-card rounded-md border border-card-border">
|
||||
<Skeleton className="w-full aspect-[16/10] rounded-t-md" />
|
||||
<div className="p-5 space-y-3">
|
||||
<Skeleton className="h-3 w-2/3" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-6 lg:col-span-3"><Skeleton className="w-full h-[380px] rounded-lg" /></div>
|
||||
<div className="col-span-6 lg:col-span-3 grid grid-cols-2 gap-4">
|
||||
<Skeleton className="w-full h-[180px] rounded-lg" />
|
||||
<Skeleton className="w-full h-[180px] rounded-lg" />
|
||||
<Skeleton className="w-full h-[180px] rounded-lg" />
|
||||
<Skeleton className="w-full h-[180px] rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -226,23 +204,54 @@ export default function Home() {
|
||||
queryKey: ["/api/articles"],
|
||||
});
|
||||
|
||||
const { data: featured } = useQuery<Article[]>({
|
||||
queryKey: ["/api/articles/featured"],
|
||||
});
|
||||
|
||||
const { data: popular } = useQuery<Article[]>({
|
||||
queryKey: ["/api/articles/popular"],
|
||||
});
|
||||
|
||||
if (isLoading || !articles) {
|
||||
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-8">
|
||||
{featured && featured.length > 0 && (
|
||||
<FeaturedSection articles={featured} />
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<BentoSkeleton />
|
||||
</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
|
||||
slot="auto"
|
||||
format="horizontal"
|
||||
@ -250,39 +259,32 @@ export default function Home() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div className="lg:col-span-2">
|
||||
{isLoading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<ArticleCardSkeleton key={i} />
|
||||
{row2Items.length > 0 && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{row2Items.map((a) => (
|
||||
<MediumCard key={a.id} article={a} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<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;
|
||||
})}
|
||||
<ArticleCardAd key="ad-row2" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-1">
|
||||
{popular && popular.length > 0 && (
|
||||
<PopularSidebar articles={popular} />
|
||||
{row3Items.length > 0 && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-6 gap-4">
|
||||
<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>
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user