style: increase toc item width
the3ash committed
Jul 11, 2025 at 13:52 UTC
2a2dc3fa1910a2ea3009e646e1f1c842b00bb5f2
3 files changed
+38
-20
src/components/ui/BackButton.astro
+13
-4
@@ -16,7 +16,11 @@ import { SITE } from '@/config'
16
17
<script
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
+ }}
24
>
25
;(function () {
26
// Adjust back button position based on layout and screen size
@@ -35,12 +39,17 @@ import { SITE } from '@/config'
39
const pageWidth = window.innerWidth
40
const contentWidthValue = parseFloat(contentWidth)
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
45
46
// Position button fixed on the left if there's enough space
47
if (margin >= minSpace) {
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`
53
} else {
54
button.classList.remove('fixed-position')
55
button.style.left = ''
@@ -61,7 +70,7 @@ import { SITE } from '@/config'
70
71
<style>
72
.back-button {
64
- width: 128px;
73
+ width: 8rem;
74
display: inline-flex;
75
align-items: center;
76
gap: 0.375rem;
src/components/ui/TableOfContents.astro
+24
-15
@@ -10,17 +10,21 @@ import { SITE } from '@/config'
10
11
<script
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
+ }}
18
>
19
;(function () {
20
// TOC positioning logic (similar to BackButton)
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
24
25
// If not using centered layout, hide TOC
26
if (!centeredLayout) {
23
- toc.style.display = 'none'
27
+ tocContainer.style.display = 'none'
28
return
29
}
30
@@ -28,17 +32,22 @@ import { SITE } from '@/config'
32
const pageWidth = window.innerWidth
33
const contentWidthValue = parseFloat(contentWidth)
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
38
39
// Show and position TOC fixed on the left if there's enough space
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`
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 = ''
51
}
52
}
53
@@ -75,9 +84,9 @@ import { SITE } from '@/config'
84
})
85
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'
90
return
91
}
92
@@ -192,7 +201,7 @@ import { SITE } from '@/config'
201
202
<style is:global>
203
.toc-container {
195
- width: 128px;
204
+ width: 12rem;
205
position: relative;
206
left: -0.175em;
207
}
src/config.ts
+1
-1
@@ -21,7 +21,7 @@ export const SITE = {
21
22
// POST SETTINGS ///////////////////////////////////////////////////////////////////////////////////////
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
imageViewer: true, // Enable image viewer
26
copyCode: false // Enable copy button in code blocks
27
}