GitDeck

TweetDeck-style GitHub explorer — browse repos and releases in columns

GitDeck is a client-side Svelte 5 SPA that displays GitHub repositories in a horizontal column layout inspired by TweetDeck. No backend required — everything runs in the browser with fetch() calls to the public GitHub REST API.

Features

• Column layout — Each user or repo opens in its own full-height vertical column, scrollable independently
• User view — Browse all public repos for any GitHub user, sorted by last update
• Repo view — See repo details, latest release, README (rendered as markdown) inline
• Editable columns — Click the column title to change the query (user or user/repo format)
• Persistence — Column layout survives page refresh via localStorage
• Auto-refresh — Columns silently refresh every 60 seconds
• Zero backend — Pure fetch() calls to the GitHub REST API (unauthenticated, rate-limited)
• Dark theme — GitHub-inspired dark design

Quick Start

docker compose up --build

Open http://localhost:8088.

Pre-built images (from GitHub release)

GHCR_OWNER=macedot IMAGE_TAG=latest docker compose up

Configuration

Docker Compose

How It Works

1. Click New Tab (center when empty, + button on the right when columns exist)
2. Type a GitHub username (e.g. torvalds) or a user/repo (e.g. torvalds/linux)
3. Press Enter — the column loads
4. Click the title to edit, X to remove

Development

Prerequisites

• Node.js 22+
• npm

Local development

npm install
npm run dev
# → http://localhost:5173

Build

npm run build     # production build → dist/
npm run preview   # preview production build locally

Architecture

┌──────────────────────────────────────────────────────────┐
│ Container (gitdeck)                                      │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ nginx:alpine :8080                                   │ │
│ │ ┌──────────────────────────────────────────────────┐ │ │
│ │ │ Svelte 5 SPA (static files)                      │ │ │
│ │ │ GitHub REST API → fetch()                        │ │ │
│ │ │ Column state → localStorage                      │ │ │
│ │ │ Auto-refresh → 60s                               │ │ │
│ │ └──────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────┘

How it works:

1. API layer (src/lib/github.js) — Fetches repos (/users/{user}/repos), single repo (/repos/{owner}/{repo}), latest release (/repos/{owner}/{repo}/releases/latest), and README (/repos/{owner}/{repo}/readme) from the public GitHub REST API. Rate limit tracking via response headers.
2. State — Svelte 5 $state runes manage columns, editing, and data. $effect runes handle localStorage persistence and auto-refresh intervals.
3. Rendering — marked library renders README markdown to HTML. Repo cards show language, stars, forks, and relative dates.
4. Container — Multi-stage Docker build: node:22-alpine builds the SPA with Vite, nginx:alpine serves static files with gzip compression and SPA routing.

Deployment

The project ships as a single Docker container with the Svelte SPA served by nginx:

CI/CD

GitHub Actions builds and pushes Docker images to GHCR on every published release (prereleases excluded). Images are tagged with both the release version and latest.

License

This project is licensed under the GNU Affero General Public License v3.0.