sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
3d672766b8
folx-tv/replit.md
sebastjanartic 3d672766b8 Add pagination to article categories and video pages, and enhance home page with more content and ads 
Implement paginated API endpoints for articles and videos, add pagination UI to category and video pages, and inject additional ads and content widgets into the home page.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c201f10b-bbd3-4402-9212-e0b79bfa670f
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/EtK2Sno
Replit-Helium-Checkpoint-Created: true
2026-03-05 09:48:56 +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