lashman/vesper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Add polished UX: tabs, kinetic scroll, animations, search, typography

Browse Source 
- Tabbed interface with duplicate detection, overflow scroll arrows,
  mouse wheel support, and animated enter/exit transitions
- Kinetic scrolling on right-mouse drag with iOS-style rubber band
  overscroll and damped spring snapback (content area and sidebar)
- Framer Motion animations on sidebar, context menu, drop zone,
  focus mode, tabs, and all modals
- Full-text search with real-time DOM highlighting and match navigation
- Custom OverlayScrollbars replacing native scrollbars
- Tauri native drag-and-drop replacing broken browser drag events
- UI scale control (View menu spinner) persisted to localStorage
- Content zoom (Ctrl+Scroll) and width adjustment (Shift+Scroll)
- Right-click context menu with copy, zoom-adjusted positioning,
  and boundary clamping
- Text selection preserved on right-click via visual overlay
- Focus mode hides title/menu bars with animated transitions
- Premium editorial typography: progressive heading color cascade,
  gradient-fade horizontal rules, accent-colored list markers,
  subtle persistent link underlines, refined blockquotes and code blocks
- Sidebar table of contents with "No headings" empty state
- Markdown breaks and typographer enabled
- New app icons and updated README with full feature documentation
This commit is contained in:
Your Name
2026-02-14 11:53:55 +02:00
parent 88a75a1fd9
commit 2af6b7ebe7
27 changed files with 2769 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
README.md
View File

@@ -7,78 +7,119 @@
<img src="https://img.shields.io/badge/license-CC0-green" alt="License">
</p>
A beautiful, distraction-free markdown reader for Windows. Vesper renders your markdown files with elegant typography and a refined dark aesthetic inspired by iA Writer, giving you the ultimate reading experience.
A beautiful, distraction-free markdown reader for Windows. Vesper renders your markdown files with premium editorial typography and a refined dark aesthetic, giving you the ultimate reading experience.
---
## Features
### File Management
- **Open Files** - Use the File menu or drag-and-drop markdown files directly onto the window
- **Tabbed Interface** - Open multiple files in tabs and switch between them seamlessly
- **Recent Files** - Files open in new tabs automatically
- **Supported Formats** - `.md`, `.markdown`, and `.txt` files
### Markdown Rendering
### Reading Experience
- **Premium Typography** - Carefully tuned typography with Inter font family for optimal readability
- **Syntax Highlighting** - Code blocks are beautifully highlighted using highlight.js with a matching dark theme
- **Markdown Extensions** - Full support for:
- Full CommonMark support via **markdown-it** with extensions:
- Syntax highlighting for 190+ languages (highlight.js)
- Task lists (checkboxes)
- Superscript and subscript
- Strikethrough and highlighting
- Tables with elegant styling
- Blockquotes with visual depth
- Superscript and subscript (`^text^`, `~text~`)
- ==Highlighted text== via `mark`
- Smart quotes, em-dashes, and ellipses (typographer)
- Line break preservation
- Auto-linking of URLs
- HTML passthrough
- Premium dark-mode typography tuned for long-form reading:
- Inter Variable at 17px with 1.7 line-height
- ~65 character measure (680px max-width) for optimal readability
- Progressive heading color cascade (H1 near-white through H6 muted)
- Accent-colored list markers
- Gradient-fade horizontal rules
- Subtle persistent link underlines that intensify on hover
- Refined blockquote, table, and code block styling
- JetBrains Mono Variable for code at 14px with ligature support
### Tabbed Interface
- Open multiple documents in tabs
- Duplicate detection: re-opening an already-open file switches to its existing tab instead of creating a duplicate
- Animated tab enter/exit with layout transitions
- Scroll arrows appear when tabs overflow the bar, with hold-to-scroll
- Mouse wheel scrolling over the tab bar
- New tabs automatically scroll into view
- Close individual tabs with the X button or `Ctrl+W`
### Navigation
- **Table of Contents Sidebar** - Automatically generated from markdown headings (H1-H6)
- **Click-to-Navigate** - Click any heading in the sidebar to jump to that section
- **Resizable Sidebar** - Drag the sidebar edge to resize it to your preference
### Search
- **In-Document Search** - Press `Ctrl+F` to search within the current document
- **Match Navigation** - Navigate between matches with previous/next buttons
- **Match Counter** - See how many matches were found
- **Table of Contents sidebar** auto-generated from document headings (H1-H6), with indentation by level
- Click any heading in the sidebar to smooth-scroll to that section
- Sidebar opens even when a document has no headings (shows "No headings" message)
- Resizable sidebar via drag handle
- **Full-text search** (`Ctrl+F`) with real-time DOM highlighting, match counter, and Enter to cycle through matches
### Window Controls
- **Custom Frameless Window** - Sleek title bar with custom controls
- **Window Controls** - Minimize, maximize/restore, and close buttons
- **Draggable Title Area** - Drag the window by clicking the title bar
- **Focus Mode** - Press `F11` to hide all UI chrome and focus purely on content
### Reading Experience
### Keyboard Shortcuts
- **Focus Mode** (`F11`) hides the title bar and menu bar for immersive reading
- **Content zoom** via `Ctrl+Scroll` (50%--200%)
- **Content width** adjustment via `Shift+Scroll` (400px--1200px)
- **UI scale** (50%--200%) with a spinner in the View menu, persisted across sessions via localStorage
- **Kinetic scrolling** on right-mouse-button drag with iOS-style rubber band overscroll and damped spring snapback
- **Custom scrollbars** via OverlayScrollbars -- thin, auto-hiding after 800ms, accent-colored on hover
- Window state (size, position, maximized) remembered between sessions via `tauri-plugin-window-state`
### File Handling
- Open files via the File menu, `Ctrl+O` dialog, or drag-and-drop from Explorer
- Supports `.md`, `.markdown`, and `.txt` files
- Native Tauri drag-and-drop integration (receives real file system paths)
### UI Details
- Custom frameless title bar with minimize, maximize/restore, and close buttons
- Draggable title area for window repositioning
- Menu bar with File, View, and Help menus
- Right-click context menu with: Copy (when text is selected), 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 window bounds and respects UI zoom
- All panels, modals, tabs, and menus animate with Framer Motion (slide, fade, scale)
- Subtle noise texture overlay on the app background
- Keyboard shortcuts modal listing all bindings
---
## 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 or sidebar |
### Context Menu
Right-click anywhere in the content area for quick access to:
- Open File
- Find (search)
- Toggle Sidebar
- Focus Mode
- Keyboard Shortcuts
- About
| `Escape` | Close search / sidebar |
| `Ctrl+Scroll` | Zoom content in / out |
| `Shift+Scroll` | Adjust content width |
---
## Installation
### Prerequisites
- Windows 10 or later
- WebView2 Runtime (usually pre-installed on Windows 10/11)
- WebView2 Runtime (pre-installed on Windows 10/11)
### Download
Download the latest release from the [Releases](https://github.com/yourusername/vesper/releases) page.
Download the latest installer from the [Releases](https://github.com/yourusername/vesper/releases) page:
- **NSIS installer** (`.exe`) -- recommended, includes uninstaller
- **MSI installer** (`.msi`) -- alternative for enterprise/group policy deployment
- **Portable exe** -- standalone `vesper.exe` with no installation required
### Build from Source
**Prerequisites:**
- [Node.js](https://nodejs.org/) v18+
- [Rust](https://www.rust-lang.org/tools/install) (stable toolchain)
- [Tauri v2 prerequisites](https://v2.tauri.app/start/prerequisites/)
```bash
# Clone the repository
git clone https://github.com/yourusername/vesper.git
@@ -87,98 +128,95 @@ cd vesper
# Install dependencies
npm install
# Run in development mode
# Run in development mode (hot-reload on localhost:1420)
npm run tauri dev
# Build for production
npm run tauri build
```
Build outputs:
- `src-tauri/target/release/vesper.exe` -- portable executable
- `src-tauri/target/release/bundle/msi/Vesper_1.0.0_x64_en-US.msi` -- MSI installer
- `src-tauri/target/release/bundle/nsis/Vesper_1.0.0_x64-setup.exe` -- NSIS installer
---
## Technology Stack
- **Framework**: [Tauri 2.0](https://tauri.app/) - Lightweight, secure desktop framework
- **Frontend**: React 19 + TypeScript + Vite
- **Styling**: Tailwind CSS v4 + daisyUI v5
- **Markdown**: [markdown-it](https://github.com/markdown-it/markdown-it) with plugins
- **Syntax Highlighting**: [highlight.js](https://highlightjs.org/)
- **Animations**: [Framer Motion](https://www.framer.com/motion/)
- **Icons**: [Lucide React](https://lucide.dev/)
| Layer | Technology |
|---|---|
| Runtime | [Tauri v2](https://tauri.app/) (Rust + WebView2) |
| Frontend | React 19, TypeScript, Vite 7 |
| Styling | Tailwind CSS 4, DaisyUI 5, custom CSS |
| Markdown | [markdown-it](https://github.com/markdown-it/markdown-it) with plugins (task-lists, sup, sub, mark) |
| Syntax Highlighting | [highlight.js](https://highlightjs.org/) |
| Animation | [Framer Motion](https://www.framer.com/motion/) |
| Fonts | [Inter Variable](https://rsms.me/inter/), [JetBrains Mono Variable](https://www.jetbrains.com/lp/mono/) |
| Icons | [Lucide React](https://lucide.dev/) |
| Scrollbars | [OverlayScrollbars](https://kingsora.github.io/OverlayScrollbars/) |
### Tauri Plugins
- `tauri-plugin-dialog` -- native file open dialog
- `tauri-plugin-fs` -- file system read access
- `tauri-plugin-window-state` -- persist and restore window size, position, and maximized state
- `tauri-plugin-opener` -- system default app launcher
---
## Design Philosophy
Vesper was designed with these principles in mind:
1. **Content First** - The reader is the primary focus. All UI elements can be hidden.
2. **Typography Matters** - Reading should be comfortable. We use Inter with carefully tuned line heights (1.7), optimal line width (~65 characters), and generous whitespace.
3. **Dark by Default** - The deep onyx base color (#282C33) reduces eye strain and looks professional.
4. **Keyboard Driven** - Power users can do everything with keyboard shortcuts.
5. **Minimalist Chrome** - The interface gets out of your way.
1. **Content First** -- the reader is the primary focus; all UI chrome can be hidden
2. **Typography Matters** -- Inter Variable at 17px, 1.7 line-height, ~65 character measure, generous whitespace
3. **Dark by Default** -- deep onyx base color (#282C33) reduces eye strain
4. **Keyboard Driven** -- every feature accessible via keyboard shortcuts
5. **Minimalist Chrome** -- the interface gets out of your way
---
## Color Palette
| Color | Hex | Usage |
|-------|-----|-------|
|---|---|---|
| Base | `#282C33` | Main window background |
| Surface | `#2D323B` | Elevated elements, cards |
| Overlay | `#333942` | Dropdowns, modals |
| 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 |
| Accent | `#6B8AFF` | Links, highlights |
| Text Secondary | `#ABB0B8` | UI labels, muted text |
| Text Tertiary | `#6B7280` | Placeholders, hints |
| Accent | `#6B8AFF` | Interactive elements, highlights |
| Link | `#7CA9F7` | Hyperlinks |
---
## Project Structure
```
vesper/
├── src/
│ ├── App.tsx # Main application component
│ ├── main.tsx # Entry point
│ └── styles.css # All styling
├── src-tauri/
│ ├── src/
│ │ └── main.rs # Rust backend
│ ├── Cargo.toml
│ └── tauri.conf.json # Tauri configuration
├── index.html
├── package.json
└── README.md
md-reader/
src/
App.tsx # Main application component (all UI logic)
main.tsx # React entry point
styles.css # All styles -- variables, UI components, markdown typography
src-tauri/
src/
main.rs # Rust entry point
lib.rs # Tauri builder and plugin registration
tauri.conf.json # Tauri window, bundle, and build configuration
Cargo.toml # Rust dependencies
icons/ # App icons (ICO, PNG, ICNS)
index.html
package.json
vite.config.ts
tsconfig.json
```
---
## Keyboard Accessibility
Vesper is fully keyboard accessible. Every feature can be accessed without a mouse:
- **Menu Navigation** - Use the menu bar with keyboard
- **Tab Switching** - Close tabs with `Ctrl+W`
- **Search** - Find text with `Ctrl+F`
- **Focus Mode** - Immerse yourself with `F11`
---
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
---
## License
This project is dedicated to the public domain under the CC0 1.0 Universal (CC0 1.0) Public Domain Dedication - see the [LICENSE](LICENSE) file for details.
This project is dedicated to the public domain under the CC0 1.0 Universal (CC0 1.0) Public Domain Dedication -- see the [LICENSE](LICENSE) file for details.
---
@@ -187,4 +225,4 @@ This project is dedicated to the public domain under the CC0 1.0 Universal (CC0
- [iA Writer](https://ia.net/writer) for design inspiration
- [Tauri](https://tauri.app/) for the excellent desktop framework
- [markdown-it](https://github.com/markdown-it/markdown-it) for robust markdown parsing
- [highlight.js](https://highlightjs.org/) for beautiful code syntax
- [highlight.js](https://highlightjs.org/) for syntax highlighting