# 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