Turn website layout archive page to a Markdown file

_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>
+<div class="heading-wrapper h2">
-    
+<h2 id="11-september-2023-blog-layout">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">
+<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>23 June 2023</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>
-        <img src="/assets/layouts/Leilukins-Hub-layout-2023-06.png" alt="Leilukin&#39;s Hub home page on 23 June 2023">
+<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>
-<h2>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>
-        <img src="/assets/layouts/Leilukins-Hub-layout-2023-01.png" alt="Leilukin&#39;s Hub home page on 26 January 2023">
+<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>
-<h2>11 September 2022 (Site Launch)</h2>
+<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>
-        <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">
-    
 
 
 <style>

_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>

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:
+templateEngineOverride: njk, md
-    type: article
+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 %}