sebastjanartic 4a7639b15d Add new pages and improve blog content display functionality

Implement new routes for articles, categories, and individual articles. Update the UI to display articles with improved content rendering, including safe HTML and media embeds. Refactor storage to use a database and add image upload capabilities.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: b96b221e-0ed6-418f-80df-e4670bf5ba4b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/cftwqyT
Replit-Helium-Checkpoint-Created: true

2026-02-28 16:38:38 +00:00

2.5 KiB

Raw Blame History

news.folx.tv - Blog Platform

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.

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

Article listing with featured carousel, grid layout, and popular sidebar
Individual article pages with full HTML content rendering
Category filtering (News, Star-News)
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

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

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
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

Branding

Dark theme by default (class="dark" on html)
Primary color: crimson/red (hsl 342 85% 53% light, hsl 9 75% 61% dark)
Font: Poppins
Logo: Folx TV branding image in header

2.5 KiB Raw Blame History