sepehr/Momento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile): render notes with marked (proper Markdown→HTML) + design CSS soigné

Browse Source 
- Install marked package (UMD, hors-ligne)
- buildHtml: parse Markdown server-side avec marked, inject HTML statique
- CSS: typographie soignée, blockquotes brandés, code dark, tables propres
- Plus de CDN, fonctionne hors-ligne

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Antigravity
2026-05-29 16:43:24 +00:00
parent 7c8695cacf
commit 0ef12f7399
9 changed files with 131 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
memento-mobile/app/note/[id].tsx
View File

@@ -7,6 +7,7 @@ import { SafeAreaView } from 'react-native-safe-area-context'
import { useLocalSearchParams, useRouter } from 'expo-router'
import { ArrowLeft, Share2 } from 'lucide-react-native'
import { WebView } from 'react-native-webview'
import { marked } from 'marked'
import { apiFetch } from '@/lib/api'
import { ENDPOINTS } from '@/lib/config'
import { C } from '../_layout'
@@ -20,30 +21,74 @@ interface Note {
}
function buildHtml(content: string, title: string) {
// marked runs in Node/JS context — parse server-side, inject final HTML
marked.setOptions({ breaks: true, gfm: true })
const bodyHtml = marked.parse(content) as string
return `<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<style>
:root {
--brand: #A47148;
--ink: #1A1A18;
--paper: #FAFAF8;
--concrete: #8A8A82;
--border: #E8E6E0;
--code-bg: #f0ede8;
--dark-bg: #1e1e1c;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, sans-serif; font-size: 16px; line-height: 1.7;
color: #1A1A18; background: #FAFAF8; padding: 0 16px 32px; }
h1 { font-size: 22px; font-weight: 700; margin: 20px 0 12px; }
h2 { font-size: 18px; font-weight: 700; margin: 16px 0 10px; }
h3 { font-size: 16px; font-weight: 600; margin: 14px 0 8px; }
p { margin: 0 0 12px; }
ul, ol { padding-left: 20px; margin: 0 0 12px; }
li { margin-bottom: 4px; }
blockquote { border-left: 3px solid #A47148; padding-left: 12px; color: #666; margin: 12px 0; }
code { background: #f0ede8; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
pre { background: #f0ede8; padding: 12px; border-radius: 8px; overflow: auto; margin: 12px 0; }
a { color: #A47148; }
img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
body {
font-family: -apple-system, 'Helvetica Neue', sans-serif;
font-size: 16px; line-height: 1.75; color: var(--ink);
background: var(--paper); padding: 8px 20px 64px;
word-break: break-word;
}
.note-title {
font-size: 26px; font-weight: 800; letter-spacing: -0.5px;
color: var(--ink); margin: 20px 0 4px; line-height: 1.25;
}
.note-meta { font-size: 12px; color: var(--concrete); margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
h1 { font-size: 22px; font-weight: 700; margin: 28px 0 10px; line-height: 1.3; }
h2 { font-size: 19px; font-weight: 700; margin: 24px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
h3 { font-size: 16px; font-weight: 600; margin: 20px 0 6px; }
h4, h5, h6 { font-size: 15px; font-weight: 600; margin: 14px 0 4px; color: var(--concrete); }
p { margin: 0 0 14px; }
ul, ol { padding-left: 24px; margin: 0 0 14px; }
li { margin-bottom: 6px; }
li::marker { color: var(--brand); }
li > ul, li > ol { margin-top: 4px; margin-bottom: 2px; }
input[type=checkbox] { accent-color: var(--brand); margin-right: 6px; }
blockquote {
border-left: 3px solid var(--brand); margin: 16px 0; padding: 10px 14px;
background: #f7f2ec; border-radius: 0 10px 10px 0; color: #5a5a52; font-style: italic;
}
blockquote p { margin: 0; }
code {
background: var(--code-bg); padding: 2px 7px; border-radius: 6px;
font-size: 13px; font-family: 'Menlo', 'Courier New', monospace; color: var(--brand);
}
pre { background: var(--dark-bg); padding: 16px; border-radius: 12px; overflow-x: auto; margin: 16px 0; }
pre code { background: none; padding: 0; color: #e8e6e0; font-size: 13px; line-height: 1.6; }
a { color: var(--brand); text-decoration: none; border-bottom: 1px solid #d4b896; }
img { max-width: 100%; border-radius: 12px; margin: 12px 0; display: block; }
hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
th { background: var(--code-bg); font-weight: 700; padding: 10px 12px; text-align: left; border-bottom: 2px solid var(--border); }
td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }
strong { font-weight: 700; }
em { font-style: italic; }
del { text-decoration: line-through; color: var(--concrete); }
</style>
</head>
<body>${content}</body>
<body>
<div class="note-title">${title || 'Sans titre'}</div>
<div class="note-meta">Note Momento</div>
<div id="content">${bodyHtml}</div>
</body>
</html>`
}