make tag list modular, put on homepage

site/_includes/-taglist.njk

@@ -0,0 +1,7 @@
+<div style="--totalTags:{{ collections.categories | dictsort | length }}">
+  {%- for tag, data in collections.categories -%}
+    <a class="button tag" style="--tagIndex:{{ collections.categories[tag].id }}" href="/tags/{{ tag | slugify }}/">{{ tag }}
+      <span class="tagCount">{{ data.count }}</span>
+    </a>
+  {%- endfor -%}
+</div>

site/_includes/collection.njk

@@ -12,13 +12,7 @@ eleventyComputed:
   {% set tag = page.fileSlug %}
   {% if collections[tag] %}
     {% if tag === "posts" %}
-      <div style="--totalTags:{{ collections.categories | dictsort | length }}">
+      {% include "-taglist.njk" %}
-        {%- for tag, data in collections.categories -%}
-          <a class="button tag" style="--tagIndex:{{ collections.categories[tag].id }}" href="/tags/{{ tag | slugify }}/">{{ tag }}
-            <span class="tagCount">{{ data.count }}</span>
-          </a>
-        {%- endfor -%}
-      </div>
     {% endif %}
     {{ collectionList(tag) }}
   {% endif %}

site/_includes/css/site.css

@@ -665,7 +665,6 @@ button, a.button {
   background-color: var(--c-text-background);
   font-size: 1rem;
   padding: 0.5rem;
-  margin: 0 0.2em 0.2em 0;
   border-radius: 0.2rem;
   border: none;
   cursor: pointer;
@@ -679,7 +678,9 @@ button, a.button {
     0 0 1rem var(--c-accent);
   }
 }
-
+.button.tag {
+  margin: 0 0.2em 0.2em 0;
+}
 .tag {
   display: inline-flex;
   &::before {

site/_includes/home.njk

@@ -7,6 +7,7 @@ layout: "base.njk"
   {%- for name, collection in collections -%}
     {%- if name in ["posts"] -%}
       <h2>{{name | capitalize }}</h2>
+      {% include "-taglist.njk" %}
       {{ collectionList(name, limit=5) }}
     {%- endif -%}
   {%- endfor -%}