cards as component thanks to asyncEach

src/_includes/partials/card-blog.njk

@@ -0,0 +1,19 @@
+<custom-card clickable>
+  <h2 slot="headline">
+    <a href="{{ item.url | url }}">{{ item.data.title }}</a>
+  </h2>
+  <span slot="date"> {% include "partials/date.njk" %} </span>
+  {%
+    if
+    item.data.tags.length > 1
+  %}
+    <div slot="tag" webc:nokeep>
+      {% for tag in item.data.tags %}
+        {% if tag != "posts" %}
+          <span class="button post-tag">{{ tag }}</span>
+        {% endif %}
+      {% endfor %}
+    </div>
+  {% endif %}
+  <div slot="content" webc:nokeep>{{ item.data.description | markdownFormat | safe }}</div>
+</custom-card>

src/_includes/partials/card-tag.njk

@@ -0,0 +1,7 @@
+<custom-card clickable>
+  <h2 slot="headline">
+    <a href="{{ item.url | url }}">{{ item.data.title }}</a>
+  </h2>
+  <span slot="date"> {% include "partials/date.njk" %} </span>
+  <p slot="content">{{ item.data.description }}</p>
+</custom-card>

src/_layouts/blog.njk

@@ -14,30 +14,14 @@ layout: base
   <div class="region flow prose" style="--region-space-top: var(--space-xl-2xl)">{{ content | safe }}</div>
 
   <custom-masonry layout="50-50">
-    {% for item in pagination.items %}
-      {% set definedDate = item.date %}
 
-      <custom-card clickable>
+	{% asyncEach item in pagination.items %}
-        <h2 slot="headline">
+		{% set definedDate = item.date %}
-          <a href="{{ item.url | url }}">{{ item.data.title }}</a>
+
-        </h2>
+		{% include "partials/card-blog.njk" %}
-        <span slot="date"> {% include "partials/date.njk" %} </span>
+	{% endeach %}
-        {%
+
-          if
+	</custom-masonry>
-          item.data.tags.length > 1
-        %}
-          <div slot="tag" webc:nokeep>
-            {% for tag in item.data.tags %}
-              {% if tag != "posts" %}
-                <span class="button post-tag">{{ tag }}</span>
-              {% endif %}
-            {% endfor %}
-          </div>
-        {% endif %}
-        <div slot="content" webc:nokeep>{{ item.data.description | markdownFormat | safe }}</div>
-      </custom-card>
-    {% endfor %}
-  </custom-masonry>
 
   <!-- set collection to paginate -->
   {% set collectionToPaginate = collections.posts %}

src/_layouts/home.njk

@@ -28,28 +28,12 @@ layout: base
         <custom-masonry layout="50-50">
           <!-- loop posts -->
           {% set itemList = collections.allPosts %}
-          {% for item in itemList.slice(0, 4) %}
+          {% asyncEach item in itemList.slice(0, 4) %}
             {% set definedDate = item.date %}
-            <custom-card clickable>
+
-              <h3 slot="headline">
+            {% include "partials/card-blog.njk" %}
-                <a href="{{ item.url | url }}">{{ item.data.title }}</a>
+
-              </h3>
+          {% endeach %}
-              <span slot="date"> {% include "partials/date.njk" %} </span>
-              {%
-                if
-                item.data.tags.length > 1
-              %}
-                <div slot="tag" webc:nokeep>
-                  {% for tag in item.data.tags %}
-                    {% if tag != "posts" %}
-                      <span class="button post-tag">{{ tag }}</span>
-                    {% endif %}
-                  {% endfor %}
-                </div>
-              {% endif %}
-              <div slot="content" webc:nokeep>{{ item.data.description | markdownFormat | safe }}</div>
-            </custom-card>
-          {% endfor %}
         </custom-masonry>
       </div>
     </div>

src/common/tagList.njk

@@ -12,13 +12,8 @@ eleventyComputed:
 <custom-masonry layout="50-50">
   {% set itemList = collections[tag] | reverse %}
   {% for item in itemList %}
-    <custom-card clickable>
+
-      <h2 slot="headline">
+		{% include "partials/card-tag.njk" %}
-        <a href="{{ item.url | url }}">{{ item.data.title }}</a>
-      </h2>
-      <span slot="date"> {% include "partials/date.njk" %} </span>
-      <p slot="content">{{ item.data.description }}</p>
-    </custom-card>
   {% endfor %}
 </custom-masonry>
 

src/common/tags.njk

@@ -14,12 +14,7 @@ eleventyComputed:
 <custom-masonry layout="50-50">
   {% set itemlist = collections.posts %}
   {% for item in itemlist %}
-    <custom-card clickable>
+
-      <h2 slot="headline">
+		{% include "partials/card-tag.njk" %}
-        <a href="{{ item.url | url }}">{{ item.data.title }}</a>
-      </h2>
-      <span slot="date"> {% include "partials/date.njk" %} </span>
-      <p slot="content">{{ item.data.description }}</p>
-    </custom-card>
   {% endfor %}
 </custom-masonry>