Add Table of Content for posts
This also adds links to markdown headings. Closes #7
This commit is contained in:
parent
5863705a37
commit
b4573b64d0
GPG key ID:
E48D7F49A852F112
4 changed files with 75 additions and 5 deletions
|
|
@ -4,6 +4,7 @@ import nav from "lume/plugins/nav.ts";
|
|||
import sass from "lume/plugins/sass.ts";
|
||||
import feed from "lume/plugins/feed.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_javascript from "npm:highlight.js/lib/languages/javascript";
|
||||
|
|
@ -49,5 +50,11 @@ site.use(code_highlight({
|
|||
bash: lang_bash,
|
||||
}
|
||||
}));
|
||||
site.use(toc({
|
||||
slugify: {
|
||||
separator: "-",
|
||||
lowercase: true,
|
||||
},
|
||||
}));
|
||||
|
||||
export default site;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,32 @@
|
|||
export const layout = "./base.tsx";
|
||||
|
||||
export default function({ children }) {
|
||||
export default function({ children, toc }) {
|
||||
return (
|
||||
<article>
|
||||
{ children }
|
||||
</article>
|
||||
<>
|
||||
{ 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>
|
||||
{ children }
|
||||
</article>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,14 @@ h1, h2, h3, h4, h5, h6 {
|
|||
font-weight: bold;
|
||||
margin-top: 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 {
|
||||
|
|
@ -274,3 +282,24 @@ figure {
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
13
deno.lock
generated
13
deno.lock
generated
|
|
@ -16,7 +16,8 @@
|
|||
"npm:sass@1.64.2": "npm:sass@1.64.2",
|
||||
"npm:sass@1.66.1": "npm:sass@1.66.1",
|
||||
"npm:sass@1.68.0": "npm:sass@1.68.0",
|
||||
"npm:sass@1.69.5": "npm:sass@1.69.5"
|
||||
"npm:sass@1.69.5": "npm:sass@1.69.5",
|
||||
"npm:unidecode@0.1.8": "npm:unidecode@0.1.8"
|
||||
},
|
||||
"npm": {
|
||||
"@babel/runtime@7.22.6": {
|
||||
|
|
@ -274,6 +275,10 @@
|
|||
"uc.micro@1.0.6": {
|
||||
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
|
||||
"dependencies": {}
|
||||
},
|
||||
"unidecode@0.1.8": {
|
||||
"integrity": "sha512-SdoZNxCWpN2tXTCrGkPF/0rL2HEq+i2gwRG1ReBvx8/0yTzC3enHfugOf8A9JBShVwwrRIkLX0YcDUGbzjbVCA==",
|
||||
"dependencies": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -1628,6 +1633,7 @@
|
|||
"https://deno.land/x/lume@v1.19.4/core/searcher.ts": "9d87c1be0cac6cf9b1070760823bd30ee2705c272cfbecbccc0da0268d069b24",
|
||||
"https://deno.land/x/lume@v1.19.4/core/server.ts": "6d60f9b700f15a31a33b9c8f9704860e78c328cb5c8267ab5ffb8a4680061713",
|
||||
"https://deno.land/x/lume@v1.19.4/core/site.ts": "fd7bab8a2aa16703f08be72640a3e61b8ecea1adf843e5488599d5b50e862013",
|
||||
"https://deno.land/x/lume@v1.19.4/core/slugifier.ts": "b5ef77284df1fddbfea96d14885b6d54cffa1c21a2ef25482d1c7f925ea8dc05",
|
||||
"https://deno.land/x/lume@v1.19.4/core/source.ts": "a9203c9348f355b16208b345f8eb146367c18375144439e6f11cc19e16a64ec1",
|
||||
"https://deno.land/x/lume@v1.19.4/core/utils.ts": "b26144a123e3129e5bcce99876952fe574766a9879a0e71478783070b5b70a3b",
|
||||
"https://deno.land/x/lume@v1.19.4/core/watcher.ts": "be43625025dcedc68fcb2e2e4f63cceb2d3a82f6c1c13107518035e613726016",
|
||||
|
|
@ -1648,6 +1654,7 @@
|
|||
"https://deno.land/x/lume@v1.19.4/deps/path.ts": "a9811933c988951154424763c17e1c470ff2f7b3eb9aa8e58ce615939806f25f",
|
||||
"https://deno.land/x/lume@v1.19.4/deps/react.ts": "da52e2027b9bfaff36af354e1959be91017b33b3295a8521c43b28b73fde833c",
|
||||
"https://deno.land/x/lume@v1.19.4/deps/sass.ts": "59ba5aeb0b1b09c85f185c867ef7e8db69df352999c55ab2dd3a2fdee6427675",
|
||||
"https://deno.land/x/lume@v1.19.4/deps/unidecode.ts": "7479d3695704320279c8c3468ec4801a70064a7471f9974e04c45852ca882769",
|
||||
"https://deno.land/x/lume@v1.19.4/deps/xml.ts": "148b6e49cef5be1d1860a84b74915bc42dc8fdb63c69009d25315e160633521c",
|
||||
"https://deno.land/x/lume@v1.19.4/deps/yaml.ts": "9eb7cdd4e98ae93f6d1a14ca5a634e42c105e7446c17c686dff0aa405d0205a3",
|
||||
"https://deno.land/x/lume@v1.19.4/middlewares/logger.ts": "1a6f34c185df60142abc9396737c3757d637ddbfdd9c1d1961906d34ed0b310c",
|
||||
|
|
@ -1671,6 +1678,10 @@
|
|||
"https://deno.land/x/lume@v1.19.4/plugins/url.ts": "43d3d47896a7322a8dd34572dedb4baa6f73a382594a2ff7c34a3a064dcc6c9e",
|
||||
"https://deno.land/x/lume@v1.19.4/plugins/utils.ts": "6435d164539d9e408e7e818b080cc1a96ff76ed3c376160577a7df751b57fa07",
|
||||
"https://deno.land/x/lume@v1.19.4/plugins/yaml.ts": "df24aac4098dba258f1ac331a3b16ba488a336eb63c51afed8f59201228d583c",
|
||||
"https://deno.land/x/lume_markdown_plugins@v0.6.0/toc.ts": "2f1a336fd8faea717d830b53b1b9e6990173ff056fb6e2e979c8b1ac22a5bac9",
|
||||
"https://deno.land/x/lume_markdown_plugins@v0.6.0/toc/anchors.ts": "8a4a1c6b2c63156622695ceba57fa7100a6e5f109c9a383a1dcaf755233c8184",
|
||||
"https://deno.land/x/lume_markdown_plugins@v0.6.0/toc/mod.ts": "8c7aa6e1dcfabda4264503495a3875388108cd9a5a94b54853b45a8e8cba9f78",
|
||||
"https://deno.land/x/lume_markdown_plugins@v0.6.0/utils.ts": "6e6c3c394709eff39080562732c2dafe404f225253aaded937133ea694c4b735",
|
||||
"https://deno.land/x/xml@2.1.1/mod.ts": "4a314a7a28d1ec92f899ce4c6991f0356c77550a75955ec3f4a36733f08548e8",
|
||||
"https://deno.land/x/xml@2.1.1/parse.ts": "614b8648345ae93c641368836947484d321c7ac9312ae12ec750434353cd7385",
|
||||
"https://deno.land/x/xml@2.1.1/stringify.ts": "930d35431f153b29d36549cff08fcfbe978e52ccb56af1e3baa2e0760f418b04",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue