sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
4b5b3e5d97
folx-tv/replit.md
sebastjanartic 4b5b3e5d97 Improve photo gallery with artist names and infinite scrolling 
Refactor photo gallery to include artist names extracted from filenames, implement pagination with infinite scrolling, and optimize image loading.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 79e0a082-1752-4a36-8483-997b7269c4f3
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/nFw7xof
Replit-Helium-Checkpoint-Created: true
2026-03-02 16:39:45 +00:00

5.2 KiB
Raw Blame History

news.folx.tv - MSN-Style News Portal

Overview

A professional MSN-style news portal for Folx Music Television (news.folx.tv). Dark-themed bento grid layout with content for folk music (Volksmusik/Schlager) fans. Features articles, videos, photo gallery, horoscope widget + subpage, recipe widget + subpage, Google News feed, and integrated AdSense ads. All content is hardcoded in seed for production deployments.

Architecture

  • Frontend: React + Vite + TailwindCSS + shadcn/ui (dark mode)
  • Backend: Express.js + Node.js
  • Database: PostgreSQL with Drizzle ORM
  • Routing: wouter (frontend), Express (backend API)

Key Features

  • MSN-style bento grid homepage with mixed article/widget layout
  • FeaturedCarousel with 5 article pages (page 2 = wide layout) + gallery page
  • Photo gallery widget (547 Dropbox images) with fullscreen lightbox carousel
  • Horoscope widget with element colors, star ratings, full /horoskop subpage
  • Recipe widget + full /rezepte subpage (21 recipes across 5 regions: Österreich, Bayern, Schwaben/Baden, Südtirol/Alpen, Norddeutschland) with AI-generated images
  • Google News RSS widget (Volksmusik/Schlager news, 5 items, auto-rotate)
  • Google AdSense integration (ca-pub-4465464714854276)
  • Article listing with featured carousel and category filtering
  • HTML content supports embedded iframes (bunny.net, YouTube, Facebook, Instagram, TikTok)
  • DOMPurify sanitization for safe HTML rendering
  • Responsive design with mobile navigation

Data Model

  • articles: id (serial), title, slug (unique), excerpt, content (HTML), coverImage, category, author, featured, views, publishedAt

API Endpoints

  • GET /api/articles - All articles
  • GET /api/articles/featured - Featured articles
  • GET /api/articles/popular - Popular articles by views
  • GET /api/articles/category/:category - Filter by category
  • GET /api/articles/:slug - Single article (increments views)
  • POST /api/articles - Create article
  • PATCH /api/articles/:id - Update article
  • DELETE /api/articles/:id - Delete article
  • POST /api/upload - Upload image file
  • GET /api/gallery - Shuffled Dropbox gallery images (with artist names from filenames)
  • GET /api/gallery/thumb - Proxy endpoint for Dropbox thumbnail resizing (sharp, 400x400, 30-min cache)
  • GET /api/news-feed - Google News RSS feed for Volksmusik/Schlager (15-min cache, stale-while-error)
  • GET /api/breaking-news - Google News RSS feed for general news (15-min cache, stale-while-error)
  • GET /api/videos - BunnyCDN video list (30-min cache, stale-while-error)
  • GET /api/videos/:guid - BunnyCDN video details

File Structure

  • shared/schema.ts - Drizzle schema + Zod validation
  • server/db.ts - Database connection
  • server/storage.ts - Storage interface + DatabaseStorage
  • server/routes.ts - API routes + gallery + news feed
  • server/seed.ts - Hardcoded seed data (articles)
  • server/gallery-data.json - 547 Dropbox gallery images
  • client/src/pages/home.tsx - MSN-style bento grid homepage
  • client/src/pages/article.tsx - Article detail page
  • client/src/pages/category.tsx - Category listing page
  • client/src/pages/videos.tsx - Videos page
  • client/src/pages/gallery.tsx - Full gallery page
  • client/src/pages/horoscope.tsx - Full horoscope page (12 signs, love/career/health, weekly/monthly)
  • client/src/pages/recipes.tsx - Full recipes page (21 recipes, 5 regions, AI-generated images)
  • client/src/lib/horoscope-data.ts - Shared horoscope data (signs, texts, helpers)
  • client/src/components/header.tsx - Header with nav (Start, News, Video, Galerie, Horoskop, Rezepte)
  • client/src/components/footer.tsx - Footer with links
  • client/src/components/photo-gallery.tsx - Gallery widget + lightbox carousel + paginated gallery page (24/batch infinite scroll) + artist name display
  • client/src/components/horoscope-widget.tsx - Horoscope widget with element colors
  • client/src/components/recipe-widget.tsx - Recipe widget with modal
  • client/src/components/news-widget.tsx - Google News RSS widget
  • client/src/components/adsense.tsx - AdSense ad components

Homepage Layout (MSN Bento Grid)

  • Row 1: FeaturedCarousel (hero + side articles + TopStorys, page 2 = wide hero)
  • Row 2: 2 articles + PhotoGalleryWidget + RecipeWidget (mixed)
  • Row 3: HoroscopeWidget + 2 articles + NewsWidget (mixed)
  • Row 4: 3 articles + NativeAdCard
  • Row 5: 3 articles + NativeAdCard

Branding

  • Dark theme (class="dark" on html)
  • Primary/brand color: crimson/red (RGB 218,35,77)
  • Background: 0 0% 5%, Card: 0 0% 9%
  • Font: Poppins
  • Logo: folx_MT_poz_b_1772296729169.png

External Services

  • Bunny.net: Library 476412, CDN vz-7982dfc4-cc8.b-cdn.net (NO autoplay)
  • Google AdSense: ca-pub-4465464714854276
  • Dropbox: Gallery image thumbnails (547 images from 16 folders)
  • Google News RSS: Volksmusik/Schlager news feed

Important Notes

  • Tailwind object-[center_25%] does NOT work — must use inline style={{ objectPosition: "center 25%" }}
  • Horoscope widget navigates to /horoskop on click (no modal)
  • News widget external links open in new tab (target="_blank")
  • FeaturedCarousel: page 1 = wide (5 cols, no side cards), last page = gallery
  • All images use objectPosition: "center 25%" for better face cropping