mirror of
https://github.com/adityatelange/hugo-PaperMod.git
synced 2026-05-21 11:05:49 +00:00
Improve table of contents
- Convert the `.toc` class to a `<details>` element - Update styles for improved accessibility and interaction
This commit is contained in:
Aditya Telange
@@ -45,40 +45,60 @@
|
||||
-webkit-box-decoration-break: clone;
|
||||
}
|
||||
|
||||
.toc {
|
||||
details.toc {
|
||||
margin-bottom: var(--content-gap);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--code-bg);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.4em;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .toc {
|
||||
[data-theme="dark"] details.toc {
|
||||
background: var(--entry);
|
||||
}
|
||||
|
||||
.toc details summary {
|
||||
cursor: zoom-in;
|
||||
margin-inline-start: 10px;
|
||||
details.toc summary {
|
||||
padding: 0.5rem 1.2rem;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
details summary {
|
||||
cursor: pointer;
|
||||
display: list-item;
|
||||
width: 100%;
|
||||
margin-inline-start: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.toc details[open] summary {
|
||||
cursor: zoom-out;
|
||||
}
|
||||
|
||||
.toc .details {
|
||||
details .title {
|
||||
display: inline;
|
||||
font-weight: 500;
|
||||
margin-inline-start: 0.2rem;
|
||||
}
|
||||
|
||||
.toc .inner {
|
||||
margin: 5px 20px;
|
||||
padding: 0 10px;
|
||||
opacity: 0.9;
|
||||
details {
|
||||
interpolate-size: allow-keywords;
|
||||
}
|
||||
|
||||
.toc li ul {
|
||||
details::details-content {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: clip;
|
||||
transition: height 150ms ease,
|
||||
opacity 150ms ease,
|
||||
content-visibility 150ms allow-discrete;
|
||||
}
|
||||
|
||||
details[open]::details-content {
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
details .inner {
|
||||
margin: 0 2.4rem;
|
||||
padding-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
details li ul {
|
||||
margin-inline-start: var(--gap);
|
||||
}
|
||||
|
||||
|
||||
+77
-79
@@ -1,97 +1,95 @@
|
||||
{{- $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content -}}
|
||||
{{- $has_headers := ge (len $headers) 1 -}}
|
||||
{{- if $has_headers -}}
|
||||
<div class="toc">
|
||||
<details {{if (.Param "TocOpen") }} open{{ end }}>
|
||||
<summary accesskey="c" title="(Alt + C)">
|
||||
<span class="details">{{- i18n "toc" | default "Table of Contents" }}</span>
|
||||
</summary>
|
||||
<details class="toc" {{if (.Param "TocOpen") }} open{{ end }}>
|
||||
<summary accesskey="c" title="(Alt + C)">
|
||||
<span class="title">{{- i18n "toc" | default "Table of Contents" }}</span>
|
||||
</summary>
|
||||
|
||||
<div class="inner">
|
||||
{{- if (.Param "UseHugoToc") }}
|
||||
{{- .TableOfContents -}}
|
||||
{{- else }}
|
||||
{{- $largest := 6 -}}
|
||||
{{- range $headers -}}
|
||||
{{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
|
||||
{{- $headerLevel := len (seq $headerLevel) -}}
|
||||
{{- if lt $headerLevel $largest -}}
|
||||
{{- $largest = $headerLevel -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
<div class="inner">
|
||||
{{- if (.Param "UseHugoToc") }}
|
||||
{{- .TableOfContents -}}
|
||||
{{- else }}
|
||||
{{- $largest := 6 -}}
|
||||
{{- range $headers -}}
|
||||
{{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
|
||||
{{- $headerLevel := len (seq $headerLevel) -}}
|
||||
{{- if lt $headerLevel $largest -}}
|
||||
{{- $largest = $headerLevel -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}}
|
||||
{{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}}
|
||||
|
||||
{{- $.Scratch.Set "bareul" slice -}}
|
||||
{{- $.Scratch.Set "bareul" slice -}}
|
||||
<ul>
|
||||
{{- range seq (sub $firstHeaderLevel $largest) -}}
|
||||
<ul>
|
||||
{{- range seq (sub $firstHeaderLevel $largest) -}}
|
||||
{{- $.Scratch.Add "bareul" (sub (add $largest .) 1) -}}
|
||||
{{- end -}}
|
||||
{{- range $i, $header := $headers -}}
|
||||
{{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
|
||||
{{- $headerLevel := len (seq $headerLevel) -}}
|
||||
|
||||
{{/* get id="xyz" */}}
|
||||
{{- $id := index (findRE "(id=\"(.*?)\")" $header 9) 0 }}
|
||||
|
||||
{{- /* strip id="" to leave xyz, no way to get regex capturing groups in hugo */ -}}
|
||||
{{- $cleanedID := replace (replace $id "id=\"" "") "\"" "" }}
|
||||
{{- $header := replaceRE "<h[1-6].*?>((.|\n])+?)</h[1-6]>" "$1" $header -}}
|
||||
|
||||
{{- if ne $i 0 -}}
|
||||
{{- $prevHeaderLevel := index (findRE "[1-6]" (index $headers (sub $i 1)) 1) 0 -}}
|
||||
{{- $prevHeaderLevel := len (seq $prevHeaderLevel) -}}
|
||||
{{- if gt $headerLevel $prevHeaderLevel -}}
|
||||
{{- range seq $prevHeaderLevel (sub $headerLevel 1) -}}
|
||||
<ul>
|
||||
{{- $.Scratch.Add "bareul" (sub (add $largest .) 1) -}}
|
||||
{{/* the first should not be recorded */}}
|
||||
{{- if ne $prevHeaderLevel . -}}
|
||||
{{- $.Scratch.Add "bareul" . -}}
|
||||
{{- end -}}
|
||||
{{- range $i, $header := $headers -}}
|
||||
{{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
|
||||
{{- $headerLevel := len (seq $headerLevel) -}}
|
||||
|
||||
{{/* get id="xyz" */}}
|
||||
{{- $id := index (findRE "(id=\"(.*?)\")" $header 9) 0 }}
|
||||
|
||||
{{- /* strip id="" to leave xyz, no way to get regex capturing groups in hugo */ -}}
|
||||
{{- $cleanedID := replace (replace $id "id=\"" "") "\"" "" }}
|
||||
{{- $header := replaceRE "<h[1-6].*?>((.|\n])+?)</h[1-6]>" "$1" $header -}}
|
||||
|
||||
{{- if ne $i 0 -}}
|
||||
{{- $prevHeaderLevel := index (findRE "[1-6]" (index $headers (sub $i 1)) 1) 0 -}}
|
||||
{{- $prevHeaderLevel := len (seq $prevHeaderLevel) -}}
|
||||
{{- if gt $headerLevel $prevHeaderLevel -}}
|
||||
{{- range seq $prevHeaderLevel (sub $headerLevel 1) -}}
|
||||
<ul>
|
||||
{{/* the first should not be recorded */}}
|
||||
{{- if ne $prevHeaderLevel . -}}
|
||||
{{- $.Scratch.Add "bareul" . -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- else -}}
|
||||
</li>
|
||||
{{- if lt $headerLevel $prevHeaderLevel -}}
|
||||
{{- range seq (sub $prevHeaderLevel 1) -1 $headerLevel -}}
|
||||
{{- if in ($.Scratch.Get "bareul") . -}}
|
||||
</ul>
|
||||
{{/* manually do pop item */}}
|
||||
{{- $tmp := $.Scratch.Get "bareul" -}}
|
||||
{{- $.Scratch.Delete "bareul" -}}
|
||||
{{- $.Scratch.Set "bareul" slice}}
|
||||
{{- range seq (sub (len $tmp) 1) -}}
|
||||
{{- $.Scratch.Add "bareul" (index $tmp (sub . 1)) -}}
|
||||
{{- end -}}
|
||||
{{- else -}}
|
||||
</li>
|
||||
{{- if lt $headerLevel $prevHeaderLevel -}}
|
||||
{{- range seq (sub $prevHeaderLevel 1) -1 $headerLevel -}}
|
||||
{{- if in ($.Scratch.Get "bareul") . -}}
|
||||
</ul>
|
||||
</li>
|
||||
{{/* manually do pop item */}}
|
||||
{{- $tmp := $.Scratch.Get "bareul" -}}
|
||||
{{- $.Scratch.Delete "bareul" -}}
|
||||
{{- $.Scratch.Set "bareul" slice}}
|
||||
{{- range seq (sub (len $tmp) 1) -}}
|
||||
{{- $.Scratch.Add "bareul" (index $tmp (sub . 1)) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end }}
|
||||
<li>
|
||||
<a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify | safeHTML -}}">{{- $header | plainify | safeHTML -}}</a>
|
||||
{{- else }}
|
||||
<li>
|
||||
<a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify | safeHTML -}}">{{- $header | plainify | safeHTML -}}</a>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
<!-- {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}} -->
|
||||
{{- $firstHeaderLevel := $largest }}
|
||||
{{- $lastHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers (sub (len $headers) 1)) 1) 0)) }}
|
||||
</li>
|
||||
{{- range seq (sub $lastHeaderLevel $firstHeaderLevel) -}}
|
||||
{{- if in ($.Scratch.Get "bareul") (add . $firstHeaderLevel) }}
|
||||
</ul>
|
||||
{{- else }}
|
||||
{{- else -}}
|
||||
</ul>
|
||||
</li>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end }}
|
||||
</ul>
|
||||
{{- end }}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<li>
|
||||
<a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify | safeHTML -}}">{{- $header | plainify | safeHTML -}}</a>
|
||||
{{- else }}
|
||||
<li>
|
||||
<a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify | safeHTML -}}">{{- $header | plainify | safeHTML -}}</a>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
<!-- {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}} -->
|
||||
{{- $firstHeaderLevel := $largest }}
|
||||
{{- $lastHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers (sub (len $headers) 1)) 1) 0)) }}
|
||||
</li>
|
||||
{{- range seq (sub $lastHeaderLevel $firstHeaderLevel) -}}
|
||||
{{- if in ($.Scratch.Get "bareul") (add . $firstHeaderLevel) }}
|
||||
</ul>
|
||||
{{- else }}
|
||||
</ul>
|
||||
</li>
|
||||
{{- end -}}
|
||||
{{- end }}
|
||||
</ul>
|
||||
{{- end }}
|
||||
</div>
|
||||
</details>
|
||||
{{- end }}
|
||||
|
||||
Reference in New Issue
Block a user