Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move table of contents into its own template

This commit is contained in:
Helen Chong 2024-04-14 18:08:50 +08:00
parent 834b7b6227
commit 66efe2cdff
2 changed files with 42 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/_includes/main/article.njk
View File

@ -6,45 +6,26 @@ eleventyComputed:
title: "{{ articleTitle }} | Articles"
---
{% if toc %}
<aside class="left-sidebar">
<details class="toc__wrapper">
<summary class="toc__heading">
Contents
</summary>
{{ content | toc | safe }}
</details>
</aside>
<script defer>
// Close article ToC accordion for small screen sizes
const tocWrapper = docucument.querySelector('.toc__wrapper');
const tocEl = docucument.querySelector('.toc');
if (window.innerWidth < 480) {
tocWrapper.removeAttribute("open");
} else {
tocWrapper.setAttribute("open", true);
}
// Remove the stickiness of the sidebar ToC if it is larger than screen height
function preventSidebarOverflow() {
if (document.documentElement.clientHeight < tocEl.offsetHeight + 50) {
tocEl.style.marginTop = "0";
tocEl.style.position = "static";
}
}
preventSidebarOverflow();
</script>
{% endif %}
<article>
<header class="main__header">
<h1>{{ articleTitle }}</h1>
<div class="article__info">
<p>Posted on {{ date | niceDate }} by {{ sitemeta.siteAuthor.name }}</p>
<div class="article__info">
<p>Posted on {{ date | niceDate }} by {{ sitemeta.siteAuthor.name }}
{% if updated %}
<p>Updated on {{ updated | niceDate }}</p>
• Updated on {{ updated | niceDate }}</p>
{% endif %}
<p>{{ content | emojiReadTime }}</p>
</div>
</header>
{% if toc %}
{% include "toc.njk" %}
{% endif %}
<article>
{{ content | safe }}
</article>
<aside class="right-sidebar">
<h3>Title</h3>
<p>Right sidebar content</p>
</aside>

27
src/_includes/toc.njk Normal file
View File

@ -0,0 +1,27 @@
<aside class="left-sidebar">
<details class="toc__wrapper">
<summary class="toc__heading">
Contents
</summary>
{{ content | toc | safe }}
</details>
</aside>
<script defer>
// Close article ToC accordion for small screen sizes
const tocWrapper = docucument.querySelector('.toc__wrapper');
const tocEl = docucument.querySelector('.toc');
if (window.innerWidth < 480) {
tocWrapper.removeAttribute("open");
} else {
tocWrapper.setAttribute("open", true);
}
// Remove the stickiness of the sidebar ToC if it is larger than screen height
function preventSidebarOverflow() {
if (document.documentElement.clientHeight < tocEl.offsetHeight + 50) {
tocEl.style.marginTop = "0";
tocEl.style.position = "static";
}
}
preventSidebarOverflow();
</script>