forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
style: increase toc item width
+38
-20
+13
-4
src/components/ui/BackButton.astro
+13
-4
src/components/ui/BackButton.astro
···
16
16
17
17
<script
18
18
is:inline
19
-
define:vars={{ contentWidth: SITE.contentWidth, centeredLayout: SITE.centeredLayout }}
19
+
define:vars={{
20
+
contentWidth: SITE.contentWidth,
21
+
centeredLayout: SITE.centeredLayout,
22
+
toc: SITE.toc
23
+
}}
20
24
>
21
25
;(function () {
22
26
// Adjust back button position based on layout and screen size
···
35
39
const pageWidth = window.innerWidth
36
40
const contentWidthValue = parseFloat(contentWidth)
37
41
const margin = (pageWidth - contentWidthValue * 16) / 2
38
-
const minSpace = 11 * 16 // Minimum space needed
42
+
const baseMinSpace = 11 * 16 // Base minimum space needed
43
+
// If toc is enabled, need additional 2.5rem (40px) space
44
+
const minSpace = toc ? baseMinSpace + 40 : baseMinSpace
39
45
40
46
// Position button fixed on the left if there's enough space
41
47
if (margin >= minSpace) {
42
48
button.classList.add('fixed-position')
43
-
button.style.left = `${margin - minSpace}px`
49
+
const basePosition = margin - baseMinSpace
50
+
// If toc is enabled, move 2.5rem (40px) further left
51
+
const leftPosition = toc ? basePosition - 40 : basePosition
52
+
button.style.left = `${leftPosition}px`
44
53
} else {
45
54
button.classList.remove('fixed-position')
46
55
button.style.left = ''
···
61
70
62
71
<style>
63
72
.back-button {
64
-
width: 128px;
73
+
width: 8rem;
65
74
display: inline-flex;
66
75
align-items: center;
67
76
gap: 0.375rem;
+24
-15
src/components/ui/TableOfContents.astro
+24
-15
src/components/ui/TableOfContents.astro
···
10
10
11
11
<script
12
12
is:inline
13
-
define:vars={{ contentWidth: SITE.contentWidth, centeredLayout: SITE.centeredLayout }}
13
+
define:vars={{
14
+
contentWidth: SITE.contentWidth,
15
+
centeredLayout: SITE.centeredLayout,
16
+
toc: SITE.toc
17
+
}}
14
18
>
15
19
;(function () {
16
20
// TOC positioning logic (similar to BackButton)
17
21
function adjustTOCPosition() {
18
-
const toc = document.querySelector('.toc-container')
19
-
if (!toc) return
22
+
const tocContainer = document.querySelector('.toc-container')
23
+
if (!tocContainer) return
20
24
21
25
// If not using centered layout, hide TOC
22
26
if (!centeredLayout) {
23
-
toc.style.display = 'none'
27
+
tocContainer.style.display = 'none'
24
28
return
25
29
}
26
30
···
28
32
const pageWidth = window.innerWidth
29
33
const contentWidthValue = parseFloat(contentWidth)
30
34
const margin = (pageWidth - contentWidthValue * 16) / 2
31
-
const minSpace = 11 * 16 // Minimum space needed
35
+
const baseMinSpace = 11 * 16 // Base minimum space needed
36
+
// If toc is enabled, need additional 2.5rem (40px) space
37
+
const minSpace = toc ? baseMinSpace + 40 : baseMinSpace
32
38
33
39
// Show and position TOC fixed on the left if there's enough space
34
40
if (margin >= minSpace) {
35
-
toc.style.display = 'block'
36
-
toc.classList.add('fixed-position')
37
-
toc.style.left = `${margin - minSpace}px`
41
+
tocContainer.style.display = 'block'
42
+
tocContainer.classList.add('fixed-position')
43
+
const basePosition = margin - baseMinSpace
44
+
// If toc is enabled, move 2.5rem (40px) further left
45
+
const leftPosition = toc ? basePosition - 40 : basePosition
46
+
tocContainer.style.left = `${leftPosition}px`
38
47
} else {
39
-
toc.style.display = 'none'
40
-
toc.classList.remove('fixed-position')
41
-
toc.style.left = ''
48
+
tocContainer.style.display = 'none'
49
+
tocContainer.classList.remove('fixed-position')
50
+
tocContainer.style.left = ''
42
51
}
43
52
}
44
53
···
75
84
})
76
85
77
86
// Hide TOC if there are no headings (only title)
78
-
const tocContainer = document.querySelector('.toc-container')
79
-
if (tocContainer && tocItems.length === 0) {
80
-
tocContainer.style.display = 'none'
87
+
const tocContainerElement = document.querySelector('.toc-container')
88
+
if (tocContainerElement && tocItems.length === 0) {
89
+
tocContainerElement.style.display = 'none'
81
90
return
82
91
}
83
92
···
192
201
193
202
<style is:global>
194
203
.toc-container {
195
-
width: 128px;
204
+
width: 12rem;
196
205
position: relative;
197
206
left: -0.175em;
198
207
}
+1
-1
src/config.ts
+1
-1
src/config.ts
···
21
21
22
22
// POST SETTINGS ///////////////////////////////////////////////////////////////////////////////////////
23
23
readingTime: false, // Show reading time in posts
24
-
toc: true, // Show table of contents
24
+
toc: true, // Show the table of contents when there is enough page width
25
25
imageViewer: true, // Enable image viewer
26
26
copyCode: false // Enable copy button in code blocks
27
27
}