-
-
Notifications
You must be signed in to change notification settings - Fork 200
/
custom-page-toc.hbs
57 lines (42 loc) · 1.85 KB
/
custom-page-toc.hbs
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
{{!-- Layout --}}
{{!< default}}
{{#post}}
{{!-- Class for <body> --}}
{{#contentFor "special_body_class"}}is-article{{/contentFor}}
<article class="post py-vmin8 relative">
<header class="post-header godo-canvas">
<h1 class="post-title text-32 md:text-4xl lg:text-44 text-title leading-tight">{{title}}</h1>
{{#if custom_excerpt}}<p class="post-excerpt mt-6 text-22 text-gray-500">{{custom_excerpt}}</p>{{/if}}
</header>
<section id="post-body" class="post-body godo-canvas mx-auto relative {{#match @custom.post_font "=" "font-serif"}}font-serif{{else}}font-sans{{/match}}">
{{!-- Post Image - partials/article/article-featured-image.hbs --}}
{{#if feature_image}}{{> "article/article-featured-image" image=feature_image class="kg-width-wide"}}{{/if}}
{{content}}
{{!-- Table of Content --}}
<div class="godo-content-side top-0 bottom-0 absolute pr-8 row-start-1 hidden font-sans lg:block">
<div class="sticky top-20 overflow-auto scroll-transparent lg:max-h-(screen-16)">
<div class="js-tocbot text-base space-y-4 leading-tight"></div>
</div>
</div>
</section>
</article>
{{/post}}
{{#contentFor "scripts"}}
<script>
function godoTocBot() {
var $markdown = document.querySelector('.post-body');
if (!$markdown) return;
var $titles = $markdown.querySelectorAll('h2[id]');
if (!$titles.length) return;
var $jsTocBot = document.querySelector('.js-tocbot');
$titles.forEach(function (el) {
var titleLink = document.createElement('a');
titleLink.href = '#' + el.getAttribute('id');
titleLink.textContent = el.textContent;
titleLink.classList = 'text-gray-500 block !no-underline hover:text-gray-900';
$jsTocBot.appendChild(titleLink);
});
};
document.addEventListener('DOMContentLoaded', godoTocBot);
</script>
{{/contentFor}}