added specs

2026-01-30 15:30:31 +01:00
parent 22520a4869
commit f85e7a89b4
1 changed files with 137 additions and 0 deletions
@@ -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.