blob: 1a59519144b0c80dc29d42fa4c7a8c2a6e31921d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
{{ define "main" }}
{{ $hasToc := and (in .TableOfContents "<li>" ) (.Params.toc) }}
{{ $hasSidebar := or ($hasToc) (.Params.series) }}
<div class="grid grid-cols-2 lg:grid-cols-8 gap-4">
<div
class="col-span-2 {{ if not $hasSidebar }} {{- print "lg:col-start-2" -}} {{ end }} lg:col-span-6 bg-secondary-bg px-6 py-8">
<h1 class="font-bold text-3xl text-primary-text">{{ .Title }}</h1>
{{ partial "post_metadata.html" . }}
<div class="content">
{{ .Content}}
</div>
</div>
{{ if $hasSidebar}}
<div class="col-span-2">
{{ if .Params.series }}
{{ partial "post_series.html" . }}
{{ end }}
{{ if $hasToc }}
{{ partial "post_toc.html" . }}
{{ end }}
</div>
{{ end }}
{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<div
class="col-span-2 {{ if not $hasSidebar }} {{- print "lg:col-start-2" -}} {{ end }} lg:col-span-6 bg-secondary-bg p-6">
<h2 class="text-lg font-semibold mb-4">See Also</h2>
<div class="content">
{{ range . }}
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
<br />
{{ end }}
</div>
</div>
{{ end }}
</div>
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.0/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
{{ if $hasToc }}
<script>
window.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const id = entry.target.getAttribute('id');
if (entry.intersectionRatio > 0) {
if (delay == true) {
let element = document.querySelector('.sticky-toc li.active')
element.firstChild.classList.remove(textColor);
element.classList.remove('active');
delay = false;
updatePosAndColor();
}
document.querySelector(`.sticky-toc li a[href="#${id}"]`).parentElement.classList.add('active');
updatePosAndColor();
} else {
if (document.querySelectorAll('.sticky-toc li.active').length == 1) {
delay = true;
} else {
let element = document.querySelector(`.sticky-toc li a[href="#${id}"]`)
element.classList.remove(textColor);
element.parentElement.classList.remove('active');
updatePosAndColor();
}
}
});
});
var delay = false;
var targetPos = window.innerHeight * 0.4
var textColor = 'text-eureka'
function updatePosAndColor() {
let elements = document.querySelectorAll('.sticky-toc li.active')
let len = elements.length
if (len != 0) {
let firstElement = elements[0]
firstElement.firstChild.classList.add(textColor)
let offset = firstElement.offsetTop - targetPos;
if (offset > 0) {
document.querySelector(`.sticky-toc`).style.top = `calc( 7rem - ${offset}px)`
} else {
document.querySelector(`.sticky-toc`).removeAttribute("style");
}
for (let i = 1; i < len; i++) {
elements[i].firstChild.classList.remove(textColor)
}
}
}
// Track all sections that have an `id` applied
document.querySelectorAll('.content h1[id]').forEach((section) => {
observer.observe(section);
});
document.querySelectorAll('.content h2[id]').forEach((section) => {
observer.observe(section);
});
document.querySelectorAll('.content h3[id]').forEach((section) => {
observer.observe(section);
});
document.querySelectorAll('.content h4[id]').forEach((section) => {
observer.observe(section);
});
document.querySelectorAll('.content h5[id]').forEach((section) => {
observer.observe(section);
});
document.querySelectorAll('.content h6[id]').forEach((section) => {
observer.observe(section);
});
});
</script>
{{ end }}
{{ end }}
|
