Add article template

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>