refactor(ts/color): improve code style and change name of some variables for more clarity

assets/ts/color.ts

@@ -1,5 +1,5 @@
 interface colorScheme {
-    key: string,                        /// Regenerate color scheme when the image is changed
+    hash: string,                        /// Regenerate color scheme when the image hash is changed
     DarkMuted: {
         hex: string,
         rgb: Number[],
@@ -23,12 +23,22 @@ if (localStorage.hasOwnProperty('StackColorsCache')) {
     }
 }
 
-async function getColor(id: string, key: string, imageURL: string) {
-    if (!id || !colorsCache.hasOwnProperty(id) || colorsCache[id].key !== key) {
+async function getColor(key: string, hash: string, imageURL: string) {
+    if (!key) {
+        /**
+         * If no key is provided, do not cache the result
+         */
+        return await Vibrant.from(imageURL).getPalette();
+    }
+
+    if (!colorsCache.hasOwnProperty(key) || colorsCache[key].hash !== hash) {
+        /**
+         * If key is provided, but not found in cache, or the hash mismatches => Regenerate color scheme
+         */
         const palette = await Vibrant.from(imageURL).getPalette();
 
-        colorsCache[id] = {
-            key: key,
+        colorsCache[key] = {
+            hash: hash,
             Vibrant: {
                 hex: palette.Vibrant.hex,
                 rgb: palette.Vibrant.rgb,
@@ -41,10 +51,11 @@ async function getColor(id: string, key: string, imageURL: string) {
             }
         }
 
+        /* Save the result in localStorage */
         localStorage.setItem('StackColorsCache', JSON.stringify(colorsCache));
     }
 
-    return colorsCache[id];
+    return colorsCache[key];
 }
 
 export {

assets/ts/main.ts

@@ -26,10 +26,10 @@ let Stack = {
          */
         document.querySelectorAll('.color-tag').forEach(async (tag: HTMLLinkElement) => {
             const imageURL = tag.getAttribute('data-image'),
-                id = tag.getAttribute('data-id'),
-                key = tag.getAttribute('data-key');
+                key = tag.getAttribute('data-key'),
+                hash = tag.getAttribute('data-hash');
 
-            const colors = await getColor(id, key, imageURL);
+            const colors = await getColor(key, hash, imageURL);
 
             tag.style.color = colors.Vibrant.bodyTextColor;
             tag.style.background = colors.Vibrant.hex;
@@ -49,11 +49,11 @@ let Stack = {
                     articles.forEach(async articles => {
                         const image = articles.querySelector('img'),
                             imageURL = image.src,
-                            id = image.getAttribute('data-id'),
                             key = image.getAttribute('data-key'),
+                            hash = image.getAttribute('data-hash'),
                             articleDetails: HTMLDivElement = articles.querySelector('.article-details');
 
-                        const colors = await getColor(id, key, imageURL);
+                        const colors = await getColor(key, hash, imageURL);
 
                         articleDetails.style.background = `
                         linear-gradient(0deg, 

layouts/partials/article-list/tile.html

@@ -5,7 +5,7 @@
         {{- $thumbnail :=  $image.Fill .size -}}
         <div class="article-image">
             <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}"
-                loading="lazy" data-id="{{ .context.Slug }}" data-key="{{ $image.Data.Integrity }}">
+                loading="lazy" data-key="{{ .context.Slug }}" data-hash="{{ $image.Data.Integrity }}">
         </div>
         {{ end }}
 

layouts/partials/article/components/details.html

@@ -9,7 +9,7 @@
                 {{- $image := partial "helper/image" $context | resources.Fingerprint "md5"  -}}
                 {{- $20x := $image.Fill "20x20 smart"  -}}
                 <a href="/categories/{{ . | urlize }}" class="color-tag"
-                    data-image="{{ $20x.RelPermalink }}" data-id="{{ $context.Slug }}" data-key="{{ $image.Data.Integrity }}">{{ . | humanize }}</a>
+                    data-image="{{ $20x.RelPermalink }}" data-key="{{ $context.Slug }}" data-hash="{{ $image.Data.Integrity }}">{{ . | humanize }}</a>
             {{ else }}
                 <a href="/categories/{{ . | urlize }}">{{ . | humanize }}</a>
             {{ end }}