Added table of contents to article bodies

changelog/index.html

@@ -46,6 +46,7 @@
                 <p class="date-style">August 13, 2023:</p>
                 <ul>
                     <li>Streamlined JavaScript code for the website's components.</li>
+                    <li>Added table of contents to the main body of some articles.</li>
                 </ul>
 
                 <p class="date-style">August 10, 2023:</p>

css/style-main.css

@@ -163,6 +163,10 @@ p {
     padding: 0.5rem 0;;
 }
 
+hr {
+    border: 0.05rem solid var(--clr-title-border);
+}
+
 strong {
     color: var(--clr-bold-txt);
 }
@@ -214,6 +218,10 @@ summary {
     color: var(--clr-dates);
 }
 
+.hidden {
+    display: none;
+}
+
 /* HEADER COMPONENT */
 .main-header {
     width: 100%;
@@ -231,14 +239,14 @@ summary {
 }
 
 /* NAVIGATION BAR COMPONENT */
-nav {
+.navbar {
     background: var(--clr-navbar-bg);
     padding: 0 0.6rem;
     width: 100%;
     z-index: 999;
 }
 
-nav a {
+.navbar a {
     color: var(--clr-navbar-link);
     text-decoration: none;
     cursor: pointer;
@@ -478,32 +486,6 @@ article, .content-container {
     gap: 0.5rem;
 }
 
-/* TABLE OF CONTENTS */
-.sidebar__toc {
-    position: sticky;
-    top: 5rem;
-}
-
-.sidebar__toc-title {
-    font-size: 1.3rem;
-    font-weight: bold;
-}
-
-.sidebar__toc-list {
-    list-style: none;
-    margin-left: 0;
-    padding-left: 0;
-    font-size: 1rem;
-}
-
-.sidebar__toc-list li {
-    margin-bottom: 0.5em;
-}
-
-.sidebar__toc-list ul {
-    padding-left: 1.25rem;
-}
-
 /* REFERENCES LIST */
 .references-list {
     font-size: 0.96em;

css/style-toc.css

@@ -0,0 +1,68 @@
+.toc {
+    background-color: var(--clr-quote-bg);
+    width: max-content;
+    max-width: 95%;
+    padding: 1rem 1.3rem 0.3rem 1.3rem;
+    margin-top: 1rem;
+    outline: 1px solid var(--clr-title-border);
+    position: relative;
+    border-radius: 0.4rem;
+}
+
+.toc-heading {
+    font-size: 1.1rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    margin-right: 2rem;
+    cursor: pointer;
+}
+
+.toc ol {
+    border-top: 1px solid var(--clr-title-border);
+    list-style-position: inside;
+    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;
+}
+
+.toc a {
+    font-size: 1.1rem;
+    padding-left: 0.4rem;
+}
+
+.toc ul a {
+    padding: 0;
+    font-size: 1rem;
+}
+
+.sidebar__toc {
+    position: sticky;
+    top: 5rem;
+}
+
+.sidebar__toc-title {
+    font-size: 1.3rem;
+    font-weight: bold;
+}
+
+.sidebar__toc ol {
+    list-style: none;
+    margin-left: 0;
+    padding-left: 0;
+    font-size: 1rem;
+}
+
+.sidebar__toc ol li {
+    margin-bottom: 0.5em;
+}
+
+.sidebar__toc ol ul {
+    padding-left: 1.25rem;
+    list-style-type: disc;
+}

home.html

@@ -71,6 +71,7 @@
                         <p class="date-style">August 13, 2023:</p>
                         <ul>
                             <li>Streamlined JavaScript code for the website's components.</li>
+                            <li>Added table of contents to the main body of some articles.</li>
                         </ul>
                     </div>
                     <a href="/changelog">View all site changelog</a>

js/toc.js

@@ -0,0 +1,60 @@
+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 totalHeadings = headings.length;
+    let tocOl = document.createElement("ol");
+    let tocFragment = new DocumentFragment();
+    let mainLi = null;
+    let subUl = null;
+    let subLi = null;
+    let isSibling = false;
+    
+    if (totalHeadings > 1) {
+        for (let element of headings) {
+            let anchor = document.createElement("a");
+            let anchorText = element.innerText;
+            anchor.innerText = anchorText;
+            let elementId = anchorText.replaceAll(" ", "-").toLowerCase();
+            anchor.href = "#" + elementId;
+            element.id = elementId;
+            let level = element.nodeName;
+        
+            if ("H3" === level) {
+                if (mainLi) {
+                    subLi = document.createElement("li");
+                    subLi.appendChild(anchor);
+        
+                    if (isSibling === false) {
+                        subUl = document.createElement("ul");
+                    }
+                    subUl.appendChild(subLi);
+                    mainLi.appendChild(subUl);
+        
+                    isSibling = true;
+                }
+            } else {
+                mainLi = document.createElement("li");
+                mainLi.appendChild(anchor);
+                tocFragment.appendChild(mainLi);
+                isSibling = false;
+                subUl = null;
+            }
+        }
+        tocOl.append(tocFragment);
+        toc.append(tocOl);
+    } else {
+        toc.classList.add('hidden');
+    }
+
+    const windowWidth = window.innerWidth;
+    const leftSidebar = document.querySelector('.left-sidebar');
+    if (windowWidth < 480) {
+        toc.removeAttribute('open');
+        leftSidebar.classList.add('hidden');
+    } else {
+        toc.setAttribute('open', true);
+        leftSidebar.classList.remove('hidden');
+    }
+});

playlists/index.html

@@ -12,6 +12,7 @@
         <meta property="og:description" content="Music playlists that I have compiled myself.">
 
         <link rel="stylesheet" href="/css/style-main.css" type="text/css" media="all">
+        <link rel="stylesheet" href="/css/style-toc.css">
         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
 
         <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
@@ -20,6 +21,7 @@
         <link rel="manifest" href="/assets/favicon/site.webmanifest">
 
         <script src="/js/main-components.js" defer></script> 
+        <script src="/js/toc.js" defer></script>
 
         <title>Playlists | Leilukin's Hub</title>
     </head>
@@ -33,20 +35,34 @@
         <nav class="navbar"></nav>
         <main>
             <aside class="left-sidebar">
-                <div class="sidebar__toc">
+                <nav class="sidebar__toc" role=”doc-toc”>
                     <h3 class="sidebar__toc-title">Contents</h3>
-                    <ul class="sidebar__toc-list">
+                    <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>
-                    </ul>
+                    </ol>
-                </div>
+                </nav>
             </aside>
 
-            <article>
+            <article class="divided-article">
+                <section class="content-section">
                     <h1>Leilukin's Music Playlists</h1>
+                    <p>Here is a list of mysic playlists I have compiled.</p>
+
+                    <details class="toc" role=”doc-toc”>
+                        <summary class="toc-heading">
+                            Table Of Contents
+                        </summary>
+                    </details>
+                </section>
+
+                <section class="content-section">
                     <h2 id="My-Dear-Summer-Lover">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'">
+
                     <p>A fanmix for the visual novel <a href="https://www.asummersend.com/home" target="_blank"><i>A Summer’s End — Hong Kong 1986</i></a>, dedicated to Sam and Michelle’s love story.</p>
+
                     <p>This mix contains mostly Cantonese and English songs, with one Mandarin song. Majority of these songs were performed by Hong Kong artists and released in the 80s, because <cite>A Summer’s End</cite> took place in Hong Kong and in the 80s.</p>
 
                     <p>I have carefully selected and arranged these tracks, so the lyrics would reflect Sam and Michelle’s relationship development throughout <cite>A Summer’s End</cite>. Therefore, the content of this mix could be considered spoilers if you have not played the visual novel.</p>
@@ -54,17 +70,23 @@
                     <p>Since Oracle and Bone has cited Anita Mui as a major inspiration for them and this visual novel, I have also included multiple songs performed by Anita Mui in this mix. Because A Summer’s End is a lesbian story, when I was choosing which songs to include in this mix, I also prioritize songs that were performed by women artists.</p>
 
                     <a class="link-btn" href="https://open.spotify.com/playlist/3SIV7VjSKhspYwugVIQjug" target="_blank">Listen on Spotify</a><br><br>
+
                     <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/3SIV7VjSKhspYwugVIQjug?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
+                </section>
 
-                    <hr>
+                <section class="content-section">
-
                     <h2 id="Mandopop-LGBTQ-Anthem">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">
+
                     <p>Collection of Mandarin queer anthems.</p>
+
                     <p>I made this playlist after discovering Wikipedia's list of Chinese queer anthems on <a href="https://zh.wikipedia.org/wiki/%E5%90%8C%E5%BF%97%E5%9C%8B%E6%AD%8C#%E8%8F%AF%E8%AA%9E" target="_blank">its Mandarin article for Gay Anthem (同志國歌)</a>.</p>
 
                     <a class="link-btn" href="https://open.spotify.com/playlist/5JXAUPZkmv1cFScAfhOkXh" target="_blank">Listen on Spotify</a><br><br>
+
                     <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/5JXAUPZkmv1cFScAfhOkXh?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
+                </section>
             </article>
 
             <!-- <aside class="right-sidebar">

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

@@ -12,6 +12,7 @@
         <meta property="og:description" content="Frequently asked questions for my same-gender romance mods for Star Wars: Knights of the Old Republic series">
 
         <link rel="stylesheet" href="/shrines/starwarskotor/css/style-starwarskotor.css" type="text/css" media="all">
+        <link rel="stylesheet" href="/css/style-toc.css">
         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
 
         <link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
@@ -20,6 +21,7 @@
         <link rel="manifest" href="/assets/favicon/site.webmanifest">
 
         <script src="/shrines/starwarskotor/js/swkotor-components.js" defer></script>
+        <script src="/js/toc.js" defer></script>
 
         <title>FAQ for My Star Wars: KotOR Same-Gender Romance Mods | Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
     </head>
@@ -33,9 +35,10 @@
         <nav class="navbar"></nav>
         <main>
             <aside class="left-sidebar">
-                <div class="sidebar__toc">
+                <nav class="sidebar__toc">
                     <h3 class="sidebar__toc-title">Contents</h3>
-                    <ul class="sidebar__toc-list">
+                    <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>
@@ -43,8 +46,8 @@
                             <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>
-                    </ul>
+                    </ol>
-                </div>
+                </nav>
             </aside>
 
             <article class="divided-article">
@@ -56,6 +59,16 @@
                         <p>(Note: This article was originally published on Nexus Mods. I decided to host the article on my own website instead for better management and formatting)</p>
                     </div>
 
+                    <details class="toc" role=”doc-toc”>
+                        <summary class="toc-heading">
+                            Table Of Contents
+                        </summary>
+                    </details>
+                </section>
+
+                <section class="qna-section">
+                    <h2 id="introduction">Introduction</h2>
+
                     <p>This article compiles the frequently asked questions I have received for my same-gender romance mods for <cite>Star Wars: Knights of the Old Republic</cite> (<cite>KotOR</cite>) series.</p>
 
                     <p class="center-text" style="font-size: 1.8rem; font-weight: 700;">PLEASE READ THIS ARTICLE BEFORE ASKING QUESTIONS ABOUT MY ROMANCE MODS!</p>

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

@@ -12,6 +12,7 @@
         <meta property="og:description" content="Walkthrough of how to successfully romance Juhani in Star Wars: Knights of the Old Republic">
 
         <link rel="stylesheet" href="/shrines/starwarskotor/css/style-starwarskotor.css" type="text/css" media="all">
+        <link rel="stylesheet" href="/css/style-toc.css">
         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
 
         <link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
@@ -20,6 +21,7 @@
         <link rel="manifest" href="/assets/favicon/site.webmanifest">
 
         <script src="/shrines/starwarskotor/js/swkotor-components.js" defer></script>
+        <script src="/js/toc.js" defer></script>
 
         <title>Juhani Romance Guide | Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
     </head>
@@ -35,7 +37,7 @@
             <aside class="left-sidebar">
                 <div class="sidebar__toc">
                     <h3 class="sidebar__toc-title">Contents</h3>
-                    <ul class="sidebar__toc-list">
+                    <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>
@@ -44,7 +46,7 @@
                             <li><a href="#Personal">Personal Conversation Path</a></li>
                         </ul>
                         <li><a href="#Mods">Mod Recommendations</a></li>
-                    </ul>
+                    </ol>
                 </div>
             </aside>
 
@@ -58,6 +60,12 @@
                     </div>
 
                     <p>The contents of this guide may not be reposted, in whole or in part, without my permission. You may quote a part of this guide to help players who have problems with progressing or completing Juhani's romance, but DO NOT claim this guide as your own.</p>
+
+                    <details class="toc" role=”doc-toc”>
+                        <summary class="toc-heading">
+                            Table Of Contents
+                        </summary>
+                    </details>
                 </section>
                 
                 <section class="article-section">

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

@@ -12,6 +12,7 @@
         <meta property="og:description" content="Walkthrough of how to redeem Bastila in the light side ending of Star Wars: Knights of the Old Republic">
 
         <link rel="stylesheet" href="/shrines/starwarskotor/css/style-starwarskotor.css" type="text/css" media="all">
+        <link rel="stylesheet" href="/css/style-toc.css">
         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
 
         <link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
@@ -20,6 +21,7 @@
         <link rel="manifest" href="/assets/favicon/site.webmanifest">
 
         <script src="/shrines/starwarskotor/js/swkotor-components.js" defer></script>
+        <script src="/js/toc.js" defer></script>
 
         <title>Redeeming Bastila Guide | Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
     </head>
@@ -35,11 +37,11 @@
             <aside class="left-sidebar">
                 <div class="sidebar__toc">
                     <h3 class="sidebar__toc-title">Contents</h3>
-                    <ul class="sidebar__toc-list">
+                    <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>
-                    </ul>
+                    </ol>
                 </div>
             </aside>
 
@@ -51,6 +53,12 @@
                         <p>First published on September 16, 2018</p>
                         <p>[This guide is also available on <a href="https://docs.google.com/document/d/1HrrzojpHv9oekvDPjTmBAwdXTf6QhY8tC8RuioKFXmE/edit" target="_blank">Google Docs</a>]</p>
                     </div>
+
+                    <details class="toc" role=”doc-toc”>
+                        <summary class="toc-heading">
+                            Table Of Contents
+                        </summary>
+                    </details>
                 </section>
                 
                 <section class="article-section">

shrines/starwarskotor/guides/kotor-sandral-matale-feud-guide.html

@@ -65,7 +65,7 @@
                     <p>After Ahlan yells at Nurik, <i>"I don't want to hear any of your excuses! Now I will get revenge for your transgressions!"</i> Your following dialogue choices will determine the outcome of the "Sandral-Matale Feud" quest. I recommend <strong>saving the game before rescuing Shen and meeting Rahasia outside</strong> the Sandral estate, so you can reload the save if you do not get the ending you want.</p>
 
                     <p>The "Sandral-Matale Feud" quest could be resolved in four different ways:</p>
-                /section
+                </section>
 
                 <section class="article-section">
                     <h3>1. Convincing Ahlan and Nurik to sort out their differences and allow their children to stay together as a couple.</h3>

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

@@ -12,6 +12,7 @@
         <meta property="og:description" content="Throughout the years, modders have created same-gender romance mods for the Knights of the Old Republic series. Want to make your KotOR games more gay? This list is for you!">
 
         <link rel="stylesheet" href="/shrines/starwarskotor/css/style-starwarskotor.css" type="text/css" media="all">
+        <link rel="stylesheet" href="/css/style-toc.css">
         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
 
         <link rel="apple-touch-icon" sizes="180x180" href="/shrines/starwarskotor/img/kotor-icon.png">
@@ -20,6 +21,7 @@
         <link rel="manifest" href="/assets/favicon/site.webmanifest">
 
         <script src="/shrines/starwarskotor/js/swkotor-components.js" defer></script>
+        <script src="/js/toc.js" defer></script>
 
         <title>Same-Gender Romance Mods for KotOR Series | Resources | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub</title>
     </head>
@@ -35,10 +37,10 @@
             <aside class="left-sidebar">
                 <div class="sidebar__toc">
                     <h3 class="sidebar__toc-title">Contents</h3>
-                    <ul class="sidebar__toc-list">
+                    <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>
-                    </ul>
+                    </ol>
                 </div>
             </aside>
 
@@ -62,6 +64,12 @@
                     <p><span style="font-weight: 700; color: rgb(213, 98, 255);">NOTE:</span> Some listed mods below have overlapping concepts and thus are not compatible with each other. Mods that are hosted exclusively on Gamefront are very old mods that were made in the 2000s, and thus may have compatibility issues with newer mods (not just ones that listed here).</p>
                     
                     <p><span style="font-weight: 700; color: rgb(213, 98, 255);">Warning: this list contains spoilers for both KotOR games.</span></p>
+
+                    <details class="toc" role=”doc-toc”>
+                        <summary class="toc-heading">
+                            Table Of Contents
+                        </summary>
+                    </details>
                 </section>
                 
                 <section class="article-section">