feat: avoid regenerate color scheme when image URL is changed

Use MD5 as key to identify images, and .Slug as id

assets/ts/color.ts

@@ -1,4 +1,5 @@
 interface colorScheme {
+    key: string,                        /// Regenerate color scheme when the image is changed
     DarkMuted: {
         hex: string,
         rgb: Number[],
@@ -13,20 +14,21 @@ interface colorScheme {
 
 let colorsCache: { [key: string]: colorScheme } = {};
 
-if (localStorage.hasOwnProperty('colorsCache')) {
+if (localStorage.hasOwnProperty('StackColorsCache')) {
     try {
-        colorsCache = JSON.parse(localStorage.getItem('colorsCache'));
+        colorsCache = JSON.parse(localStorage.getItem('StackColorsCache'));
     }
     catch (e) {
         colorsCache = {};
     }
 }
 
-async function getColor(imageURL: string) {
+async function getColor(id: string, key: string, imageURL: string) {
-    if (!colorsCache.hasOwnProperty(imageURL)) {
+    if (!id || !colorsCache.hasOwnProperty(id) || colorsCache[id].key !== key) {
         const palette = await Vibrant.from(imageURL).getPalette();
 
-        colorsCache[imageURL] = {
+        colorsCache[id] = {
+            key: key,
             Vibrant: {
                 hex: palette.Vibrant.hex,
                 rgb: palette.Vibrant.rgb,
@@ -39,9 +41,10 @@ async function getColor(imageURL: string) {
             }
         }
 
-        localStorage.setItem('colorsCache', JSON.stringify(colorsCache));
+        localStorage.setItem('StackColorsCache', JSON.stringify(colorsCache));
     }
-    return colorsCache[imageURL];
+
+    return colorsCache[id];
 }
 
 export {

assets/ts/main.ts

@@ -25,9 +25,11 @@ let Stack = {
          * Add color to tags
          */
         document.querySelectorAll('.color-tag').forEach(async (tag: HTMLLinkElement) => {
-            const imageURL = tag.getAttribute('data-image');
+            const imageURL = tag.getAttribute('data-image'),
+                id = tag.getAttribute('data-id'),
+                key = tag.getAttribute('data-key');
 
-            const colors = await getColor(imageURL);
+            const colors = await getColor(id, key, imageURL);
 
             tag.style.color = colors.Vibrant.bodyTextColor;
             tag.style.background = colors.Vibrant.hex;
@@ -47,9 +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'),
                             articleDetails: HTMLDivElement = articles.querySelector('.article-details');
 
-                        const colors = await getColor(imageURL);
+                        const colors = await getColor(id, key, imageURL);
 
                         articleDetails.style.background = `
                         linear-gradient(0deg, 

layouts/partials/article-list/default.html

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

layouts/partials/article-list/tile.html

@@ -1,10 +1,11 @@
 <article class="{{ if .context.Params.image }}has-image{{ end }}">
     <a href="{{ .context.Permalink }}">
         {{ if .context.Params.image }}
-        {{- $thumbnail := (partial "helper/image" (.context) ).Fill .size -}}
+        {{- $image := partial "helper/image" .context | resources.Fingerprint "md5"  -}}
+        {{- $thumbnail :=  $image.Fill .size -}}
         <div class="article-image">
             <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}"
-                loading="lazy">
+                loading="lazy" data-id="{{ .context.Slug }}" data-key="{{ $image.Data.Integrity }}">
         </div>
         {{ end }}
 

layouts/partials/article/components/header.html

@@ -5,9 +5,6 @@
     {{- $tablet := $image.Resize "1024x" -}}
     {{- $desktop := $image.Resize "2000x" -}}
 
-    {{- $20x := $image.Fill "20x20 smart"  -}}
-    {{- .Scratch.Set "20x" $20x  -}}
-
     <div class="article-image">
         <img srcset="{{ $tablet.RelPermalink }} 1024w, {{ $desktop.RelPermalink }} 2000w"
             src="{{ $desktop.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}"
@@ -16,13 +13,17 @@
     </div>
     {{ end }}
 
+    {{ $i := .Params.image }}
+    {{ $context := . }}
     <div class="article-details">
-        {{ with $category := .Params.categories }}
+        {{ with $categories := .Params.categories }}
         <header class="article-category">
-            {{ range $category }}
+            {{ range $categories }}
-                {{ if $.Params.image }}
+                {{ if $i }}
+                    {{- $image := partial "helper/image" $context | resources.Fingerprint "md5"  -}}
+                    {{- $20x := $image.Fill "20x20 smart"  -}}
                     <a href="/categories/{{ . | urlize }}" class="color-tag"
-                        data-image="{{ ($.Scratch.Get "20x").RelPermalink }}">{{ . | humanize }}</a>
+                        data-image="{{ $20x.RelPermalink }}" data-id="{{ $context.Slug }}" data-key="{{ $image.Data.Integrity }}">{{ . | humanize }}</a>
                 {{ else }}
                     <a href="/categories/{{ . | urlize }}">{{ . | humanize }}</a>
                 {{ end }}