Add new content widgets and a dynamic bento grid homepage

Integrates photo gallery, horoscope, recipe, and news widgets into a dynamic MSN-style bento grid homepage. Adds new routes for gallery and updates navigation. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: ac196a32-ec08-4953-9df7-633cb142cc48 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/RVXhOPb Replit-Helium-Checkpoint-Created: true
2026-02-28 18:26:40 +00:00
parent 8ef815824a
commit d28c36131c
12 changed files with 1847 additions and 174 deletions
@@ -3,11 +3,15 @@ import { Link } from "wouter";
 import { type Article } from "@shared/schema";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
-import { Eye, Clock, Play } from "lucide-react";
+import { Eye, Play, ChevronRight } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 import AdSense, { ArticleCardAd } from "@/components/adsense";
+import { PhotoGalleryWidget } from "@/components/photo-gallery";
+import { HoroscopeWidget } from "@/components/horoscope-widget";
+import { RecipeWidget } from "@/components/recipe-widget";
+import { NewsWidget } from "@/components/news-widget";
 import { useState, useEffect, useCallback } from "react";

 function thumbUrl(src: string | null): string {
@@ -31,17 +35,9 @@ function HeroCard({ article }: { article: Article }) {
  const isVideo = article.category === "Video";
  return (
    <Link href={`/article/${article.slug}`}>
-      <div
-        className="relative group cursor-pointer rounded-lg overflow-hidden h-full"
-        data-testid={`card-hero-${article.id}`}
-      >
+      <div className="relative group cursor-pointer rounded-lg overflow-hidden h-full" data-testid={`card-hero-${article.id}`}>
        <div className="relative h-full min-h-[300px] md:min-h-[380px]">
-          <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"
-          />
+          <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" />
          {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">
@@ -52,23 +48,11 @@ function HeroCard({ article }: { article: Article }) {
          <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>
-            <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()}
+              <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>
+            <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>
        </div>
      </div>
@@ -80,18 +64,10 @@ function MediumCard({ article }: { article: Article }) {
  const isVideo = article.category === "Video";
  return (
    <Link href={`/article/${article.slug}`}>
-      <div
-        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="relative group cursor-pointer rounded-lg overflow-hidden h-full bg-card border border-card-border" data-testid={`card-medium-${article.id}`}>
        <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"
-            />
+            <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>
          {isVideo && (
            <div className="absolute inset-0 flex items-center justify-center">
@@ -106,9 +82,7 @@ function MediumCard({ article }: { article: Article }) {
            <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>
+          <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()}
@@ -119,44 +93,6 @@ function MediumCard({ article }: { article: Article }) {
  );
 }

-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-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">
@@ -172,9 +108,7 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
                <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>
+              <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>
        ))}
@@ -183,22 +117,6 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
  );
 }

-function BentoSkeleton() {
-  return (
-    <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>
-  );
-}
-
 function FeaturedCarousel({ articles, popular }: { articles: Article[]; popular?: Article[] }) {
  const totalPages = Math.ceil(Math.min(articles.length, 9) / 3);
  const [page, setPage] = useState(0);
@@ -227,40 +145,24 @@ function FeaturedCarousel({ articles, popular }: { articles: Article[]; popular?
  if (!hero) return null;

  return (
-    <section
-      data-testid="featured-carousel"
-      onMouseEnter={() => setPaused(true)}
-      onMouseLeave={() => setPaused(false)}
-    >
+    <section data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="grid grid-cols-1 lg:grid-cols-6 gap-4">
        <div className="lg:col-span-3">
          <HeroCard article={hero} />
        </div>
-
        <div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4">
          {side.map((a) => (
            <MediumCard key={a.id} article={a} />
          ))}
        </div>
-
        <div className="lg:col-span-1">
-          {popular && popular.length > 0 && (
-            <TopStoriesList articles={popular} />
-          )}
+          {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
        </div>
      </div>
-
      {totalPages > 1 && (
        <div className="flex justify-center gap-2 mt-3" 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}`}
-            />
+            <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>
      )}
@@ -268,6 +170,32 @@ function FeaturedCarousel({ articles, popular }: { articles: Article[]; popular?
  );
 }

+function SectionLink({ href, label }: { href: string; label: string }) {
+  return (
+    <Link href={href}>
+      <span className="flex items-center gap-1 text-xs text-primary hover:underline cursor-pointer mt-2">
+        {label} <ChevronRight className="w-3 h-3" />
+      </span>
+    </Link>
+  );
+}
+
+function BentoSkeleton() {
+  return (
+    <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>
+  );
+}
+
 export default function Home() {
  const { data: articles, isLoading } = useQuery<Article[]>({
    queryKey: ["/api/articles"],
@@ -281,56 +209,58 @@ export default function Home() {
    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">
-          <BentoSkeleton />
-        </main>
+        <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 row2Items = all.slice(3, 6);
-  const row3Items = all.slice(6);
+  const row2Articles = articles.slice(3, 6);
+  const row3Articles = articles.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">

-        <FeaturedCarousel articles={all} popular={popular} />
+        <FeaturedCarousel articles={articles} popular={popular} />

        <div className="rounded-lg border border-card-border bg-card overflow-hidden">
-          <AdSense
-            slot="auto"
-            format="horizontal"
-            style={{ display: "block", minHeight: "90px" }}
-          />
+          <AdSense slot="auto" format="horizontal" style={{ display: "block", minHeight: "90px" }} />
        </div>

-        {row2Items.length > 0 && (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {row2Articles.map((a) => (
+            <MediumCard key={a.id} article={a} />
+          ))}
+          <ArticleCardAd key="ad-row2" />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <div className="lg:col-span-1">
+            <PhotoGalleryWidget />
+            <SectionLink href="/gallery" label="Alle Fotos" />
+          </div>
+
+          <div className="lg:col-span-1">
+            <RecipeWidget />
+          </div>
+
+          <div className="lg:col-span-1">
+            <HoroscopeWidget />
+          </div>
+
+          <div className="lg:col-span-1">
+            <NewsWidget />
+          </div>
+        </div>
+
+        {row3Articles.length > 0 && (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-            {row2Items.map((a) => (
+            {row3Articles.map((a) => (
              <MediumCard key={a.id} article={a} />
            ))}
-            <ArticleCardAd key="ad-row2" />
-          </div>
-        )}
-
-        {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>
+            <ArticleCardAd key="ad-row3" />
          </div>
        )}