59 lines
2.5 KiB
Markdown
59 lines
2.5 KiB
Markdown
# 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
|