diff --git a/spec.md b/spec.md new file mode 100644 index 0000000..c5aac39 --- /dev/null +++ b/spec.md @@ -0,0 +1,137 @@ +# Notemark — .NET 10 Blazor Server Specification (Markdown Editor + Preview + Share) + +## 0) Goal +Notemark is a minimalist Markdown editor web app built with **.NET 10 Blazor Server**. + +- First visit generates a **GUID sessionId** +- Markdown is saved as a **file on disk** (no database) +- Fullscreen editor, optional preview split view +- Share links: + - **Readonly** → preview only + - **Editable** → preview only + Edit button + +--- + +## 1) Tech Stack +- .NET 10 +- Blazor Server +- Markdown rendering: Markdig +- HTML sanitization: Ganss.XSS (HtmlSanitizer) +- Persistence: File system only + +--- + +## 2) UI Requirements + +### Editor Page (`/`) +- Minimalist text editor (no toolbar) +- Preview OFF → editor uses 100% window +- Preview ON → editor 50% + preview 50% + +Top bar: +- Preview toggle +- Save status (Saving/Saved/Error) +- Share button + +### Shared Preview (`/s/{token}`) +- Default view: rendered Markdown only +- If editable: show **Edit** → opens `/e/{token}` + +### Shared Editor (`/e/{token}`) +- Same editor UI +- Autosave writes into shared session document + +--- + +## 3) Persistence (No DB) + +### Sessions +- Cookie: `mk_session` +- Markdown stored in: + +``` +data/sessions/{sessionId}.md +``` + +### Share tokens +Stored in: + +``` +data/shares/{token}.json +``` + +Example: + +```json +{ + "sessionId": "GUID", + "mode": "editable", + "createdAt": "2026-01-30T10:00:00Z", + "expiresAt": null, + "revokedAt": null +} +``` + +--- + +## 4) Light & Dark Mode Support + +### Default Light Mode Palette +| Element | HEX | +|--------|------| +| Background | #F9FAFB | +| Surface | #FFFFFF | +| Border | #E5E7EB | +| Primary Text | #111827 | +| Secondary Text | #6B7280 | +| Accent | #4F46E5 | +| Accent Hover | #4338CA | +| Success | #10B981 | +| Error | #F43F5E | + +### Dark Mode Palette +| Element | HEX | +|--------|------| +| Background | #0B0F19 | +| Surface | #111827 | +| Border | #1F2937 | +| Primary Text | #F9FAFB | +| Secondary Text | #9CA3AF | +| Accent | #22D3EE | +| Accent Hover | #06B6D4 | +| Success | #4ADE80 | +| Error | #FB7185 | + +### Behavior +- Auto detect using `prefers-color-scheme` +- Toggle optional in top bar +- Colors applied via CSS variables: + +```css +:root { + --bg: #F9FAFB; + --accent: #4F46E5; +} + +[data-theme="dark"] { + --bg: #0B0F19; + --accent: #22D3EE; +} +``` + +--- + +## 5) Acceptance Criteria (MVP) +1. Visiting `/` creates GUID session and saves markdown into file +2. Editor is fullscreen; preview splits 50/50 +3. Autosave works with indicator +4. Share modal returns readonly + editable links +5. `/s/{token}` always shows preview only +6. Editable share supports `/e/{token}` editing +7. Markdown preview is sanitized and safe +8. Light/Dark themes work correctly + +--- + +## Deployment Note +The `data/` folder must be mounted as persistent storage in Docker/Kubernetes.