refactor(article): remove color tag & add custom category color (#75)

closes: https://github.com/CaiJimmy/hugo-theme-stack/issues/71

assets/ts/main.ts

@@ -22,20 +22,6 @@ let Stack = {
             new StackGallery(articleContent);
         }
 
-        /**
-         * Add color to tags
-         */
-        document.querySelectorAll('.color-tag').forEach(async (tag: HTMLLinkElement) => {
-            const imageURL = tag.getAttribute('data-image'),
-                key = tag.getAttribute('data-key'),
-                hash = tag.getAttribute('data-hash');
-
-            const colors = await getColor(key, hash, imageURL);
-
-            tag.style.color = colors.Vibrant.bodyTextColor;
-            tag.style.background = colors.Vibrant.hex;
-        })
-
         /**
          * Add linear gradient background to tile style article
          */

exampleSite/content/categories/Test/_index.md

@@ -3,4 +3,7 @@ title: "Test"
 description: "This is a example category"
 slug: "test"
 image: "hutomo-abrianto-l2jk-uxb1BY-unsplash.jpg"
+style:
+    background: "#2a9d8f"
+    color: "#fff"
 ---

layouts/partials/article/components/details.html

@@ -1,22 +1,10 @@
-{{ $image := partialCached "helper/image" (dict "Context" . "Type" "article") .RelPermalink "article" }}
-{{- $context := . -}}
 <div class="article-details">
     {{ if .Params.categories }}
     <header class="article-category">
         {{ range (.GetTerms "categories") }}
-            {{ if and $image.exists $image.resource }}
-                {{- $imageRaw := $image.resource | resources.Fingerprint "md5"  -}}
-                {{- $20x := $imageRaw.Fill "20x20 smart"  -}}
-                <a href="{{ .RelPermalink }}" 
-                    class="color-tag"
-                    data-image="{{ $20x.RelPermalink }}" 
-                    data-key="{{ $context.Slug }}" 
-                    data-hash="{{ $imageRaw.Data.Integrity }}">
+            <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
                 {{ .LinkTitle }}
             </a>
-            {{ else }}
-                <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
-            {{ end }}
         {{ end }}
     </header>
     {{ end }}