92 lines
4.8 KiB
Markdown
92 lines
4.8 KiB
Markdown
# 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
|
|
- `GET /api/news-feed` - Google News RSS feed for Volksmusik/Schlager
|
|
- `GET /api/videos` - BunnyCDN video list
|
|
- `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
|
|
- `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
|