blob: a919e04eefded3c00946de724a8edc0d1e3757eb (
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
|
<script lang="ts">
import { cleanId, toTitleCase } from './utils'
export let categories: string[]
</script>
<div id="toc">
<h3>Contents</h3>
<ul>
{#each categories as category}
<li><a href="#{category.replace(/[ _]/, '-')}">{toTitleCase(cleanId(category))}</a></li>
{/each}
</ul>
</div>
<style>
#toc {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
padding: 0.75em;
border-radius: 1em;
max-width: max-content;
display: inline-block;
margin-bottom: 1em;
}
#toc ul {
padding: 0;
margin: 0;
}
#toc li {
list-style-type: none;
padding: 0.1em 0;
}
</style>
|
