hamzus-ui 0.0.244 → 0.0.245
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -305,8 +305,6 @@ Voir la [documentation](https://example.com) pour plus de détails.
|
|
|
305
305
|
.readme-editor {
|
|
306
306
|
display: flex;
|
|
307
307
|
flex-direction: column;
|
|
308
|
-
height: 640px;
|
|
309
|
-
max-height: 90vh;
|
|
310
308
|
background: var(--bg);
|
|
311
309
|
color: var(--text);
|
|
312
310
|
border: 1px solid var(--border);
|
|
@@ -191,8 +191,6 @@ Voir la [documentation](https://example.com) pour plus de détails.
|
|
|
191
191
|
.readme-preview {
|
|
192
192
|
display: flex;
|
|
193
193
|
flex-direction: column;
|
|
194
|
-
height: 640px;
|
|
195
|
-
max-height: 90vh;
|
|
196
194
|
background: var(--bg);
|
|
197
195
|
color: var(--text);
|
|
198
196
|
border: 1px solid var(--border);
|
|
@@ -1,383 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
// ---------- État ----------
|
|
3
|
-
export let initialValue = `# Mon Projet
|
|
4
|
-
|
|
5
|
-
> Une courte description qui donne envie de scroller.
|
|
6
|
-
|
|
7
|
-
## Installation
|
|
8
|
-
|
|
9
|
-
\`\`\`bash
|
|
10
|
-
npm install mon-projet
|
|
11
|
-
\`\`\`
|
|
12
|
-
|
|
13
|
-
## Utilisation
|
|
14
|
-
|
|
15
|
-
\`\`\`js
|
|
16
|
-
import { run } from 'mon-projet'
|
|
17
|
-
run()
|
|
18
|
-
\`\`\`
|
|
19
|
-
|
|
20
|
-
- [x] Setup du repo
|
|
21
|
-
- [ ] Écrire les tests
|
|
22
|
-
- [ ] Publier sur npm
|
|
23
|
-
|
|
24
|
-
Voir la [documentation](https://example.com) pour plus de détails.
|
|
25
|
-
`;
|
|
26
|
-
export let filename = 'README.md';
|
|
27
|
-
|
|
28
|
-
let source = initialValue;
|
|
29
|
-
|
|
30
|
-
$: html = renderMarkdown(source);
|
|
31
|
-
|
|
32
|
-
// ---------- Petit moteur markdown (sans dépendance) ----------
|
|
33
|
-
function escapeHtml(str) {
|
|
34
|
-
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function renderInline(text) {
|
|
38
|
-
let t = escapeHtml(text);
|
|
39
|
-
t = t.replace(/`([^`]+)`/g, '<code>$1</code>');
|
|
40
|
-
t = t.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img alt="$1" src="$2" />');
|
|
41
|
-
t = t.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
|
|
42
|
-
t = t.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
|
|
43
|
-
t = t.replace(/(^|[^*])\*([^*]+)\*(?!\*)/g, '$1<em>$2</em>');
|
|
44
|
-
t = t.replace(/~~([^~]+)~~/g, '<del>$1</del>');
|
|
45
|
-
return t;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
function renderMarkdown(md) {
|
|
49
|
-
const lines = md.replace(/\r\n/g, '\n').split('\n');
|
|
50
|
-
let out = [];
|
|
51
|
-
let i = 0;
|
|
52
|
-
let inCodeBlock = false;
|
|
53
|
-
let codeLang = '';
|
|
54
|
-
let codeBuf = [];
|
|
55
|
-
let listBuf = [];
|
|
56
|
-
let listType = null;
|
|
57
|
-
|
|
58
|
-
function flushList() {
|
|
59
|
-
if (listBuf.length) {
|
|
60
|
-
const tag = listType === 'ol' ? 'ol' : 'ul';
|
|
61
|
-
out.push(`<${tag}>${listBuf.join('')}</${tag}>`);
|
|
62
|
-
listBuf = [];
|
|
63
|
-
listType = null;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
while (i < lines.length) {
|
|
68
|
-
const line = lines[i];
|
|
69
|
-
const fence = line.match(/^```(.*)$/);
|
|
70
|
-
|
|
71
|
-
if (fence) {
|
|
72
|
-
if (!inCodeBlock) {
|
|
73
|
-
inCodeBlock = true;
|
|
74
|
-
codeLang = fence[1].trim();
|
|
75
|
-
codeBuf = [];
|
|
76
|
-
} else {
|
|
77
|
-
inCodeBlock = false;
|
|
78
|
-
out.push(
|
|
79
|
-
`<pre class="code-block" data-lang="${escapeHtml(codeLang || 'text')}"><code>${escapeHtml(codeBuf.join('\n'))}</code></pre>`
|
|
80
|
-
);
|
|
81
|
-
}
|
|
82
|
-
i++;
|
|
83
|
-
continue;
|
|
84
|
-
}
|
|
85
|
-
if (inCodeBlock) {
|
|
86
|
-
codeBuf.push(line);
|
|
87
|
-
i++;
|
|
88
|
-
continue;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
const heading = line.match(/^(#{1,6})\s+(.*)$/);
|
|
92
|
-
if (heading) {
|
|
93
|
-
flushList();
|
|
94
|
-
const level = heading[1].length;
|
|
95
|
-
out.push(`<h${level}>${renderInline(heading[2])}</h${level}>`);
|
|
96
|
-
i++;
|
|
97
|
-
continue;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
const quote = line.match(/^>\s?(.*)$/);
|
|
101
|
-
if (quote) {
|
|
102
|
-
flushList();
|
|
103
|
-
out.push(`<blockquote>${renderInline(quote[1])}</blockquote>`);
|
|
104
|
-
i++;
|
|
105
|
-
continue;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
const hr = line.match(/^(-{3,}|\*{3,})\s*$/);
|
|
109
|
-
if (hr) {
|
|
110
|
-
flushList();
|
|
111
|
-
out.push('<hr />');
|
|
112
|
-
i++;
|
|
113
|
-
continue;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
const taskItem = line.match(/^\s*[-*]\s+\[( |x|X)\]\s+(.*)$/);
|
|
117
|
-
if (taskItem) {
|
|
118
|
-
if (listType !== 'ul') {
|
|
119
|
-
flushList();
|
|
120
|
-
listType = 'ul';
|
|
121
|
-
}
|
|
122
|
-
const checked = taskItem[1].toLowerCase() === 'x';
|
|
123
|
-
listBuf.push(
|
|
124
|
-
`<li class="task"><input type="checkbox" disabled ${checked ? 'checked' : ''} />${renderInline(taskItem[2])}</li>`
|
|
125
|
-
);
|
|
126
|
-
i++;
|
|
127
|
-
continue;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
const ulItem = line.match(/^\s*[-*]\s+(.*)$/);
|
|
131
|
-
if (ulItem) {
|
|
132
|
-
if (listType !== 'ul') {
|
|
133
|
-
flushList();
|
|
134
|
-
listType = 'ul';
|
|
135
|
-
}
|
|
136
|
-
listBuf.push(`<li>${renderInline(ulItem[1])}</li>`);
|
|
137
|
-
i++;
|
|
138
|
-
continue;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
const olItem = line.match(/^\s*\d+\.\s+(.*)$/);
|
|
142
|
-
if (olItem) {
|
|
143
|
-
if (listType !== 'ol') {
|
|
144
|
-
flushList();
|
|
145
|
-
listType = 'ol';
|
|
146
|
-
}
|
|
147
|
-
listBuf.push(`<li>${renderInline(olItem[1])}</li>`);
|
|
148
|
-
i++;
|
|
149
|
-
continue;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
if (line.trim() === '') {
|
|
153
|
-
flushList();
|
|
154
|
-
i++;
|
|
155
|
-
continue;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
flushList();
|
|
159
|
-
out.push(`<p>${renderInline(line)}</p>`);
|
|
160
|
-
i++;
|
|
161
|
-
}
|
|
162
|
-
flushList();
|
|
163
|
-
if (inCodeBlock && codeBuf.length) {
|
|
164
|
-
out.push(`<pre class="code-block"><code>${escapeHtml(codeBuf.join('\n'))}</code></pre>`);
|
|
165
|
-
}
|
|
166
|
-
return out.join('\n');
|
|
167
|
-
}
|
|
168
|
-
</script>
|
|
169
|
-
|
|
170
|
-
<div class="readme-preview">
|
|
171
|
-
|
|
172
|
-
<div class="preview-pane">
|
|
173
|
-
<div class="markdown-body">
|
|
174
|
-
{@html html}
|
|
175
|
-
</div>
|
|
176
|
-
</div>
|
|
177
|
-
</div>
|
|
178
|
-
|
|
179
|
-
<style>
|
|
180
|
-
:root {
|
|
181
|
-
--bg: var(--bg-1);
|
|
182
|
-
--panel: var(--bg-blur);
|
|
183
|
-
--panel-alt: var(--bg-blur);
|
|
184
|
-
--border: var(--stroke);
|
|
185
|
-
--text: var(--font-1);
|
|
186
|
-
--muted: var(--font-3);
|
|
187
|
-
--amber: var(--orange);
|
|
188
|
-
--teal: var(--blur);
|
|
189
|
-
--code-bg: var(--bg-2);
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
.readme-preview {
|
|
193
|
-
display: flex;
|
|
194
|
-
flex-direction: column;
|
|
195
|
-
height: 640px;
|
|
196
|
-
max-height: 90vh;
|
|
197
|
-
background: var(--bg);
|
|
198
|
-
color: var(--text);
|
|
199
|
-
border: 1px solid var(--border);
|
|
200
|
-
border-radius: 10px;
|
|
201
|
-
overflow: hidden;
|
|
202
|
-
font-family:
|
|
203
|
-
'Inter',
|
|
204
|
-
-apple-system,
|
|
205
|
-
BlinkMacSystemFont,
|
|
206
|
-
'Segoe UI',
|
|
207
|
-
sans-serif;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
.chrome {
|
|
211
|
-
display: flex;
|
|
212
|
-
align-items: center;
|
|
213
|
-
background: var(--panel);
|
|
214
|
-
border-bottom: 1px solid var(--border);
|
|
215
|
-
padding: 0 10px;
|
|
216
|
-
flex-shrink: 0;
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
.preview-pane {
|
|
220
|
-
flex: 1;
|
|
221
|
-
min-height: 0;
|
|
222
|
-
overflow-y: auto;
|
|
223
|
-
padding: 20px 28px;
|
|
224
|
-
background: var(--panel);
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
.markdown-body {
|
|
228
|
-
max-width: 640px;
|
|
229
|
-
font-size: 14.5px;
|
|
230
|
-
line-height: 1.7;
|
|
231
|
-
color: var(--text);
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
.markdown-body :global(h1),
|
|
235
|
-
.markdown-body :global(h2),
|
|
236
|
-
.markdown-body :global(h3) {
|
|
237
|
-
font-family: 'Inter', sans-serif;
|
|
238
|
-
font-weight: 700;
|
|
239
|
-
color: var(--text);
|
|
240
|
-
margin: 1.1em 0 0.5em;
|
|
241
|
-
line-height: 1.3;
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
.markdown-body :global(h1) {
|
|
245
|
-
font-size: 1.7em;
|
|
246
|
-
border-bottom: 1px solid var(--border);
|
|
247
|
-
padding-bottom: 0.3em;
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
.markdown-body :global(h2) {
|
|
251
|
-
font-size: 1.32em;
|
|
252
|
-
border-bottom: 1px solid var(--border);
|
|
253
|
-
padding-bottom: 0.25em;
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
.markdown-body :global(h3) {
|
|
257
|
-
font-size: 1.1em;
|
|
258
|
-
color: var(--teal);
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
.markdown-body :global(p) {
|
|
262
|
-
margin: 0.6em 0;
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
.markdown-body :global(a) {
|
|
266
|
-
color: var(--teal);
|
|
267
|
-
text-decoration: none;
|
|
268
|
-
border-bottom: 1px solid rgba(79, 209, 197, 0.35);
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
.markdown-body :global(a:hover) {
|
|
272
|
-
border-bottom-color: var(--teal);
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
.markdown-body :global(code) {
|
|
276
|
-
background: var(--code-bg);
|
|
277
|
-
color: var(--amber);
|
|
278
|
-
padding: 0.15em 0.4em;
|
|
279
|
-
border-radius: 4px;
|
|
280
|
-
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
|
281
|
-
font-size: 0.88em;
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
.markdown-body :global(.code-block) {
|
|
285
|
-
background: var(--code-bg);
|
|
286
|
-
border: 1px solid var(--border);
|
|
287
|
-
border-radius: 8px;
|
|
288
|
-
padding: 14px 16px;
|
|
289
|
-
overflow-x: auto;
|
|
290
|
-
margin: 0.8em 0;
|
|
291
|
-
position: relative;
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
.markdown-body :global(.code-block::before) {
|
|
295
|
-
content: attr(data-lang);
|
|
296
|
-
position: absolute;
|
|
297
|
-
top: 6px;
|
|
298
|
-
right: 10px;
|
|
299
|
-
font-size: 10px;
|
|
300
|
-
letter-spacing: 0.05em;
|
|
301
|
-
text-transform: uppercase;
|
|
302
|
-
color: var(--muted);
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
.markdown-body :global(.code-block code) {
|
|
306
|
-
background: none;
|
|
307
|
-
color: var(--text);
|
|
308
|
-
padding: 0;
|
|
309
|
-
font-size: 0.85em;
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
.markdown-body :global(blockquote) {
|
|
313
|
-
margin: 0.8em 0;
|
|
314
|
-
padding: 0.4em 1em;
|
|
315
|
-
border-left: 3px solid var(--amber);
|
|
316
|
-
color: var(--muted);
|
|
317
|
-
background: rgba(232, 179, 57, 0.05);
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
.markdown-body :global(ul),
|
|
321
|
-
.markdown-body :global(ol) {
|
|
322
|
-
margin: 0.6em 0;
|
|
323
|
-
padding-left: 1.4em;
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
.markdown-body :global(li) {
|
|
327
|
-
margin: 0.25em 0;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
.markdown-body :global(li.task) {
|
|
331
|
-
list-style: none;
|
|
332
|
-
margin-left: -1.4em;
|
|
333
|
-
display: flex;
|
|
334
|
-
align-items: baseline;
|
|
335
|
-
gap: 6px;
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
.markdown-body :global(hr) {
|
|
339
|
-
border: none;
|
|
340
|
-
border-top: 1px solid var(--border);
|
|
341
|
-
margin: 1.4em 0;
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
.markdown-body :global(img) {
|
|
345
|
-
max-width: 100%;
|
|
346
|
-
border-radius: 6px;
|
|
347
|
-
}
|
|
348
|
-
|
|
349
|
-
.markdown-body :global(strong) {
|
|
350
|
-
color: var(--text);
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
.readme-preview :global(input[type='checkbox']) {
|
|
354
|
-
appearance: none;
|
|
355
|
-
-webkit-appearance: none;
|
|
356
|
-
width: 16px;
|
|
357
|
-
height: 16px;
|
|
358
|
-
flex-shrink: 0;
|
|
359
|
-
margin: 0;
|
|
360
|
-
border: 1.5px solid var(--border, #262c3a);
|
|
361
|
-
border-radius: 4px;
|
|
362
|
-
background: var(--code-bg, #0d0f16);
|
|
363
|
-
cursor: default;
|
|
364
|
-
position: relative;
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
.readme-preview :global(input[type='checkbox']:checked) {
|
|
368
|
-
background: var(--amber, #e8b339);
|
|
369
|
-
border-color: var(--amber, #e8b339);
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
.readme-preview :global(input[type='checkbox']:checked::after) {
|
|
373
|
-
content: '';
|
|
374
|
-
position: absolute;
|
|
375
|
-
left: 4px;
|
|
376
|
-
top: 1px;
|
|
377
|
-
width: 4px;
|
|
378
|
-
height: 8px;
|
|
379
|
-
border: solid var(--font-1);
|
|
380
|
-
border-width: 0 2px 2px 0;
|
|
381
|
-
transform: rotate(45deg);
|
|
382
|
-
}
|
|
383
|
-
</style>
|