Vite/React + shadcn/ui frontend with Superhuman-style keyboard nav (j/k/o/v/e/s/u, feed switching, localStorage caching for instant loads) backed by an Express API that polls the HN Firebase API into Postgres and serves cached feeds/comments. Instrumented with OpenTelemetry (traces/metrics/logs via OTLP/HTTP).
This commit is contained in:
privatecloud builder
@@ -0,0 +1,7 @@
|
||||
PORT=3012
|
||||
POSTGRES_HOST=127.0.0.1
|
||||
POSTGRES_PORT=5433
|
||||
POSTGRES_DB=hnreader
|
||||
POSTGRES_USER=hnreader
|
||||
POSTGRES_PASSWORD=changeme
|
||||
OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318
|
||||
@@ -0,0 +1,31 @@
|
||||
name: CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: ['**']
|
||||
pull_request:
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '22'
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Lint
|
||||
run: npm run lint
|
||||
|
||||
- name: Typecheck
|
||||
run: npx tsc -b
|
||||
|
||||
- name: Build
|
||||
run: npm run build
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
.env
|
||||
.env.docker
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||
"plugins": ["react", "typescript", "oxc"],
|
||||
"rules": {
|
||||
"react/rules-of-hooks": "error",
|
||||
"react/only-export-components": ["warn", { "allowConstantExport": true }]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
# HN Reader
|
||||
|
||||
A lightweight, keyboard-driven Hacker News reader. Navigate like
|
||||
Superhuman/Linear: `j`/`k` to move, `o`/`Enter` to read, `e` to
|
||||
archive, `s` to star, numbers to switch feeds. Feed data is cached in
|
||||
`localStorage` for instant loads, then revalidated in the background.
|
||||
|
||||
Press `?` in the app for the full shortcut list.
|
||||
|
||||
## Stack
|
||||
|
||||
- **Frontend**: Vite + React + TypeScript, [shadcn/ui](https://ui.shadcn.com) (Radix primitives, Tailwind v4, Nova preset)
|
||||
- **Backend**: Express (`server/`), polls the [HN Firebase API](https://github.com/HackerNews/API) every 5 minutes and caches stories in Postgres
|
||||
- **Database**: Postgres 16 (Docker), schema in `scripts/init.sql`
|
||||
- **Observability**: OpenTelemetry traces/metrics/logs shipped via OTLP/HTTP
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
src/ React SPA (feeds, keyboard nav, comments dialog)
|
||||
server/ Express API + HN sync job + OTel bootstrap
|
||||
scripts/ DB schema, backup script
|
||||
docker-compose.yml Postgres container for this app
|
||||
.gitea/workflows/ CI: lint, typecheck, build
|
||||
```
|
||||
|
||||
The API caches HN's top/new/best/ask/show/job feeds (100 items each)
|
||||
in Postgres so the frontend never talks to Hacker News directly.
|
||||
Per-story read/starred/archived state lives in `story_state` and is
|
||||
returned inline with each feed response.
|
||||
|
||||
## Local development
|
||||
|
||||
```bash
|
||||
cp .env.example .env # fill in POSTGRES_PASSWORD
|
||||
docker compose up -d # start Postgres
|
||||
npm install
|
||||
npm run dev:server # API on :3012 (loaded from .env)
|
||||
npm run dev # Vite dev server on :3012, proxies /api
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Runs as the `app-54d6877c` systemd unit: builds are not automated on
|
||||
deploy, so after pulling changes run `npm run build` then restart the
|
||||
service (`sudo systemctl restart app-54d6877c`). The compiled SPA is
|
||||
served as static files by the same Express process that serves `/api`,
|
||||
on port **3012**.
|
||||
|
||||
Nightly Postgres backups run via the `app-54d6877c-backup.timer`
|
||||
systemd timer (`scripts/backup.sh`), keeping 7 days of `pg_dump`
|
||||
snapshots in `~/backups`.
|
||||
|
||||
## Design system
|
||||
|
||||
Built with `shadcn/ui` (`components.json`, Radix base, Nova preset).
|
||||
Components live under `src/components/ui` and are added with
|
||||
`npx shadcn@latest add <component>` — nothing here is hand-rolled, so
|
||||
swapping in a custom registry later (e.g. a `privatecloud` registry)
|
||||
is a matter of updating `components.json`'s `registries` field and
|
||||
re-running `add` against it.
|
||||
|
||||
## Observability
|
||||
|
||||
The API sends traces, metrics, and logs to an OTLP/HTTP collector at
|
||||
`OTEL_EXPORTER_OTLP_ENDPOINT` (defaults to `http://localhost:4318`),
|
||||
instrumenting HTTP, Express, and Postgres calls automatically via
|
||||
`@opentelemetry/auto-instrumentations-node`. View it in Grafana at
|
||||
`localhost:3400`.
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "radix-nova",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "src/index.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"iconLibrary": "lucide",
|
||||
"rtl": false,
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"menuColor": "default",
|
||||
"menuAccent": "subtle",
|
||||
"registries": {}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
services:
|
||||
postgres:
|
||||
image: postgres:16-alpine
|
||||
container_name: hn-reader-postgres
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
POSTGRES_DB: hnreader
|
||||
POSTGRES_USER: hnreader
|
||||
POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
|
||||
ports:
|
||||
- "127.0.0.1:5433:5432"
|
||||
volumes:
|
||||
- hn-reader-pgdata:/var/lib/postgresql/data
|
||||
- ./scripts/init.sql:/docker-entrypoint-initdb.d/init.sql:ro
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "pg_isready -U hnreader -d hnreader"]
|
||||
interval: 5s
|
||||
timeout: 5s
|
||||
retries: 10
|
||||
|
||||
volumes:
|
||||
hn-reader-pgdata:
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HN Reader</title>
|
||||
<meta name="description" content="A fast, keyboard-driven Hacker News reader." />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+10058
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"name": "hn-reader-54d6877c",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev:server": "node server/index.js",
|
||||
"build": "tsc -b && vite build",
|
||||
"start": "NODE_ENV=production node server/index.js",
|
||||
"lint": "oxlint",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource-variable/geist": "^5.3.0",
|
||||
"@opentelemetry/api": "^1.9.1",
|
||||
"@opentelemetry/api-logs": "^0.221.0",
|
||||
"@opentelemetry/auto-instrumentations-node": "^0.79.0",
|
||||
"@opentelemetry/exporter-logs-otlp-http": "^0.221.0",
|
||||
"@opentelemetry/exporter-metrics-otlp-http": "^0.221.0",
|
||||
"@opentelemetry/exporter-trace-otlp-http": "^0.221.0",
|
||||
"@opentelemetry/resources": "^2.10.0",
|
||||
"@opentelemetry/sdk-logs": "^0.221.0",
|
||||
"@opentelemetry/sdk-metrics": "^2.10.0",
|
||||
"@opentelemetry/sdk-node": "^0.221.0",
|
||||
"@opentelemetry/semantic-conventions": "^1.43.0",
|
||||
"@tailwindcss/vite": "^4.3.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cors": "^2.8.6",
|
||||
"dotenv": "^17.4.2",
|
||||
"express": "^5.2.1",
|
||||
"lucide-react": "^1.26.0",
|
||||
"next-themes": "^0.4.6",
|
||||
"pg": "^8.22.0",
|
||||
"radix-ui": "^1.6.7",
|
||||
"react": "^19.2.7",
|
||||
"react-dom": "^19.2.7",
|
||||
"shadcn": "^4.14.1",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.6.0",
|
||||
"tailwindcss": "^4.3.3",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.13.3",
|
||||
"@types/react": "^19.2.17",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.3",
|
||||
"oxlint": "^1.71.0",
|
||||
"typescript": "~6.0.2",
|
||||
"vite": "^8.1.1"
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
Executable
+16
@@ -0,0 +1,16 @@
|
||||
#!/usr/bin/env bash
|
||||
# Nightly Postgres backup for the HN Reader app. Invoked by app-54d6877c-backup.timer.
|
||||
set -euo pipefail
|
||||
|
||||
BACKUP_DIR="/home/exedev/backups"
|
||||
RETENTION_DAYS=7
|
||||
TIMESTAMP="$(date -u +%Y%m%dT%H%M%SZ)"
|
||||
FILE="$BACKUP_DIR/hn-reader-$TIMESTAMP.sql.gz"
|
||||
|
||||
mkdir -p "$BACKUP_DIR"
|
||||
|
||||
docker exec hn-reader-postgres pg_dump -U hnreader -d hnreader | gzip > "$FILE"
|
||||
|
||||
find "$BACKUP_DIR" -name 'hn-reader-*.sql.gz' -mtime +"$RETENTION_DAYS" -delete
|
||||
|
||||
echo "Backed up hn-reader database to $FILE"
|
||||
@@ -0,0 +1,38 @@
|
||||
-- Schema for hn-reader: cached Hacker News stories + local read state.
|
||||
-- Single-user app: no user table, state is keyed directly by story id.
|
||||
|
||||
CREATE TABLE IF NOT EXISTS stories (
|
||||
id BIGINT PRIMARY KEY, -- Hacker News item id
|
||||
type TEXT NOT NULL DEFAULT 'story',
|
||||
title TEXT NOT NULL,
|
||||
url TEXT,
|
||||
domain TEXT,
|
||||
by_user TEXT,
|
||||
score INTEGER NOT NULL DEFAULT 0,
|
||||
descendants INTEGER NOT NULL DEFAULT 0, -- comment count
|
||||
story_text TEXT, -- self-text for Ask HN / Show HN
|
||||
hn_created_at TIMESTAMPTZ NOT NULL,
|
||||
fetched_at TIMESTAMPTZ NOT NULL DEFAULT now()
|
||||
);
|
||||
|
||||
-- Which feed(s) a story currently ranks in, and at what rank, so the
|
||||
-- frontend can render top/new/best/ask/show/job lists from one table.
|
||||
CREATE TABLE IF NOT EXISTS feed_items (
|
||||
feed TEXT NOT NULL, -- top | new | best | ask | show | job
|
||||
rank INTEGER NOT NULL,
|
||||
story_id BIGINT NOT NULL REFERENCES stories(id) ON DELETE CASCADE,
|
||||
updated_at TIMESTAMPTZ NOT NULL DEFAULT now(),
|
||||
PRIMARY KEY (feed, rank)
|
||||
);
|
||||
|
||||
CREATE INDEX IF NOT EXISTS feed_items_story_idx ON feed_items(story_id);
|
||||
|
||||
-- Per-story local state: read/starred/archived, superhuman-style.
|
||||
CREATE TABLE IF NOT EXISTS story_state (
|
||||
story_id BIGINT PRIMARY KEY REFERENCES stories(id) ON DELETE CASCADE,
|
||||
read BOOLEAN NOT NULL DEFAULT false,
|
||||
starred BOOLEAN NOT NULL DEFAULT false,
|
||||
archived BOOLEAN NOT NULL DEFAULT false,
|
||||
read_at TIMESTAMPTZ,
|
||||
updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
|
||||
);
|
||||
@@ -0,0 +1,11 @@
|
||||
const { Pool } = require('pg')
|
||||
|
||||
const pool = new Pool({
|
||||
host: process.env.POSTGRES_HOST || '127.0.0.1',
|
||||
port: Number(process.env.POSTGRES_PORT || 5433),
|
||||
database: process.env.POSTGRES_DB || 'hnreader',
|
||||
user: process.env.POSTGRES_USER || 'hnreader',
|
||||
password: process.env.POSTGRES_PASSWORD,
|
||||
})
|
||||
|
||||
module.exports = { pool }
|
||||
+160
@@ -0,0 +1,160 @@
|
||||
const { pool } = require('./db')
|
||||
const { log } = require('./otel')
|
||||
|
||||
const HN_BASE = 'https://hacker-news.firebaseio.com/v0'
|
||||
|
||||
const FEEDS = {
|
||||
top: 'topstories',
|
||||
new: 'newstories',
|
||||
best: 'beststories',
|
||||
ask: 'askstories',
|
||||
show: 'showstories',
|
||||
job: 'jobstories',
|
||||
}
|
||||
|
||||
const ITEMS_PER_FEED = 100
|
||||
const FETCH_CONCURRENCY = 20
|
||||
|
||||
async function fetchJson(url) {
|
||||
const res = await fetch(url)
|
||||
if (!res.ok) throw new Error(`HN API ${res.status} for ${url}`)
|
||||
return res.json()
|
||||
}
|
||||
|
||||
function domainOf(url) {
|
||||
if (!url) return null
|
||||
try {
|
||||
return new URL(url).hostname.replace(/^www\./, '')
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
async function mapWithConcurrency(items, limit, fn) {
|
||||
const results = new Array(items.length)
|
||||
let next = 0
|
||||
async function worker() {
|
||||
while (next < items.length) {
|
||||
const i = next++
|
||||
results[i] = await fn(items[i], i)
|
||||
}
|
||||
}
|
||||
await Promise.all(Array.from({ length: Math.min(limit, items.length) }, worker))
|
||||
return results
|
||||
}
|
||||
|
||||
async function fetchItem(id) {
|
||||
return fetchJson(`${HN_BASE}/item/${id}.json`)
|
||||
}
|
||||
|
||||
async function syncFeed(feedKey) {
|
||||
const endpoint = FEEDS[feedKey]
|
||||
const ids = (await fetchJson(`${HN_BASE}/${endpoint}.json`)).slice(0, ITEMS_PER_FEED)
|
||||
|
||||
const items = await mapWithConcurrency(ids, FETCH_CONCURRENCY, async (id) => {
|
||||
try {
|
||||
return await fetchItem(id)
|
||||
} catch (err) {
|
||||
log('ERROR', 'failed to fetch HN item', { id, error: String(err) })
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
const client = await pool.connect()
|
||||
try {
|
||||
await client.query('BEGIN')
|
||||
let rank = 0
|
||||
for (const item of items) {
|
||||
if (!item || item.deleted || item.dead) continue
|
||||
await client.query(
|
||||
`INSERT INTO stories (id, type, title, url, domain, by_user, score, descendants, story_text, hn_created_at, fetched_at)
|
||||
VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9, to_timestamp($10), now())
|
||||
ON CONFLICT (id) DO UPDATE SET
|
||||
title = EXCLUDED.title,
|
||||
url = EXCLUDED.url,
|
||||
domain = EXCLUDED.domain,
|
||||
score = EXCLUDED.score,
|
||||
descendants = EXCLUDED.descendants,
|
||||
story_text = EXCLUDED.story_text,
|
||||
fetched_at = now()`,
|
||||
[
|
||||
item.id,
|
||||
item.type || 'story',
|
||||
item.title || '(untitled)',
|
||||
item.url || null,
|
||||
domainOf(item.url),
|
||||
item.by || null,
|
||||
item.score || 0,
|
||||
item.descendants || 0,
|
||||
item.text || null,
|
||||
item.time || Math.floor(Date.now() / 1000),
|
||||
]
|
||||
)
|
||||
await client.query(
|
||||
`INSERT INTO story_state (story_id) VALUES ($1) ON CONFLICT (story_id) DO NOTHING`,
|
||||
[item.id]
|
||||
)
|
||||
await client.query(
|
||||
`INSERT INTO feed_items (feed, rank, story_id, updated_at) VALUES ($1,$2,$3, now())
|
||||
ON CONFLICT (feed, rank) DO UPDATE SET story_id = EXCLUDED.story_id, updated_at = now()`,
|
||||
[feedKey, rank, item.id]
|
||||
)
|
||||
rank++
|
||||
}
|
||||
// Drop stale ranks past what we just wrote (feed shrank).
|
||||
await client.query('DELETE FROM feed_items WHERE feed = $1 AND rank >= $2', [feedKey, rank])
|
||||
await client.query('COMMIT')
|
||||
log('INFO', 'synced feed', { feed: feedKey, count: rank })
|
||||
} catch (err) {
|
||||
await client.query('ROLLBACK')
|
||||
throw err
|
||||
} finally {
|
||||
client.release()
|
||||
}
|
||||
}
|
||||
|
||||
async function syncAll() {
|
||||
for (const feedKey of Object.keys(FEEDS)) {
|
||||
try {
|
||||
await syncFeed(feedKey)
|
||||
} catch (err) {
|
||||
log('ERROR', 'feed sync failed', { feed: feedKey, error: String(err) })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const MAX_COMMENT_NODES = 300
|
||||
|
||||
async function fetchCommentsTree(storyId, maxDepth = 6) {
|
||||
let count = 0
|
||||
|
||||
async function walk(id, depth) {
|
||||
if (count >= MAX_COMMENT_NODES) return null
|
||||
const item = await fetchItem(id)
|
||||
count++
|
||||
if (!item || item.deleted || item.dead) return null
|
||||
|
||||
let kids = []
|
||||
if (item.kids && depth < maxDepth && count < MAX_COMMENT_NODES) {
|
||||
const childItems = await mapWithConcurrency(
|
||||
item.kids,
|
||||
FETCH_CONCURRENCY,
|
||||
(kidId) => walk(kidId, depth + 1)
|
||||
)
|
||||
kids = childItems.filter(Boolean)
|
||||
}
|
||||
|
||||
return {
|
||||
id: item.id,
|
||||
by: item.by || null,
|
||||
text: item.text || null,
|
||||
time: item.time || null,
|
||||
kids,
|
||||
}
|
||||
}
|
||||
|
||||
return Promise.all((await fetchItem(storyId)).kids?.slice(0, 40).map((id) => walk(id, 1)) || [])
|
||||
.then((list) => list.filter(Boolean))
|
||||
}
|
||||
|
||||
module.exports = { FEEDS, syncAll, syncFeed, fetchItem, fetchCommentsTree }
|
||||
+134
@@ -0,0 +1,134 @@
|
||||
require('dotenv').config({ quiet: true })
|
||||
require('./otel') // must load before express/pg are used, for auto-instrumentation
|
||||
|
||||
const path = require('path')
|
||||
const express = require('express')
|
||||
const cors = require('cors')
|
||||
const { pool } = require('./db')
|
||||
const { log } = require('./otel')
|
||||
const { FEEDS, syncAll, fetchCommentsTree } = require('./hn')
|
||||
|
||||
const PORT = Number(process.env.PORT || 3012)
|
||||
const SYNC_INTERVAL_MS = 5 * 60 * 1000
|
||||
|
||||
const app = express()
|
||||
app.use(cors())
|
||||
app.use(express.json())
|
||||
|
||||
app.get('/api/health', async (_req, res) => {
|
||||
try {
|
||||
await pool.query('SELECT 1')
|
||||
res.json({ ok: true })
|
||||
} catch (err) {
|
||||
res.status(503).json({ ok: false, error: String(err) })
|
||||
}
|
||||
})
|
||||
|
||||
app.get('/api/feed/:feed', async (req, res) => {
|
||||
const { feed } = req.params
|
||||
if (!FEEDS[feed]) return res.status(404).json({ error: 'unknown feed' })
|
||||
|
||||
const limit = Math.min(Number(req.query.limit) || 100, 100)
|
||||
const includeArchived = req.query.includeArchived === 'true'
|
||||
|
||||
try {
|
||||
const { rows } = await pool.query(
|
||||
`SELECT s.id, s.type, s.title, s.url, s.domain, s.by_user, s.score, s.descendants,
|
||||
s.story_text, s.hn_created_at, fi.rank,
|
||||
COALESCE(st.read, false) AS read,
|
||||
COALESCE(st.starred, false) AS starred,
|
||||
COALESCE(st.archived, false) AS archived
|
||||
FROM feed_items fi
|
||||
JOIN stories s ON s.id = fi.story_id
|
||||
LEFT JOIN story_state st ON st.story_id = s.id
|
||||
WHERE fi.feed = $1 ${includeArchived ? '' : 'AND COALESCE(st.archived, false) = false'}
|
||||
ORDER BY fi.rank ASC
|
||||
LIMIT $2`,
|
||||
[feed, limit]
|
||||
)
|
||||
res.json({ feed, items: rows })
|
||||
} catch (err) {
|
||||
log('ERROR', 'feed query failed', { feed, error: String(err) })
|
||||
res.status(500).json({ error: 'internal error' })
|
||||
}
|
||||
})
|
||||
|
||||
app.get('/api/story/:id', async (req, res) => {
|
||||
const id = Number(req.params.id)
|
||||
try {
|
||||
const { rows } = await pool.query(
|
||||
`SELECT s.*, COALESCE(st.read, false) AS read,
|
||||
COALESCE(st.starred, false) AS starred,
|
||||
COALESCE(st.archived, false) AS archived
|
||||
FROM stories s
|
||||
LEFT JOIN story_state st ON st.story_id = s.id
|
||||
WHERE s.id = $1`,
|
||||
[id]
|
||||
)
|
||||
if (!rows.length) return res.status(404).json({ error: 'not found' })
|
||||
res.json(rows[0])
|
||||
} catch (err) {
|
||||
log('ERROR', 'story query failed', { id, error: String(err) })
|
||||
res.status(500).json({ error: 'internal error' })
|
||||
}
|
||||
})
|
||||
|
||||
app.get('/api/story/:id/comments', async (req, res) => {
|
||||
const id = Number(req.params.id)
|
||||
try {
|
||||
const comments = await fetchCommentsTree(id)
|
||||
res.json({ id, comments })
|
||||
} catch (err) {
|
||||
log('ERROR', 'comments fetch failed', { id, error: String(err) })
|
||||
res.status(502).json({ error: 'failed to fetch comments' })
|
||||
}
|
||||
})
|
||||
|
||||
app.post('/api/story/:id/state', async (req, res) => {
|
||||
const id = Number(req.params.id)
|
||||
const { read, starred, archived } = req.body || {}
|
||||
try {
|
||||
const { rows } = await pool.query(
|
||||
`INSERT INTO story_state (story_id, read, starred, archived, read_at, updated_at)
|
||||
VALUES ($1, COALESCE($2, false), COALESCE($3, false), COALESCE($4, false),
|
||||
CASE WHEN $2 THEN now() ELSE NULL END, now())
|
||||
ON CONFLICT (story_id) DO UPDATE SET
|
||||
read = COALESCE($2, story_state.read),
|
||||
starred = COALESCE($3, story_state.starred),
|
||||
archived = COALESCE($4, story_state.archived),
|
||||
read_at = CASE WHEN COALESCE($2, story_state.read) AND NOT story_state.read
|
||||
THEN now() ELSE story_state.read_at END,
|
||||
updated_at = now()
|
||||
RETURNING *`,
|
||||
[id, read, starred, archived]
|
||||
)
|
||||
res.json(rows[0])
|
||||
} catch (err) {
|
||||
log('ERROR', 'state update failed', { id, error: String(err) })
|
||||
res.status(500).json({ error: 'internal error' })
|
||||
}
|
||||
})
|
||||
|
||||
app.post('/api/sync', async (_req, res) => {
|
||||
syncAll().catch((err) => log('ERROR', 'manual sync failed', { error: String(err) }))
|
||||
res.json({ ok: true, started: true })
|
||||
})
|
||||
|
||||
// Serve the built frontend in production.
|
||||
const distDir = path.join(__dirname, '..', 'dist')
|
||||
app.use(express.static(distDir))
|
||||
app.get(/^(?!\/api).*/, (_req, res) => {
|
||||
res.sendFile(path.join(distDir, 'index.html'))
|
||||
})
|
||||
|
||||
app.listen(PORT, () => {
|
||||
log('INFO', 'hn-reader-api listening', { port: PORT })
|
||||
})
|
||||
|
||||
syncAll()
|
||||
.then(() => log('INFO', 'initial sync complete'))
|
||||
.catch((err) => log('ERROR', 'initial sync failed', { error: String(err) }))
|
||||
|
||||
setInterval(() => {
|
||||
syncAll().catch((err) => log('ERROR', 'periodic sync failed', { error: String(err) }))
|
||||
}, SYNC_INTERVAL_MS)
|
||||
@@ -0,0 +1,59 @@
|
||||
// OpenTelemetry bootstrap: sends traces, metrics and logs to the LGTM
|
||||
// stack's OTLP/HTTP collector at http://localhost:4318. Must be required
|
||||
// before any other module so auto-instrumentation can patch http/express/pg.
|
||||
const { NodeSDK } = require('@opentelemetry/sdk-node')
|
||||
const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node')
|
||||
const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http')
|
||||
const { OTLPMetricExporter } = require('@opentelemetry/exporter-metrics-otlp-http')
|
||||
const { OTLPLogExporter } = require('@opentelemetry/exporter-logs-otlp-http')
|
||||
const { PeriodicExportingMetricReader } = require('@opentelemetry/sdk-metrics')
|
||||
const { BatchLogRecordProcessor } = require('@opentelemetry/sdk-logs')
|
||||
const { resourceFromAttributes } = require('@opentelemetry/resources')
|
||||
const { ATTR_SERVICE_NAME, ATTR_SERVICE_VERSION } = require('@opentelemetry/semantic-conventions')
|
||||
const { logs } = require('@opentelemetry/api-logs')
|
||||
|
||||
const endpoint = process.env.OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4318'
|
||||
|
||||
const resource = resourceFromAttributes({
|
||||
[ATTR_SERVICE_NAME]: 'hn-reader-api',
|
||||
[ATTR_SERVICE_VERSION]: '1.0.0',
|
||||
})
|
||||
|
||||
const sdk = new NodeSDK({
|
||||
resource,
|
||||
traceExporter: new OTLPTraceExporter({ url: `${endpoint}/v1/traces` }),
|
||||
metricReader: new PeriodicExportingMetricReader({
|
||||
exporter: new OTLPMetricExporter({ url: `${endpoint}/v1/metrics` }),
|
||||
exportIntervalMillis: 15000,
|
||||
}),
|
||||
logRecordProcessors: [
|
||||
new BatchLogRecordProcessor(new OTLPLogExporter({ url: `${endpoint}/v1/logs` })),
|
||||
],
|
||||
instrumentations: [
|
||||
getNodeAutoInstrumentations({
|
||||
'@opentelemetry/instrumentation-fs': { enabled: false },
|
||||
}),
|
||||
],
|
||||
})
|
||||
|
||||
sdk.start()
|
||||
|
||||
process.on('SIGTERM', () => sdk.shutdown().finally(() => process.exit(0)))
|
||||
|
||||
const otelLogger = logs.getLogger('hn-reader-api')
|
||||
|
||||
// Small structured logger: prints to stdout (captured by journald) and
|
||||
// emits an OTLP log record so logs show up alongside traces in Grafana.
|
||||
function log(severity, message, attributes = {}) {
|
||||
const line = `[${severity}] ${message} ${Object.keys(attributes).length ? JSON.stringify(attributes) : ''}`
|
||||
if (severity === 'ERROR') console.error(line)
|
||||
else console.log(line)
|
||||
|
||||
otelLogger.emit({
|
||||
severityText: severity,
|
||||
body: message,
|
||||
attributes,
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = { log }
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"type": "commonjs"
|
||||
}
|
||||
+195
@@ -0,0 +1,195 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { Keyboard, Loader2, RotateCw } from 'lucide-react'
|
||||
import { Toaster, toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { FeedTabs } from '@/components/FeedTabs'
|
||||
import { StoryList } from '@/components/StoryList'
|
||||
import { CommentsDialog } from '@/components/CommentsDialog'
|
||||
import { ShortcutsDialog } from '@/components/ShortcutsDialog'
|
||||
import { useFeed } from '@/hooks/useFeed'
|
||||
import { useHotkeys } from '@/hooks/useHotkeys'
|
||||
import { updateStoryState } from '@/lib/api'
|
||||
import type { FeedKey, Story } from '@/types/story'
|
||||
|
||||
const FEED_ORDER: FeedKey[] = ['top', 'new', 'best', 'ask', 'show', 'job']
|
||||
const LAST_FEED_KEY = 'hn-reader:v1:last-feed'
|
||||
|
||||
function isFeedKey(v: string | null): v is FeedKey {
|
||||
return !!v && (FEED_ORDER as string[]).includes(v)
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [feed, setFeed] = useState<FeedKey>(() => {
|
||||
const saved = localStorage.getItem(LAST_FEED_KEY)
|
||||
return isFeedKey(saved) ? saved : 'top'
|
||||
})
|
||||
const [selectedIndex, setSelectedIndex] = useState(0)
|
||||
const [commentsStory, setCommentsStory] = useState<Story | null>(null)
|
||||
const [commentsOpen, setCommentsOpen] = useState(false)
|
||||
const [shortcutsOpen, setShortcutsOpen] = useState(false)
|
||||
|
||||
const { items, loading, refresh, patchStory } = useFeed(feed)
|
||||
|
||||
const visible = useMemo(() => items.filter((s) => !s.archived), [items])
|
||||
const selected = visible[selectedIndex] ?? null
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem(LAST_FEED_KEY, feed)
|
||||
setSelectedIndex(0)
|
||||
}, [feed])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedIndex >= visible.length) {
|
||||
setSelectedIndex(Math.max(0, visible.length - 1))
|
||||
}
|
||||
}, [visible.length, selectedIndex])
|
||||
|
||||
useEffect(() => {
|
||||
if (selected) {
|
||||
document
|
||||
.getElementById(`story-${selected.id}`)
|
||||
?.scrollIntoView({ block: 'nearest' })
|
||||
}
|
||||
}, [selected])
|
||||
|
||||
const markRead = useCallback(
|
||||
(story: Story) => {
|
||||
if (story.read) return
|
||||
patchStory(story.id, { read: true })
|
||||
updateStoryState(story.id, { read: true }).catch(() => {})
|
||||
},
|
||||
[patchStory]
|
||||
)
|
||||
|
||||
const openComments = useCallback(
|
||||
(story: Story) => {
|
||||
markRead(story)
|
||||
setCommentsStory(story)
|
||||
setCommentsOpen(true)
|
||||
},
|
||||
[markRead]
|
||||
)
|
||||
|
||||
const openExternal = useCallback(
|
||||
(story: Story) => {
|
||||
markRead(story)
|
||||
const url = story.url ?? `https://news.ycombinator.com/item?id=${story.id}`
|
||||
window.open(url, '_blank', 'noopener,noreferrer')
|
||||
},
|
||||
[markRead]
|
||||
)
|
||||
|
||||
const archive = useCallback(
|
||||
(story: Story) => {
|
||||
patchStory(story.id, { archived: true })
|
||||
updateStoryState(story.id, { archived: true }).catch(() => {})
|
||||
toast('Archived', { description: story.title })
|
||||
},
|
||||
[patchStory]
|
||||
)
|
||||
|
||||
const toggleStar = useCallback(
|
||||
(story: Story) => {
|
||||
const starred = !story.starred
|
||||
patchStory(story.id, { starred })
|
||||
updateStoryState(story.id, { starred }).catch(() => {})
|
||||
},
|
||||
[patchStory]
|
||||
)
|
||||
|
||||
const toggleRead = useCallback(
|
||||
(story: Story) => {
|
||||
const read = !story.read
|
||||
patchStory(story.id, { read })
|
||||
updateStoryState(story.id, { read }).catch(() => {})
|
||||
},
|
||||
[patchStory]
|
||||
)
|
||||
|
||||
const move = useCallback(
|
||||
(delta: number) => {
|
||||
setSelectedIndex((i) => Math.min(Math.max(i + delta, 0), visible.length - 1))
|
||||
},
|
||||
[visible.length]
|
||||
)
|
||||
|
||||
useHotkeys(
|
||||
{
|
||||
j: () => move(1),
|
||||
ArrowDown: () => move(1),
|
||||
k: () => move(-1),
|
||||
ArrowUp: () => move(-1),
|
||||
o: () => selected && openComments(selected),
|
||||
Enter: () => selected && openComments(selected),
|
||||
v: () => selected && openExternal(selected),
|
||||
e: () => selected && archive(selected),
|
||||
s: () => selected && toggleStar(selected),
|
||||
u: () => selected && toggleRead(selected),
|
||||
r: () => refresh(),
|
||||
'?': () => setShortcutsOpen((v) => !v),
|
||||
Escape: () => {
|
||||
setCommentsOpen(false)
|
||||
setShortcutsOpen(false)
|
||||
},
|
||||
'1': () => setFeed('top'),
|
||||
'2': () => setFeed('new'),
|
||||
'3': () => setFeed('best'),
|
||||
'4': () => setFeed('ask'),
|
||||
'5': () => setFeed('show'),
|
||||
'6': () => setFeed('job'),
|
||||
},
|
||||
[selected, move, openComments, openExternal, archive, toggleStar, toggleRead, refresh]
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex min-h-svh w-full max-w-2xl flex-col border-x border-border bg-background">
|
||||
<Toaster position="bottom-center" />
|
||||
|
||||
<header className="sticky top-0 z-10 flex items-center justify-between gap-2 border-b border-border bg-background/95 px-3 py-2 backdrop-blur sm:px-4">
|
||||
<h1 className="text-sm font-semibold tracking-tight">HN Reader</h1>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button variant="ghost" size="icon" onClick={() => refresh()} aria-label="Refresh">
|
||||
{loading ? <Loader2 className="size-4 animate-spin" /> : <RotateCw className="size-4" />}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setShortcutsOpen(true)}
|
||||
aria-label="Keyboard shortcuts"
|
||||
>
|
||||
<Keyboard className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<FeedTabs active={feed} onChange={setFeed} />
|
||||
|
||||
<main className="flex-1">
|
||||
{visible.length === 0 && loading && (
|
||||
<div className="flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" /> Loading stories…
|
||||
</div>
|
||||
)}
|
||||
{visible.length === 0 && !loading && (
|
||||
<p className="py-16 text-center text-sm text-muted-foreground">
|
||||
Nothing here. Press <kbd>r</kbd> to refresh.
|
||||
</p>
|
||||
)}
|
||||
<StoryList
|
||||
items={visible}
|
||||
selectedId={selected?.id ?? null}
|
||||
onSelect={(id) => {
|
||||
const idx = visible.findIndex((s) => s.id === id)
|
||||
if (idx >= 0) setSelectedIndex(idx)
|
||||
}}
|
||||
onOpenComments={openComments}
|
||||
/>
|
||||
</main>
|
||||
|
||||
<CommentsDialog story={commentsStory} open={commentsOpen} onOpenChange={setCommentsOpen} />
|
||||
<ShortcutsDialog open={shortcutsOpen} onOpenChange={setShortcutsOpen} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1,113 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { ExternalLink, Loader2 } from 'lucide-react'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
} from '@/components/ui/dialog'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { fetchComments } from '@/lib/api'
|
||||
import { getCachedComments, setCachedComments } from '@/lib/cache'
|
||||
import { sanitizeHnHtml } from '@/lib/sanitize'
|
||||
import { timeAgo } from '@/lib/time'
|
||||
import type { Comment, Story } from '@/types/story'
|
||||
|
||||
export function CommentsDialog({
|
||||
story,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: {
|
||||
story: Story | null
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
}) {
|
||||
const [comments, setComments] = useState<Comment[] | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!story || !open) return
|
||||
const cached = getCachedComments(story.id)
|
||||
setComments(cached ?? null)
|
||||
setLoading(!cached)
|
||||
fetchComments(story.id)
|
||||
.then(({ comments: fresh }) => {
|
||||
setComments(fresh)
|
||||
setCachedComments(story.id, fresh)
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false))
|
||||
}, [story, open])
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="flex h-[85vh] max-w-2xl flex-col gap-0 p-0">
|
||||
{story && (
|
||||
<>
|
||||
<DialogHeader className="gap-1 border-b px-5 py-4 text-left">
|
||||
<DialogTitle className="text-base leading-snug font-semibold">
|
||||
{story.title}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="flex flex-wrap items-center gap-x-2 text-xs">
|
||||
<span>
|
||||
{story.score} points by {story.by_user} · {timeAgo(story.hn_created_at)} ago
|
||||
</span>
|
||||
{story.url && (
|
||||
<a
|
||||
href={story.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-primary hover:underline"
|
||||
>
|
||||
{story.domain} <ExternalLink className="size-3" />
|
||||
</a>
|
||||
)}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<ScrollArea className="flex-1 px-5 py-3">
|
||||
{story.story_text && (
|
||||
<div
|
||||
className="prose-hn mb-4 text-sm"
|
||||
dangerouslySetInnerHTML={{ __html: sanitizeHnHtml(story.story_text) }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{loading && !comments?.length && (
|
||||
<div className="flex items-center gap-2 py-8 text-sm text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" /> Loading comments…
|
||||
</div>
|
||||
)}
|
||||
|
||||
{comments && comments.length === 0 && !loading && (
|
||||
<p className="py-8 text-sm text-muted-foreground">No comments yet.</p>
|
||||
)}
|
||||
|
||||
{comments?.map((c) => <CommentNode key={c.id} comment={c} />)}
|
||||
</ScrollArea>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function CommentNode({ comment, depth = 0 }: { comment: Comment; depth?: number }) {
|
||||
if (!comment.text) return null
|
||||
return (
|
||||
<div className={depth > 0 ? 'mt-3 border-l-2 border-border pl-3' : 'mt-3'}>
|
||||
<div className="mb-1 text-xs text-muted-foreground">
|
||||
<span className="font-medium text-foreground">{comment.by}</span>
|
||||
{comment.time && <> · {timeAgo(new Date(comment.time * 1000).toISOString())} ago</>}
|
||||
</div>
|
||||
<div
|
||||
className="prose-hn text-sm break-words"
|
||||
dangerouslySetInnerHTML={{ __html: sanitizeHnHtml(comment.text) }}
|
||||
/>
|
||||
{comment.kids?.map((k) => <CommentNode key={k.id} comment={k} depth={depth + 1} />)}
|
||||
{depth === 0 && <Separator className="mt-3" />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { FeedKey } from '@/types/story'
|
||||
|
||||
const FEEDS: { key: FeedKey; label: string; shortcut: string }[] = [
|
||||
{ key: 'top', label: 'Top', shortcut: '1' },
|
||||
{ key: 'new', label: 'New', shortcut: '2' },
|
||||
{ key: 'best', label: 'Best', shortcut: '3' },
|
||||
{ key: 'ask', label: 'Ask', shortcut: '4' },
|
||||
{ key: 'show', label: 'Show', shortcut: '5' },
|
||||
{ key: 'job', label: 'Jobs', shortcut: '6' },
|
||||
]
|
||||
|
||||
export function FeedTabs({
|
||||
active,
|
||||
onChange,
|
||||
}: {
|
||||
active: FeedKey
|
||||
onChange: (feed: FeedKey) => void
|
||||
}) {
|
||||
return (
|
||||
<nav className="flex gap-1 overflow-x-auto px-2 py-1.5 sm:px-3" aria-label="Feeds">
|
||||
{FEEDS.map((f) => (
|
||||
<button
|
||||
key={f.key}
|
||||
type="button"
|
||||
onClick={() => onChange(f.key)}
|
||||
className={cn(
|
||||
'shrink-0 rounded-md px-2.5 py-1 text-sm font-medium transition-colors',
|
||||
active === f.key
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
|
||||
const SHORTCUTS: [string, string][] = [
|
||||
['j / ↓', 'Next story'],
|
||||
['k / ↑', 'Previous story'],
|
||||
['o / Enter', 'Open comments'],
|
||||
['v', 'Open link in new tab'],
|
||||
['e', 'Archive story'],
|
||||
['s', 'Star / unstar'],
|
||||
['u', 'Toggle read / unread'],
|
||||
['r', 'Refresh feed'],
|
||||
['1 – 6', 'Switch feed (Top/New/Best/Ask/Show/Jobs)'],
|
||||
['Esc', 'Close dialog'],
|
||||
['?', 'Toggle this help'],
|
||||
]
|
||||
|
||||
export function ShortcutsDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
}: {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
}) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Keyboard shortcuts</DialogTitle>
|
||||
</DialogHeader>
|
||||
<dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm">
|
||||
{SHORTCUTS.map(([key, desc]) => (
|
||||
<div key={key} className="contents">
|
||||
<dt>
|
||||
<kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-xs">
|
||||
{key}
|
||||
</kbd>
|
||||
</dt>
|
||||
<dd className="text-muted-foreground">{desc}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { forwardRef } from 'react'
|
||||
import { Star, MessageSquare, ArrowUp } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { timeAgo } from '@/lib/time'
|
||||
import type { Story } from '@/types/story'
|
||||
|
||||
interface StoryListProps {
|
||||
items: Story[]
|
||||
selectedId: string | null
|
||||
onSelect: (id: string) => void
|
||||
onOpenComments: (story: Story) => void
|
||||
}
|
||||
|
||||
export function StoryList({ items, selectedId, onSelect, onOpenComments }: StoryListProps) {
|
||||
return (
|
||||
<ul className="divide-y divide-border" role="listbox" aria-label="Stories">
|
||||
{items.map((story) => (
|
||||
<StoryRow
|
||||
key={story.id}
|
||||
story={story}
|
||||
selected={story.id === selectedId}
|
||||
onSelect={onSelect}
|
||||
onOpenComments={onOpenComments}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
interface StoryRowProps {
|
||||
story: Story
|
||||
selected: boolean
|
||||
onSelect: (id: string) => void
|
||||
onOpenComments: (story: Story) => void
|
||||
}
|
||||
|
||||
const StoryRow = forwardRef<HTMLLIElement, StoryRowProps>(function StoryRow(
|
||||
{ story, selected, onSelect, onOpenComments },
|
||||
ref
|
||||
) {
|
||||
return (
|
||||
<li
|
||||
ref={ref}
|
||||
id={`story-${story.id}`}
|
||||
role="option"
|
||||
aria-selected={selected}
|
||||
data-selected={selected || undefined}
|
||||
onClick={() => {
|
||||
onSelect(story.id)
|
||||
onOpenComments(story)
|
||||
}}
|
||||
className={cn(
|
||||
'flex cursor-pointer items-start gap-3 border-l-2 border-l-transparent px-3 py-2.5 sm:px-4',
|
||||
selected && 'border-l-primary bg-accent',
|
||||
story.read && !selected && 'opacity-55'
|
||||
)}
|
||||
>
|
||||
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="truncate text-[15px] leading-snug font-medium text-foreground">
|
||||
{story.title}
|
||||
</span>
|
||||
{story.starred && (
|
||||
<Star className="size-3.5 shrink-0 fill-current text-amber-500" aria-label="starred" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
|
||||
{story.domain && <span className="truncate">{story.domain}</span>}
|
||||
<span className="inline-flex items-center gap-0.5">
|
||||
<ArrowUp className="size-3" />
|
||||
{story.score}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-0.5">
|
||||
<MessageSquare className="size-3" />
|
||||
{story.descendants}
|
||||
</span>
|
||||
<span>{story.by_user}</span>
|
||||
<span>{timeAgo(story.hn_created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,10 @@
|
||||
import { ThemeProvider as NextThemesProvider } from 'next-themes'
|
||||
import type { ComponentProps } from 'react'
|
||||
|
||||
export function ThemeProvider({ children, ...props }: ComponentProps<typeof NextThemesProvider>) {
|
||||
return (
|
||||
<NextThemesProvider attribute="class" defaultTheme="system" enableSystem {...props}>
|
||||
{children}
|
||||
</NextThemesProvider>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Slot } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
|
||||
outline:
|
||||
"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"span"> &
|
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot.Root : "span"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="badge"
|
||||
data-variant={variant}
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
@@ -0,0 +1,67 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Slot } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
outline:
|
||||
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
icon: "size-8",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm":
|
||||
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||
"icon-lg": "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot.Root : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
@@ -0,0 +1,166 @@
|
||||
import * as React from "react"
|
||||
import { Dialog as DialogPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
function Dialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
}
|
||||
|
||||
function DialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
}
|
||||
|
||||
function DialogClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<DialogPrimitive.Overlay
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close data-slot="dialog-close" asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="absolute top-2 right-2"
|
||||
size="icon-sm"
|
||||
>
|
||||
<XIcon
|
||||
/>
|
||||
<span className="sr-only">Close</span>
|
||||
</Button>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogFooter({
|
||||
className,
|
||||
showCloseButton = false,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close asChild>
|
||||
<Button variant="outline">Close</Button>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn(
|
||||
"font-heading text-base leading-none font-medium",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn(
|
||||
"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
@@ -0,0 +1,53 @@
|
||||
import * as React from "react"
|
||||
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function ScrollArea({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.Root
|
||||
data-slot="scroll-area"
|
||||
className={cn("relative", className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport
|
||||
data-slot="scroll-area-viewport"
|
||||
className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
|
||||
>
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
function ScrollBar({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||
data-slot="scroll-area-scrollbar"
|
||||
data-orientation={orientation}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.ScrollAreaThumb
|
||||
data-slot="scroll-area-thumb"
|
||||
className="relative flex-1 rounded-full bg-border"
|
||||
/>
|
||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
)
|
||||
}
|
||||
|
||||
export { ScrollArea, ScrollBar }
|
||||
@@ -0,0 +1,28 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Separator as SeparatorPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
decorative = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||
return (
|
||||
<SeparatorPrimitive.Root
|
||||
data-slot="separator"
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
@@ -0,0 +1,13 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="skeleton"
|
||||
className={cn("animate-pulse rounded-md bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
@@ -0,0 +1,49 @@
|
||||
"use client"
|
||||
|
||||
import { useTheme } from "next-themes"
|
||||
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
||||
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = "system" } = useTheme()
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
icons={{
|
||||
success: (
|
||||
<CircleCheckIcon className="size-4" />
|
||||
),
|
||||
info: (
|
||||
<InfoIcon className="size-4" />
|
||||
),
|
||||
warning: (
|
||||
<TriangleAlertIcon className="size-4" />
|
||||
),
|
||||
error: (
|
||||
<OctagonXIcon className="size-4" />
|
||||
),
|
||||
loading: (
|
||||
<Loader2Icon className="size-4 animate-spin" />
|
||||
),
|
||||
}}
|
||||
style={
|
||||
{
|
||||
"--normal-bg": "var(--popover)",
|
||||
"--normal-text": "var(--popover-foreground)",
|
||||
"--normal-border": "var(--border)",
|
||||
"--border-radius": "var(--radius)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
toastOptions={{
|
||||
classNames: {
|
||||
toast: "cn-toast",
|
||||
},
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toaster }
|
||||
@@ -0,0 +1,55 @@
|
||||
import * as React from "react"
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function TooltipProvider({
|
||||
delayDuration = 0,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
|
||||
return (
|
||||
<TooltipPrimitive.Provider
|
||||
data-slot="tooltip-provider"
|
||||
delayDuration={delayDuration}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function Tooltip({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
||||
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||
}
|
||||
|
||||
function TooltipTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
className,
|
||||
sideOffset = 0,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
|
||||
return (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Content
|
||||
data-slot="tooltip-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
|
||||
</TooltipPrimitive.Content>
|
||||
</TooltipPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
|
||||
@@ -0,0 +1,46 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { fetchFeed, triggerSync } from '@/lib/api'
|
||||
import { getCachedFeed, setCachedFeed } from '@/lib/cache'
|
||||
import type { FeedKey, Story } from '@/types/story'
|
||||
|
||||
export function useFeed(feed: FeedKey) {
|
||||
const [items, setItems] = useState<Story[]>(() => getCachedFeed(feed) ?? [])
|
||||
const [loading, setLoading] = useState(items.length === 0)
|
||||
const feedRef = useRef(feed)
|
||||
feedRef.current = feed
|
||||
|
||||
const load = useCallback((f: FeedKey) => {
|
||||
setItems(getCachedFeed(f) ?? [])
|
||||
setLoading((getCachedFeed(f) ?? []).length === 0)
|
||||
fetchFeed(f)
|
||||
.then(({ items: fresh }) => {
|
||||
if (feedRef.current !== f) return
|
||||
setItems(fresh)
|
||||
setCachedFeed(f, fresh)
|
||||
})
|
||||
.catch(() => {
|
||||
// network hiccup — cached data (if any) stays on screen
|
||||
})
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
load(feed)
|
||||
}, [feed, load])
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
await triggerSync()
|
||||
// give the backend a moment to write the refreshed feed, then reload
|
||||
setTimeout(() => load(feedRef.current), 1500)
|
||||
}, [load])
|
||||
|
||||
const patchStory = useCallback((id: string, patch: Partial<Story>) => {
|
||||
setItems((prev) => {
|
||||
const next = prev.map((s) => (s.id === id ? { ...s, ...patch } : s))
|
||||
setCachedFeed(feedRef.current, next)
|
||||
return next
|
||||
})
|
||||
}, [])
|
||||
|
||||
return { items, loading, refresh, patchStory }
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { useEffect } from 'react'
|
||||
|
||||
type Handler = (e: KeyboardEvent) => void
|
||||
|
||||
// Superhuman-style single-key shortcuts. Ignored while typing in an input
|
||||
// so pressing "j"/"k" in the search box doesn't hijack the cursor.
|
||||
export function useHotkeys(bindings: Record<string, Handler>, deps: unknown[]) {
|
||||
useEffect(() => {
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
const target = e.target as HTMLElement | null
|
||||
const typing =
|
||||
target &&
|
||||
(target.tagName === 'INPUT' ||
|
||||
target.tagName === 'TEXTAREA' ||
|
||||
target.isContentEditable)
|
||||
if (typing && e.key !== 'Escape') return
|
||||
|
||||
const handler = bindings[e.key]
|
||||
if (handler) {
|
||||
e.preventDefault()
|
||||
handler(e)
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', onKeyDown)
|
||||
return () => window.removeEventListener('keydown', onKeyDown)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, deps)
|
||||
}
|
||||
+152
@@ -0,0 +1,152 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
@import "@fontsource-variable/geist";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--font-heading: var(--font-sans);
|
||||
--font-sans: 'Geist Variable', sans-serif;
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-background: var(--background);
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
--radius-2xl: calc(var(--radius) * 1.8);
|
||||
--radius-3xl: calc(var(--radius) * 2.2);
|
||||
--radius-4xl: calc(var(--radius) * 2.6);
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
}
|
||||
|
||||
.prose-hn p {
|
||||
margin: 0 0 0.6em;
|
||||
}
|
||||
.prose-hn p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.prose-hn a {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.prose-hn pre {
|
||||
overflow-x: auto;
|
||||
background: var(--muted);
|
||||
padding: 0.5em;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
.prose-hn code {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { Comment, FeedKey, Story } from '@/types/story'
|
||||
|
||||
async function json<T>(res: Response): Promise<T> {
|
||||
if (!res.ok) throw new Error(`request failed: ${res.status}`)
|
||||
return res.json() as Promise<T>
|
||||
}
|
||||
|
||||
export function fetchFeed(feed: FeedKey): Promise<{ feed: FeedKey; items: Story[] }> {
|
||||
return fetch(`/api/feed/${feed}`).then((res) => json(res))
|
||||
}
|
||||
|
||||
export function fetchComments(id: string): Promise<{ id: string; comments: Comment[] }> {
|
||||
return fetch(`/api/story/${id}/comments`).then((res) => json(res))
|
||||
}
|
||||
|
||||
export function updateStoryState(
|
||||
id: string,
|
||||
patch: Partial<Pick<Story, 'read' | 'starred' | 'archived'>>
|
||||
): Promise<Story> {
|
||||
return fetch(`/api/story/${id}/state`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(patch),
|
||||
}).then((res) => json(res))
|
||||
}
|
||||
|
||||
export function triggerSync(): Promise<{ ok: boolean }> {
|
||||
return fetch('/api/sync', { method: 'POST' }).then((res) => json(res))
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import type { FeedKey, Story } from '@/types/story'
|
||||
|
||||
// localStorage cache so switching feeds and reopening the app is instant
|
||||
// (stale-while-revalidate), the same trick Linear/Superhuman use to feel
|
||||
// fast on a slow network.
|
||||
const VERSION = 'v1'
|
||||
const feedKey = (feed: FeedKey) => `hn-reader:${VERSION}:feed:${feed}`
|
||||
const commentsKey = (id: string) => `hn-reader:${VERSION}:comments:${id}`
|
||||
|
||||
export function getCachedFeed(feed: FeedKey): Story[] | null {
|
||||
try {
|
||||
const raw = localStorage.getItem(feedKey(feed))
|
||||
return raw ? (JSON.parse(raw) as Story[]) : null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export function setCachedFeed(feed: FeedKey, items: Story[]) {
|
||||
try {
|
||||
localStorage.setItem(feedKey(feed), JSON.stringify(items))
|
||||
} catch {
|
||||
// storage full or unavailable — safe to ignore, cache is best-effort
|
||||
}
|
||||
}
|
||||
|
||||
export function getCachedComments(id: string) {
|
||||
try {
|
||||
const raw = localStorage.getItem(commentsKey(id))
|
||||
return raw ? JSON.parse(raw) : null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export function setCachedComments(id: string, comments: unknown) {
|
||||
try {
|
||||
localStorage.setItem(commentsKey(id), JSON.stringify(comments))
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
const ALLOWED_TAGS = new Set(['A', 'P', 'I', 'B', 'EM', 'STRONG', 'CODE', 'PRE'])
|
||||
|
||||
// HN item text/comment text is HTML from an external API. Rebuild it from
|
||||
// a small tag allowlist instead of trusting it directly, to keep
|
||||
// dangerouslySetInnerHTML from becoming an XSS vector.
|
||||
export function sanitizeHnHtml(html: string): string {
|
||||
const doc = new DOMParser().parseFromString(html, 'text/html')
|
||||
|
||||
function clean(node: Node): string {
|
||||
if (node.nodeType === Node.TEXT_NODE) {
|
||||
return node.textContent ?? ''
|
||||
}
|
||||
if (node.nodeType !== Node.ELEMENT_NODE) return ''
|
||||
|
||||
const el = node as Element
|
||||
const inner = Array.from(el.childNodes).map(clean).join('')
|
||||
if (!ALLOWED_TAGS.has(el.tagName)) return inner
|
||||
|
||||
if (el.tagName === 'A') {
|
||||
const href = el.getAttribute('href') || ''
|
||||
const safe = /^https?:\/\//i.test(href)
|
||||
return safe
|
||||
? `<a href="${href.replace(/"/g, '"')}" target="_blank" rel="noopener noreferrer nofollow">${inner}</a>`
|
||||
: inner
|
||||
}
|
||||
|
||||
const tag = el.tagName.toLowerCase()
|
||||
return `<${tag}>${inner}</${tag}>`
|
||||
}
|
||||
|
||||
return Array.from(doc.body.childNodes).map(clean).join('')
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
export function timeAgo(iso: string): string {
|
||||
const seconds = Math.max(0, (Date.now() - new Date(iso).getTime()) / 1000)
|
||||
const units: [string, number][] = [
|
||||
['y', 31536000],
|
||||
['mo', 2592000],
|
||||
['d', 86400],
|
||||
['h', 3600],
|
||||
['m', 60],
|
||||
]
|
||||
for (const [label, secs] of units) {
|
||||
const value = Math.floor(seconds / secs)
|
||||
if (value >= 1) return `${value}${label}`
|
||||
}
|
||||
return 'now'
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
import { ThemeProvider } from './components/theme-provider.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<ThemeProvider>
|
||||
<App />
|
||||
</ThemeProvider>
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,26 @@
|
||||
export type FeedKey = 'top' | 'new' | 'best' | 'ask' | 'show' | 'job'
|
||||
|
||||
export interface Story {
|
||||
id: string
|
||||
type: string
|
||||
title: string
|
||||
url: string | null
|
||||
domain: string | null
|
||||
by_user: string | null
|
||||
score: number
|
||||
descendants: number
|
||||
story_text: string | null
|
||||
hn_created_at: string
|
||||
rank: number
|
||||
read: boolean
|
||||
starred: boolean
|
||||
archived: boolean
|
||||
}
|
||||
|
||||
export interface Comment {
|
||||
id: number
|
||||
by: string | null
|
||||
text: string | null
|
||||
time: number | null
|
||||
kids: Comment[]
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023", "DOM"],
|
||||
"module": "esnext",
|
||||
"types": ["vite/client"],
|
||||
"allowArbitraryExtensions": true,
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
],
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023"],
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"module": "nodenext",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import path from 'path'
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react(), tailwindcss()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
port: 3012,
|
||||
strictPort: true,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3013',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user