KureShisen/Hugo-theme-stack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: avoid regenerate color scheme when image URL is changed

Browse Source 
Use MD5 as key to identify images, and .Slug as id
This commit is contained in:
Jimmy Cai 2020-08-28 12:11:02 +02:00
parent ced9823d99
commit 32732d4bf1
5 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
assets/ts/color.ts
View File

@ -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) {
if (!colorsCache.hasOwnProperty(imageURL)) {
async function getColor(id: string, key: string, imageURL: string) {
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 {

10
assets/ts/main.ts
View File

@ -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,

4
layouts/partials/article-list/default.html
View File

@ -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 }}

5
layouts/partials/article-list/tile.html
View File

@ -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 }}

15
layouts/partials/article/components/header.html
View File

@ -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 }}
{{ if $.Params.image }}
{{ range $categories }}
{{ 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 }}