Skip to content

Architecture

Jump to bottom
Alex Neamtu edited this page Jan 16, 2026 · 2 revisions

Architecture

Overview

htoprc.dev is a monorepo with three main packages:

┌─────────────────────────────────────────────────────────────┐
│                     Cloudflare Pages                        │
│  ┌───────────────────────────────────────────────────────┐  │
│  │                    apps/web                           │  │
│  │        React 19 + Vite + Tailwind CSS                │  │
│  └───────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘
                              │
                              │ GraphQL
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                   Cloudflare Workers                        │
│  ┌───────────────────────────────────────────────────────┐  │
│  │                    apps/api                           │  │
│  │         Hono + GraphQL Yoga + D1 SQLite              │  │
│  └───────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘
                              │
           ┌──────────────────┴──────────────────┐
           ▼                                     ▼
┌────────────────────┐              ┌────────────────────┐
│   Cloudflare D1    │              │ packages/parser    │
│   (SQLite)         │              │ (shared library)   │
└────────────────────┘              └────────────────────┘

Packages

packages/htoprc-parser

Parses htoprc files into typed objects. Available on npm as @htoprc/parser.

Key exports:

  • parseHtoprc(content: string): ParseResult - Parse htoprc content
  • serializeHtoprc(config: HtopConfig): string - Serialize back to file
  • DEFAULT_CONFIG - Default configuration values

See the npm Package wiki page for full documentation.

apps/api

GraphQL API on Cloudflare Workers:

  • GraphQL Yoga for the GraphQL server
  • Hono for HTTP routing
  • D1 for SQLite database
  • Scrapers for GitHub, GitLab, Reddit

apps/web

React SPA:

  • CodeMirror 6 for the editor
  • URQL for GraphQL client
  • Clerk for authentication
  • Tailwind CSS for styling

Data Flow

Config Upload

User → Editor → Parser → API → D1
                  │
                  └→ Score calculated
                  └→ Moderation check

Config Display

D1 → API → GraphQL → React → Parser → Preview

Database Schema

See migrations for full schema.

Key tables:

  • configs - htoprc configurations
  • users - User accounts
  • likes - Config likes
  • comments - Config comments
  • reports - Content reports

Clone this wiki locally