hexo-theme-solitude 3.0.20 → 4.0.0

package/source/js/core/preloader.js

@@ -0,0 +1,34 @@
+export const initPreloader = (api) => {
+  if (document.documentElement.dataset.solitudePreloader === "true") return;
+  document.documentElement.dataset.solitudePreloader = "true";
+
+  let loaded = false;
+  let fallbackTimer;
+  const loadingBox = () => document.getElementById("loading-box");
+
+  const sync = () => {
+    const body = document.getElementById("body");
+    if (body) body.classList.toggle("pace-done", loaded);
+  };
+  const end = () => {
+    if (loaded) return;
+    loadingBox()?.classList.add("loaded");
+    loaded = true;
+    clearTimeout(fallbackTimer);
+    sync();
+  };
+  const start = () => {
+    loadingBox()?.classList.remove("loaded");
+    loaded = false;
+    clearTimeout(fallbackTimer);
+    fallbackTimer = setTimeout(end, 5000);
+    sync();
+  };
+
+  api.endLoading = end;
+  window.addEventListener("load", end, { once: true });
+  window.addEventListener("pjax:send", start);
+  document.addEventListener("pjax:complete", end);
+  fallbackTimer = setTimeout(end, 5000);
+  if (document.readyState === "complete") end();
+};

package/source/js/core/resources.js

@@ -0,0 +1,65 @@
+const scriptRequests = new Map();
+const styleRequests = new Map();
+
+const loadElement = (cache, selector, create, url) => {
+  const absoluteUrl = new URL(url, document.baseURI).href;
+  if (cache.has(absoluteUrl)) return cache.get(absoluteUrl);
+
+  const existing = [...document.querySelectorAll(selector)].find(
+    (element) => element.href === absoluteUrl || element.src === absoluteUrl
+  );
+  if (existing) {
+    const resolved = Promise.resolve(existing);
+    cache.set(absoluteUrl, resolved);
+    return resolved;
+  }
+
+  const request = new Promise((resolve, reject) => {
+    const element = existing || create(absoluteUrl);
+    const complete = () => {
+      element.dataset.loaded = "true";
+      resolve(element);
+    };
+    const fail = () => {
+      cache.delete(absoluteUrl);
+      reject(new Error(`Unable to load ${absoluteUrl}`));
+    };
+
+    element.addEventListener("load", complete, { once: true });
+    element.addEventListener("error", fail, { once: true });
+    if (!existing) document.head.appendChild(element);
+  });
+
+  cache.set(absoluteUrl, request);
+  return request;
+};
+
+export const loadScript = (url, options = {}) =>
+  loadElement(
+    scriptRequests,
+    "script",
+    (src) => {
+      const script = document.createElement("script");
+      script.src = src;
+      script.async = options.async ?? true;
+      Object.entries(options.attributes || {}).forEach(([key, value]) =>
+        script.setAttribute(key, value)
+      );
+      return script;
+    },
+    url
+  );
+
+export const loadStyle = (url, options = {}) =>
+  loadElement(
+    styleRequests,
+    "link",
+    (href) => {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = href;
+      if (options.id) link.id = options.id;
+      return link;
+    },
+    url
+  );

package/source/js/covercolor/api.js

@@ -1,103 +1,13 @@
-const coverColor = (music = false) => {
-    if (music) {
-        var coverPath = document.querySelector("#nav-music .aplayer-pic").style.backgroundImage;
-        const coverPathMatch = /url\("([^"]+)"\)/.exec(coverPath);
-        coverPath = coverPathMatch ? coverPathMatch[1] : '';
-        if (coverPath) {
-            handleApiColor(coverPath,music);
-        }
-    }
-    else {
-        const pageColor = PAGE_CONFIG.color;
-        if (pageColor) {
-            setThemeColors(pageColor);
-            return;
-        }
-        
-        const path = document.getElementById("post-cover")?.src;
-        if (path) {
-            handleApiColor(path);
-        } else {
-            setDefaultThemeColors();
-        }
-    }
-}
-
-function handleApiColor(path, music = false) {
-    const cacheGroup = JSON.parse(localStorage.getItem('Solitude')) || {};
-    if (cacheGroup.postcolor?.[path]) {
-        setThemeColors(cacheGroup.postcolor[path].value);
-    } else {
-        img2color(path);
-    }
-    if (music) {
-        img2color(path, music);
-    }
-}
-
-function setMusicColor(value) {
-    if (!value) return setDefaultThemeColors();
-    const item = document.querySelector("#nav-music")
-    item.style.setProperty('--efu-music', value);
-}
-
-function img2color(src, music = false) {
-    fetch(`${coverColorConfig.api}${encodeURIComponent(src)}`)
-        .then(response => {
-            if (!response.ok) throw new Error('Network response was not ok');
-            return response.json();
-        })
-        .then(data => {
-            if(music) {
-                setMusicColor(data.RGB);
-            }
-            else {
-                setThemeColors(data.RGB);
-                cacheColor(src, data.RGB);
-            }
-        })
-        .catch(error => console.error('Error fetching color:', error));
-}
-
-function setThemeColors(value) {
-    if (value) {
-        const [r, g, b] = value.match(/\w\w/g).map(x => parseInt(x, 16));
-        document.documentElement.style.setProperty('--efu-main', value);
-        document.documentElement.style.setProperty('--efu-main-op', `${value}23`);
-        document.documentElement.style.setProperty('--efu-main-op-deep', `${value}dd`);
-        document.documentElement.style.setProperty('--efu-main-none', `${value}00`);
-        adjustBrightness(r, g, b);
-        document.getElementById("coverdiv").classList.add("loaded");
-        initThemeColor();
-    } else {
-        setDefaultThemeColors();
-    }
-}
-
-function setDefaultThemeColors() {
-    document.documentElement.style.setProperty('--efu-main', 'var(--efu-theme)');
-    document.documentElement.style.setProperty('--efu-main-op', 'var(--efu-theme-op)');
-    document.documentElement.style.setProperty('--efu-main-op-deep', 'var(--efu-theme-op-deep)');
-    document.documentElement.style.setProperty('--efu-main-none', 'var(--efu-theme-none)');
-    initThemeColor();
-}
-
-function cacheColor(src, color) {
-    const cacheGroup = JSON.parse(localStorage.getItem('Solitude')) || {};
-    cacheGroup.postcolor = cacheGroup.postcolor || {};
-    cacheGroup.postcolor[src] = { value: color, expiration: Date.now() + coverColorConfig.time };
-    localStorage.setItem('Solitude', JSON.stringify(cacheGroup));
-}
-
-function adjustBrightness(r, g, b) {
-    const brightness = Math.round(((r * 299) + (g * 587) + (b * 114)) / 1000);
-    if (brightness < 125) {
-        [...document.getElementsByClassName('card-content')].forEach(item => {
-            item.style.setProperty('--efu-card-bg', 'var(--efu-white)');
-        });
-        [...document.getElementsByClassName('sayhi')].forEach(item => {
-            item.style.setProperty('background', 'var(--efu-white-op)');
-            item.style.setProperty('color', 'var(--efu-white)');
-        });
-    }
-}
+import { applyThemeColor, getCoverSource, resolveColor } from "./shared.js";
+
+const fetchApiColor = async (source) => {
+  const response = await fetch(`${Solitude.config.covercolor.api}${encodeURIComponent(source)}`);
+  if (!response.ok) throw new Error(`Cover color API returned ${response.status}`);
+  return (await response.json()).RGB;
+};
+
+export const coverColor = (music = false) => {
+  const configured = !music && Solitude.page.color;
+  if (configured) return applyThemeColor(configured);
+  return resolveColor(getCoverSource(music), fetchApiColor, music);
+};

package/source/js/covercolor/ave.js

@@ -1,77 +1,14 @@
-const coverColor = () => {
-    const pageColor = PAGE_CONFIG.color;
-    if (pageColor) {
-        setThemeColors(pageColor);
-    } else {
-        const path = document.getElementById("post-cover")?.src;
-        path ? handleApiColor(path) : setDefaultThemeColors();
-    }
-}
-
-const handleApiColor = (path) => {
-    const cacheGroup = JSON.parse(localStorage.getItem('Solitude')) || { postcolor: {} };
-    const color = cacheGroup.postcolor[path]?.value;
-    if (color) {
-        setThemeColors(color);
-    } else {
-        img2color(path);
-    }
-}
-
-const img2color = (src) => {
-    fetch(`${src}?imageAve`)
-        .then(response => {
-            if (!response.ok) throw new Error('Network response was not ok');
-            return response.json();
-        })
-        .then(({ RGB }) => {
-            const formattedRGB = `#${RGB.slice(2)}`;
-            setThemeColors(formattedRGB);
-            cacheColor(src, formattedRGB);
-        })
-        .catch(error => console.error('Error fetching color:', error));
-}
-
-const setThemeColors = (value) => {
-    if (!value) return setDefaultThemeColors();
-    const [r, g, b] = value.match(/\w\w/g).map(x => parseInt(x, 16));
-    const themeColors = {
-        main: value,
-        op: `${value}23`,
-        opDeep: `${value}dd`,
-        none: `${value}00`
-    };
-    Object.entries(themeColors).forEach(([key, color]) => {
-        document.documentElement.style.setProperty(`--efu-${key}`, color);
-    });
-    adjustBrightness(r, g, b);
-    document.getElementById("coverdiv").classList.add("loaded");
-    initThemeColor();
-}
-
-const setDefaultThemeColors = () => {
-    const vars = ['--efu-theme', '--efu-theme-op', '--efu-theme-op-deep', '--efu-theme-none'];
-    vars.forEach((varName, i) => {
-        document.documentElement.style.setProperty(['--efu-main', '--efu-main-op', '--efu-main-op-deep', '--efu-main-none'][i], `var(${varName})`);
-    });
-    initThemeColor();
-}
-
-const cacheColor = (src, color) => {
-    const cacheGroup = JSON.parse(localStorage.getItem('Solitude')) || { postcolor: {} };
-    cacheGroup.postcolor[src] = { value: color, expiration: Date.now() + coverColorConfig.time };
-    localStorage.setItem('Solitude', JSON.stringify(cacheGroup));
-}
-
-const adjustBrightness = (r, g, b) => {
-    const brightness = Math.round(((r * 299) + (g * 587) + (b * 114)) / 1000);
-    if (brightness < 125) {
-        document.querySelectorAll('.card-content').forEach(item => {
-            item.style.setProperty('--efu-card-bg', 'var(--efu-white)');
-        });
-        document.querySelectorAll('.sayhi').forEach(item => {
-            item.style.setProperty('background', 'var(--efu-white-op)');
-            item.style.setProperty('color', 'var(--efu-white)');
-        });
-    }
-}
+import { applyThemeColor, getCoverSource, resolveColor } from "./shared.js";
+
+const fetchAveColor = async (source) => {
+  const response = await fetch(`${source}?imageAve`);
+  if (!response.ok) throw new Error(`Image average color returned ${response.status}`);
+  const { RGB } = await response.json();
+  return RGB ? `#${RGB.replace(/^0x/, "")}` : null;
+};
+
+export const coverColor = (music = false) => {
+  const configured = !music && Solitude.page.color;
+  if (configured) return applyThemeColor(configured);
+  return resolveColor(getCoverSource(music), fetchAveColor, music);
+};

package/source/js/covercolor/local.js

@@ -1,117 +1,23 @@
-const coverColor = (music = false) => {
-    if (music) {
-        var coverPath = document.querySelector("#nav-music .aplayer-pic").style.backgroundImage;
-        const coverPathMatch = /url\("([^"]+)"\)/.exec(coverPath);
-        coverPath = coverPathMatch ? coverPathMatch[1] : '';
-        if (coverPath) {
-            localColor(coverPath,music);
-        }
+import { applyThemeColor, getCoverSource, resolveColor, rgbToHex } from "./shared.js";
+
+const extractLocalColor = (source) => new Promise((resolve, reject) => {
+  const image = new Image();
+  image.crossOrigin = "anonymous";
+  image.addEventListener("load", () => {
+    try {
+      const color = window.ColorThief?.getColorSync(image);
+      if (!color) throw new Error("Color Thief is unavailable");
+      resolve(rgbToHex(color.array(), 0.8));
+    } catch (error) {
+      reject(error);
     }
-    else {
-        const pageColor = PAGE_CONFIG.color || document.getElementById("post-cover")?.src;
-        if (pageColor) {
-            localColor(pageColor);
-        } else {
-            setDefaultThemeColors();
-        }
-    }
-}
-
-const setDefaultThemeColors = () => {
-    const themeVars = {
-        '--efu-main': 'var(--efu-theme)',
-        '--efu-main-op': 'var(--efu-theme-op)',
-        '--efu-main-op-deep': 'var(--efu-theme-op-deep)',
-        '--efu-main-none': 'var(--efu-theme-none)'
-    };
-    Object.entries(themeVars).forEach(([key, value]) => {
-        document.documentElement.style.setProperty(key, value);
-    });
-    initThemeColor();
-}
-
-const localColor = (path, music = false) => {
-    const colorThief = new ColorThief();
-    const img = new Image();
-    img.crossOrigin = "Anonymous";
-    img.onload = () => {
-        const color = colorThief.getColor(img);
-        if(music) {
-            setMusicColor(rgbToHex(color));
-        }
-        else{
-            setThemeColors(rgbToHex(color), ...color);
-        }
-    };
-    img.onerror = () => console.error('Image Error');
-    img.src = path;
-}
-
-const rgbToHex = ([r, g, b]) => {
-    return '#' + [r, g, b].map(x => Math.floor(x * 0.8).toString(16).padStart(2, '0')).join('');
-}
-
-const setMusicColor = (value) => {
-    if (!value) return setDefaultThemeColors();
-    const item = document.querySelector("#nav-music")
-    item.style.setProperty('--efu-music', value);
-}
-
-
-const setThemeColors = (value, r = null, g = null, b = null) => {
-    if (!value) return setDefaultThemeColors();
-
-    const themeColors = {
-        '--efu-main': value,
-        '--efu-main-op': value + '23',
-        '--efu-main-op-deep': value + 'dd',
-        '--efu-main-none': value + '00'
-    };
-    
-    Object.entries(themeColors).forEach(([key, color]) => {
-        document.documentElement.style.setProperty(key, color);
-    });
-
-    if (r !== null && g !== null && b !== null) {
-        const brightness = Math.round(((r * 299) + (g * 587) + (b * 114)) / 1000);
-        if (brightness < 125) {
-            adjustCardStyles();
-            value = LightenDarkenColor(value, 50);
-            setThemeColors(value);
-        }
-    }
-
-    document.getElementById("coverdiv").classList.add("loaded");
-    initThemeColor();
-}
-
-const LightenDarkenColor = (col, amt) => {
-    let usePound = false;
-    if (col[0] === "#") {
-        col = col.slice(1);
-        usePound = true;
-    }
-    let num = parseInt(col, 16);
-    let r = (num >> 16) + amt;
-    let g = ((num >> 8) & 0x00FF) + amt;
-    let b = (num & 0x0000FF) + amt;
-
-    r = Math.max(Math.min(r, 255), 0);
-    g = Math.max(Math.min(g, 255), 0);
-    b = Math.max(Math.min(b, 255), 0);
-
-    return (usePound ? "#" : "") + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-}
-
-const adjustCardStyles = () => {
-    const cardContents = document.querySelectorAll('.card-content');
-    cardContents.forEach(item => {
-        item.style.setProperty('--efu-card-bg', 'var(--efu-white)');
-    });
-
-    const authorInfo = document.querySelectorAll('.sayhi');
-    authorInfo.forEach(item => {
-        item.style.setProperty('background', 'var(--efu-white-op)');
-        item.style.setProperty('color', 'var(--efu-white)');
-    });
-}
+  }, { once: true });
+  image.addEventListener("error", () => reject(new Error(`Unable to load ${source}`)), { once: true });
+  image.src = source;
+});
+
+export const coverColor = (music = false) => {
+  const configured = !music && Solitude.page.color;
+  if (configured && /^#[0-9a-f]{6}$/i.test(configured)) return applyThemeColor(configured);
+  return resolveColor(getCoverSource(music), extractLocalColor, music);
+};

package/source/js/covercolor/shared.js

@@ -0,0 +1,102 @@
+import { Solitude } from "../core/api.js";
+
+const STORAGE_KEY = "Solitude";
+
+const readStore = () => {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY)) || {};
+  } catch (error) {
+    return {};
+  }
+};
+
+const writeStore = (value) => {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(value));
+  } catch (error) {
+    // Theme colors remain usable when storage is unavailable.
+  }
+};
+
+export const getCachedColor = (source) => {
+  const item = readStore().postcolor?.[source];
+  if (!item || (item.expiration && item.expiration <= Date.now())) return null;
+  return item.value;
+};
+
+export const cacheColor = (source, color) => {
+  const store = readStore();
+  store.postcolor ||= {};
+  store.postcolor[source] = {
+    value: color,
+    expiration: Date.now() + (Number(Solitude.config.covercolor.time) || 43200000),
+  };
+  writeStore(store);
+};
+
+export const getCoverSource = (music = false) => {
+  if (!music) {
+    return Solitude.page.color || document.getElementById("post-cover")?.src || "";
+  }
+  const background = document.querySelector("#nav-music .aplayer-pic")?.style.backgroundImage || "";
+  return /url\(["']?([^"')]+)["']?\)/.exec(background)?.[1] || "";
+};
+
+export const rgbToHex = ([r, g, b], factor = 1) =>
+  `#${[r, g, b]
+    .map((value) => Math.max(0, Math.min(255, Math.floor(value * factor))).toString(16).padStart(2, "0"))
+    .join("")}`;
+
+const normalizeHex = (value) => {
+  if (!value) return null;
+  const hex = value.startsWith("#") ? value : `#${value}`;
+  return /^#[0-9a-f]{6}$/i.test(hex) ? hex : null;
+};
+
+export const applyMusicColor = (value) => {
+  const color = normalizeHex(value);
+  if (color) document.getElementById("nav-music")?.style.setProperty("--efu-music", color);
+};
+
+export const applyThemeColor = (value) => {
+  const color = normalizeHex(value);
+  if (!color) return applyDefaultColor();
+  const [r, g, b] = color.match(/[0-9a-f]{2}/gi).map((part) => parseInt(part, 16));
+  const brightness = Math.round((r * 299 + g * 587 + b * 114) / 1000);
+  const adjusted = brightness < 125
+    ? rgbToHex([Math.min(r + 50, 255), Math.min(g + 50, 255), Math.min(b + 50, 255)])
+    : color;
+
+  const root = document.documentElement;
+  root.style.setProperty("--efu-main", adjusted);
+  root.style.setProperty("--efu-main-op", `${adjusted}23`);
+  root.style.setProperty("--efu-main-op-deep", `${adjusted}dd`);
+  root.style.setProperty("--efu-main-none", `${adjusted}00`);
+  Solitude.initThemeColor?.();
+};
+
+export const applyDefaultColor = () => {
+  const root = document.documentElement;
+  root.style.setProperty("--efu-main", "var(--efu-theme)");
+  root.style.setProperty("--efu-main-op", "var(--efu-theme-op)");
+  root.style.setProperty("--efu-main-op-deep", "var(--efu-theme-op-deep)");
+  root.style.setProperty("--efu-main-none", "var(--efu-theme-none)");
+  Solitude.initThemeColor?.();
+};
+
+export const resolveColor = async (source, fetchColor, music = false) => {
+  if (!source) return applyDefaultColor();
+  const cached = getCachedColor(source);
+  if (cached) return music ? applyMusicColor(cached) : applyThemeColor(cached);
+
+  try {
+    const color = await fetchColor(source);
+    if (!color) throw new Error("Color provider returned no color");
+    cacheColor(source, color);
+    if (source !== getCoverSource(music)) return;
+    return music ? applyMusicColor(color) : applyThemeColor(color);
+  } catch (error) {
+    console.error("Unable to resolve cover color:", error);
+    if (!music) applyDefaultColor();
+  }
+};