v2.0.1

Author: CLCK0622

.eleventy.js

@@ -1,21 +1,32 @@
-module.exports = function(eleventyConfig) {
+const { DateTime } = require("luxon");
+
+module.exports = function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy("src/styles.css");
     eleventyConfig.addPassthroughCopy("src/main.js");
-  
-    eleventyConfig.addCollection("pages", function(collectionApi) {
-      return collectionApi.getFilteredByGlob("src/sections/*.md").sort((a, b) => a.data.order - b.data.order);
+
+    eleventyConfig.addCollection("pages", function (collectionApi) {
+        return collectionApi.getFilteredByGlob("src/sections/*.md").sort((a, b) => a.data.order - b.data.order);
     });
-  
+
+    eleventyConfig.addCollection("blog", function (collectionApi) {
+        return collectionApi.getFilteredByGlob("src/blog/*.md").sort((a, b) => {
+            return b.date - a.date;
+        });
+    });
+
+    eleventyConfig.addFilter("date", (dateObj, format = "yyyy-MM-dd") => {
+        return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat(format);
+      });
+
     return {
-      dir: {
-        input: "src",
-        includes: "_includes",
-        output: "_site"
-      },
-      markdownTemplateEngine: "njk",
-      htmlTemplateEngine: "njk",
-      dataTemplateEngine: "njk",
-      templateFormats: ["md", "njk"]
+        dir: {
+            input: "src",
+            includes: "_includes",
+            output: "_site"
+        },
+        markdownTemplateEngine: "njk",
+        htmlTemplateEngine: "njk",
+        dataTemplateEngine: "njk",
+        templateFormats: ["md", "njk"]
     };
-  };
-  
+};

package.json

@@ -14,6 +14,7 @@
     "license": "ISC",
     "dependencies": {
         "@11ty/eleventy": "^3.0.0",
+        "luxon": "^3.5.0",
         "sass": "^1.80.4",
         "scrollreveal": "^4.0.9"
     }

pnpm-lock.yaml

@@ -0,0 +1,27 @@
+---
+layout: "base.njk"
+---
+
+<main>
+    <article>
+        <section>
+        {{ content | safe }}
+        </section>
+    </article>
+    <hr style="margin-top: 30px; margin-bottom: 15px;" />
+    <script src="https://giscus.app/client.js"
+            data-repo="CLCK0622/11ty-Serene"
+            data-repo-id="R_kgDOMgVOMw"
+            data-category="Announcements"
+            data-category-id="DIC_kwDOMgVOM84ClgHH"
+            data-mapping="url"
+            data-strict="0"
+            data-reactions-enabled="1"
+            data-emit-metadata="0"
+            data-input-position="bottom"
+            data-theme="preferred_color_scheme"
+            data-lang="en"
+            crossorigin="anonymous"
+            async>
+    </script>
+</main>

src/_includes/post.njk

@@ -0,0 +1,10 @@
+---
+title: "My First Blog Post"
+date: 2024-01-01
+layout: "post.njk"
+description: "This is the first blog post on my site."
+---
+
+# My First Blog Post
+
+Welcome to my blog! This is my first post.

src/blog/first-post copy 2.md

@@ -0,0 +1,10 @@
+---
+title: "My First Blog Post"
+date: 2024-01-03
+layout: "post.njk"
+description: "This is the first blog post on my site."
+---
+
+# My First Blog Post
+
+Welcome to my blog! This is my first post.

src/blog/first-post copy.md

@@ -0,0 +1,10 @@
+---
+title: "My First Blog Post"
+date: 2024-01-05
+layout: "post.njk"
+description: "This is the first blog post on my site."
+---
+
+# My First Blog Post
+
+Welcome to my blog! This is my first post.

src/blog/first-post.md

@@ -2,6 +2,17 @@ document.addEventListener('DOMContentLoaded', (event) => {
     init_mode();
 });
 
+function updateGiscusTheme() {
+    const theme = localStorage.theme === 'dark' ? 'dark' : 'light';
+    const iframe = document.querySelector('iframe.giscus-frame');
+    if (iframe) {
+        iframe.contentWindow.postMessage(
+            { giscus: { setConfig: { theme: theme } } },
+            'https://giscus.app'
+        );
+    }
+}
+
 function init_mode() {
     const darkmodeCheckbox = document.getElementById("darkmode");
     const htmlElement = document.documentElement;
@@ -13,6 +24,7 @@ function init_mode() {
         darkmodeCheckbox.checked = false;
         htmlElement.classList.remove('dark');
     }
+    updateGiscusTheme();
 }
 
 function change_mode() {
@@ -26,14 +38,14 @@ function change_mode() {
         localStorage.theme = 'light';
         htmlElement.classList.remove('dark');
     }
+    updateGiscusTheme();
 }
 
 document.addEventListener("DOMContentLoaded", () => {
     ScrollReveal().reveal("body *", {
-      reset: true,
-      distance: "0px",
-      duration: 400,
-      easing: "ease-in-out"
+        reset: true,
+        distance: "0px",
+        duration: 400,
+        easing: "ease-in-out"
     });
-  });
-  
+});

src/main.js

@@ -7,6 +7,11 @@ order: 3
 
 # 💡 Blogs
 
-W.I.P...
-
-Will support markdown in the future...
+<ul class="blogList">
+  {% for post in collections.blog %}
+  <li class=blogListItem>
+    <a href="{{ post.url }}">{{ post.data.title }}</a> - {{ post.date | date("yyyy-MM-dd") }}
+    <p>{{ post.data.description }}</p>
+  </li>
+  {% endfor %}
+</ul>

src/sections/Blog.md

@@ -6,3 +6,7 @@ order: 4
 ---
 
 # 🔗 Links
+
+- 1
+- 2
+- 3