foster/website
1
0
Fork 0
Code Issues 8 Pull requests Activity

Add Table of Content for posts

Browse source 
This also adds links to markdown headings.

Closes #7
This commit is contained in:
Foster Hangdaan 2023-12-03 10:57:42 -05:00
parent 5863705a37
commit b4573b64d0
Signed by: foster
GPG key ID: E48D7F49A852F112
4 changed files with 75 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
_config.ts
View file

@ -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;

25
_includes/layouts/post.tsx
View file

@ -1,9 +1,32 @@
export const layout = "./base.tsx";
export default function({ children }) {
export default function({ children, toc }) {
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>
{ children }
</article>
</>
);
}

29
_includes/styles/base.scss
View file

@ -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
View file

@ -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",