Notemark/spec.md

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:

{
  "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:

: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.