# Share Card v2 + Markdown Rendering Upgrade — Design Spec
## Background
Current share card uses Canvas 2D API to render plain text. Cannot handle tables, images, lists, or any rich markdown. The style picker is 4 color circles — too simple. The share code is tightly coupled inside serve-ui.html (1900+ lines).
## Goals
1. Full markdown rendering across all views (timeline, graph, share)
2. Share card with rich content (tables, images, code blocks)
3. Style picker with 6 visual themes shown as thumbnail previews
4. share-card.js as independent ES module, importable by other projects
## Decisions Made
| Decision | Choice | Rationale |
|----------|--------|-----------|
| Rendering | DOM + html2canvas | Full markdown support, CSS-based styling, ~40KB |
| Style picker UI | Thumbnail grid with skeleton previews | Matches flomo/yuque reference, intuitive |
| Reuse form | Single-file ES module | Lightest weight, easy to upgrade later |
| Architecture | Extract first, then upgrade | serve-ui.html already too large |
| Markdown lib | marked (CDN) | ~8KB gzip, mature, zero config |
| Built-in themes | 6 pure color + gradient, no image backgrounds | Zero asset dependency |
---
## 1. Markdown Rendering Upgrade
### Current State
`renderMarkdown()` in serve-ui.html uses regex, supports only: code blocks, inline code, bold, `[[links]]`.
### Target State
Replace with `marked.parse()` loaded via CDN. Add post-processing for `[[link]]` chips.
```js
// Load marked via CDN in serve-ui.html
//
function renderMarkdown(text) {
// Protect [[links]] from marked parsing
const protected = text.replace(/\[\[([^\]]+)\]\]/g, '%%LINK:$1%%');
let html = marked.parse(protected, { breaks: true });
// Restore [[links]] as clickable chips
html = html.replace(/%%LINK:(.+?)%%/g,
'[[$1]]');
return html;
}
```
### Scope of Impact
- Timeline card body (expanded view)
- Graph view card panel
- Share card body
- All three share the same `renderMarkdown()` function
### CSS Additions
Add styles for elements marked now generates but didn't before:
- `table / th / td` — bordered, striped rows
- `img` — max-width: 100%, border-radius
- `ul / ol / li` — proper list styling
- `blockquote` — left border, muted color
- `h1-h6` — heading sizes within card body
- `hr` — divider line
---
## 2. share-card.js — Independent ES Module
### File Structure
```
src/
share-card/
share-card.js ← main module: createShareCard(), themes included
```
Single file, zero dependencies. Themes are defined inline (6 themes don't justify a separate file). `html2canvas` is lazy-loaded from CDN on first export.
### Dual Usage
- **Standalone**: `import { createShareCard } from './share-card.js'` — works as ES module
- **Embedded in serve-ui.html**: the same code is wrapped in an IIFE and inlined into serve-ui.html inside a `