notehub.web

A single-page browser app that uses GitHub Issues as a note-keeping system, with vi keybindings via CodeMirror 6. Zero install, zero backend — just static files and a GitHub PAT.

Works with both github.com and GitHub Enterprise Server (GHES) instances.

Quick Start

npm install
VITE_BASE=/ npm run dev        # local dev server at http://localhost:5173

Open the browser, enter your GitHub host and PAT, and start editing. Notes are GitHub Issues labeled notehub, discovered across all repos you have access to.

Editor Keybindings

Full vim mode. The following ex commands are wired to the app:

Command	Action
:w	Save note to GitHub
:q	Return to note list (warns on unsaved changes)
:wq	Save and return to list
:q!	Discard changes and return to list

Deploy to GitHub Pages

From the parent workspace:

make deploy-notehub

Or manually with required environment variables:

VITE_BASE=/pages/owner/notehub.web/ \
VITE_VEDITOR_BASE=https://ghes-host/pages/owner/veditor.web/ \
npm run build
npx gh-pages -d dist

On the GHES buildserver, pushing to main triggers an automatic build and deploy.

Stack

• Vite + TypeScript — build tooling
• CodeMirror 6 — editor core
• @replit/codemirror-vim — vi keybindings
• @codemirror/lang-markdown — markdown syntax highlighting
• @codemirror/theme-one-dark — editor theme
• GitHub REST API — direct fetch from browser, no backend
• localStorage — PAT, host, org/repo persistence

TODO

• Cross-org/repo note discovery — search by notehub label across all repos via Search API, not just one repo
• Filter to notehub-tagged issues only — exclude unrelated issues everywhere
• Opening page shows all notes + manual refresh — list all discovered notes on landing, with a refresh button
• Copy buttons for each issue which place its raw URL onto clipboard. And a similar button on the edit page for each issue.
• Make links work in the editor — Ctrl+Click opens URLs in a new tab
• Links in the editor should use the target=[hash] just like metabrowse (need to find the source code for that)
• Can the editor support mapping 'jk' to ESC?
• VI yank should populate windows clipboard
• Issue item number in editor header should be a link to the github issue
• Issue number in note list should link to the real github issue
• Review .ts modules for refactoring / layering opportunities
  • Reduce code duplication
  • Clean up inappropriate dependencies
  • Push utility functionality down into lower-layer module(s)
• Need search in issue list to match title/repo
• Replace favicon with a custom item
• Copy button on editor header doesn't wrap, disappearing if horiz space shrinks
• Note deletion ("archive")
  • Each note in the list should have a "..." context menu button. On that menu, there should be a 'Delete' item with a red X icon. User clicks that to archive a note so it stops showing up in the note list.
  • We don't actually ever delete notes, we archive them. To "archive" a note, use the github 'close issue' feature. This will mean we need to change the note-finding logic to exclude closed issues.
• Vim-style navigation on notes list — j/k to move, enter to open, new-note via keyboard and mouse
• New note creation — need repo selection UX since notes can live in any repo
  • List the orgs+repos already in use (don't try to enumerate all possibilities)
  • Include an 'other' box, the user will manually input org/repo

Project Structure

src/
  main.ts       — entry point
  app.ts        — app state machine (auth, note list, editor screens)
  editor.ts     — CodeMirror setup, vim ex command registration
  github.ts     — GitHub API client (supports GHES and github.com)
  style.css     — Catppuccin Mocha dark theme