Starting page content

pages/titlecards.html

@@ -0,0 +1,29 @@
+{{#extend "layout"}}
+
+  {{#content "bodyAttributes"}}class="page-index"{{/content}}
+  {{#content "body"}}
+
+  <div class="card-grid" style="grid-auto-rows: unset;">
+
+    {{#each posts.all}}
+      <a class="titlecard-preview {{#each classes}}{{this}} {{/each}}" data-id="{{id}}">
+        <span>{{originalpath}}</span>
+        <img src="/images/filler.png" data-src="{{rev this.titlecard}}" alt="" defer>
+      </a>
+    {{/each}}
+
+  </div>
+
+  {{/content}}
+
+  {{#append 'postscripts'}}
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/lozad.js/1.9.0/lozad.min.js"></script>
+  <script>
+    window.lozad('img[data-src]', {
+      rootMargin: '50% 0px', // syntax similar to that of CSS Margin
+      threshold: 0.5, // ratio of element convergence
+    }).observe(); // lazy loads elements with default selector as '.lozad'
+  </script>
+  {{/append}}
+
+{{/extend}}