From c88e7e7e2b8bef773dde6f5b5f3c04f310ee3f4b Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Wed, 14 Feb 2024 07:43:35 +0100
Subject: [PATCH] run jinja formatting

---
 src/_includes/components/card.njk       |  24 ++--
 src/_includes/components/date.njk       |   4 +-
 src/_includes/components/details.njk    |   8 +-
 src/_includes/components/edit-on.njk    |  18 ++-
 src/_includes/components/gallery.njk    |  14 +--
 src/_includes/components/pagination.njk |  62 ++++++----
 src/_includes/components/post-tags.njk  |  12 +-
 src/_includes/partials/footer.njk       |  88 +++++++-------
 src/_includes/partials/header.njk       |  12 +-
 src/_includes/partials/menu.njk         |  26 ++---
 src/_includes/partials/meta-info.njk    |  42 +++----
 src/_layouts/base.njk                   |  44 ++++---
 src/_layouts/blog.njk                   |  26 +++--
 src/_layouts/home.njk                   |  22 ++--
 src/_layouts/post.njk                   |  32 +++---
 src/pages/built-with.njk                |   4 +-
 src/pages/styleguide.njk                | 146 ++++++++++++------------
 17 files changed, 308 insertions(+), 276 deletions(-)

diff --git a/src/_includes/components/card.njk b/src/_includes/components/card.njk
index f77911d..0198002 100644
--- a/src/_includes/components/card.njk
+++ b/src/_includes/components/card.njk
@@ -1,21 +1,23 @@
 <li class="card">
   <div class="flow">
     {% if headingContext === "h2" %}
-    <h2>
-      <a href="{{ item.url | url }}">{{ item.data.title }}</a>
-    </h2>
+      <h2>
+        <a href="{{ item.url | url }}">{{ item.data.title }}</a>
+      </h2>
     {% else %}
-    <h3>
-      <a href="{{ item.url | url }}">{{ item.data.title }}</a>
-    </h3>
+      <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>
+        {% 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>
diff --git a/src/_includes/components/date.njk b/src/_includes/components/date.njk
index 44799d3..4599c93 100644
--- a/src/_includes/components/date.njk
+++ b/src/_includes/components/date.njk
@@ -1,5 +1,3 @@
 <time datetime="{{ definedDate | toIsoString }}">
-  {{
-    definedDate | formatDate('MMMM D, YYYY')
-  }}
+  {{ definedDate | formatDate('MMMM D, YYYY') }}
 </time>
diff --git a/src/_includes/components/details.njk b/src/_includes/components/details.njk
index 99060a2..5728534 100644
--- a/src/_includes/components/details.njk
+++ b/src/_includes/components/details.njk
@@ -4,10 +4,10 @@
 </ul>
 
 {% for item in itemList %}
-<details id="{{ item.data.title | slugify }}">
-  <summary>{{ item.data.title }}</summary>
-  {{ item.templateContent | safe }}
-</details>
+  <details id="{{ item.data.title | slugify }}">
+    <summary>{{ item.data.title }}</summary>
+    {{ item.templateContent | safe }}
+  </details>
 {% endfor %}
 
 <script>
diff --git a/src/_includes/components/edit-on.njk b/src/_includes/components/edit-on.njk
index 1c24a72..e879c0b 100644
--- a/src/_includes/components/edit-on.njk
+++ b/src/_includes/components/edit-on.njk
@@ -1,12 +1,10 @@
 {% if meta.viewRepo.allow %}
-<hr />
-<p class="text-step-min-1">
-  {{ meta[page.lang].blog.githubEdit }}
-  <a
-    href="{{ pkg.repository.url | url | replace('.git', '/tree/main/') }}{{
-      page.inputPath
-    }}"
-    >{{ meta.viewRepo.infoText }}</a
-  >.
-</p>
+  <hr />
+  <p class="text-step-min-1">
+    {{ meta[page.lang].blog.githubEdit }}
+    <a
+      href="{{ pkg.repository.url | url | replace('.git', '/tree/main/') }}{{ page.inputPath }}"
+      >{{ meta.viewRepo.infoText }}</a
+    >.
+  </p>
 {% endif %}
diff --git a/src/_includes/components/gallery.njk b/src/_includes/components/gallery.njk
index 32dd6de..a647ebd 100644
--- a/src/_includes/components/gallery.njk
+++ b/src/_includes/components/gallery.njk
@@ -4,14 +4,14 @@
   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>
 
-  <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>
-
+    <button data-index="{{ loop.index }}">
+      {% eleventyImage item.image, item.alt %}
+    </button>
   {% endfor %}
 </div>
 
diff --git a/src/_includes/components/pagination.njk b/src/_includes/components/pagination.njk
index 98f9660..cdc0d1b 100644
--- a/src/_includes/components/pagination.njk
+++ b/src/_includes/components/pagination.njk
@@ -1,26 +1,38 @@
 <section class="region">
-	<nav role="navigation" aria-labelledby="pagination_label">
-		<span id="pagination_label" hidden>{{ meta[metaKey].paginationLabel }}</span>
-		<span id="prefix" hidden>{{ meta[metaKey].paginationPage }}</span>
-		<ol class="pagination | cluster" role="list">
-			<li>
-				{% if pagination.href.previous %}
-					<a href="{{ pagination.href.previous }}"> {{ meta[metaKey].paginationPrevious }} </a>
-				{% else %} {{ meta[metaKey].paginationPrevious }} {% endif %}
-			</li>
-			{% if meta[metaKey].paginationNumbers %}
-			{%- for pageEntry in pagination.pages %}
-				<li>
-					<a href="{{ pagination.hrefs[ loop.index0 ] }}" id="link_{{ loop.index }}" aria-labelledby="prefix link_{{ loop.index }}" {% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page" {% endif %}>
-						{{ loop.index }}</a>
-				</li>
-			{%- endfor %}
-			{% endif %}
-			<li>
-				{% if pagination.href.next %}
-					<a href="{{ pagination.href.next }}">{{ meta[metaKey].paginationNext }}</a>
-				{% else %} {{ meta[metaKey].paginationNext }} {% endif %}
-			</li>
-		</ol>
-	</nav>
-</section>
\ No newline at end of file
+  <nav role="navigation" aria-labelledby="pagination_label">
+    <span id="pagination_label" hidden>{{ meta[metaKey].paginationLabel }}</span>
+    <span id="prefix" hidden>{{ meta[metaKey].paginationPage }}</span>
+    <ol class="pagination | cluster" role="list">
+      <li>
+        {% if pagination.href.previous %}
+          <a href="{{ pagination.href.previous }}">
+            {{ meta[metaKey].paginationPrevious }}
+          </a>
+        {% else %}
+          {{ meta[metaKey].paginationPrevious }}
+        {% endif %}
+      </li>
+      {% if meta[metaKey].paginationNumbers %}
+        {%- for pageEntry in pagination.pages -%}
+          <li>
+            <a
+              href="{{ pagination.hrefs[ loop.index0 ] }}"
+              id="link_{{ loop.index }}"
+              aria-labelledby="prefix link_{{ loop.index }}"
+              {% if page.url == pagination.hrefs[ loop.index0 ] %}aria-current="page"{% endif %}
+            >
+              {{ loop.index }}</a
+            >
+          </li>
+        {%- endfor -%}
+      {% endif %}
+      <li>
+        {% if pagination.href.next %}
+          <a href="{{ pagination.href.next }}">{{ meta[metaKey].paginationNext }}</a>
+        {% else %}
+          {{ meta[metaKey].paginationNext }}
+        {% endif %}
+      </li>
+    </ol>
+  </nav>
+</section>
diff --git a/src/_includes/components/post-tags.njk b/src/_includes/components/post-tags.njk
index 2b7343b..07626b9 100644
--- a/src/_includes/components/post-tags.njk
+++ b/src/_includes/components/post-tags.njk
@@ -1,9 +1,7 @@
 {% if tags.size > 1 %}
-<div class="my-s-m cluster">
-  {% for tag in tags %}
-  <a href="/tags/{{ tag }}">
-    {{ tag }}
-  </a>
-  {% endfor %}
-</div>
+  <div class="my-s-m cluster">
+    {% for tag in tags %}
+      <a href="/tags/{{ tag }}"> {{ tag }} </a>
+    {% endfor %}
+  </div>
 {% endif %}
diff --git a/src/_includes/partials/footer.njk b/src/_includes/partials/footer.njk
index c939243..0ec2f3f 100644
--- a/src/_includes/partials/footer.njk
+++ b/src/_includes/partials/footer.njk
@@ -1,54 +1,60 @@
 <footer class="site-foot">
   <div class="wrapper">
     <div class="site-foot__inner">
-      <nav class="site-foot__inner text-step-0" aria-label="{{ meta.navigation.ariaBottom }}">
-        &copy; {% year %} <a href="/"{% if page.url == "/" %} aria-current="page"{% endif %}>{{ meta.siteName }} <small>{{ pkg.version }}</small>  </a>
+      <nav
+        class="site-foot__inner text-step-0"
+        aria-label="{{ meta.navigation.ariaBottom }}"
+      >
+        &copy; {% year %}
+        <a href="/" {% if page.url == "/" %}aria-current="page"{% endif %}
+          >{{ meta.siteName }} <small>{{ pkg.version }}</small>
+        </a>
 
         {% for item in navigation.bottom %}
-        <a
-          href="{{ item.url }}"
-          {{
-          helpers.getLinkActiveState(item.url,
-          page.url)
-          |
-          safe
-          }}
-          >{{ item.text }}</a
-        >
+          <a
+            href="{{ item.url }}"
+            {{
+              helpers.getLinkActiveState(item.url,
+              page.url)
+              |
+              safe
+            }}
+            >{{ item.text }}</a
+          >
         {% endfor %}
       </nav>
 
-				<nav class="site-foot__inner" aria-label="{{ meta.navigation.ariaPlatforms }}">
+      <nav class="site-foot__inner" aria-label="{{ meta.navigation.ariaPlatforms }}">
+        <!-- gets the first item from the feed loop set in meta -->
+        <a
+          href="{{ meta.blog.feedLinks[0].url }}"
+          rel="alternate"
+          type="{{ meta.blog.feedLinks[0].type }}"
+        >
+          <span class="visually-hidden">{{ meta.blog.feedLinks[0].title }}</span>
+          <div aria-hidden="true">{% include 'svg/rss.svg' %}</div>
+        </a>
 
-							<!-- gets the first item from the feed loop set in meta -->
-							<a href="{{ meta.blog.feedLinks[0].url }}" rel="alternate" type="{{ meta.blog.feedLinks[0].type }}">
-								<span class="visually-hidden">{{ meta.blog.feedLinks[0].title }}</span>
-								<div aria-hidden="true">{% include 'svg/rss.svg' %}</div>
-							</a>
-
-							{% for key, value in personal.platforms %}
-							{% if value != "" %}
-								<!-- regular platforms -->
-							<a href="{{ value }}" rel="me">
-								<span class="visually-hidden">{{ key | capitalize }}</span>
-								<div aria-hidden="true">{% include 'svg/platform-' + key + '.svg' %}</div>
-							</a>
-							{% endif %}
-
-
-					{% endfor %}
-        </nav>
+        {% for key, value in personal.platforms %}
+          {% if value != "" %}
+            <!-- regular platforms -->
+            <a href="{{ value }}" rel="me">
+              <span class="visually-hidden">{{ key | capitalize }}</span>
+              <div aria-hidden="true">{% include 'svg/platform-' + key + '.svg' %}</div>
+            </a>
+          {% endif %}
+        {% endfor %}
+      </nav>
     </div>
 
-		<!-- theme switch -->
-		{% include 'components/theme-switch.njk' %}
+    <!-- theme switch -->
+    {% include 'components/theme-switch.njk' %}
 
-		<div class="text-center mt-m-l">
-			<a class="creator text-step-min-1" href="{{ meta.creator.website }}"
-			>Made with   <span>{% include 'svg/heart.svg' %}</span>
-			by {{ meta.creator.name }}</a
-		>
-		</div>
+    <div class="text-center mt-m-l">
+      <a class="creator text-step-min-1" href="{{ meta.creator.website }}"
+        >Made with <span>{% include 'svg/heart.svg' %}</span> by
+        {{ meta.creator.name }}</a
+      >
+    </div>
   </div>
-
-</footer>
\ No newline at end of file
+</footer>
diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk
index 0bb7595..3d95c83 100644
--- a/src/_includes/partials/header.njk
+++ b/src/_includes/partials/header.njk
@@ -2,10 +2,14 @@
 
 <header class="wrapper">
   <div class="repel ontop">
-			<a href="/" class="logo | cluster"{% if page.url == "/" %} aria-current="page"{% endif %}>
-			{% include "svg/star.svg" %}
-			<span>{{ meta.siteName }}</span>
-			</a>
+    <a
+      href="/"
+      class="logo | cluster"
+      {% if page.url == "/" %}aria-current="page"{% endif %}
+    >
+      {% include "svg/star.svg" %}
+      <span>{{ meta.siteName }}</span>
+    </a>
     {% include "partials/menu.njk" %}
   </div>
 </header>
diff --git a/src/_includes/partials/menu.njk b/src/_includes/partials/menu.njk
index 7cf513a..f087bbd 100644
--- a/src/_includes/partials/menu.njk
+++ b/src/_includes/partials/menu.njk
@@ -1,19 +1,19 @@
 <nav id="mainnav" class="site-nav" aria-label="{{ meta.navigation.ariaTop }}">
   <ul class="cluster" role="list">
     {% for item in navigation.top %}
-    <li>
-      <a
-        class="nav"
-        href="{{ item.url }}"
-        {{
-        helpers.getLinkActiveState(item.url,
-        page.url)
-        |
-        safe
-        }}
-        >{{ item.text }}</a
-      >
-    </li>
+      <li>
+        <a
+          class="nav"
+          href="{{ item.url }}"
+          {{
+            helpers.getLinkActiveState(item.url,
+            page.url)
+            |
+            safe
+          }}
+          >{{ item.text }}</a
+        >
+      </li>
     {% endfor %}
   </ul>
 </nav>
diff --git a/src/_includes/partials/meta-info.njk b/src/_includes/partials/meta-info.njk
index 0a73cdc..558b0cf 100644
--- a/src/_includes/partials/meta-info.njk
+++ b/src/_includes/partials/meta-info.njk
@@ -3,11 +3,12 @@
 <meta
   name="description"
   content="
-  {% if discover.description %} {{ discover.description }}
+  {% if discover.description %}
+    {{ discover.description }}
   {% elif description %}
-  {{ description }}
+    {{ description }}
   {% else %}
-  {{ meta.siteDescription }}
+    {{ meta.siteDescription }}
   {% endif %}
   "
 />
@@ -32,8 +33,8 @@
 <link rel="author" href="humans.txt" />
 
 {% if personal.social.mastodon %}
-<!-- Mastodon verified site -->
-<link rel="me" href="{{ personal.social.mastodon }}" />
+  <!-- Mastodon verified site -->
+  <link rel="me" href="{{ personal.social.mastodon }}" />
 {% endif %}
 
 <!-- Open Graph meta  -->
@@ -45,22 +46,23 @@
 />
 <meta
   property="og:image"
-  content="{{ meta.url }}{% if (layout == 'post') %}/assets/og-images/{{
-    title | slugify
-  }}-preview.jpeg
-  {% else %}{{ meta.opengraph_default }}
+  content="{{ meta.url }}{% if (layout == 'post') %}
+    /assets/og-images/{{ title | slugify }}-preview.jpeg
+  {% else %}
+    {{ meta.opengraph_default }}
   {% endif %}"
 />
 <meta
   property="og:image:alt"
-  content="{% if (layout == 'post') %}{% else %}{{ meta.opengraph_default_alt }}
-{% endif %}"
+  content="{% if (layout == 'post') %}
+
+  {% else %}
+    {{ meta.opengraph_default_alt }}
+  {% endif %}"
 />
 <meta
   property="og:description"
-  content="{% if description %}{{ description }}{% else %}{{
-    meta.siteDescription
-  }}{% endif %}"
+  content="{% if description %}{{ description }}{% else %}{{ meta.siteDescription }}{% endif %}"
 />
 <meta property="og:site_name" content="{{ meta.siteName }}" />
 <meta property="og:locale" content="{{ meta.locale }}" />
@@ -70,12 +72,12 @@
 
 <!-- RSS Autodiscovery. Loops over meta.blog.feedLinks -->
 {% for feedLink in meta.blog.feedLinks %}
-<link
-  rel="alternate"
-  type="{{ feedLink.type }}"
-  title="{{ feedLink.title }}: {{ meta.siteName }}"
-  href="{{ feedLink.url }}"
-/>
+  <link
+    rel="alternate"
+    type="{{ feedLink.type }}"
+    title="{{ feedLink.title }}: {{ meta.siteName }}"
+    href="{{ feedLink.url }}"
+  />
 {% endfor %}
 
 <!-- Favicon: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs -->
diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk
index f5caeef..181a896 100644
--- a/src/_layouts/base.njk
+++ b/src/_layouts/base.njk
@@ -1,6 +1,6 @@
 {% set assetHash = helpers.random() %}
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="{{ meta.lang }}">
   <head>
     <!-- charset/http-equiv/viewport -->
@@ -9,28 +9,33 @@
 
     <!-- title -->
     <title>
-      {% if discover.title %} {{ discover.title }}
+      {% if discover.title %}
+        {{ discover.title }}
       {% elif title %}
-      {{ title }}
+        {{ title }}
       {% else %}
-      {{ meta.siteName }}
+        {{ meta.siteName }}
       {% endif %}
     </title>
 
     <!-- 4 synchronous js  -->
     <!-- load theme toggle first to avoid color flashing on page load and inline render blocking js  -->
-    {% set jsthemetoggle %} {% include "theme-toggle-inline.js" %} {% endset %}
+    {% set jsthemetoggle %}{% include "theme-toggle-inline.js" %}{% endset %}
 
     <script>
       <!-- prettier-ignore -->
-      {{ jsthemetoggle | jsmin | safe }}
+      {
+        {
+          jsthemetoggle | jsmin | safe;
+        }
+      }
     </script>
 
     <!--  inline base schema -->
     {% include "schemas/base-schema.njk" %}
 
     <!--  inline blogpost schema  -->
-    {% if schema == 'blog' %} {%- include "schemas/blogpost-schema.njk" %} {% endif %}
+    {% if schema == 'blog' %}{%- include "schemas/blogpost-schema.njk" -%}{% endif %}
 
     <link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" />
 
@@ -52,12 +57,12 @@
     />
 
     <!-- preloads in page data -->
-    {% if preloads -%}
-    <!-- prettier-ignore -->
-    <link rel="preload"
+    {%- if preloads -%}
+      <!-- prettier-ignore -->
+      <link rel="preload"
             href="{{ preloads.href }}"
             as="{{ preloads.as }}"
-            {% if preloads.type %}type={{ preloads.type }}{% endif %}{% if preloads.imagesrcset %}imagesrcset="{{ preloads.imagesrcset }}" {% endif %}
+            {% if preloads.type %}type={{ preloads.type }}{% endif %}{% if preloads.imagesrcset %}imagesrcset="{{ preloads.imagesrcset }}"{% endif %}
             {% if preloads.crossorigin %}crossorigin{% endif %} />
     {% endif %}
 
@@ -65,18 +70,19 @@
 
     <!-- masonry fallback, if true in frontmatter -->
     {% if masonry %}
-    <script src="/assets/scripts/masonry.js?{{ assetHash }}" defer></script>
-    {% endif %} {% if youtube %}
-    <!-- youtube, if true in frontmatter -->
-    <script
-      type="module"
-      src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"
-    ></script>
+      <script src="/assets/scripts/masonry.js?{{ assetHash }}" defer></script>
+    {% endif %}
+    {% if youtube %}
+      <!-- youtube, if true in frontmatter -->
+      <script
+        type="module"
+        src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"
+      ></script>
     {% endif %}
 
     <!-- easteregg js, if true in meta -->
     {% if meta.easteregg %}
-    <script src="/assets/scripts/easteregg.js?{{ assetHash }}" defer></script>
+      <script src="/assets/scripts/easteregg.js?{{ assetHash }}" defer></script>
     {% endif %}
 
     <!-- everything else: meta tags, icons, open graph etc.  -->
diff --git a/src/_layouts/blog.njk b/src/_layouts/blog.njk
index 84ed3dc..9116ab3 100644
--- a/src/_layouts/blog.njk
+++ b/src/_layouts/blog.njk
@@ -20,15 +20,17 @@ masonry: true
 
   <ul class="blogcards | grid" role="list" data-rows="masonry" data-layout="50-50">
     <!-- loop posts -->
-    {% set itemList = pagination.items %} {% for item in itemList %}
-    <!-- activate tags -->
-    {% set activateTags = true %}
-    <!-- set date context -->
-    {% set definedDate = item.date %}
-    <!-- set heading context -->
-    {% set headingContext = "h2" %}
-    <!-- include card -->
-    {% include 'components/card.njk' %} {% endfor %}
+    {% set itemList = pagination.items %}
+    {% for item in itemList %}
+      <!-- activate tags -->
+      {% set activateTags = true %}
+      <!-- set date context -->
+      {% set definedDate = item.date %}
+      <!-- set heading context -->
+      {% set headingContext = "h2" %}
+      <!-- include card -->
+      {% include 'components/card.njk' %}
+    {% endfor %}
   </ul>
 
   <!-- set collection to paginate -->
@@ -37,7 +39,7 @@ masonry: true
   {% set metaKey = "blog" %}
   <!-- if the number of items in the collection is greater than the number of items shown on one page -->
   {% if collectionToPaginate.length > pagination.size %}
-  <!-- include pagination -->
-  {% include 'components/pagination.njk' %} {% endif %}
+    <!-- include pagination -->
+    {% include 'components/pagination.njk' %}
+  {% endif %}
 </article>
-
diff --git a/src/_layouts/home.njk b/src/_layouts/home.njk
index 63c6211..625499b 100644
--- a/src/_layouts/home.njk
+++ b/src/_layouts/home.njk
@@ -12,9 +12,7 @@ masonry: true
   </header>
 
   <article class="full | region">
-    <div class="wrapper flow prose">
-      {{ content | safe }}
-    </div>
+    <div class="wrapper flow prose">{{ content | safe }}</div>
   </article>
 
   <section class="full | region">
@@ -23,7 +21,7 @@ masonry: true
       <!-- blog intro text is optional. -->
 
       {% if blog.intro %}
-      <p>{{ blog.intro }}</p>
+        <p>{{ blog.intro }}</p>
       {% endif %}
 
       <ul
@@ -33,13 +31,15 @@ masonry: true
         data-layout="50-50"
       >
         <!-- loop posts -->
-        {% set itemList = collections.posts %} {% for item in itemList.slice(0, 4) %}
-        <!-- activate tags -->
-        {% set activateTags = true %}
-        <!-- set heading context -->
-        {% set headingContext = "h3" %}
-        <!-- card -->
-        {% include 'components/card.njk' %} {% endfor %}
+        {% set itemList = collections.posts %}
+        {% for item in itemList.slice(0, 4) %}
+          <!-- activate tags -->
+          {% set activateTags = true %}
+          <!-- set heading context -->
+          {% set headingContext = "h3" %}
+          <!-- card -->
+          {% include 'components/card.njk' %}
+        {% endfor %}
       </ul>
     </div>
   </section>
diff --git a/src/_layouts/post.njk b/src/_layouts/post.njk
index f43ed48..978a59c 100644
--- a/src/_layouts/post.njk
+++ b/src/_layouts/post.njk
@@ -8,23 +8,29 @@ schema: blog
     <h1 class="gradient-text">{{ title }}</h1>
 
     {% if image %}
-    <!-- image -->
-    {% eleventyImage image, alt or title, null, "eager", "feature" %} {% endif %} {% if
-    credit %}
-    <!-- credit -->
-    <p class="credit feature | text-step-min-1">© {{ credit }}</p>
+      <!-- image -->
+      {% eleventyImage image, alt or title, null, "eager", "feature" %}
+    {% endif %}
+    {%
+      if
+      credit
+    %}
+      <!-- credit -->
+      <p class="credit feature | text-step-min-1">© {{ credit }}</p>
     {% endif %}
 
     <p class="meta | cluster" style="--gutter: var(--space-xs-s)">
       <!-- date -->
-      {% set definedDate = date %} {% include "components/date.njk" %} {% if tags.length >
-      1 %}
-      <!-- tags -->
-      {% for tag in tags %} {% if tag != "posts" %}
-      <a class="button post-tag" href="/tags/{{ tag }}">
-        {{ tag }}
-      </a>
-      {% endif %} {% endfor %} {% endif %}
+      {% set definedDate = date %} {% include "components/date.njk" %}
+      {%
+        if tags.length >
+        1
+      %}
+        <!-- tags -->
+        {% for tag in tags %}{% if tag != "posts" %}
+          <a class="button post-tag" href="/tags/{{ tag }}"> {{ tag }} </a>
+        {% endif %}{% endfor %}
+      {% endif %}
     </p>
 
     {{ content | safe }}
diff --git a/src/pages/built-with.njk b/src/pages/built-with.njk
index 0f46ef8..0529ecf 100644
--- a/src/pages/built-with.njk
+++ b/src/pages/built-with.njk
@@ -9,9 +9,7 @@ grid:
 ---
 
 <p>
-  A list of sites based on / built with Eleventy Excellent.<br />
-
-  Add yours by submitting a
+  A list of sites based on / built with Eleventy Excellent. Add yours by submitting a
   <a
     href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request"
     rel="noopener"
diff --git a/src/pages/styleguide.njk b/src/pages/styleguide.njk
index 7d4ed46..1f34ebb 100644
--- a/src/pages/styleguide.njk
+++ b/src/pages/styleguide.njk
@@ -37,45 +37,45 @@ customGradients:
       <p>{{ designTokens.colors.description }}</p>
 
       <ul role="list">
-        {%- for color in designTokens.colors.items %}
-        <li>
-          <div style="background-color: var(--color-{{ color.name | slugify }}"></div>
+        {%- for color in designTokens.colors.items -%}
+          <li>
+            <div style="background-color: var(--color-{{ color.name | slugify }}"></div>
 
-          <p>
-            <code>var(--color-{{ color.name | slugify }})</code>
-          </p>
-        </li>
-        {%- endfor %}
+            <p>
+              <code>var(--color-{{ color.name | slugify }})</code>
+            </p>
+          </li>
+        {%- endfor -%}
       </ul>
 
       <h3 class="heading-line | mt-l-xl">Custom colors</h3>
       <p>in <code>variables.css</code>. Some only change for dark theme.</p>
 
       <ul role="list">
-        {%- for color in customColors %}
-        <li>
-          <div style="background-color: var({{ color.property }})"></div>
-          <p>
-            <code>{{ color.property }}</code>
-          </p>
-        </li>
-        {%- endfor %}
+        {%- for color in customColors -%}
+          <li>
+            <div style="background-color: var({{ color.property }})"></div>
+            <p>
+              <code>{{ color.property }}</code>
+            </p>
+          </li>
+        {%- endfor -%}
       </ul>
 
       <h3 class="heading-line | mt-l-xl">Gradients</h3>
 
       <ul role="list">
-        {%- for gradient in customGradients %}
-        <li>
-          <div style="background-image: var({{ gradient.property }})"></div>
+        {%- for gradient in customGradients -%}
+          <li>
+            <div style="background-image: var({{ gradient.property }})"></div>
 
-          <p>
-            <code>{{ gradient.property }}</code>
-            <br />
-            <!-- <code>{{ color.value }}</code> -->
-          </p>
-        </li>
-        {%- endfor %}
+            <p>
+              <code>{{ gradient.property }}</code>
+              <br />
+              <!-- <code>{{ color.value }}</code> -->
+            </p>
+          </li>
+        {%- endfor -%}
       </ul>
     </section>
   </div>
@@ -84,16 +84,16 @@ customGradients:
     <h2 class="heading-line">Fonts</h2>
 
     <ul class="fonts flow">
-      {%- for font in designTokens.fonts.items %}
-      <li class="font" style="font-family: var(--font-{{ font.name | slugify }})">
-        <h3 style="font-family: var(--font-{{ font.name | slugify }})">
-          {{ font.name }}
-        </h3>
-        <p>{{ font.description }}</p>
-        <p><strong>Font Families</strong>: {{ font.value | join(', ')}}</p>
-        <code>var(--font-{{ font.name | slugify }})</code>
-      </li>
-      {%- endfor %}
+      {%- for font in designTokens.fonts.items -%}
+        <li class="font" style="font-family: var(--font-{{ font.name | slugify }})">
+          <h3 style="font-family: var(--font-{{ font.name | slugify }})">
+            {{ font.name }}
+          </h3>
+          <p>{{ font.description }}</p>
+          <p><strong>Font Families</strong>: {{ font.value | join(', ') }}</p>
+          <code>var(--font-{{ font.name | slugify }})</code>
+        </li>
+      {%- endfor -%}
     </ul>
   </section>
 
@@ -107,22 +107,24 @@ customGradients:
       </p>
 
       <table class="sizes flow">
-        {%- for size in designTokens.sizes.items %}
-        <tr>
-          <th scope="row">
-            <h3>{{ size.name }}</h3>
-          </th>
-          <td>
-            <span class="flow">
-              <p>{{ size.min }}px to {{ size.max }}px</p>
-              <code>var(--size-{{ size.name | slugify }})</code>
-            </span>
-          </td>
-          <td class="sizes-example">
-            <p style="font-size:var(--size-{{ size.name | slugify }})">{{ size.name }}</p>
-          </td>
-        </tr>
-        {%- endfor %}
+        {%- for size in designTokens.sizes.items -%}
+          <tr>
+            <th scope="row">
+              <h3>{{ size.name }}</h3>
+            </th>
+            <td>
+              <span class="flow">
+                <p>{{ size.min }}px to {{ size.max }}px</p>
+                <code>var(--size-{{ size.name | slugify }})</code>
+              </span>
+            </td>
+            <td class="sizes-example">
+              <p style="font-size:var(--size-{{ size.name | slugify }})">
+                {{ size.name }}
+              </p>
+            </td>
+          </tr>
+        {%- endfor -%}
       </table>
     </section>
   </div>
@@ -137,27 +139,25 @@ customGradients:
     </p>
 
     <table class="spacing flow">
-      {%- for space in designTokens.spacing.items %}
-      <tr>
-        <th scope="row">
-          <h3>{{ space.name }}</h3>
-        </th>
-        <td>
-          <span class="flow">
-            <p>{{ space.min }}px to {{ space.max }}px</p>
-            <code>var(--space-{{ space.name | slugify }})</code>
-          </span>
-        </td>
-        <td>
-          <div
-            class="space"
-            style="height:var(--space-{{ space.name | slugify }}); width:var(--space-{{
-              space.name | slugify
-            }});"
-          ></div>
-        </td>
-      </tr>
-      {%- endfor %}
+      {%- for space in designTokens.spacing.items -%}
+        <tr>
+          <th scope="row">
+            <h3>{{ space.name }}</h3>
+          </th>
+          <td>
+            <span class="flow">
+              <p>{{ space.min }}px to {{ space.max }}px</p>
+              <code>var(--space-{{ space.name | slugify }})</code>
+            </span>
+          </td>
+          <td>
+            <div
+              class="space"
+              style="height:var(--space-{{ space.name | slugify }}); width:var(--space-{{ space.name | slugify }});"
+            ></div>
+          </td>
+        </tr>
+      {%- endfor -%}
     </table>
   </section>
 </article>