sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
c13a5150b8
folx-tv/replit.md
sebastjanartic c13a5150b8 Restored to '3905f52571b4fa7e048e16d7a3b94ee66307d072' 
Replit-Restored-To: 3905f52571
2026-03-05 12:19:10 +00:00

6.9 KiB
Raw Blame History

Folx Music Television - folx.tv

Overview

The official website for Folx Music Television (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

Publishing Workflow

Adding or Updating Articles

  1. Edit seed data: Update server/seed.ts with new article data
    • Add new articles to the articlesData array
    • Update existing articles as needed
    • Use unique slugs for SEO-friendly URLs
  2. Run seed locally (for development testing):
    • Execute: npm run seed
    • This populates the development database with article data
  3. Commit changes: Push code changes to the repository
  4. Deploy to production:
    • Deployment is configured as "autoscale" type in .replit
    • Build command: npm run build
    • Run command: node ./dist/index.cjs
    • The production database is separate from the development database
    • Important: Seed must run on every deploy to ensure the production database is updated with new/modified articles
    • To run seed on deploy, add seed execution to the deployment process or manually trigger seed after deployment

Database Management

  • Development: Local PostgreSQL database (populated by npm run seed)
  • Production: Separate PostgreSQL database on Replit deployment
  • All article content is hardcoded in server/seed.ts for reproducible deployments
  • The DATABASE_URL environment variable automatically points to the correct database (local for dev, production for deploy)

Deployment Checklist

  • Update server/seed.ts with new article data
  • Test locally: run npm run seed and verify articles appear in dev
  • Run npm run build to ensure no build errors
  • Commit all changes
  • Deploy via Replit deployment interface
  • After deployment, ensure seed runs on the production database (may require manual trigger or additional setup)
  • Verify live site at https://www.folx.tv shows updated content

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