✨ Add taxonomies on article and list pages

CHANGELOG.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Site search powered by Fuse.js
 - Automatic Markdown image resizing and srcset generation
 - Performance and Accessibility improvements to achieve perfect Lighthouse scores
+- Taxonomies on article and list pages
 - Author `headline` parameter
 - Skip to content links
 

assets/css/compiled/main.css

@@ -1997,6 +1997,11 @@ body a, body button {
   margin-bottom: 0.75rem;
 }
 
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -2279,14 +2284,14 @@ body a, body button {
   scroll-behavior: smooth;
 }
 
-.rounded-full {
-  border-radius: 9999px;
-}
-
 .rounded-md {
   border-radius: 0.375rem;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -2317,6 +2322,11 @@ body a, body button {
   border-color: rgba(var(--color-neutral-400), var(--tw-border-opacity));
 }
 
+.border-neutral-200 {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity));
+}
+
 .border-neutral-300 {
   --tw-border-opacity: 1;
   border-color: rgba(var(--color-neutral-300), var(--tw-border-opacity));
@@ -2327,11 +2337,6 @@ body a, body button {
   border-color: rgba(var(--color-primary-400), var(--tw-border-opacity));
 }
 
-.border-neutral-200 {
-  --tw-border-opacity: 1;
-  border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity));
-}
-
 .border-neutral-700 {
   --tw-border-opacity: 1;
   border-color: rgba(var(--color-neutral-700), var(--tw-border-opacity));
@@ -2640,6 +2645,11 @@ body a, body button {
   margin-top: 2rem;
 }
 
+.hover\:border-primary-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--color-primary-300), var(--tw-border-opacity));
+}
+
 .hover\:border-primary-400:hover {
   --tw-border-opacity: 1;
   border-color: rgba(var(--color-primary-400), var(--tw-border-opacity));
@@ -2999,6 +3009,11 @@ body a, body button {
   color: rgba(var(--color-neutral-800), var(--tw-text-opacity));
 }
 
+.dark .dark\:hover\:border-primary-600:hover {
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--color-primary-600), var(--tw-border-opacity));
+}
+
 .dark .dark\:hover\:bg-primary-900:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity));

config/_default/params.toml

@@ -29,6 +29,7 @@ enableSearch = false
   showHeadingAnchors = true
   showPagination = true
   showReadingTime = true
+  showTaxonomies = false
   showWordCount = false
   # sharingLinks = ["facebook", "twitter", "pinterest", "reddit", "linkedin", "email"]
 

exampleSite/config/_default/params.toml

@@ -29,6 +29,7 @@ mainSections = ["samples"]
   showHeadingAnchors = true
   showPagination = true
   showReadingTime = true
+  showTaxonomies = false
   showWordCount = false
   # sharingLinks = ["facebook", "twitter", "pinterest", "reddit", "linkedin", "email"]
 

layouts/partials/article-meta.html

@@ -40,4 +40,21 @@
       <span class="pl-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</span>
     {{ end }}
   </div>
+
+  {{/* Output taxonomies */}}
+  {{ if .Params.showTaxonomies | default (.Site.Params.article.showTaxonomies | default false) }}
+    <div class="my-1 text-xs text-neutral-500 dark:text-neutral-400 ">
+      {{ range $taxonomy, $terms := .Site.Taxonomies }}
+        {{ if (gt (len ($context.GetTerms $taxonomy)) 0) }}
+          {{ range $context.GetTerms $taxonomy }}
+            <a
+              href="{{ .RelPermalink }}"
+              class="px-1 py-[1px] border rounded-md border-neutral-200 dark:border-neutral-600 hover:border-primary-300 hover:text-primary-700 dark:hover:border-primary-600 dark:hover:text-primary-400"
+              >{{ .LinkTitle }}</a
+            >
+          {{ end }}
+        {{ end }}
+      {{ end }}
+    </div>
+  {{ end }}
 {{ end }}