From cbfffe096e9c2c28e6ffb92c6b2f3bd29c5b0263 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Sat, 13 Apr 2024 17:29:25 +0800
Subject: [PATCH] Add article template

---
 src/_includes/main/article.njk | 55 ++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/_includes/main/article.njk

diff --git a/src/_includes/main/article.njk b/src/_includes/main/article.njk
new file mode 100644
index 00000000..005556f1
--- /dev/null
+++ b/src/_includes/main/article.njk
@@ -0,0 +1,55 @@
+---
+layout: main/base
+metadata:
+    type: article
+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>
+    <h1>{{ articleTitle }}</h1>
+    <div class="article__info">
+        <p>Posted on {{ date | niceDate }} by {{ sitemeta.siteAuthor.name }}</p>
+        {% if updated %}
+            <p>Updated on {{ updated | niceDate }}</p>
+        {% endif %}
+        <p>{{ content | emojiReadTime }}</p>
+    </div>
+
+    {{ content | safe }}
+</article>
+
+<aside class="right-sidebar">
+    <h3>Contents</h3>
+    <p>Right sidebar content</p>
+</aside>
\ No newline at end of file