sebastjanartic d28c36131c 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

3.4 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, recipe widget, 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 FeaturedCarousel, HeroCard, MediumCard, TopStoriesList
Photo gallery widget (156 Dropbox images) with fullscreen lightbox carousel
Horoscope widget (12 zodiac signs, daily rotating texts)
Recipe widget (6 Austrian/Slovenian recipes with modal)
Google News RSS widget (Volksmusik/Schlager news)
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
GET /api/news-feed - Google News RSS feed for Volksmusik/Schlager

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 (7 articles)
server/gallery-data.json - 156 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/components/header.tsx - Header with nav (Start, News, Video, Galerie)
client/src/components/footer.tsx - Footer with links
client/src/components/photo-gallery.tsx - Gallery widget + lightbox carousel
client/src/components/horoscope-widget.tsx - Horoscope widget
client/src/components/recipe-widget.tsx - Recipe widget
client/src/components/news-widget.tsx - Google News RSS widget
client/src/components/adsense.tsx - AdSense ad components

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
Google News RSS: Volksmusik/Schlager news feed

3.4 KiB Raw Blame History