Add table of contents to skooma page

This commit is contained in:
Talia 2022-06-22 16:20:23 +02:00
parent 912909836c
commit 363c50d97d
3 changed files with 42 additions and 1 deletions

View file

@ -3,6 +3,7 @@
<script type="module" src="codeblock.js"></script>
<script type="module" src="filesize.js"></script>
<script type="module" src="scrollToTop.js"></script>
<script type="module" src="toc.js"></script>
<scroll-to-top>
</scroll-to-top>
@ -11,6 +12,12 @@
<code-block>import {html} from 'skooma.js'</code-block>
<section>
<h2>Table of Contents</h2>
<table-of-contents>
</table-of-contents>
</section>
<section>
<h2 id="introduction">Introduction & Scope</h2>
<p>

View file

@ -45,7 +45,8 @@ h2 {
}
h3::before {
content: "\2023" ' ';
content: "\2023";
margin-right: .6ch;
color: var(--color-ac);
}
@ -151,3 +152,14 @@ dl>code>dt~dd { grid-column: 2/2; }
.all-unset { all: unset; }
.full-width { grid-column: 1/-1; }
table-of-contents ul {
list-style: none;
padding: 0;
}
table-of-contents ul li::before {
content: "\2023";
color: var(--color-hl);
margin-right: 1ch;
}

22
page/toc.js Normal file
View file

@ -0,0 +1,22 @@
import element from '../element.js'
import {html} from '../skooma.js'
element(class TableOfContents extends HTMLElement {
connectedCallback() {
this.generate()
}
generate() {
const entries = Array.from(document.querySelectorAll("h2[id]"))
.map(heading => html.li(
html.a(
heading.innerText,
{
href: `#${heading.id}`,
class: ["fancy"]
})
)
)
this.replaceChildren(html.ul(entries))
}
})