Auto generate ToC on left sidebar

css/style-toc.css

@@ -19,13 +19,11 @@
 
 .toc ol {
     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;
 }
 
 .toc ol ul {
-    list-style-position: inside;
     list-style-type: disc;
     line-height: 1.5;
     padding-left: 1em;
@@ -63,6 +61,7 @@
 }
 
 .sidebar__toc ol ul {
+    padding-top: 0.5em;
     padding-left: 1.25rem;
     list-style-type: disc;
 }

js/toc.js

@@ -1,7 +1,12 @@
+// Auto generate table of contents
+// Code based on https://techindetail.com/table-of-contents-javascript/
+
 window.addEventListener('DOMContentLoaded', (event) => {
     const article = document.querySelector("article");
     const headings = article.querySelectorAll("h2, h3");
     const toc = document.querySelector(".toc");
+    const tocSidebar = document.querySelector(".sidebar__toc");
+    const leftSidebar = document.querySelector('.left-sidebar');
     const totalHeadings = headings.length;
     let tocOl = document.createElement("ol");
     let tocFragment = new DocumentFragment();
@@ -43,12 +48,16 @@ window.addEventListener('DOMContentLoaded', (event) => {
         }
         tocOl.append(tocFragment);
         toc.append(tocOl);
+        const tocClone = tocOl.cloneNode(true);
+        tocSidebar.appendChild(tocClone);
     } else {
         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 leftSidebar = document.querySelector('.left-sidebar');
     if (windowWidth < 480) {
         toc.removeAttribute('open');
         leftSidebar.classList.add('hidden');
@@ -56,4 +65,16 @@ window.addEventListener('DOMContentLoaded', (event) => {
         toc.setAttribute('open', true);
         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();
 });

playlists/index.html

@@ -37,10 +37,6 @@
             <aside class="left-sidebar">
                 <nav class="sidebar__toc" role=”doc-toc”>
                     <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>
             </aside>
 
@@ -57,7 +53,7 @@
                 </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'">
 
@@ -75,7 +71,7 @@
                 </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">
 

shrines/starwarskotor/articles/faq-same-gender-romance-mods.html

@@ -37,16 +37,6 @@
             <aside class="left-sidebar">
                 <nav class="sidebar__toc">
                     <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>
             </aside>
 

shrines/starwarskotor/guides/kotor-juhani-romance-guide.html

@@ -37,16 +37,6 @@
             <aside class="left-sidebar">
                 <div class="sidebar__toc">
                     <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>
             </aside>
 

shrines/starwarskotor/guides/kotor-redeeming-bastila-guide.html

@@ -37,11 +37,6 @@
             <aside class="left-sidebar">
                 <div class="sidebar__toc">
                     <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>
             </aside>
 

shrines/starwarskotor/resources/kotor-same-gender-romance-mods.html

@@ -37,10 +37,6 @@
             <aside class="left-sidebar">
                 <div class="sidebar__toc">
                     <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>
             </aside>