From e606dca404d5bf1d8e29555b7e89b553b0508e0f Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Tue, 22 Dec 2020 19:43:14 +0100
Subject: [PATCH] refactor(article): remove color tag & add custom category
 color (#75)

closes: https://github.com/CaiJimmy/hugo-theme-stack/issues/71
---
 assets/ts/main.ts                              | 14 --------------
 exampleSite/content/categories/Test/_index.md  |  3 +++
 .../partials/article/components/details.html   | 18 +++---------------
 3 files changed, 6 insertions(+), 29 deletions(-)

diff --git a/assets/ts/main.ts b/assets/ts/main.ts
index e48f4d2..4d07631 100644
--- a/assets/ts/main.ts
+++ b/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
          */
diff --git a/exampleSite/content/categories/Test/_index.md b/exampleSite/content/categories/Test/_index.md
index 547b3b7..0b3cfa9 100644
--- a/exampleSite/content/categories/Test/_index.md
+++ b/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"
 ---
\ No newline at end of file
diff --git a/layouts/partials/article/components/details.html b/layouts/partials/article/components/details.html
index 7650704..5c5397b 100644
--- a/layouts/partials/article/components/details.html
+++ b/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 }}">
-                    {{ .LinkTitle }}
-                </a>
-            {{ else }}
-                <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
-            {{ end }}
+            <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
+                {{ .LinkTitle }}
+            </a>
         {{ end }}
     </header>
     {{ end }}