138 lines
2.7 KiB
Markdown
138 lines
2.7 KiB
Markdown
# 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.
|