From 66efe2cdff942f814b31495320bd1b0e0e067cb6 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Sun, 14 Apr 2024 18:08:50 +0800
Subject: [PATCH] Move table of contents into its own template

---
 src/_includes/main/article.njk | 49 +++++++++++-----------------------
 src/_includes/toc.njk          | 27 +++++++++++++++++++
 2 files changed, 42 insertions(+), 34 deletions(-)
 create mode 100644 src/_includes/toc.njk

diff --git a/src/_includes/main/article.njk b/src/_includes/main/article.njk
index f6052a02..ebe5ce5d 100644
--- a/src/_includes/main/article.njk
+++ b/src/_includes/main/article.njk
@@ -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>
\ No newline at end of file
diff --git a/src/_includes/toc.njk b/src/_includes/toc.njk
new file mode 100644
index 00000000..05df4c93
--- /dev/null
+++ b/src/_includes/toc.njk
@@ -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>