diff --git a/client/src/App.tsx b/client/src/App.tsx index 419546b..b41db14 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -8,6 +8,7 @@ import NotFound from "@/pages/not-found"; import Home from "@/pages/home"; import ArticlePage from "@/pages/article"; import CategoryPage from "@/pages/category"; +import AktuellesPage from "@/pages/aktuelles"; import VideosPage from "@/pages/videos"; import GalleryPageWrapper from "@/pages/gallery"; import HoroscopePage from "@/pages/horoscope"; @@ -40,7 +41,7 @@ function Router() { - } /> + diff --git a/client/src/pages/aktuelles.tsx b/client/src/pages/aktuelles.tsx new file mode 100644 index 0000000..1590fd6 --- /dev/null +++ b/client/src/pages/aktuelles.tsx @@ -0,0 +1,189 @@ +import { useQuery } from "@tanstack/react-query"; +import { Link, useLocation, useSearch } from "wouter"; +import { type Article } from "@shared/schema"; +import { useEffect } from "react"; +import { usePageMeta } from "@/hooks/use-page-meta"; +import { Eye, ChevronLeft, ChevronRight } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { Skeleton } from "@/components/ui/skeleton"; +import Header from "@/components/header"; +import Footer from "@/components/footer"; +import { PageSideAds, TopBannerAd, MultiplexAd, ArticleCardAd } from "@/components/adsense"; +import { format } from "date-fns"; +import { de } from "date-fns/locale"; + +interface Res { + articles: Article[]; + total: number; + page: number; + totalPages: number; + hasMore: boolean; + rubriken: string[]; +} + +const RUBRIKEN = ["Politik", "Promis", "Sport", "Musik & Film"]; + +export default function AktuellesPage() { + const search = useSearch(); + const [, setLocation] = useLocation(); + const params = new URLSearchParams(search); + const page = Math.max(1, parseInt(params.get("page") || "1")); + const rubrik = params.get("rubrik") || ""; + + usePageMeta( + `Aktuelles${rubrik ? ` – ${rubrik}` : ""}${page > 1 ? ` – Seite ${page}` : ""} | FOLX TV`, + "Aktuelle Nachrichten aus Politik, Sport, Promis sowie Musik und Film – täglich neu bei FOLX TV." + ); + + const { data, isLoading } = useQuery({ + queryKey: ["/api/articles/aktuelles", rubrik, page], + queryFn: async () => { + const q = new URLSearchParams({ page: String(page), limit: "12" }); + if (rubrik) q.set("rubrik", rubrik); + const r = await fetch(`/api/articles/aktuelles?${q}`); + if (!r.ok) throw new Error("laden fehlgeschlagen"); + return r.json(); + }, + }); + + useEffect(() => { + window.scrollTo({ top: 0 }); + }, [page, rubrik]); + + const go = (r: string, p = 1) => { + const q = new URLSearchParams(); + if (r) q.set("rubrik", r); + if (p > 1) q.set("page", String(p)); + setLocation(`/aktuelles${q.toString() ? `?${q}` : ""}`); + }; + + const items = data?.articles || []; + + return ( +
+
+ + + {/* Vrstica rubrik kot na ONE — brez horoskopa, ta ima na folx.tv svojo stran */} + + +
+ + +

+ {rubrik || "Aktuelles"} +

+ + {isLoading ? ( +
+ {Array.from({ length: 6 }).map((_, i) => ( + + ))} +
+ ) : items.length === 0 ? ( +

In dieser Rubrik gibt es derzeit keine Beiträge.

+ ) : ( +
+ {items.map((a, idx) => ( +
+ {idx > 0 && idx % 6 === 0 && ( +
+ +
+ )} + +
+ {a.coverImage && ( +
+ {a.title} +
+ )} +
+
+ {a.category} + + {format(new Date(a.publishedAt), "d. MMM yyyy", { locale: de })} + +
+

+ {a.title} +

+

+ {a.excerpt} +

+
+ + {a.views.toLocaleString()} +
+
+
+ +
+ ))} +
+ )} + + {data && data.totalPages > 1 && ( +
+ + + Seite {page} von {data.totalPages} + + +
+ )} + +
+
Anzeige
+ +
+
+
+ ); +} diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx index 76a1560..424243d 100644 --- a/client/src/pages/home.tsx +++ b/client/src/pages/home.tsx @@ -718,7 +718,10 @@ export default function Home() { // Splosne novice imajo svojo rubriko /aktuelles in ne sodijo na naslovnico, // ki ostaja Volksmusik in Schlager. const articles = useMemo( - () => (allArticles || []).filter((a) => a.category !== "Aktuelles"), + () => + (allArticles || []).filter( + (a) => !["Aktuelles", "Politik", "Promis", "Sport", "Musik & Film"].includes(a.category) + ), [allArticles] ); diff --git a/server/routes.ts b/server/routes.ts index d810bb4..1827675 100644 --- a/server/routes.ts +++ b/server/routes.ts @@ -180,6 +180,32 @@ export async function registerRoutes( res.json(articles); }); + // Rubrike, ki skupaj sestavljajo /aktuelles. Horoskop, recepti in vreme so + // na folx.tv svoje strani, zato jih tu ni. + const AKTUELLES_RUBRIKEN = ["Politik", "Promis", "Sport", "Musik & Film"]; + + app.get("/api/articles/aktuelles", async (req, res) => { + try { + const page = Math.max(1, parseInt(req.query.page as string) || 1); + const limit = Math.min(48, parseInt(req.query.limit as string) || 12); + const rubrik = (req.query.rubrik as string) || ""; + const wanted = rubrik && AKTUELLES_RUBRIKEN.includes(rubrik) ? [rubrik] : AKTUELLES_RUBRIKEN; + const all = (await storage.getArticles()).filter((a) => wanted.includes(a.category)); + const total = all.length; + const start = (page - 1) * limit; + res.json({ + articles: all.slice(start, start + limit), + total, + page, + totalPages: Math.ceil(total / limit), + hasMore: start + limit < total, + rubriken: AKTUELLES_RUBRIKEN, + }); + } catch (e: any) { + res.status(500).json({ message: e?.message || "error" }); + } + }); + app.get("/api/articles/category/:category", async (req, res) => { const page = parseInt(req.query.page as string); const limit = parseInt(req.query.limit as string) || 12;