add horizontal card and postslist layouts

Author: hjonin

_includes/components/card-horizontal.njk

@@ -0,0 +1,22 @@
+{# Mandatory variable `card { url: string, title: string, description: string, tags: string[], date: string, imagePath: string, imageAlt: string }` to make it work #}
+<div class="fr-card fr-enlarge-link fr-card--horizontal-tier">
+    <div class="fr-card__body">
+        <div class="fr-card__content">
+            <h3 class="fr-card__title"><a href="{{ card.url | locale_url }}">{{ card.title }}</a></h3>
+            <p class="fr-card__desc">{{ card.description }}</p>
+            <div class="fr-card__start">
+                {% set tags = card.tags %}
+                {% include "components/taggroup-disabled.njk" %}
+                <p class="fr-card__detail fr-icon-time-fill">
+                    <time class="postlist-date"
+                          datetime="{{ card.date | htmlDateString }}">{{ card.date | readableDate("LLLL yyyy") }}</time>
+                </p>
+            </div>
+        </div>
+    </div>
+    {% if card.imagePath %}
+        <div class="fr-card__header">
+            <div class="fr-card__img">{% image card.imagePath, card.imageAlt %}</div>
+        </div>
+    {% endif %}
+</div>

_includes/postslist-horizontal.njk

@@ -0,0 +1,17 @@
+{# Mandatory variable `postslist: CollectionItem[]` to make it work #}
+<div class="fr-grid-row fr-grid-row--gutters fr-mb-3w">
+    {% asyncAll post in postslist %}
+    <div class="fr-col-12">
+        {% set card = {
+            url: post.url,
+            title: post.data.title,
+            description: post.data.description,
+            tags: post.data.tags,
+            date: post.date,
+            imagePath: post.data.image.path,
+            imageAlt: post.data.image.alt
+        } %}
+        {% include "components/card-horizontal.njk" %}
+    </div>
+    {% endall %}
+</div>

content/fr/blog/index.njk

@@ -19,7 +19,7 @@ eleventyNavigation:
     </div>
     <div class="fr-col-12 fr-col-md-9">
       {% set postslist = pagination.items %}
-      {% include "postslist.njk" %}
+      {% include "postslist-horizontal.njk" %}
       {% include "components/pagination.njk" %}
     </div>
   </div>