Add Table of Content for posts
This also adds links to markdown headings. Closes #7
This commit is contained in:
parent
5863705a37
commit
b4573b64d0
|
@ -4,6 +4,7 @@ import nav from "lume/plugins/nav.ts";
|
||||||
import sass from "lume/plugins/sass.ts";
|
import sass from "lume/plugins/sass.ts";
|
||||||
import feed from "lume/plugins/feed.ts";
|
import feed from "lume/plugins/feed.ts";
|
||||||
import code_highlight from "lume/plugins/code_highlight.ts";
|
import code_highlight from "lume/plugins/code_highlight.ts";
|
||||||
|
import toc from "https://deno.land/x/lume_markdown_plugins@v0.6.0/toc.ts";
|
||||||
|
|
||||||
import lang_typescript from "npm:highlight.js/lib/languages/typescript";
|
import lang_typescript from "npm:highlight.js/lib/languages/typescript";
|
||||||
import lang_javascript from "npm:highlight.js/lib/languages/javascript";
|
import lang_javascript from "npm:highlight.js/lib/languages/javascript";
|
||||||
|
@ -49,5 +50,11 @@ site.use(code_highlight({
|
||||||
bash: lang_bash,
|
bash: lang_bash,
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
|
site.use(toc({
|
||||||
|
slugify: {
|
||||||
|
separator: "-",
|
||||||
|
lowercase: true,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
export default site;
|
export default site;
|
||||||
|
|
|
@ -1,9 +1,32 @@
|
||||||
export const layout = "./base.tsx";
|
export const layout = "./base.tsx";
|
||||||
|
|
||||||
export default function({ children }) {
|
export default function({ children, toc }) {
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
{ toc.length > 0 &&
|
||||||
|
<nav class="toc">
|
||||||
|
<h2>Table of Contents</h2>
|
||||||
|
<ol>
|
||||||
|
{toc.map(item => (
|
||||||
|
<li>
|
||||||
|
<a href={`#${item.slug}`}>{item.text}</a>
|
||||||
|
{item.children.length > 0 &&
|
||||||
|
<ul>
|
||||||
|
{item.children.map(child => (
|
||||||
|
<li>
|
||||||
|
<a href={`#${child.slug}`}>{child.text}</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
}
|
||||||
<article>
|
<article>
|
||||||
{ children }
|
{ children }
|
||||||
</article>
|
</article>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -37,6 +37,14 @@ h1, h2, h3, h4, h5, h6 {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
|
|
||||||
|
// `.header-anchor` is added to `<a>` tags inside headings
|
||||||
|
// by the TOC plugin:
|
||||||
|
// https://deno.land/x/lume_markdown_plugins/toc.ts
|
||||||
|
a.header-anchor {
|
||||||
|
color: var(--color-headings);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
|
@ -274,3 +282,24 @@ figure {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav.toc {
|
||||||
|
line-height: normal;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
h2 {
|
||||||
|
border: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
> ol {
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
margin: .5rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue