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
This commit is contained in:
sebastjanartic
@@ -1,7 +1,7 @@
|
||||
# news.folx.tv - Blog Platform
|
||||
# news.folx.tv - MSN-Style News Portal
|
||||
|
||||
## Overview
|
||||
A clean, modern blog/news platform for Folx Music Television (news.folx.tv). Dark-themed, content-first design inspired by Medium and The Verge, with support for video embeds from bunny.net, Facebook, Instagram, and TikTok.
|
||||
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)
|
||||
@@ -10,14 +10,16 @@ A clean, modern blog/news platform for Folx Music Television (news.folx.tv). Dar
|
||||
- **Routing**: wouter (frontend), Express (backend API)
|
||||
|
||||
## Key Features
|
||||
- Article listing with featured carousel, grid layout, and popular sidebar
|
||||
- Individual article pages with full HTML content rendering
|
||||
- Category filtering (News, Star-News)
|
||||
- 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
|
||||
- Image upload endpoint (multer) for article images
|
||||
- Responsive design with mobile navigation
|
||||
- SEO meta tags
|
||||
|
||||
## Data Model
|
||||
- `articles`: id (serial), title, slug (unique), excerpt, content (HTML), coverImage, category, author, featured, views, publishedAt
|
||||
@@ -32,27 +34,38 @@ A clean, modern blog/news platform for Folx Music Television (news.folx.tv). Dar
|
||||
- `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 (pg Pool)
|
||||
- `server/storage.ts` - Storage interface + DatabaseStorage implementation
|
||||
- `server/routes.ts` - API routes + file upload (multer)
|
||||
- `server/seed.ts` - Seed data for initial articles
|
||||
- `client/src/pages/home.tsx` - Homepage
|
||||
- `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/components/header.tsx` - Site header with nav
|
||||
- `client/src/components/footer.tsx` - Site footer
|
||||
|
||||
## Video Embeds
|
||||
Article content (HTML) supports iframe embeds. Allowed domains:
|
||||
- iframe.mediadelivery.net / video.bunny.net (Bunny.net)
|
||||
- www.facebook.com, www.instagram.com, www.tiktok.com
|
||||
- www.youtube.com, player.vimeo.com
|
||||
- `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 by default (class="dark" on html)
|
||||
- Primary color: crimson/red (hsl 342 85% 53% light, hsl 9 75% 61% dark)
|
||||
- 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 TV branding image in header
|
||||
- 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
|
||||
|
||||
Reference in New Issue
Block a user