Add table of contents to skooma page
This commit is contained in:
parent
912909836c
commit
363c50d97d
3 changed files with 42 additions and 1 deletions
|
@ -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>
|
||||
|
|
|
@ -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
22
page/toc.js
Normal 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))
|
||||
}
|
||||
})
|
Loading…
Reference in a new issue