Auto generate ToC on left sidebar

This commit is contained in:
Helen Chong 2023-08-14 00:40:16 +08:00
parent 5379dbf82b
commit 187f7b71bd
7 changed files with 26 additions and 39 deletions

View File

@ -19,13 +19,11 @@
.toc ol { .toc ol {
border-top: 1px solid var(--clr-title-border); border-top: 1px solid var(--clr-title-border);
list-style-position: inside; padding: 0.8em 0 0 1em;
padding: 0.8em 0 0 0;
line-height: 1.8; line-height: 1.8;
} }
.toc ol ul { .toc ol ul {
list-style-position: inside;
list-style-type: disc; list-style-type: disc;
line-height: 1.5; line-height: 1.5;
padding-left: 1em; padding-left: 1em;
@ -63,6 +61,7 @@
} }
.sidebar__toc ol ul { .sidebar__toc ol ul {
padding-top: 0.5em;
padding-left: 1.25rem; padding-left: 1.25rem;
list-style-type: disc; list-style-type: disc;
} }

View File

@ -1,7 +1,12 @@
// Auto generate table of contents
// Code based on https://techindetail.com/table-of-contents-javascript/
window.addEventListener('DOMContentLoaded', (event) => { window.addEventListener('DOMContentLoaded', (event) => {
const article = document.querySelector("article"); const article = document.querySelector("article");
const headings = article.querySelectorAll("h2, h3"); const headings = article.querySelectorAll("h2, h3");
const toc = document.querySelector(".toc"); const toc = document.querySelector(".toc");
const tocSidebar = document.querySelector(".sidebar__toc");
const leftSidebar = document.querySelector('.left-sidebar');
const totalHeadings = headings.length; const totalHeadings = headings.length;
let tocOl = document.createElement("ol"); let tocOl = document.createElement("ol");
let tocFragment = new DocumentFragment(); let tocFragment = new DocumentFragment();
@ -43,12 +48,16 @@ window.addEventListener('DOMContentLoaded', (event) => {
} }
tocOl.append(tocFragment); tocOl.append(tocFragment);
toc.append(tocOl); toc.append(tocOl);
const tocClone = tocOl.cloneNode(true);
tocSidebar.appendChild(tocClone);
} else { } else {
toc.classList.add('hidden'); toc.classList.add('hidden');
leftSidebar.classList.add('hidden');
} }
// Open the article ToC and hide the left sidebar for small screen size
// Code based on https://codepen.io/neptotech/pen/RwjRjOZ
const windowWidth = window.innerWidth; const windowWidth = window.innerWidth;
const leftSidebar = document.querySelector('.left-sidebar');
if (windowWidth < 480) { if (windowWidth < 480) {
toc.removeAttribute('open'); toc.removeAttribute('open');
leftSidebar.classList.add('hidden'); leftSidebar.classList.add('hidden');
@ -56,4 +65,16 @@ window.addEventListener('DOMContentLoaded', (event) => {
toc.setAttribute('open', true); toc.setAttribute('open', true);
leftSidebar.classList.remove('hidden'); leftSidebar.classList.remove('hidden');
} }
// Don't make the sidebar ToC sticky if it is larger than screen height
function preventSidebarOverflow() {
if (
document.documentElement.clientHeight <
tocSidebar.offsetHeight + 50
) {
tocSidebar.style.marginTop = "50px";
tocSidebar.style.position = "static";
}
}
preventSidebarOverflow();
}); });

View File

@ -37,10 +37,6 @@
<aside class="left-sidebar"> <aside class="left-sidebar">
<nav class="sidebar__toc" role=”doc-toc”> <nav class="sidebar__toc" role=”doc-toc”>
<h3 class="sidebar__toc-title">Contents</h3> <h3 class="sidebar__toc-title">Contents</h3>
<ol class="sidebar__toc-list">
<li><a href="#My-Dear-Summer-Lover">My Dear Summer Lover</a></li>
<li><a href="#Mandopop-LGBTQ-Anthem">Mandopop LGBTQ+ Anthem</a></li>
</ol>
</nav> </nav>
</aside> </aside>
@ -57,7 +53,7 @@
</section> </section>
<section class="content-section"> <section class="content-section">
<h2 id="My-Dear-Summer-Lover">My Dear Summer Lover</h2> <h2>My Dear Summer Lover</h2>
<img src="./img/My-Dear-Summer-Lover-cover.png" width="400px" height="400px" alt="A playlist cover image made of Sam and Michelle from A Summer's End being close to kissing, with the title 'My Dear Summer Lover: A Sam x Michelle Fanmix'"> <img src="./img/My-Dear-Summer-Lover-cover.png" width="400px" height="400px" alt="A playlist cover image made of Sam and Michelle from A Summer's End being close to kissing, with the title 'My Dear Summer Lover: A Sam x Michelle Fanmix'">
@ -75,7 +71,7 @@
</section> </section>
<section class="content-section"> <section class="content-section">
<h2 id="Mandopop-LGBTQ-Anthem">Mandopop LGBTQ+ Anthem 華語流行音樂同志國歌</h2> <h2>Mandopop LGBTQ+ Anthem 華語流行音樂同志國歌</h2>
<img src="./img/Mandopop-LGBTQ+-Anthem-Cover.png" width="400px" height="400px" alt="A playlist cover image made of the progress pride flag, with Chinese words meaning queer anthem on top"> <img src="./img/Mandopop-LGBTQ+-Anthem-Cover.png" width="400px" height="400px" alt="A playlist cover image made of the progress pride flag, with Chinese words meaning queer anthem on top">

View File

@ -37,16 +37,6 @@
<aside class="left-sidebar"> <aside class="left-sidebar">
<nav class="sidebar__toc"> <nav class="sidebar__toc">
<h3 class="sidebar__toc-title">Contents</h3> <h3 class="sidebar__toc-title">Contents</h3>
<ol class="sidebar__toc-list">
<li><a href="#introduction">Introduction</a></li>
<li><a href="#technical-questions">Technical Questions</a></li>
<li><a href="#mod-content-questions">Mod Content Questions</a></li>
<li><a href="#mod-specific-questions">Mod-Specific Questions</a></li>
<ul>
<li><a href="#arr-redux">Alternate Revan Romances REDUX</a></li>
<li><a href="#handmaid-disc-romances">Handmaiden and Female Exile - Disciple and Male Exile Romances</a></li>
</ul>
</ol>
</nav> </nav>
</aside> </aside>

View File

@ -37,16 +37,6 @@
<aside class="left-sidebar"> <aside class="left-sidebar">
<div class="sidebar__toc"> <div class="sidebar__toc">
<h3 class="sidebar__toc-title">Contents</h3> <h3 class="sidebar__toc-title">Contents</h3>
<ol class="sidebar__toc-list">
<li><a href="#Introduction">Introduction</a></li>
<li><a href="#Notes">Important Notes</a></li>
<li><a href="#Walkthrough">Walkthrough</a></li>
<ul>
<li><a href="#History">History Conversation Path</a></li>
<li><a href="#Personal">Personal Conversation Path</a></li>
</ul>
<li><a href="#Mods">Mod Recommendations</a></li>
</ol>
</div> </div>
</aside> </aside>

View File

@ -37,11 +37,6 @@
<aside class="left-sidebar"> <aside class="left-sidebar">
<div class="sidebar__toc"> <div class="sidebar__toc">
<h3 class="sidebar__toc-title">Contents</h3> <h3 class="sidebar__toc-title">Contents</h3>
<ol class="sidebar__toc-list">
<li><a href="#Introduction">Introduction</a></li>
<li><a href="#Mechanics">The Mechanics of Redeeming Bastila</a></li>
<li><a href="#Walkthrough">Dialogue Walkthrough</a></li>
</ol>
</div> </div>
</aside> </aside>

View File

@ -37,10 +37,6 @@
<aside class="left-sidebar"> <aside class="left-sidebar">
<div class="sidebar__toc"> <div class="sidebar__toc">
<h3 class="sidebar__toc-title">Contents</h3> <h3 class="sidebar__toc-title">Contents</h3>
<ol class="sidebar__toc-list">
<li><a href="#KotOR1">For <cite>Knights of the Old Republic I</cite></a></li>
<li><a href="#KotOR2">For <cite>Knights of the Old Republic II: The Sith Lords</cite></a></li>
</ol>
</div> </div>
</aside> </aside>