vesper/README.md

✦ Vesper

A beautiful, distraction-free markdown reader for Windows

Premium editorial typography · Refined dark aesthetic · Fully portable

📖 Overview

Vesper renders your markdown with carefully tuned typography and a refined dark interface, giving you the ultimate reading experience. No installation, no AppData, no registry — just drop the exe and go.

✨ Features

🔤 Markdown Rendering

Full CommonMark support via markdown-it with extensions:

Extension	Description
🎨 Syntax Highlighting	190+ languages via highlight.js with a curated dark palette
☑️ Task Lists	Interactive checkboxes in lists
ᴬᵇ Superscript / Subscript	^text^ and ~text~ notation
🖍️ Highlight	==marked text== rendered with accent background
💬 Typographer	Smart quotes, em-dashes, and ellipses
🔗 Linkify	Bare URLs auto-converted to clickable links
📄 HTML	Inline HTML passthrough
↵ Breaks	Newlines preserved as line breaks

Premium dark-mode typography tuned for long-form reading:

• Inter Variable at 17px with 1.7 line-height
• ~65 character measure for optimal readability
• Progressive heading color cascade — H1 near-white through H6 muted
• Accent-colored list markers on both ordered and unordered lists
• Gradient-fade horizontal rules
• Subtle persistent link underlines that intensify on hover
• JetBrains Mono Variable for code at 14px with ligature support

📑 Tabbed Interface

• Open multiple documents simultaneously in tabs
• 🔁 Duplicate detection — re-opening an already-open file switches to its tab
• ✨ Animated tab enter/exit with layout transitions
• ◀ ▶ Scroll arrows appear on overflow with hold-to-scroll
• 🖱️ Mouse wheel scrolling over the tab bar
• 📌 New tabs auto-scroll into view
• ✕ Close tabs with the button or Ctrl+W

🧭 Navigation

• 📋 Table of Contents sidebar auto-generated from headings (H1–H6) with indentation
• Click any heading to smooth-scroll to that section
• Sidebar opens even with no headings (shows "No headings" message)
• ↔️ Resizable sidebar via drag handle
• 🔍 Full-text search with real-time highlighting, match counter, and Enter to cycle

👁️ Reading Experience

Feature	Details
🖥️ Focus Mode	F11 hides title bar and menu for immersive reading
🔎 Content Zoom	Ctrl+Scroll — 50% to 200%
↔️ Content Width	Shift+Scroll — 400px to 1200px
🔲 UI Scale	50%–200% via View menu spinner, persisted across sessions
🏀 Kinetic Scroll	Right-mouse drag with iOS-style rubber band overscroll
📜 Custom Scrollbars	Thin, auto-hiding, accent-colored on hover
💾 Window Memory	Position, size, and maximized state remembered between sessions

📂 File Handling

• Open via File menu, Ctrl+O, or drag-and-drop from Explorer
• Supports .md · .markdown · .txt
• Native Tauri drag-and-drop integration with real file system paths

🎨 UI Details

• Custom frameless title bar with minimize, maximize/restore, and close
• Right-click context menu — Copy, Open File, Toggle Search, Toggle Sidebar, Focus Mode, Keyboard Shortcuts, About, Exit
• 🖊️ Text selection preserved visually on right-click via overlay rendering
• Context menu stays within bounds and respects UI zoom
• All panels, modals, tabs, and menus animate with Framer Motion
• Subtle noise texture overlay on the app background

⌨️ Keyboard Shortcuts

Shortcut	Action
Ctrl+O	📂 Open file
Ctrl+W	✕ Close current tab
Ctrl+Q	🚪 Exit application
Ctrl+F	🔍 Toggle search
Ctrl+Shift+S	📋 Toggle sidebar
F11	🖥️ Toggle focus mode
Escape	← Close search / sidebar
Ctrl+Scroll	🔎 Zoom content in / out
Shift+Scroll	↔️ Adjust content width

📦 Installation

Prerequisites

• Windows 10 or later
• WebView2 Runtime (pre-installed on Windows 10/11)

Download

Download the latest vesper.exe from the Releases page. No installation required — Vesper is fully portable.

Build from Source

Requires: Node.js v18+ · Rust stable · Tauri v2 prerequisites

git clone https://github.com/yourusername/vesper.git
cd vesper
npm install

# Development (hot-reload on localhost:1420)
npm run tauri dev

# Production build
npm run tauri build
# → src-tauri/target/release/vesper.exe

🔧 Technology Stack

	Layer	Technology
⚙️	Runtime	Tauri v2 — Rust + WebView2
⚛️	Frontend	React 19 · TypeScript · Vite 7
🎨	Styling	Tailwind CSS 4 · DaisyUI 5 · Custom CSS
📝	Markdown	markdown-it + plugins
🌈	Syntax	highlight.js
🎬	Animation	Framer Motion
🔤	Fonts	Inter Variable · JetBrains Mono
🖼️	Icons	Lucide React
📜	Scrollbars	OverlayScrollbars

Tauri Plugins: dialog · fs · opener

💼 Portable

Vesper is fully portable — zero installation, zero system footprint.

All data lives in a data/ folder next to the executable:

vesper.exe
data/
  ├── window-state.json    ← window position, size, maximized
  └── EBWebView/           ← WebView2 data (localStorage, cache)

Nothing is written to AppData, the registry, or any other system location. To move Vesper, just copy the exe and optionally the data/ folder.

🧠 Design Philosophy

	Principle
📖	Content First — all UI chrome can be hidden; the reader is the focus
🔤	Typography Matters — Inter at 17px, 1.7 line-height, ~65 char measure
🌙	Dark by Default — deep onyx base #282C33 reduces eye strain
⌨️	Keyboard Driven — every feature accessible via shortcuts
✨	Minimalist Chrome — the interface gets out of your way

🎨 Color Palette

Swatch	Name	Hex	Usage
🟫	Base	#282C33	Window background
⬛	Surface	#252A31	Title bar, sidebar
🔲	Elevated	#2D333C	Active tab, modals
◾	Overlay	#333942	Dropdowns, context menu
⬜	Text Primary	#E4E6EB	Main content
🔘	Text Secondary	#ABB0B8	UI labels
🩶	Text Tertiary	#6B7280	Placeholders, hints
🔵	Accent	#6B8AFF	Interactive elements
🔷	Link	#7CA9F7	Hyperlinks

🗂️ Project Structure

vesper/
├── src/
│   ├── App.tsx              Main application component
│   ├── main.tsx             React entry point
│   └── styles.css           Variables, UI, markdown typography
├── src-tauri/
│   ├── src/
│   │   ├── main.rs          Rust entry point
│   │   └── lib.rs           Tauri builder, portable data, window state
│   ├── capabilities/
│   │   └── default.json     Permission declarations
│   ├── tauri.conf.json      Window, bundle, and build config
│   ├── Cargo.toml           Rust dependencies
│   └── icons/               App icons (ICO, PNG, ICNS)
├── index.html
├── package.json
├── vite.config.ts
└── tsconfig.json

📜 License

This project is dedicated to the public domain under CC0 1.0 Universal — see the LICENSE file for details.

🙏 Acknowledgments

• iA Writer — design inspiration
• Tauri — desktop framework
• markdown-it — markdown parsing
• highlight.js — syntax highlighting