From fd973b4b4fc34ad08441b9e503361d1d6fcd6953 Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Wed, 10 Jul 2024 12:08:12 +0200
Subject: [PATCH] cards as component thanks to asyncEach

---
 src/_includes/partials/card-blog.njk | 19 ++++++++++++++++++
 src/_includes/partials/card-tag.njk  |  7 +++++++
 src/_layouts/blog.njk                | 30 +++++++---------------------
 src/_layouts/home.njk                | 26 +++++-------------------
 src/common/tagList.njk               |  9 ++-------
 src/common/tags.njk                  |  9 ++-------
 6 files changed, 42 insertions(+), 58 deletions(-)
 create mode 100644 src/_includes/partials/card-blog.njk
 create mode 100644 src/_includes/partials/card-tag.njk

diff --git a/src/_includes/partials/card-blog.njk b/src/_includes/partials/card-blog.njk
new file mode 100644
index 0000000..a7fc355
--- /dev/null
+++ b/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>
diff --git a/src/_includes/partials/card-tag.njk b/src/_includes/partials/card-tag.njk
new file mode 100644
index 0000000..6d25cbc
--- /dev/null
+++ b/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>
diff --git a/src/_layouts/blog.njk b/src/_layouts/blog.njk
index ad27eca..c2110c7 100644
--- a/src/_layouts/blog.njk
+++ b/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>
-        <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>
-    {% endfor %}
-  </custom-masonry>
+	{% asyncEach item in pagination.items %}
+		{% set definedDate = item.date %}
+
+		{% include "partials/card-blog.njk" %}
+	{% endeach %}
+
+	</custom-masonry>
 
   <!-- set collection to paginate -->
   {% set collectionToPaginate = collections.posts %}
diff --git a/src/_layouts/home.njk b/src/_layouts/home.njk
index 77a65a4..8f4b284 100644
--- a/src/_layouts/home.njk
+++ b/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">
-                <a href="{{ item.url | url }}">{{ item.data.title }}</a>
-              </h3>
-              <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 %}
+
+            {% include "partials/card-blog.njk" %}
+
+          {% endeach %}
         </custom-masonry>
       </div>
     </div>
diff --git a/src/common/tagList.njk b/src/common/tagList.njk
index 2d13724..c8f8901 100644
--- a/src/common/tagList.njk
+++ b/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">
-        <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>
+
+		{% include "partials/card-tag.njk" %}
   {% endfor %}
 </custom-masonry>
 
diff --git a/src/common/tags.njk b/src/common/tags.njk
index 5530dd8..bb92ae2 100644
--- a/src/common/tags.njk
+++ b/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">
-        <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>
+
+		{% include "partials/card-tag.njk" %}
   {% endfor %}
 </custom-masonry>