Implemented category badges in secondary color.

assets/css/compiled/main.css

@@ -1666,9 +1666,15 @@
   .border-primary-500 {
     border-color: rgba(var(--color-primary-500), 1);
   }
+  .border-secondary-400 {
+    border-color: rgba(var(--color-secondary-400), 1);
+  }
   .border-secondary-500 {
     border-color: rgba(var(--color-secondary-500), 1);
   }
+  .border-secondary-600 {
+    border-color: rgba(var(--color-secondary-600), 1);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -2181,6 +2187,12 @@
   .text-primary-800 {
     color: rgba(var(--color-primary-800), 1);
   }
+  .text-secondary-400 {
+    color: rgba(var(--color-secondary-400), 1);
+  }
+  .text-secondary-700 {
+    color: rgba(var(--color-secondary-700), 1);
+  }
   .text-transparent {
     color: transparent;
   }
@@ -3263,6 +3275,16 @@
       border-color: rgba(var(--color-primary-600), 1);
     }
   }
+  .dark\:border-secondary-600 {
+    &:is(.dark *) {
+      border-color: rgba(var(--color-secondary-600), 1);
+    }
+  }
+  .dark\:border-secondary-800 {
+    &:is(.dark *) {
+      border-color: rgba(var(--color-secondary-800), 1);
+    }
+  }
   .dark\:border-white\/10 {
     &:is(.dark *) {
       border-color: color-mix(in oklab, #fff 10%, transparent);
@@ -3492,6 +3514,16 @@
       color: rgba(var(--color-primary-400), 1);
     }
   }
+  .dark\:text-secondary-200 {
+    &:is(.dark *) {
+      color: rgba(var(--color-secondary-200), 1);
+    }
+  }
+  .dark\:text-secondary-400 {
+    &:is(.dark *) {
+      color: rgba(var(--color-secondary-400), 1);
+    }
+  }
   .dark\:text-white {
     &:is(.dark *) {
       color: #fff;

config/_default/params.toml

@@ -88,7 +88,9 @@ forgejoDefaultServer = "https://v11.next.forgejo.org"
   # showRelatedContent = false
   # relatedContentLimit = 3
   showTaxonomies = false # use showTaxonomies OR showCategoryOnly, not both
-  showCategoryOnly = false # use showTaxonomies OR showCategoryOnly, not both
+  showCategories = true # These will show if showTaxonomies is true.
+  showTags = true # These will show if showTaxonomies is true.
+  showCategoriesInSecondaryColor = false # This will change the color of category badges, so the user can better distinguish between the two. Only if showTaxonomies is true.
   showAuthorsBadges = false
   showWordCount = true
   # sharingLinks = [ "linkedin", "twitter", "bluesky", "mastodon", "reddit", "pinterest", "facebook", "email", "whatsapp", "telegram", "line"]

layouts/partials/article-meta/basic.html

@@ -98,28 +98,29 @@
   {{ if .Params.showTaxonomies | default (.Site.Params.article.showTaxonomies | default false) }}
     <div class="flex flex-row flex-wrap items-center">
       {{ range $taxonomy, $terms := .Site.Taxonomies }}
-        {{ if and (not (eq $taxonomy "authors")) (not (eq $taxonomy "series")) }}
+        {{ if (gt (len ($context.GetTerms $taxonomy)) 0) }}
-          {{ if (gt (len ($context.GetTerms $taxonomy)) 0) }}
+          {{ range $context.GetTerms $taxonomy }}
-            {{ range $context.GetTerms $taxonomy }}
+            {{ if .Params.showCategories | default (.Site.Params.article.showCategories | default true) }}
-              <a class="relative mt-[0.5rem] me-2" href="{{ .RelPermalink }}">
+              {{ if (eq $taxonomy "categories") }}
-                {{ partial "badge.html" .LinkTitle }}
+                <a class="relative mt-[0.5rem] me-2" href="{{ .RelPermalink }}">
-              </a>
+                  {{ if .Params.showCategoriesInSecondaryColor | default (.Site.Params.article.showCategoriesInSecondaryColor | default false) }}
+                    {{ partial "badge-secondary.html" .LinkTitle }}
+                  {{ else }}
+                    {{ partial "badge.html" .LinkTitle }}
+                  {{ end }}
+                </a>
+              {{ end }}
+            {{ end }}
+            {{ if .Params.showTags | default (.Site.Params.article.showTags | default true) }}
+              {{ if (eq $taxonomy "tags") }}
+                <a class="relative mt-[0.5rem] me-2" href="{{ .RelPermalink }}">
+                  {{ partial "badge.html" .LinkTitle }}
+                </a>
+              {{ end }}
             {{ end }}
           {{ end }}
         {{ end }}
       {{ end }}
     </div>
   {{ end }}
-
-  {{/* Output only category */}}
-  {{ if .Params.showCategoryOnly | default (.Site.Params.article.showCategoryOnly | default false) }}
-    <div class="flex flex-row flex-wrap items-center">
-      {{ range (.GetTerms "categories") }}
-        <a class="relative mt-[0.5rem] me-2" href="{{ .RelPermalink }}">
-          {{ partial "badge.html" .LinkTitle }}
-        </a>
-      {{ end }}
-    </div>
-  {{ end }}
-
 {{ end }}

layouts/partials/badge-secondary.html

@@ -0,0 +1,6 @@
+<span class="flex cursor-pointer">
+  <span
+    class="rounded-md border border-secondary-400 px-1 py-[1px] text-xs font-normal text-secondary-700 dark:border-secondary-600 dark:text-secondary-400">
+    {{ . }}
+  </span>
+</span>