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:
121
README.md
Normal file
121
README.md
Normal 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
|
||||
Reference in New Issue
Block a user