feat: dynamically generate background color for category links (#1225)

* chore: add +x to run.sh

* feat: dynamically generate background color for category links using hash

* feat: allow category styles to be overridden by term parameters

* refactor: remove default tag background and color variables

assets/scss/partials/article.scss

@@ -33,15 +33,6 @@
                 }
             }
         }
-
-        @for $i from 1 through length($defaultTagBackgrounds) {
-            &:nth-child(#{length($defaultTagBackgrounds)}n + #{$i}) {
-                .article-category a {
-                    background: nth($defaultTagBackgrounds, $i);
-                    color: nth($defaultTagColors, $i);
-                }
-            }
-        }
     }
 }
 

assets/scss/variables.scss

@@ -1,6 +1,3 @@
-$defaultTagBackgrounds: #8ea885, #df7988, #0177b8, #ffb900, #6b69d6;
-$defaultTagColors: #fff, #fff, #fff, #fff, #fff;
-
 /*
 *   Global style
 */

layouts/partials/article/components/details.html

@@ -2,7 +2,10 @@
     {{ if .Params.categories }}
     <header class="article-category">
         {{ range (.GetTerms "categories") }}
-            <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
+            {{ $color := partial "helper/color-from-str" .LinkTitle }}
+            {{ $BackgroundColor := default $color.BackgroundColor .Params.style.background }}
+            {{ $TextColor := default $color.TextColor .Params.style.color }}
+            <a href="{{ .RelPermalink }}" style="background-color: {{ $BackgroundColor | safeCSS }}; color: {{ $TextColor | safeCSS }};">
                 {{ .LinkTitle }}
             </a>
         {{ end }}

layouts/partials/helper/color-from-str.html

@@ -0,0 +1,13 @@
+{{/* 
+    This helper is used to generate a background color and text color from a string
+    Used to generate deterministic colors for tags, categories, etc.
+*/}}
+
+{{- $str := . -}}
+{{- $hash := hash.FNV32a $str -}}
+{{- $h := mod $hash 360 -}}
+
+{{- $backgroundColor := printf "hsl(%d, 60%%, 84%%)" $h -}}
+{{- $textColor := printf "hsl(%d, 60%%, 15%%)" $h -}}
+
+{{- return dict "BackgroundColor" $backgroundColor "TextColor" $textColor "Hue" $h -}}