memex

# Share Card v2 + Markdown Upgrade — Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** Upgrade markdown rendering across the entire serve UI, rebuild share card as DOM-based independent ES module with 6-theme thumbnail picker and html2canvas export. **Architecture:** Replace regex-based `renderMarkdown()` with `marked` (CDN). Extract share card from serve-ui.html into `src/share-card/share-card.js` as standalone ES module, inline back into serve-ui.html as IIFE. Share card renders via DOM (not Canvas), exports via html2canvas lazy-loaded from CDN. **Tech Stack:** marked (CDN), html2canvas (CDN, lazy), vanilla JS ES module, vitest **Spec:** `docs/superpowers/specs/2026-03-21-share-v2-design.md` --- ### Task 1: Upgrade renderMarkdown to marked **Files:** - Modify: `src/commands/serve-ui.html:3-7` (add marked CDN script tag in head) - Modify: `src/commands/serve-ui.html:1270-1278` (replace renderMarkdown) - Modify: `src/commands/serve-ui.html` CSS section (add markdown element styles) - [ ] **Step 1: Add marked CDN script tag** In `serve-ui.html`, after line 6 (`memex`), add: ```html ``` - [ ] **Step 2: Add CSS for markdown elements** In the ` ${bodyHtml} ${links ? `

${links}

` : ''}

`; } // Render full component function render() { const cardHtml = renderCard(); const actionsHtml = `

${onCancel ? '' : ''}

`; container.innerHTML = `

${pickerHtml}${cardHtml}${actionsHtml}

`; bindEvents(); } function bindEvents() { // Picker clicks container.querySelectorAll('.memex-sc-thumb').forEach(thumb => { thumb.addEventListener('click', () => { currentTheme = thumb.dataset.theme; container.querySelectorAll('.memex-sc-thumb').forEach(t => t.classList.remove('active')); thumb.classList.add('active'); // Re-render only the card, not the picker const cardEl = container.querySelector('.memex-sc-card'); const t = themes[currentTheme]; const tempDiv = document.createElement('div'); tempDiv.innerHTML = renderCard(); cardEl.replaceWith(tempDiv.firstElementChild); }); }); // Action buttons container.querySelector('[data-action="export"]')?.addEventListener('click', () => exportPng()); container.querySelector('[data-action="cancel"]')?.addEventListener('click', () => { if (onCancel) onCancel(); }); } async function exportPng() { const cardEl = container.querySelector('.memex-sc-card'); if (!cardEl) return; const h2c = await lazyLoadHtml2Canvas(); const canvas = await h2c(cardEl, { scale: 2, useCORS: true, backgroundColor: null }); canvas.toBlob(blob => { if (onExport) { onExport(blob, (currentData.slug || 'memex-card') + '.png'); } else { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = (currentData.slug || 'memex-card') + '.png'; a.click(); URL.revokeObjectURL(url); } }, 'image/png'); } render(); // Public controller return { setTheme(name) { if (!themes[name]) return; currentTheme = name; render(); }, setData(newData) { currentData = { ...newData }; render(); }, export: exportPng, destroy() { container.innerHTML = ''; }, }; } ``` - [ ] **Step 3: Commit** ```bash git add src/share-card/share-card.js git commit -m "feat: create share-card.js independent ES module Standalone share card component with 6 themes (clean, aurora, spectrum, ocean, ember, frost), thumbnail picker, DOM rendering, and html2canvas lazy-loaded export. Zero dependencies — markdownRenderer is injected by consumer." ``` --- ### Task 3: Integrate share-card.js into serve-ui.html **Files:** - Modify: `src/commands/serve-ui.html:889-901` (share modal HTML) - Modify: `src/commands/serve-ui.html:611-684` (share CSS) - Modify: `src/commands/serve-ui.html:1300-1513` (share JS — remove Canvas renderer, inline share-card.js) - [ ] **Step 1: Update share modal HTML** Replace lines 889-901 (the share overlay HTML) with: ```html ``` - [ ] **Step 2: Update share CSS** Keep `.share-overlay` styles (lines 630-642). Remove the Canvas-specific styles that are no longer needed: - Remove `.share-preview` (line 643-646) — was for `