Move table of contents into its own template
This commit is contained in:
parent
834b7b6227
commit
66efe2cdff
|
@ -6,45 +6,26 @@ eleventyComputed:
|
||||||
title: "{{ articleTitle }} | Articles"
|
title: "{{ articleTitle }} | Articles"
|
||||||
---
|
---
|
||||||
|
|
||||||
{% if toc %}
|
<header class="main__header">
|
||||||
<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>
|
|
||||||
<h1>{{ articleTitle }}</h1>
|
<h1>{{ articleTitle }}</h1>
|
||||||
<div class="article__info">
|
<div class="article__info">
|
||||||
<p>Posted on {{ date | niceDate }} by {{ sitemeta.siteAuthor.name }}</p>
|
<p>Posted on {{ date | niceDate }} by {{ sitemeta.siteAuthor.name }}
|
||||||
{% if updated %}
|
{% if updated %}
|
||||||
<p>Updated on {{ updated | niceDate }}</p>
|
• Updated on {{ updated | niceDate }}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<p>{{ content | emojiReadTime }}</p>
|
<p>{{ content | emojiReadTime }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{% if toc %}
|
||||||
|
{% include "toc.njk" %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<article>
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
<aside class="right-sidebar">
|
||||||
|
<h3>Title</h3>
|
||||||
|
<p>Right sidebar content</p>
|
||||||
|
</aside>
|
|
@ -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>
|
Loading…
Reference in New Issue