skills.rest
OpenSourceAGI
OpenSourceAGIOFFICIAL
Explore all skills by this author →
GitHub

ask-trending-news

Integrates the trending-news-api React widget and worker serving Wikipedia-driven trending news topics.

74|11|Updated Jul 4, 2024
Search Tags:#caching#react#widget#news api#cloudflare worker#wikipedia pageviews#trending news
One-click install
npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill ask-trending-news-opensourceagi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ask-trending-news
Source: https://github.com/OpenSourceAGI/qwksearch-research-agent/tree/main/skills/ask-trending-news
Command: npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill ask-trending-news-opensourceagi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Embedding a trending news widget requires wiring together a React component, a data backend, caching, and API keys; this Skill guides you through integrating the trending-news-api package, diagnosing blank widgets, and deploying its Cloudflare Worker backend. ## Core Features & Use Cases - Widget Integration: Render the TrendingNews React component with compact, expandable, and image modes, or fetch data directly via the useTrendingNews hook and getTrendingNews functions. - Backend Deployment: Serve trending data from the app's own /api/news/trending route or deploy the standalone Cloudflare Worker that joins Wikipedia daily pageviews with The News API. - Troubleshooting: Diagnose empty widgets, missing apiEndpoint errors, stale 10-minute caches, and non-article topics like "Main Page" leaking into results. - Use Case: Your self-hosted homepage shows a blank trending widget; use this Skill to identify the missing THENEWSAPI_API_KEY, set it as a Worker secret, and clear the client cache. ## Quick Start Ask the assistant to help embed the TrendingNews component on your homepage and configure the THENEWSAPI_API_KEY so the widget renders live topics.

Frequently Asked Questions about ask-trending-news

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a trending news widget to a React app?▼

Install trending-news-api and render the TrendingNews component with a required apiEndpoint prop pointing to your deployed worker or API route. Options like compact, expandable, maxTopics, and showImages control layout, while useTrendingNews gives raw data for custom UIs.

How do I deploy the trending news Cloudflare Worker?▼

Run bun run worker:deploy from packages/trending-news-api, then set the secret with bunx wrangler secret put THENEWSAPI_API_KEY --config worker/wrangler.jsonc. Paste the worker URL into the Trending News API URL setting or pass it as apiEndpoint.

Why is my trending news widget blank or empty?▼

A blank widget usually means THENEWSAPI_API_KEY is not configured, so the server returns 500 and the widget hides itself. It can also mean The News API returned no articles for the trending topics due to quota or plan limits.

Why does the trending news widget show stale data?▼

Every fetch is cached in localStorage for 10 minutes, keyed by the full request URL. After changing the apiEndpoint or fixing the API key, call clearTrendingNewsCache() to force a refetch.

Does the trending news widget work with server-side rendering?▼

The component is client-side; its localStorage cache guards on typeof window, but you should mark the host boundary with 'use client' to avoid SSR crashes on localStorage access.

Why do trending topics include Main Page or Special pages?▼

The worker filters non-article titles like Main Page and Special: entries using a NON_ARTICLE_TITLE list. Seeing them means the deployment is outdated, so redeploy the worker to apply the filter.

Related Skills

Explore More Software Engineering Skills→
jdconleyjdconley
1

deploy-cloudflare-bindings

Synchronize Cloudflare Worker bindings and wrangler configuration in CI/CD pipelines.

Community
Intermediate
adiytharpansaadiytharpansa

news-aggregator

Aggregate news from multiple sources and generate concise article summaries.

Community
Intermediate
Umbral-BotUmbral-Bot

provider-status

Query the Worker API for LLM provider status, quota usage, and routing configurations.

Official
Basic
botlearn-aibotlearn-ai
9

rss-manager

Aggregate RSS/Atom feeds into deduplicated, ranked topic digests.

Official
Advanced