diff --git a/assets/ts/color.ts b/assets/ts/color.ts index d46ef16..50581d1 100644 --- a/assets/ts/color.ts +++ b/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 { diff --git a/assets/ts/main.ts b/assets/ts/main.ts index 24acf7c..73f8daa 100644 --- a/assets/ts/main.ts +++ b/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, diff --git a/layouts/partials/article-list/tile.html b/layouts/partials/article-list/tile.html index 3905b3d..9a58d4b 100644 --- a/layouts/partials/article-list/tile.html +++ b/layouts/partials/article-list/tile.html @@ -5,7 +5,7 @@ {{- $thumbnail := $image.Fill .size -}}
+ loading="lazy" data-key="{{ .context.Slug }}" data-hash="{{ $image.Data.Integrity }}">
{{ end }} diff --git a/layouts/partials/article/components/details.html b/layouts/partials/article/components/details.html index 99c26f8..fcfba4b 100644 --- a/layouts/partials/article/components/details.html +++ b/layouts/partials/article/components/details.html @@ -9,7 +9,7 @@ {{- $image := partial "helper/image" $context | resources.Fingerprint "md5" -}} {{- $20x := $image.Fill "20x20 smart" -}} {{ . | humanize }} + data-image="{{ $20x.RelPermalink }}" data-key="{{ $context.Slug }}" data-hash="{{ $image.Data.Integrity }}">{{ . | humanize }} {{ else }} {{ . | humanize }} {{ end }}