Add dynamic snippet list

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

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();
+    });
+});

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