Need help with preact-hn?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

addyosmani
123 Stars 14 Forks Other 9 Commits 4 Opened issues

Description

ğŸ—ž Preact Hacker News

Services available

!
?

Need anything else?

Contributors list

# 392
HTML
progres...
Svelte
Gulp
6 commits

preact-hn

A Preact port of ReactHN - a React & react-router-powered implementation of Hacker News using its Firebase API.

This is mostly made possible thanks to

nwb --preact
. We need both Preact and preact-compat to get this all working. WebPageTest comparison of the React and Preact versions.

react-hn screenshot

Live version: https://preact-hn.appspot.com

Build differences:

React:

✔ Building React app

File sizes after gzip:

dist/vendor.511483ef.js 114.19 KB dist/app.8b44e34e.js 9.69 KB dist/sw-toolbox.js 5.84 KB dist/css/style.css 1.8 KB dist/PermalinkedComment.7106819e.js 1.56 KB dist/UserProfile.60e03f1c.js 618 B dist/core.js 590 B dist/runtime-caching.js 511 B dist/NotFound.c4c69d8e.js 214 B dist/build/vendor.js 186 B dist/service-worker.js 131 B

Preact:

✔ Building Preact app

File sizes after gzip:

dist/vendor.4833966e.js 79.34 KB dist/app.8b44e34e.js 9.68 KB dist/sw-toolbox.js 5.84 KB dist/service-worker.js 4.24 KB dist/css/style.css 1.8 KB dist/PermalinkedComment.7106819e.js 1.56 KB dist/UserProfile.60e03f1c.js 618 B dist/core.js 590 B dist/runtime-caching.js 511 B dist/NotFound.c4c69d8e.js 214 B dist/build/vendor.js 186 B

Features

  • Supports display of all item types: stories, jobs, polls and comments
  • Basic user profiles
  • Collapsible comment threads, with child counts
  • "Realtime" updates (free via Firebase!)
  • Last visit details for stories are cached in
    localStorage
  • New comments are highlighted:
    • Comments since your last visit to an item
    • New comments which load while you're reading an item
    • New comments in collapsed threads
  • Automatic or manual collapsing of comment threads which don't contain any new comments
  • Stories with new comments are marked on list pages
  • Stories can be marked as read to remove highighting from new comments
  • "comments" sections driven by the Changed Items API
  • Story listing pages are cached in
    sessionStorage
    for quick back button usage and pagination in the same session
  • Configurable settings:
    • auto collapse - automatically collapse comment threads without new comments on page load
    • show reply links - show "reply" links to Hacker News
    • show dead - show items flagged as dead
    • show deleted - show comments flagged as deleted in threads
  • Delayed comment detection - so tense! Who will it be? What will they say?

Feature requests are welcome!

Building

Install dependencies:

npm install

npm scripts

  • npm start
    - start development server
  • npm run build
    - build into the
    public/
    directory
  • npm run lint
    - lint
    src/
  • npm run lint:fix
    - lint
    src/
    and auto-fix issues where possible
  • npm run precache
    - generates Service Worker in
    public/
    directory

MIT Licensed

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.