feat: implement WYSIWYG markdown editor

Add full-stack markdown editor with Go backend and React frontend.

Backend:
- Cobra CLI with --data-dir, --port, --host flags
- REST API for markdown file CRUD operations
- File storage with flat directory structure
- logrus logging for all operations
- Static file serving for frontend
- Comprehensive tests for CRUD and static assets

Frontend:
- React + TypeScript + Vite + Tailwind CSS
- Live markdown preview with marked (GFM)
- File management: list, create, open, save, delete
- Theme system: Dark/Light/System with persistence
- Responsive design (320px to 1920px)
- Component tests for Editor, Preview, Sidebar

Build:
- Makefile for build, test, and run automation
- Single command testing (make test)

Closes SPEC.md requirements
This commit is contained in:
2026-02-06 10:01:09 -05:00
parent 6b66cee21d
commit 773b9db4b2
44 changed files with 7692 additions and 0 deletions

121
README.md Normal file
View File

@@ -0,0 +1,121 @@
# WYSIWYG Markdown Editor
A full-stack markdown editor with live preview, built with Go backend and React/TypeScript frontend.
## Features
- **Live Preview**: Real-time GFM markdown rendering as you type
- **File Management**: Create, open, edit, save, and delete markdown files
- **Three Themes**: Light, Dark, and System (auto-detect) with theme persistence
- **Responsive Design**: Works on mobile (320px) and desktop (1920px)
- **CRUD API**: RESTful API for file operations
## Tech Stack
- **Backend**: Go with Cobra CLI, logrus logging, standard HTTP server
- **Frontend**: React, TypeScript, Tailwind CSS, Vite, marked (GFM parser)
- **Storage**: Local filesystem (flat structure)
## Quick Start
### Prerequisites
- Go 1.21+
- Node.js 20+
- Nix (optional, for development environment)
### Development
1. Enter the development environment (with Nix):
```bash
nix develop
```
2. Start the backend:
```bash
make dev-backend
# or: cd backend && go run main.go
```
3. Start the frontend (in another terminal):
```bash
make dev-frontend
# or: cd frontend && npm run dev
```
4. Open http://localhost:5173 (frontend dev server) or http://127.0.0.1:8080 (backend)
### Build & Run
```bash
# Build everything (frontend + backend)
make build
# Run the built application
make run
# or: ./bin/markdown-editor-backend
# Run tests
make test
```
### CLI Options
```
./bin/markdown-editor-backend --help
Flags:
--data-dir string Storage path for markdown files (default "./data")
--host string Bind address (default "127.0.0.1")
--port int Server port (default 8080)
```
## API Endpoints
| Method | Endpoint | Description |
|--------|----------|-------------|
| GET | `/api/health` | Health check |
| GET | `/api/files` | List all files |
| POST | `/api/files` | Create new file |
| GET | `/api/files/{name}` | Get file content |
| PUT | `/api/files/{name}` | Update file |
| DELETE | `/api/files/{name}` | Delete file |
## Project Structure
```
.
├── backend/
│ ├── main.go # CLI entry point
│ ├── server/ # HTTP server
│ ├── handlers/ # API handlers
│ ├── storage/ # File storage
│ └── static/ # Frontend build output
├── frontend/
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── api/ # API client
│ │ └── types.ts # TypeScript types
│ └── dist/ # Build output
├── data/ # Markdown files storage
├── bin/ # Compiled binaries
├── Makefile # Build automation
└── flake.nix # Nix development environment
```
## Testing
```bash
# Run all tests
make test
# Backend tests only
make backend-test
# Frontend tests only
make frontend-test
```
## License
MIT