From db58579440ac2f6ac9ae2b5cac4624a7b0afbfb3 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Sun, 21 Apr 2024 14:49:15 +0800
Subject: [PATCH] Turn website layout archive page to a Markdown file

---
 _site/changelogs/layouts/index.html           | 108 ++++++++++++++----
 _site/feed.xml                                |   2 +-
 .../pages/{layouts.njk => layouts.md}         |   6 +-
 3 files changed, 91 insertions(+), 25 deletions(-)
 rename src/changelogs/pages/{layouts.njk => layouts.md} (95%)

diff --git a/_site/changelogs/layouts/index.html b/_site/changelogs/layouts/index.html
index 4c50b69f..027bfba0 100644
--- a/_site/changelogs/layouts/index.html
+++ b/_site/changelogs/layouts/index.html
@@ -373,6 +373,76 @@
 
 <div class="content__wrapper">
     
+        <aside class="left-sidebar">
+    <details class="toc__wrapper sidebar--sticky">
+        <summary class="toc__heading">
+            On This Page
+        </summary>
+        <nav class="toc">
+                <ol>
+                    
+                    <li><a href="#11-september-2023-blog-layout">11 September 2023 Blog Layout</a>
+            		</li>
+
+                    <li><a href="#23-june-2023">23 June 2023</a>
+            		</li>
+
+                    <li><a href="#26-january-2023">26 January 2023</a>
+            		</li>
+
+                    <li><a href="#11-september-2022-site-launch">11 September 2022 (Site Launch)</a>
+            		</li>
+                </ol>
+            </nav>
+    </details>
+</aside>
+
+<style>
+    .toc__wrapper {
+        max-height: 89vh;
+        overflow: auto;
+        background-color: var(--clr-content-bg);
+        padding: 1rem 1.3rem;
+    }
+
+    .toc__heading {
+        font-size: 1.3rem;
+        font-weight: 700;
+        color: var(--clr-sub-heading);
+        cursor: pointer;
+    }
+
+    .toc ol,
+    .toc ol ol {
+        display: grid;
+        gap: 0.3em;
+    }
+
+    .toc ol {
+        border-top: 0.1em solid var(--clr-title-border);
+        padding-left: 1.3em;
+        padding-top: 1em;
+    }
+
+    .toc ol ol {
+        border-top: none;
+        list-style-type: disc;
+        padding-left: 1em;
+        padding-top: 0.3em;
+    }
+
+    .toc ol a {
+        font-size: 1.1rem;
+        padding-left: 0.3em;
+    }
+
+    .toc ol ol a {
+        padding: 0;
+        font-size: 1rem;
+    }
+</style>
+
+    
 
     
 		<div class="content ">
@@ -413,27 +483,23 @@
     </a>
 </div>
 
-<h2>11 September 2023 Blog Layout</h2>
-    
-        <img src="/assets/layouts/Leilukins-Hub-blog-layout-2023-09.png" alt="Leilukin&#39;s Hub blog on 11 September 2023">
-    
-
-<h2>23 June 2023</h2>
-    
-        <img src="/assets/layouts/Leilukins-Hub-layout-2023-06.png" alt="Leilukin&#39;s Hub home page on 23 June 2023">
-    
-
-<h2>26 January 2023</h2>
-    
-        <img src="/assets/layouts/Leilukins-Hub-layout-2023-01.png" alt="Leilukin&#39;s Hub home page on 26 January 2023">
-    
-
-<h2>11 September 2022 (Site Launch)</h2>
-    
-        <img src="/assets/layouts/Leilukins-Hub-layout-2022-index.png" alt="Leilukin&#39;s Hub index page during the site&#39;s launch on 11 September 2022">
-    
-        <img src="/assets/layouts/Leilukins-Hub-layout-2022-page.png" alt="Leilukin&#39;s Hub My Creation page during the site&#39;s launch on 11 September 2022">
-    
+<div class="heading-wrapper h2">
+<h2 id="11-september-2023-blog-layout">11 September 2023 Blog Layout</h2>
+<a class="heading-anchor" href="#11-september-2023-blog-layout" aria-labelledby="11-september-2023-blog-layout"><span hidden>#</span></a></div>
+<p><img src="/assets/layouts/Leilukins-Hub-blog-layout-2023-09.png" alt="Leilukin&#39;s Hub blog on 11 September 2023"></p>
+<div class="heading-wrapper h2">
+<h2 id="23-june-2023">23 June 2023</h2>
+<a class="heading-anchor" href="#23-june-2023" aria-labelledby="23-june-2023"><span hidden>#</span></a></div>
+<p><img src="/assets/layouts/Leilukins-Hub-layout-2023-06.png" alt="Leilukin&#39;s Hub home page on 23 June 2023"></p>
+<div class="heading-wrapper h2">
+<h2 id="26-january-2023">26 January 2023</h2>
+<a class="heading-anchor" href="#26-january-2023" aria-labelledby="26-january-2023"><span hidden>#</span></a></div>
+<p><img src="/assets/layouts/Leilukins-Hub-layout-2023-01.png" alt="Leilukin&#39;s Hub home page on 26 January 2023"></p>
+<div class="heading-wrapper h2">
+<h2 id="11-september-2022-site-launch">11 September 2022 (Site Launch)</h2>
+<a class="heading-anchor" href="#11-september-2022-site-launch" aria-labelledby="11-september-2022-site-launch"><span hidden>#</span></a></div>
+<p><img src="/assets/layouts/Leilukins-Hub-layout-2022-index.png" alt="Leilukin&#39;s Hub index page during the site&#39;s launch on 11 September 2022"></p>
+<p><img src="/assets/layouts/Leilukins-Hub-layout-2022-page.png" alt="Leilukin&#39;s Hub My Creation page during the site&#39;s launch on 11 September 2022"></p>
 
 
 <style>
diff --git a/_site/feed.xml b/_site/feed.xml
index 7c00cab7..3528b2a5 100644
--- a/_site/feed.xml
+++ b/_site/feed.xml
@@ -4,7 +4,7 @@
     <subtitle>Leilukin&#39;s personal website.</subtitle>
     <link href="https://leilukin.neocities.org/feed.xml" rel="self"/>
     <link href="https://leilukin.neocities.org"/>
-    <updated>2024-04-21T06:10:25Z</updated>
+    <updated>2024-04-21T06:46:29Z</updated>
     <id>https://leilukin.neocities.org</id>
     <author>
         <name>Leilukin</name>
diff --git a/src/changelogs/pages/layouts.njk b/src/changelogs/pages/layouts.md
similarity index 95%
rename from src/changelogs/pages/layouts.njk
rename to src/changelogs/pages/layouts.md
index ec2fd22e..b4348ff1 100644
--- a/src/changelogs/pages/layouts.njk
+++ b/src/changelogs/pages/layouts.md
@@ -3,14 +3,14 @@ layout: main/changelogs
 title: Website Layout Archive
 desc: An archive for the page layout designs mt website has used.
 changelogNav: Website Layouts
-metadata:
-    type: article
+templateEngineOverride: njk, md
+toc: true
 eleventyNavigation:
     order: 1
 ---
 
 {%- macro siteLayout(params) -%}
-    <h2>{{ params.title }}</h2>
+    ## {{ params.title }}
     {% for screenshot in params.screenshots %}
         <img src="/assets/layouts/{{ screenshot.imgFile }}" alt="{{ screenshot.imgAlt }}">
     {% endfor %}