Added toc to the side
This commit is contained in:
Niels van Brakel
parent
dbaa17c69a
commit
06ed0bdd86
@ -260,18 +260,34 @@
|
||||
.toc {
|
||||
margin: 0 2px 40px 2px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--code-bg);
|
||||
background: var(--entry);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
.dark .toc {
|
||||
background: var(--entry);
|
||||
.toc-container.wide {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
border-right: 1px solid var(--border);
|
||||
left: calc((var(--toc-width) + var(--gap)) * -1);
|
||||
top: calc(var(--gap) * 2);
|
||||
width: var(--toc-width);
|
||||
}
|
||||
|
||||
.wide .toc {
|
||||
position: sticky;
|
||||
top: var(--gap);
|
||||
border: unset;
|
||||
background: unset;
|
||||
border-radius: unset;
|
||||
width: 100%;
|
||||
margin: 0 2px 40px 2px;
|
||||
}
|
||||
|
||||
.toc details summary {
|
||||
cursor: zoom-in;
|
||||
margin-inline-start: 20px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.toc details[open] summary {
|
||||
@ -283,13 +299,27 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toc-container.wide .toc .inner {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toc ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.toc .inner {
|
||||
margin: 0 20px;
|
||||
padding: 10px 20px;
|
||||
margin: 0 0 0 20px;
|
||||
padding: 0px 15px 15px 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.toc li ul {
|
||||
margin-inline-start: var(--gap);
|
||||
margin-inline-start: calc(var(--gap) * 0.5);
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.toc summary:focus {
|
||||
@ -311,7 +341,6 @@
|
||||
.paginav {
|
||||
border-radius: var(--radius);
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.post-tags a {
|
||||
@ -321,11 +350,10 @@
|
||||
color: var(--secondary);
|
||||
font-size: 14px;
|
||||
line-height: 34px;
|
||||
background: var(--code-bg);
|
||||
background: var(--tertiary);
|
||||
}
|
||||
|
||||
.post-tags a:hover,
|
||||
.paginav a:hover {
|
||||
.post-tags a:hover {
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
--content-gap: 20px;
|
||||
--nav-width: 1024px;
|
||||
--main-width: 720px;
|
||||
--toc-width: 300px;
|
||||
--header-height: 60px;
|
||||
--footer-height: 60px;
|
||||
--radius: 8px;
|
||||
|
||||
@ -1,93 +1,152 @@
|
||||
{{- $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>
|
||||
<aside id="toc-container" class="toc-container wide">
|
||||
<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>
|
||||
|
||||
<div class="inner">
|
||||
{{- $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">
|
||||
{{- $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 -}}
|
||||
<ul>
|
||||
{{- range seq (sub $firstHeaderLevel $largest) -}}
|
||||
{{- $.Scratch.Set "bareul" slice -}}
|
||||
<ul>
|
||||
{{- $.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) -}}
|
||||
{{- range seq (sub $firstHeaderLevel $largest) -}}
|
||||
<ul>
|
||||
{{/* the first should not be recorded */}}
|
||||
{{- if ne $prevHeaderLevel . -}}
|
||||
{{- $.Scratch.Add "bareul" . -}}
|
||||
{{- $.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>
|
||||
{{/* 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>
|
||||
{{/* 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)) -}}
|
||||
</li>
|
||||
{{- end -}}
|
||||
{{- else -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end }}
|
||||
<li>
|
||||
<a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | safeHTML -}}</a>
|
||||
{{- else }}
|
||||
<li>
|
||||
<a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | 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 -}}
|
||||
{{- end -}}
|
||||
{{- end }}
|
||||
<li>
|
||||
<a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | safeHTML -}}</a>
|
||||
{{- else }}
|
||||
<li>
|
||||
<a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | 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>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</aside>
|
||||
<script>
|
||||
let activeElement;
|
||||
let elements;
|
||||
window.addEventListener('DOMContentLoaded', function (event) {
|
||||
checkTocPosition();
|
||||
|
||||
elements = document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h5[id],h6[id]');
|
||||
// Make the first header active
|
||||
activeElement = elements[0];
|
||||
document.querySelector(`.inner ul li a[href="#${activeElement.getAttribute('id')}"]`).classList.add('active');
|
||||
}, false);
|
||||
|
||||
window.addEventListener('resize', function(event) {
|
||||
checkTocPosition();
|
||||
}, false);
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
// Check if there is an object in the top half of the screen or keep the last item active
|
||||
activeElement = Array.from(elements).find((element) => {
|
||||
if ((getOffsetTop(element) - window.pageYOffset) > 0 &&
|
||||
(getOffsetTop(element) - window.pageYOffset) < window.innerHeight/2) {
|
||||
return element;
|
||||
}
|
||||
}) || activeElement
|
||||
|
||||
elements.forEach(element => {
|
||||
if (element === activeElement ){
|
||||
document.querySelector(`.inner ul li a[href="#${element.getAttribute('id')}"]`).classList.add('active');
|
||||
} else {
|
||||
document.querySelector(`.inner ul li a[href="#${element.getAttribute('id')}"]`).classList.remove('active');
|
||||
}
|
||||
})
|
||||
}, false);
|
||||
|
||||
const main = parseInt(getComputedStyle(document.body).getPropertyValue('--main-width'), 10);
|
||||
const toc = parseInt(getComputedStyle(document.body).getPropertyValue('--toc-width'), 10);
|
||||
const gap = parseInt(getComputedStyle(document.body).getPropertyValue('--gap'), 10);
|
||||
|
||||
function checkTocPosition() {
|
||||
const width = document.body.scrollWidth;
|
||||
|
||||
if (width - main - (toc * 2) - (gap * 4) > 0) {
|
||||
document.getElementById("toc-container").classList.add("wide");
|
||||
} else {
|
||||
document.getElementById("toc-container").classList.remove("wide");
|
||||
}
|
||||
}
|
||||
|
||||
function getOffsetTop(element) {
|
||||
if (!element.getClientRects().length) {
|
||||
return 0;
|
||||
}
|
||||
let rect = element.getBoundingClientRect();
|
||||
let win = element.ownerDocument.defaultView;
|
||||
return rect.top + win.pageYOffset;
|
||||
}
|
||||
</script>
|
||||
{{- end }}
|
||||
Loading…
x
Reference in New Issue
Block a user