From 6911fcf37b1b5f072ae16ae3216a0b0fc1a290c0 Mon Sep 17 00:00:00 2001
From: Daniel-I-Am <djdecloet@gmail.com>
Date: Thu, 26 May 2022 16:01:01 +0200
Subject: [PATCH] Add dynamic snippet list

---
 src/index.pug                   |  6 +-----
 src/js/app.js                   | 25 +++++++++++++++++++++++--
 src/partials/recent-snippet.pug |  8 ++++++++
 3 files changed, 32 insertions(+), 7 deletions(-)
 create mode 100644 src/partials/recent-snippet.pug

diff --git a/src/index.pug b/src/index.pug
index cbd8a5b..b331296 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -8,11 +8,7 @@ block main
         a(href="/blog") All articles
     .list
       ul.blog-items
-        li.blog-item
-          img.article-image(src="//via.placeholder.com/128", alt="Article Topic")
-          .article-text
-            h4.article-title New Portfolio Layout
-            span.article-date(title='September 3rd 2021, 10:11:02') 9 months ago
+        div(insert-data='insertRecentSnippets(this, 5)')
 
 block aside
   section.blog-popular
diff --git a/src/js/app.js b/src/js/app.js
index be183ce..0565a65 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,5 +1,26 @@
+const { DateTime } = require('luxon');
+
 require('../sass/main.scss');
 
-const snippets = require('../data/snippets.json');
+window.insertRecentSnippets = (element, amount = 5) => {
+    const snippetTemplate = require('../partials/recent-snippet.pug');
+    const snippets = require('../data/snippets.json');
+    snippets.forEach(snippet => {
+        if (snippet.timeAdded) {
+            const date = DateTime.fromSeconds(snippet.timeAdded);
+            snippet.timeAddedPretty = date.toLocaleString(DateTime.DATETIME_FULL);
+            snippet.timeAddedRelative = date.toRelative({
+                base: DateTime.now(),
+            });
+        }
+    });
 
-console.log(snippets);
+    element.outerHTML = snippetTemplate({ snippets });
+}
+
+window.addEventListener('load', () => {
+    document.querySelectorAll('div[insert-data]').forEach(e => {
+        const f = new Function(e.attributes.getNamedItem('insert-data').nodeValue).bind(e);
+        f();
+    });
+});
diff --git a/src/partials/recent-snippet.pug b/src/partials/recent-snippet.pug
new file mode 100644
index 0000000..4b05d9a
--- /dev/null
+++ b/src/partials/recent-snippet.pug
@@ -0,0 +1,8 @@
+.list
+  ul.blog-items
+    each snippet in snippets
+      li.blog-item
+        img.article-image(src="//via.placeholder.com/128", alt="Article Topic")
+        .article-text
+          h4.article-title=snippet.title
+          span.article-date(title=snippet.timeAddedPretty)=snippet.timeAddedRelative