GitHub - fellowgeek/hacker-news-dashboard: A fullscreen digital signage dashboard for displaying live Hacker News headlines, built with vanilla JS, HTML, and CSS.

3 min read Original article ↗

Hacker News Dashboard

A fullscreen digital signage dashboard for displaying live Hacker News headlines, built with vanilla JS, HTML, and CSS. Designed for offices, hackathons, or personal use to keep up with the latest or top stories on Hacker News.

Demo

Live Demo

TV Demo

Features

  • Live Headline: Displays the latest or top Hacker News story in large, readable text.
  • Upvotes & Relative Time: Shows upvote count and how long ago the story was posted (e.g., "37 minutes ago").
  • QR Code: Scan to open the story on your device instantly.
  • Live Clock: Local time displayed in the top-left corner.
  • Automatic Refresh: Headlines update every 60 seconds.
  • Responsive Design: Looks great on TVs, monitors, and projectors.
  • Multiple Themes: Choose from 6 different visual styles including Neon, Newspaper, and Glass.

Getting Started

1. Clone or Download

git clone https://github.com/fellowgeek/hacker-news-dashboard.git
cd hacker-news-dashboard

Or download the ZIP and extract.

2. Open in Browser

Simply open index.html in your web browser. No build step or server required.

Usage

Default Behavior

  • By default, the dashboard shows the latest Hacker News story ("new" feed).

Show Top Stories

  • To display the top story instead, add ?feed=top to the URL:
    • Example: index.html?feed=top

Change Theme

  • To change the visual style, add ?theme=<name> to the URL.
  • Available themes:
    • default (Clean hacker news theme)
    • neon (Cyberpunk/Sci-fi)
    • newspaper (Classic serif print style)
    • popart (Bold, colorful comic style)
    • pastel (Soft, elegant light mode)
    • glass (Modern frosted glass effect)
  • Example: index.html?theme=neon
  • You can combine parameters: index.html?feed=top&theme=newspaper

Digital Signage / TV Mode

  • For best results, use in fullscreen mode (F11 or browser's fullscreen button).
  • Works on most modern browsers and devices.

Customization

  • Themes: The dashboard supports multiple themes. Check assets/css/ for styles-*.css files to see how they are implemented.
  • Headline Font: Fonts are dynamically loaded based on the selected theme.
  • Colors & Layout: Edit the specific theme CSS file (e.g., styles-neon.css) to customize that theme.
  • Refresh Interval: Change the refresh rate in main.js (default: 60 seconds).
  • Feed Type: Set the FEED_TYPE variable in main.js to 'top' or 'new' for a fixed feed.

How It Works

  1. Fetches story IDs from the Hacker News API (https://hacker-news.firebaseio.com/v0/newstories.json or topstories.json).
  2. Loads details for the first story (latest/top).
  3. Renders headline, upvotes, relative time, and QR code.
  4. Updates every minute; relative time and clock update every second.

Dependencies

  • QRCode.js for QR code generation (loaded via CDN).
  • day.js for date formatting (loaded via CDN).

No build tools or package managers required.

Troubleshooting

  • Headline says "Connecting...": Likely a network issue or API rate limit. Check your internet connection.
  • QR code not showing?: Make sure QRCode.js is loaded (see browser console for errors).
  • Font not loading?: Check Google Fonts CDN access.

License

MIT