vesper/README.md

# Vesper

<p align="center">
  <img src="https://img.shields.io/badge/version-1.0.0-blue" alt="Version">
  <img src="https://img.shields.io/badge/platform-Windows-blue" alt="Platform">
  <img src="https://img.shields.io/badge/framework-Tauri 2.0-black" alt="Framework">
  <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.

---

## 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

### 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:
  - Task lists (checkboxes)
  - Superscript and subscript
  - Strikethrough and highlighting
  - Tables with elegant styling
  - Blockquotes with visual depth

### 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

### 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

### 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

---

## Installation

### Prerequisites
- Windows 10 or later
- WebView2 Runtime (usually pre-installed on Windows 10/11)

### Download
Download the latest release from the [Releases](https://github.com/yourusername/vesper/releases) page.

### Build from Source

```bash
# Clone the repository
git clone https://github.com/yourusername/vesper.git
cd vesper

# Install dependencies
npm install

# Run in development mode
npm run tauri dev

# Build for production
npm run tauri build
```

---

## 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/)

---

## 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.

---

## Color Palette

| Color | Hex | Usage |
|-------|-----|-------|
| Base | `#282C33` | Main window background |
| Surface | `#2D323B` | Elevated elements, cards |
| Overlay | `#333942` | Dropdowns, modals |
| Text Primary | `#E4E6EB` | Main content |
| Text Secondary | `#ABB0B8` | UI labels |
| Accent | `#6B8AFF` | Links, highlights |

---

## 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
```

---

## 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.

---

## Acknowledgments

- [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