forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
style: remove extra leading space in task items and refine spacing
+41
-5
+37
-1
src/plugins/rehype-cleanup.mjs
+37
-1
src/plugins/rehype-cleanup.mjs
···
6
6
export default function rehypeCleanup() {
7
7
return (tree) => {
8
8
visit(tree, 'element', (node, index, parent) => {
9
+
// 1. Task List Item Fix: Remove leading space after checkbox
10
+
if (node.tagName === 'li' && node.properties?.className?.includes('task-list-item')) {
11
+
const children = node.children
12
+
let inputIndex = -1
13
+
14
+
// Find the checkbox input
15
+
for (let i = 0; i < children.length; i++) {
16
+
const child = children[i]
17
+
if (
18
+
child.type === 'element' &&
19
+
child.tagName === 'input' &&
20
+
child.properties?.type === 'checkbox'
21
+
) {
22
+
inputIndex = i
23
+
break
24
+
}
25
+
}
26
+
27
+
if (inputIndex !== -1) {
28
+
// Check key siblings after the checkbox for the text node
29
+
for (let i = inputIndex + 1; i < children.length; i++) {
30
+
const child = children[i]
31
+
if (child.type === 'comment') continue
32
+
if (child.type === 'text') {
33
+
if (child.value.startsWith(' ')) {
34
+
child.value = child.value.replace(/^\s+/, '')
35
+
}
36
+
break
37
+
} else {
38
+
break
39
+
}
40
+
}
41
+
}
42
+
}
43
+
44
+
// 2. Figure Cleanup (Original Logic)
9
45
if (node.tagName !== 'p') {
10
46
return
11
47
}
···
32
68
}
33
69
})
34
70
}
35
-
}
71
+
}
+4
-4
src/styles/post.css
+4
-4
src/styles/post.css
···
224
224
225
225
.prose ul li {
226
226
position: relative;
227
-
padding-left: 0.5rem;
227
+
padding-left: 0.3125rem;
228
228
margin-bottom: 0.5em;
229
229
}
230
230
···
259
259
.prose ol li {
260
260
display: block;
261
261
position: relative;
262
-
padding-left: 0.25rem;
262
+
padding-left: 0.125rem;
263
263
margin-bottom: 0.5em;
264
264
}
265
265
···
310
310
311
311
/* Task list checkboxes */
312
312
.prose ul.contains-task-list li.task-list-item input[type='checkbox'] {
313
-
margin-right: 0.5em;
313
+
margin-right: 0.625em;
314
314
position: relative;
315
-
top: 0.175em;
315
+
top: 0.15em;
316
316
width: 1em;
317
317
height: 1em;
318
318
border: 1.35px solid var(--text-tertiary);