refactor: remove Vibrant.js (#1236)

* refactor: migrate image color extraction from client-side JavaScript to server-side Hugo.

* fix: check if image exists before accessing .Resource

assets/ts/color.ts

@@ -1,63 +0,0 @@
-interface colorScheme {
-    hash: string,                        /// Regenerate color scheme when the image hash is changed
-    DarkMuted: {
-        hex: string,
-        rgb: Number[],
-        bodyTextColor: string
-    },
-    Vibrant: {
-        hex: string,
-        rgb: Number[],
-        bodyTextColor: string
-    }
-}
-
-let colorsCache: { [key: string]: colorScheme } = {};
-
-if (localStorage.hasOwnProperty('StackColorsCache')) {
-    try {
-        colorsCache = JSON.parse(localStorage.getItem('StackColorsCache'));
-    }
-    catch (e) {
-        colorsCache = {};
-    }
-}
-
-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[key] = {
-            hash: hash,
-            Vibrant: {
-                hex: palette.Vibrant.hex,
-                rgb: palette.Vibrant.rgb,
-                bodyTextColor: palette.Vibrant.bodyTextColor
-            },
-            DarkMuted: {
-                hex: palette.DarkMuted.hex,
-                rgb: palette.DarkMuted.rgb,
-                bodyTextColor: palette.DarkMuted.bodyTextColor
-            }
-        }
-
-        /* Save the result in localStorage */
-        localStorage.setItem('StackColorsCache', JSON.stringify(colorsCache));
-    }
-
-    return colorsCache[key];
-}
-
-export {
-    getColor
-}

assets/ts/main.ts

@@ -5,7 +5,6 @@
 *   @website: https://jimmycai.com
 *   @link: https://github.com/CaiJimmy/hugo-theme-stack
 */
-import { getColor } from './color';
 import menu from './menu';
 import createElement from './createElement';
 import StackColorScheme from './colorScheme';
@@ -25,38 +24,6 @@ let Stack = {
             setupScrollspy();
         }
 
-        /**
-         * Add linear gradient background to tile style article
-         */
-        const articleTile = document.querySelector('.article-list--tile');
-        if (articleTile) {
-            let observer = new IntersectionObserver(async (entries, observer) => {
-                entries.forEach(entry => {
-                    if (!entry.isIntersecting) return;
-                    observer.unobserve(entry.target);
-
-                    const articles = entry.target.querySelectorAll('article.has-image');
-                    articles.forEach(async articles => {
-                        const image = articles.querySelector('img'),
-                            imageURL = image.src,
-                            key = image.getAttribute('data-key'),
-                            hash = image.getAttribute('data-hash'),
-                            articleDetails: HTMLDivElement = articles.querySelector('.article-details');
-
-                        const colors = await getColor(key, hash, imageURL);
-
-                        articleDetails.style.background = `
-                        linear-gradient(0deg, 
-                            rgba(${colors.DarkMuted.rgb[0]}, ${colors.DarkMuted.rgb[1]}, ${colors.DarkMuted.rgb[2]}, 0.5) 0%, 
-                            rgba(${colors.Vibrant.rgb[0]}, ${colors.Vibrant.rgb[1]}, ${colors.Vibrant.rgb[2]}, 0.75) 100%)`;
-                    })
-                })
-            });
-
-            observer.observe(articleTile)
-        }
-
-
         /**
          * Add copy button to code block
         */