Merge pull request #2852 from MaikelChan/badges

✨ Implemented category badges in secondary color and better granularity for showing categories or tags

Author: nunocoracao

assets/css/compiled/main.css

@@ -1669,9 +1669,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;
   }
@@ -2184,6 +2190,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;
   }
@@ -3271,6 +3283,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);
@@ -3500,6 +3522,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

@@ -87,8 +87,10 @@ forgejoDefaultServer = "https://v11.next.forgejo.org"
   showTableOfContents = false
   # showRelatedContent = false
   # relatedContentLimit = 3
-  showTaxonomies = false # use showTaxonomies OR showCategoryOnly, not both
-  showCategoryOnly = false # use showTaxonomies OR showCategoryOnly, not both
+  showTaxonomies = false # Enable the display of taxonomies for the related article.
+  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"]

exampleSite/content/docs/configuration/index.md

@@ -261,7 +261,9 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `article.showRelatedContent` | `false` | Display related content for each post. Might required additional configuration to your `hugo.toml`. Please check the theme `hugo.toml` if you want to enable this feature and copy all the relevant _related_ entries. Also check [Hugo's docs](https://gohugo.io/content-management/related/) on related content. |
 | `article.relatedContentLimit` | `3` | Limit of related articles to display if `showRelatedContent` is turned on. |
 | `article.showTaxonomies` | `false` | Whether or not all the taxonomies related to this article are displayed. |
-| `article.showCategoryOnly` | `false` | Whether or not the "category" taxonomy is displayed. `showTaxonomies` should be `false` when this param is used, otherwise duplicates will appear. |
+| `article.showCategories` | `true` | Whether or not the `category` taxonomies are displayed. Requires `showTaxonomies` to be `true`. |
+| `article.showTags` | `true` | Whether or not the `tag` taxonomies are displayed. Requires `showTaxonomies` to be `true`. |
+| `article.showCategoriesInSecondaryColor` | `false` | This will make the `category` taxonomy badges to show in a secondary color, so the user can better distinguish between categories and tags. Requires `showTaxonomies` to be `true`. |
 | `article.showAuthorsBadges` | `false` | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature. |
 | `article.showWordCount` | `false` | Whether or not article word counts are displayed. |
 | `article.showComments` | `false` | Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer. |

layouts/partials/article-meta/basic.html

@@ -98,28 +98,26 @@
   {{ 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) }}
-            {{ range $context.GetTerms $taxonomy }}
-              <a class="relative mt-[0.5rem] me-2" href="{{ .RelPermalink }}">
-                {{ partial "badge.html" .LinkTitle }}
-              </a>
+        {{ if (gt (len ($context.GetTerms $taxonomy)) 0) }}
+          {{ range $context.GetTerms $taxonomy }}
+            {{ if .Params.showCategories | default (.Site.Params.article.showCategories | default true) }}
+              {{ if (eq $taxonomy "categories") }}
+                <a class="relative mt-[0.5rem] me-2" href="{{ .RelPermalink }}">
+                  {{ $useSecondaryColor := .Params.showCategoriesInSecondaryColor | default (.Site.Params.article.showCategoriesInSecondaryColor | default false) }}
+                  {{ partial "badge.html" (dict "linkTitle" .LinkTitle "useSecondaryColor" $useSecondaryColor) }}
+                </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.html

@@ -1,6 +1,17 @@
 <span class="flex cursor-pointer">
-  <span
-    class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
-    {{ . }}
+  {{ $linkTitle := . }}
+  {{ $useSecondaryColor := false }}
+  {{ if (reflect.IsMap . ) }}
+    {{ $linkTitle = .linkTitle }}
+    {{ $useSecondaryColor = cond (not .useSecondaryColor) false .useSecondaryColor }}
+  {{ end }}
+  {{ if $useSecondaryColor }}
+    <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">
+  {{ else }}
+    <span
+      class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
+  {{ end }}
+    {{ $linkTitle }}
   </span>
 </span>