new directory for components

src/_includes/components/card.njk

@@ -0,0 +1,24 @@
+<li class="card">
+  <div class="flow">
+    {% if headingContext === "h2" %}
+    <h2>
+      <a href="{{ item.url | url }}">{{ item.data.title }}</a>
+    </h2>
+    {% else %}
+    <h3>
+      <a href="{{ item.url | url }}">{{ item.data.title }}</a>
+    </h3>
+    {% endif %}
+    <div class="cluster">
+      <span class="text-step-min-1">
+        {% set definedDate = item.date %} {% include "components/date.njk" %} {% if
+        activateTags and item.data.tags.length > 1 %}
+        <span class="button post-tag">
+          {{ item.data.tags[1] }}
+        </span>
+        {% endif %}
+      </span>
+    </div>
+    <p>{{ item.data.description }}</p>
+  </div>
+</li>

src/_includes/components/gallery.njk

@@ -0,0 +1,42 @@
+<div
+  class="grid mt-l-xl"
+  role="list"
+  style="--grid-min-item-size: clamp(16rem, 50vw, 20rem)"
+>
+  {% for item in gallery %}
+
+  <dialog class="flow modal{{ loop.index }}">
+    <button class="button" autofocus>Close</button>
+    {% eleventyImage item.image, item.alt, item.caption %}
+  </dialog>
+
+  <button data-index="{{ loop.index }}">{% eleventyImage item.image, item.alt %}</button>
+
+  {% endfor %}
+</div>
+
+<script>
+  const buttons = document.querySelectorAll('button[data-index]');
+  const modals = document.querySelectorAll('dialog');
+  const closeButtons = document.querySelectorAll('dialog button');
+
+  buttons.forEach((button, index) => {
+    button.addEventListener('click', () => {
+      modals[index].showModal();
+    });
+  });
+
+  closeButtons.forEach((button, index) => {
+    button.addEventListener('click', () => {
+      modals[index].close();
+    });
+  });
+
+  window.addEventListener('click', event => {
+    modals.forEach(modal => {
+      if (event.target === modal) {
+        modal.close();
+      }
+    });
+  });
+</script>

src/_includes/components/post-tags.njk

@@ -0,0 +1,9 @@
+{% if tags.size > 1 %}
+<div class="my-s-m cluster">
+  {% for tag in tags %}
+  <a href="/tags/{{ tag }}">
+    {{ tag }}
+  </a>
+  {% endfor %}
+</div>
+{% endif %}