feat: Add button to distinguish category on lists

assets/styles/mix-twbs.scss

@@ -161,3 +161,14 @@ h1 {
 .card-link {
   white-space: nowrap;
 }
+
+.category-button {
+  position: absolute;
+  top: 1em;
+  right: 1em;
+  display: grid;
+}
+
+.card-title {
+  margin-right: 2.25em;
+}

layouts/_default/list.html

@@ -11,6 +11,9 @@
       {{ range .Pages }}
         <div class="col-xl-6 mb-4">
           <div class="card">
+            {{ partial "category-button" . }}
+
+
             <div class="card-body">
               {{/* Thumbnail images should be stored as 'thumbnail'.* in the page bundle, but
                 historically they might have been referenced as 'thumbnail' in the front
@@ -53,7 +56,7 @@
                 {{ .Summary }}
                 <strong
                   ><small
-                    ><a href="{{ $link }}">Read more &raquo;</a></small
+                    ><a href="{{ $link }}">Read&nbsp;more &raquo;</a></small
                   ></strong
                 >
               </p>

layouts/partials/category-button.html

@@ -0,0 +1,27 @@
+<div class="category-button">
+  {{ with .Param "categories" }}
+    {{ range $i, $category := . }}
+      {{ if eq $i 0 }}
+        {{ with $.Site.GetPage (printf "/%s/%s" "categories" $category) }}
+          {{ $iconDictionary := dict
+            "video" "fad fa-video"
+            "paper" "fad fa-book"
+            "poster" "fad fa-presentation"
+            "thesis" "fad fa-graduation-cap"
+            "presentation" "fad fa-podium"
+            "web" "fad fa-globe"
+          }}
+          {{ $categoryIcon := index $iconDictionary $category }}
+          <a
+            href="{{ .RelPermalink }}"
+            class="btn btn-dark btn-sm"
+            data-bs-toggle="tooltip"
+            title="{{ humanize $category }}"
+          >
+            <i class="{{ $categoryIcon | default "fad fa-tag" }} fa-fw"></i>
+          </a>
+        {{ end }}
+      {{ end }}
+    {{ end }}
+  {{ end }}
+</div>