A simple, fast, and visually appealing news aggregator built with Cloudflare Pages.
Fetches news from NewsAPI and displays them in a masonry-style card layout, supporting tag filtering, infinite scroll, and night mode.

• 🗞 Fetches news from NewsAPI Top Headlines
• 🏷 Supports tag-based filtering: Top, Technology, Business, Entertainment, Science, Health
• 🖼 Masonry / grid layout cards with image, title, description, source, and link
• 🔄 Infinite scroll to load more news
• 🌙 Night mode toggle
• ✨ Image fade-in effect with default placeholder for broken images
• ⚡ Cloudflare Pages serverless deployment (no backend server required)
• 🔁 Optional manual refresh button
• 💾 API requests are cached in KV to avoid exceeding NewsAPI limits

/functions        # Cloudflare Pages Functions
  news.js         # API proxy to fetch news and cache in KV
/public
  index.html      # Main frontend page
  style.css       # Styles for cards and night mode
  app.js          # Frontend JS: fetch, render, infinite scroll, tag switching
wrangler.toml     # Cloudflare Pages + Functions configuration

Set the following in Cloudflare Pages → Settings → Environment Variables:

⚠️ Do not hardcode the API key in frontend code. Use the Functions proxy to protect it.

1. Clone or fork this repository:

git clone https://github.com/yourusername/news-aggregator.git
cd news-aggregator

2. Connect to Cloudflare Pages:

• Go to Cloudflare Pages
• Click Create a Project → Connect your GitHub repo

3. Configure Build Settings:

• Framework: None / Static Site
• Build command: leave empty (if no build step)
• Build output directory: public

4. Add Functions support:

• KV namespace binding: Create name is NEWS_CACHE → bind to the KV namespace you created(name eg: newsfocus)

5. Add Environment Variables (see above)

6. Deploy:

• Click Save and Deploy → Pages will build and serve the static frontend and Functions API

7. Visit your site:

• Frontend will fetch news via /api/news automatically
• Infinite scroll and tag switching work out of the box

• 🛡 KV caching prevents hitting NewsAPI request limits. Frontend always fetches from KV via Functions.
• 🖼 Image loading: broken images automatically show placeholder
• 🎨 Styling: Customize style.css for card layout and night mode colors
• 🔄 Refreshing news: Use the "Refresh" button on the page to manually refresh cached news

You can also integrate Font Awesome icons in index.html if you want more visual flair.