Skip to content

Commit e8b88d4

Browse files
adityatelangeadityatelange
committed
Improve table of contents
- Convert the `.toc` class to a `<details>` element - Update styles for improved accessibility and interaction
1 parent 7c29bf8 commit e8b88d4

2 files changed

Lines changed: 112 additions & 94 deletions

File tree

‎assets/css/common/post-single.css‎

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -45,40 +45,60 @@
4545
-webkit-box-decoration-break: clone;
4646
}
4747

48-
.toc {
48+
details.toc {
4949
margin-bottom: var(--content-gap);
50-
border: 1px solid var(--border);
5150
background: var(--code-bg);
5251
border-radius: var(--radius);
53-
padding: 0.4em;
52+
border: 1px solid var(--border);
5453
}
5554

56-
[data-theme="dark"] .toc {
55+
[data-theme="dark"] details.toc {
5756
background: var(--entry);
5857
}
5958

60-
.toc details summary {
61-
cursor: zoom-in;
62-
margin-inline-start: 10px;
63-
user-select: none;
59+
details.toc summary {
60+
padding: 0.5rem 1.2rem;
61+
border-radius: var(--radius);
6462
}
6563

66-
.toc details[open] summary {
67-
cursor: zoom-out;
64+
details summary {
65+
cursor: pointer;
66+
display: list-item;
67+
width: 100%;
68+
margin-inline-start: 0;
69+
user-select: none;
6870
}
6971

70-
.toc .details {
72+
details .title {
7173
display: inline;
7274
font-weight: 500;
75+
margin-inline-start: 0.2rem;
76+
}
77+
78+
details {
79+
interpolate-size: allow-keywords;
80+
}
81+
82+
details::details-content {
83+
height: 0;
84+
opacity: 0;
85+
overflow: clip;
86+
transition: height 150ms ease,
87+
opacity 150ms ease,
88+
content-visibility 150ms allow-discrete;
89+
}
90+
91+
details[open]::details-content {
92+
height: auto;
93+
opacity: 1;
7394
}
7495

75-
.toc .inner {
76-
margin: 5px 20px;
77-
padding: 0 10px;
78-
opacity: 0.9;
96+
details .inner {
97+
margin: 0 2.4rem;
98+
padding-bottom: 0.6rem;
7999
}
80100

81-
.toc li ul {
101+
details li ul {
82102
margin-inline-start: var(--gap);
83103
}
84104

‎layouts/partials/toc.html‎

Lines changed: 76 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,95 @@
11
{{- $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content -}}
22
{{- $has_headers := ge (len $headers) 1 -}}
33
{{- if $has_headers -}}
4-
<div class="toc">
5-
<details {{if (.Param "TocOpen") }} open{{ end }}>
6-
<summary accesskey="c" title="(Alt + C)">
7-
<span class="details">{{- i18n "toc" | default "Table of Contents" }}</span>
8-
</summary>
4+
<details class="toc" {{if (.Param "TocOpen") }} open{{ end }}>
5+
<summary accesskey="c" title="(Alt + C)">
6+
<span class="title">{{- i18n "toc" | default "Table of Contents" }}</span>
7+
</summary>
98

10-
<div class="inner">
11-
{{- if (.Param "UseHugoToc") }}
12-
{{- .TableOfContents -}}
13-
{{- else }}
14-
{{- $largest := 6 -}}
15-
{{- range $headers -}}
16-
{{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
17-
{{- $headerLevel := len (seq $headerLevel) -}}
18-
{{- if lt $headerLevel $largest -}}
19-
{{- $largest = $headerLevel -}}
20-
{{- end -}}
21-
{{- end -}}
9+
<div class="inner">
10+
{{- if (.Param "UseHugoToc") }}
11+
{{- .TableOfContents -}}
12+
{{- else }}
13+
{{- $largest := 6 -}}
14+
{{- range $headers -}}
15+
{{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
16+
{{- $headerLevel := len (seq $headerLevel) -}}
17+
{{- if lt $headerLevel $largest -}}
18+
{{- $largest = $headerLevel -}}
19+
{{- end -}}
20+
{{- end -}}
2221

23-
{{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}}
22+
{{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}}
2423

25-
{{- $.Scratch.Set "bareul" slice -}}
24+
{{- $.Scratch.Set "bareul" slice -}}
25+
<ul>
26+
{{- range seq (sub $firstHeaderLevel $largest) -}}
2627
<ul>
27-
{{- range seq (sub $firstHeaderLevel $largest) -}}
28-
<ul>
29-
{{- $.Scratch.Add "bareul" (sub (add $largest .) 1) -}}
30-
{{- end -}}
31-
{{- range $i, $header := $headers -}}
32-
{{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
33-
{{- $headerLevel := len (seq $headerLevel) -}}
28+
{{- $.Scratch.Add "bareul" (sub (add $largest .) 1) -}}
29+
{{- end -}}
30+
{{- range $i, $header := $headers -}}
31+
{{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
32+
{{- $headerLevel := len (seq $headerLevel) -}}
3433

35-
{{/* get id="xyz" */}}
36-
{{- $id := index (findRE "(id=\"(.*?)\")" $header 9) 0 }}
34+
{{/* get id="xyz" */}}
35+
{{- $id := index (findRE "(id=\"(.*?)\")" $header 9) 0 }}
3736

38-
{{- /* strip id="" to leave xyz, no way to get regex capturing groups in hugo */ -}}
39-
{{- $cleanedID := replace (replace $id "id=\"" "") "\"" "" }}
40-
{{- $header := replaceRE "<h[1-6].*?>((.|\n])+?)</h[1-6]>" "$1" $header -}}
37+
{{- /* strip id="" to leave xyz, no way to get regex capturing groups in hugo */ -}}
38+
{{- $cleanedID := replace (replace $id "id=\"" "") "\"" "" }}
39+
{{- $header := replaceRE "<h[1-6].*?>((.|\n])+?)</h[1-6]>" "$1" $header -}}
4140

42-
{{- if ne $i 0 -}}
43-
{{- $prevHeaderLevel := index (findRE "[1-6]" (index $headers (sub $i 1)) 1) 0 -}}
44-
{{- $prevHeaderLevel := len (seq $prevHeaderLevel) -}}
45-
{{- if gt $headerLevel $prevHeaderLevel -}}
46-
{{- range seq $prevHeaderLevel (sub $headerLevel 1) -}}
47-
<ul>
48-
{{/* the first should not be recorded */}}
49-
{{- if ne $prevHeaderLevel . -}}
50-
{{- $.Scratch.Add "bareul" . -}}
51-
{{- end -}}
52-
{{- end -}}
53-
{{- else -}}
54-
</li>
55-
{{- if lt $headerLevel $prevHeaderLevel -}}
56-
{{- range seq (sub $prevHeaderLevel 1) -1 $headerLevel -}}
57-
{{- if in ($.Scratch.Get "bareul") . -}}
58-
</ul>
59-
{{/* manually do pop item */}}
60-
{{- $tmp := $.Scratch.Get "bareul" -}}
61-
{{- $.Scratch.Delete "bareul" -}}
62-
{{- $.Scratch.Set "bareul" slice}}
63-
{{- range seq (sub (len $tmp) 1) -}}
64-
{{- $.Scratch.Add "bareul" (index $tmp (sub . 1)) -}}
41+
{{- if ne $i 0 -}}
42+
{{- $prevHeaderLevel := index (findRE "[1-6]" (index $headers (sub $i 1)) 1) 0 -}}
43+
{{- $prevHeaderLevel := len (seq $prevHeaderLevel) -}}
44+
{{- if gt $headerLevel $prevHeaderLevel -}}
45+
{{- range seq $prevHeaderLevel (sub $headerLevel 1) -}}
46+
<ul>
47+
{{/* the first should not be recorded */}}
48+
{{- if ne $prevHeaderLevel . -}}
49+
{{- $.Scratch.Add "bareul" . -}}
50+
{{- end -}}
6551
{{- end -}}
6652
{{- else -}}
53+
</li>
54+
{{- if lt $headerLevel $prevHeaderLevel -}}
55+
{{- range seq (sub $prevHeaderLevel 1) -1 $headerLevel -}}
56+
{{- if in ($.Scratch.Get "bareul") . -}}
6757
</ul>
68-
</li>
69-
{{- end -}}
58+
{{/* manually do pop item */}}
59+
{{- $tmp := $.Scratch.Get "bareul" -}}
60+
{{- $.Scratch.Delete "bareul" -}}
61+
{{- $.Scratch.Set "bareul" slice}}
62+
{{- range seq (sub (len $tmp) 1) -}}
63+
{{- $.Scratch.Add "bareul" (index $tmp (sub . 1)) -}}
7064
{{- end -}}
71-
{{- end -}}
72-
{{- end }}
73-
<li>
74-
<a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify | safeHTML -}}">{{- $header | plainify | safeHTML -}}</a>
75-
{{- else }}
76-
<li>
77-
<a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify | safeHTML -}}">{{- $header | plainify | safeHTML -}}</a>
78-
{{- end -}}
79-
{{- end -}}
80-
<!-- {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}} -->
81-
{{- $firstHeaderLevel := $largest }}
82-
{{- $lastHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers (sub (len $headers) 1)) 1) 0)) }}
83-
</li>
84-
{{- range seq (sub $lastHeaderLevel $firstHeaderLevel) -}}
85-
{{- if in ($.Scratch.Get "bareul") (add . $firstHeaderLevel) }}
86-
</ul>
87-
{{- else }}
65+
{{- else -}}
8866
</ul>
8967
</li>
9068
{{- end -}}
69+
{{- end -}}
70+
{{- end -}}
9171
{{- end }}
92-
</ul>
93-
{{- end }}
94-
</div>
95-
</details>
96-
</div>
72+
<li>
73+
<a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify | safeHTML -}}">{{- $header | plainify | safeHTML -}}</a>
74+
{{- else }}
75+
<li>
76+
<a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify | safeHTML -}}">{{- $header | plainify | safeHTML -}}</a>
77+
{{- end -}}
78+
{{- end -}}
79+
<!-- {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}} -->
80+
{{- $firstHeaderLevel := $largest }}
81+
{{- $lastHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers (sub (len $headers) 1)) 1) 0)) }}
82+
</li>
83+
{{- range seq (sub $lastHeaderLevel $firstHeaderLevel) -}}
84+
{{- if in ($.Scratch.Get "bareul") (add . $firstHeaderLevel) }}
85+
</ul>
86+
{{- else }}
87+
</ul>
88+
</li>
89+
{{- end -}}
90+
{{- end }}
91+
</ul>
92+
{{- end }}
93+
</div>
94+
</details>
9795
{{- end }}

0 commit comments

Comments
 (0)
⚡