hexo-theme-solitude 3.0.21 → 4.0.0

package/source/js/main.js

@@ -1,3 +1,39 @@
+import { Solitude } from "./core/api.js";
+import { initActionDelegation } from "./core/actions.js";
+import { lifecycle } from "./core/lifecycle.js";
+import { initPreloader } from "./core/preloader.js";
+
+let ai = null;
+let coverColor = () => {};
+let initializeMusicPlayer = () => {};
+
+const loadFeatureModules = async () => {
+  const features = Solitude.config.feature_modules || {};
+  const requests = [];
+
+  if (features.search === "local") requests.push(import("./search/local.js"));
+  if (features.search === "algolia") requests.push(import("./search/algolia.js"));
+  if (features.friend_links) requests.push(import("./friend_links.js"));
+  if (features.right_menu) requests.push(import("./right_menu.js"));
+  if (features.translate) requests.push(import("./tw_cn.js"));
+  if (features.post_ai && Solitude.page.is_post) {
+    requests.push(import("./post_ai.js").then((module) => { ai = module.default; }));
+  }
+  if (features.music) {
+    requests.push(import("./music.js").then((module) => {
+      initializeMusicPlayer = module.initializeMusicPlayer;
+    }));
+  }
+  if (features.covercolor) {
+    requests.push(import(`./covercolor/${features.covercolor}.js`).then((module) => {
+      coverColor = module.coverColor;
+      Solitude.coverColor = coverColor;
+    }));
+  }
+
+  await Promise.all(requests);
+};
+
 const sidebarFn = () => {
   const $toggleMenu = document.getElementById("toggle-menu");
   const $mobileSidebarMenus = document.getElementById("sidebar-menus");
@@ -6,7 +42,7 @@ const sidebarFn = () => {
 
   const toggleMobileSidebar = (isOpen) => {
     $body.style.overflow = isOpen ? "hidden" : "";
-    utils[isOpen ? "fadeIn" : "fadeOut"]($menuMask, 0.5);
+    Solitude[isOpen ? "fadeIn" : "fadeOut"]($menuMask, 0.5);
     $mobileSidebarMenus.classList.toggle("open", isOpen);
   };
 
@@ -16,31 +52,41 @@ const sidebarFn = () => {
     }
   };
 
-  $toggleMenu.addEventListener("click", () => toggleMobileSidebar(true));
-  $menuMask.addEventListener("click", closeMobileSidebar);
+  if (!$toggleMenu || !$mobileSidebarMenus || !$menuMask) return;
 
-  window.addEventListener("resize", () => {
-    if (
-      utils.isHidden($toggleMenu) &&
-      $mobileSidebarMenus.classList.contains("open")
-    ) {
-      closeMobileSidebar();
-    }
-    sco.refreshWaterFall();
+  lifecycle.listen($toggleMenu, "click", () => toggleMobileSidebar(true));
+  lifecycle.listen($menuMask, "click", closeMobileSidebar);
+
+  let resizeFrame;
+  lifecycle.listen(window, "resize", () => {
+    if (resizeFrame) return;
+    resizeFrame = requestAnimationFrame(() => {
+      resizeFrame = null;
+      if (
+        Solitude.isHidden($toggleMenu) &&
+        $mobileSidebarMenus.classList.contains("open")
+      ) {
+        closeMobileSidebar();
+      }
+    });
   });
+  lifecycle.add(() => cancelAnimationFrame(resizeFrame));
 };
 
 const scrollFn = () => {
   const $rightside = document.getElementById("rightside");
   const $header = document.getElementById("page-header");
-  let initTop = 0;
+  let initTop = window.scrollY || document.documentElement.scrollTop;
 
   const updateHeaderAndRightside = (isDown, currentTop) => {
-    if (currentTop > 0) {
+    const isAtTop = currentTop <= 0;
+    $header.classList.toggle("nav-at-top", isAtTop);
+
+    if (!isAtTop) {
       $header.classList.toggle("nav-visible", !isDown);
       $header.classList.add("nav-fixed");
       if ($rightside) {
-        $rightside.style.opacity = "0.8";
+        $rightside.style.opacity = "1";
         $rightside.style.transform = "translateX(-58px)";
       }
     } else {
@@ -52,23 +98,33 @@ const scrollFn = () => {
     }
   };
 
-  const throttledScroll = utils.throttle(() => {
+  const handleScroll = () => {
     initThemeColor();
     const currentTop = window.scrollY || document.documentElement.scrollTop;
     const isDown = currentTop > initTop;
     initTop = currentTop;
     updateHeaderAndRightside(isDown, currentTop);
-  }, 200);
+  };
 
-  window.addEventListener("scroll", (e) => {
-    throttledScroll(e);
-    if (window.scrollY === 0) {
-      $header.classList.remove("nav-fixed", "nav-visible");
-      if ($rightside) {
-        $rightside.style.cssText = "opacity: ''; transform: ''";
-      }
+  let ticking = false;
+  const onScroll = () => {
+    const currentTop = window.scrollY || document.documentElement.scrollTop;
+    if (currentTop <= 0) {
+      initTop = 0;
+      updateHeaderAndRightside(false, 0);
+      return;
     }
-  });
+    if (!ticking) {
+      window.requestAnimationFrame(() => {
+        handleScroll();
+        ticking = false;
+      });
+      ticking = true;
+    }
+  };
+
+  lifecycle.listen(window, "scroll", onScroll, { passive: true });
+  updateHeaderAndRightside(false, initTop);
 };
 
 const percent = () => {
@@ -84,23 +140,24 @@ const percent = () => {
       body.clientHeight,
       docEl.clientHeight
     ) - docEl.clientHeight;
-  const scrolledPercent = Math.round((scrollPos / totalScrollableHeight) * 100);
+  const scrolledPercent = totalScrollableHeight > 0
+    ? Math.round((scrollPos / totalScrollableHeight) * 100)
+    : 0;
   const navToTop = document.querySelector("#nav-totop");
   const rsToTop = document.querySelector(".rs_show .top i");
   const percentDisplay = document.querySelector("#percent");
-  const isNearEnd =
-    window.scrollY + docEl.clientHeight >=
-    (
-      document.getElementById("post-comment") ||
-      document.getElementById("footer")
-    ).offsetTop;
+  const endTarget =
+    document.getElementById("post-comment") || document.getElementById("footer");
+  const isNearEnd = endTarget
+    ? window.scrollY + docEl.clientHeight >= endTarget.offsetTop
+    : false;
 
   navToTop?.classList.toggle("long", isNearEnd || scrolledPercent > 90);
   rsToTop?.classList.toggle("show", isNearEnd || scrolledPercent > 90);
-  percentDisplay.textContent =
+  if (percentDisplay) percentDisplay.textContent =
     isNearEnd || scrolledPercent > 90
       ? navToTop
-        ? GLOBAL_CONFIG.lang.backtop
+        ? Solitude.config.lang.backtop
         : ""
       : scrolledPercent;
 
@@ -114,7 +171,290 @@ const percent = () => {
 const showTodayCard = () => {
   const el = document.getElementById("todayCard");
   const topGroup = document.querySelector(".topGroup");
-  topGroup?.addEventListener("mouseleave", () => el?.classList.remove("hide"));
+  lifecycle.listen(topGroup, "mouseleave", () => el?.classList.remove("hide"));
+};
+
+const initHomeCenter = () => {
+  const container = document.getElementById("home_center");
+  if (!container || container.dataset.initialized === "true") return;
+  container.dataset.initialized = "true";
+
+  const banners = [...container.querySelectorAll(".home-center-banner-item")];
+  const items = [...container.querySelectorAll(".home-center-item")];
+  const indicators = [
+    ...container.querySelectorAll(".home-center-indicator"),
+  ];
+  const banner = container.querySelector(".home-center-banner");
+  const titleLink = container.querySelector(".home-center-title-link");
+  const titleTag = container.querySelector(".home-center-title-tag span");
+  const categoryBar = document.getElementById("category-bar");
+  let activeIndex = 0;
+  let scrollFrame;
+
+  const getCachedColor = (src) => {
+    try {
+      const cache = JSON.parse(localStorage.getItem("Solitude")) || {};
+      const item = cache.postcolor?.[src];
+      if (item && (!item.expiration || item.expiration > Date.now())) {
+        return item.value;
+      }
+    } catch (error) {
+      return null;
+    }
+    return null;
+  };
+
+  const cacheColor = (src, color) => {
+    try {
+      const cache = JSON.parse(localStorage.getItem("Solitude")) || {};
+      cache.postcolor = cache.postcolor || {};
+      cache.postcolor[src] = {
+        value: color,
+        expiration: Date.now() + 43200000,
+      };
+      localStorage.setItem("Solitude", JSON.stringify(cache));
+    } catch (error) {
+      // Color caching is optional; rendering must continue without storage.
+    }
+  };
+
+  const rgbToThemeHex = ([r, g, b]) =>
+    `#${[r, g, b]
+      .map((value) =>
+        Math.floor(value * 0.8)
+          .toString(16)
+          .padStart(2, "0")
+      )
+      .join("")}`;
+
+  const getAverageColor = (image) => {
+    const canvas = document.createElement("canvas");
+    canvas.width = 32;
+    canvas.height = 32;
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    const pixels = context.getImageData(0, 0, canvas.width, canvas.height).data;
+    const color = [0, 0, 0];
+    let count = 0;
+    for (let index = 0; index < pixels.length; index += 4) {
+      if (pixels[index + 3] < 128) continue;
+      color[0] += pixels[index];
+      color[1] += pixels[index + 1];
+      color[2] += pixels[index + 2];
+      count++;
+    }
+    return count ? color.map((value) => Math.round(value / count)) : null;
+  };
+
+  const normalizeHomeCenterColor = (value) => {
+    const match = value?.match(/^#([0-9a-f]{6})$/i);
+    if (!match) return value;
+    const number = parseInt(match[1], 16);
+    const rgb = [number >> 16, (number >> 8) & 0xff, number & 0xff];
+    const brightness = Math.round(
+      (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000
+    );
+    if (brightness >= 125) return value;
+    return `#${rgb
+      .map((channel) => Math.min(channel + 50, 255).toString(16).padStart(2, "0"))
+      .join("")}`;
+  };
+
+  const applyItemColor = (index, color) => {
+    if (!color || !banners[index]) return;
+    const colorOp = `color-mix(in srgb, ${color} 14%, transparent)`;
+    const colorDeep = `color-mix(in srgb, ${color} 87%, transparent)`;
+    banners[index].style.setProperty("--home-center-theme", color);
+    banners[index].style.setProperty("--home-center-theme-op", colorOp);
+    banners[index].style.setProperty("--home-center-theme-op-deep", colorDeep);
+    items[index]?.style.setProperty("--item-theme", color);
+    items[index]?.style.setProperty("--item-theme-op", colorOp);
+    items[index]?.style.setProperty("--item-theme-op-deep", colorDeep);
+    if (activeIndex === index) select(index);
+  };
+
+  const extractItemColor = (index, sourceImage) => {
+    if (banners[index].dataset.color) return;
+    const src = sourceImage.currentSrc || sourceImage.src;
+    if (!src) return;
+    const cachedColor = getCachedColor(src);
+    if (cachedColor) {
+      applyItemColor(index, normalizeHomeCenterColor(cachedColor));
+      return;
+    }
+
+    const image = new Image();
+    image.crossOrigin = "Anonymous";
+    image.onload = () => {
+      if (!container.isConnected) return;
+      try {
+        const dominantColor = window.ColorThief?.getColorSync(image);
+        const rgb = dominantColor ? dominantColor.array() : getAverageColor(image);
+        if (!rgb) return;
+        const color = rgbToThemeHex(rgb);
+        cacheColor(src, color);
+        applyItemColor(index, normalizeHomeCenterColor(color));
+      } catch (error) {
+        // Canvas access can fail for image hosts without CORS support.
+      }
+    };
+    image.onerror = () => {};
+    image.src = src;
+  };
+
+  const navigate = (link, event) => {
+    if (!link) return;
+    if (event?.metaKey || event?.ctrlKey) {
+      window.open(link, "_blank");
+    } else if (Solitude.pjax?.loadUrl) {
+      Solitude.navigate(link);
+    } else {
+      window.location.href = link;
+    }
+  };
+
+  const select = (index) => {
+    if (!banners[index]) return;
+    activeIndex = index;
+    banners.forEach((banner, bannerIndex) => {
+      const isActive = bannerIndex === index;
+      banner.classList.toggle("active", isActive);
+      banner.setAttribute("aria-hidden", String(!isActive));
+      banner.tabIndex = isActive ? 0 : -1;
+    });
+    items.forEach((item, itemIndex) => {
+      const isActive = itemIndex === index;
+      item.classList.toggle("active", isActive);
+      item.setAttribute("aria-current", String(isActive));
+    });
+    indicators.forEach((indicator, indicatorIndex) =>
+      indicator.classList.toggle("active", indicatorIndex === index)
+    );
+    const selected = banners[index];
+    const selectedStyle = getComputedStyle(selected);
+    const color = selectedStyle.getPropertyValue("--home-center-theme").trim();
+    const colorOp = selectedStyle
+      .getPropertyValue("--home-center-theme-op")
+      .trim();
+    const colorDeep = selectedStyle
+      .getPropertyValue("--home-center-theme-op-deep")
+      .trim();
+    titleLink.textContent = selected.dataset.title;
+    titleLink.href = selected.dataset.link;
+    titleTag.textContent = selected.dataset.label;
+    container.style.setProperty("--current-theme", color);
+    container.style.setProperty("--current-theme-op", colorOp);
+    container.style.setProperty("--current-theme-op-deep", colorDeep);
+    categoryBar?.style.setProperty("--current-banner-theme", color);
+  };
+
+  items.forEach((item, index) => {
+    item.addEventListener("mouseenter", () => select(index));
+    item.addEventListener("focusin", () => select(index));
+  });
+  banners.forEach((item, index) => {
+    let pointerType = "";
+    item.addEventListener(
+      "pointerdown",
+      (event) => (pointerType = event.pointerType),
+      true
+    );
+    item.addEventListener("click", (event) => {
+      if (pointerType === "touch" && window.innerWidth <= 768) {
+        event.preventDefault();
+        select(index);
+      } else {
+        navigate(item.dataset.link, event);
+      }
+      pointerType = "";
+    });
+    item.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        navigate(item.dataset.link, event);
+      }
+    });
+  });
+  indicators.forEach((indicator, index) => {
+    indicator.addEventListener("click", (event) => {
+      event.preventDefault();
+      select(index);
+      banner.scrollTo({ left: banner.clientWidth * index, behavior: "smooth" });
+    });
+  });
+  banner.addEventListener("scroll", () => {
+    cancelAnimationFrame(scrollFrame);
+    scrollFrame = requestAnimationFrame(() => {
+      if (window.innerWidth > 768 || !banner.clientWidth) return;
+      select(Math.round(banner.scrollLeft / banner.clientWidth));
+    });
+  });
+  select(0);
+  banners.forEach((item, index) => {
+    if (item.dataset.color) return;
+    const image = item.querySelector(".home-center-cover-img");
+    if (!image) return;
+    if (image.complete && image.naturalWidth) {
+      extractItemColor(index, image);
+    } else {
+      image.addEventListener("load", () => extractItemColor(index, image), {
+        once: true,
+      });
+    }
+  });
+};
+
+const initTooltip = () => {
+  const tooltip =
+    document.querySelector(".custom-tooltip") ||
+    document.body.appendChild(
+      Object.assign(document.createElement("div"), {
+        className: "custom-tooltip",
+      })
+    );
+
+  tooltip.style.opacity = "0";
+  tooltip.style.backdropFilter = "none";
+  if (!window.matchMedia("(hover: hover)").matches) return;
+
+  const rootFontSize = parseFloat(
+    getComputedStyle(document.documentElement).fontSize
+  );
+
+  document.querySelectorAll("[heotip]").forEach((element) => {
+    if (element.dataset.tooltipInitialized === "true") return;
+    element.dataset.tooltipInitialized = "true";
+
+    element.addEventListener("mouseenter", () => {
+      tooltip.textContent = element.getAttribute("heotip");
+      tooltip.style.left = "0";
+      tooltip.style.top = "0";
+      tooltip.style.backdropFilter = "blur(10px)";
+      tooltip.style.opacity = "1";
+
+      const targetRect = element.getBoundingClientRect();
+      const tooltipRect = tooltip.getBoundingClientRect();
+      const gap = 10;
+      const maxLeft = window.innerWidth - tooltipRect.width - rootFontSize;
+      const centeredLeft =
+        targetRect.left + (targetRect.width - tooltipRect.width) / 2;
+      const left = Math.max(rootFontSize, Math.min(centeredLeft, maxLeft));
+      const preferredTop =
+        targetRect.top >= tooltipRect.height + gap
+          ? targetRect.top - tooltipRect.height - gap
+          : targetRect.bottom + gap;
+      const maxTop = window.innerHeight - tooltipRect.height - rootFontSize;
+      const top = Math.max(rootFontSize, Math.min(preferredTop, maxTop));
+
+      tooltip.style.left = `${left}px`;
+      tooltip.style.top = `${top}px`;
+    });
+
+    element.addEventListener("mouseleave", () => {
+      tooltip.style.backdropFilter = "none";
+      tooltip.style.opacity = "0";
+    });
+  });
 };
 
 const initObserver = () => {
@@ -126,7 +466,7 @@ const initObserver = () => {
     const observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
         paginationElement.classList.toggle("show-window", entry.isIntersecting);
-        if (GLOBAL_CONFIG.comment.commentBarrage) {
+        if (Solitude.config.comment?.commentBarrage && commentBarrageElement) {
           commentBarrageElement.style.bottom = entry.isIntersecting
             ? "-200px"
             : "0px";
@@ -134,12 +474,13 @@ const initObserver = () => {
       });
     });
     observer.observe(commentElement);
+    lifecycle.add(() => observer.disconnect());
   }
 };
 
 const addCopyright = () => {
-  if (!GLOBAL_CONFIG.copyright) return;
-  const { limit, author, link, source, info } = GLOBAL_CONFIG.copyright;
+  if (!Solitude.config.copyright) return;
+  const { limit, author, link, source, info } = Solitude.config.copyright;
 
   document.body.addEventListener("copy", (e) => {
     e.preventDefault();
@@ -153,7 +494,7 @@ const addCopyright = () => {
 };
 
 const asideStatus = () => {
-  const status = utils.saveToLocal.get("aside-status");
+  const status = Solitude.saveToLocal.get("aside-status");
   document.documentElement.classList.toggle("hide-aside", status === "hide");
 };
 
@@ -162,7 +503,7 @@ function initThemeColor() {
   const themeColor =
     currentTop > 0
       ? "--efu-card-bg"
-      : PAGE_CONFIG.is_post
+      : Solitude.page.is_post
       ? "--efu-main"
       : "--efu-background";
   applyThemeColor(
@@ -170,6 +511,8 @@ function initThemeColor() {
   );
 }
 
+Solitude.initThemeColor = initThemeColor;
+
 function applyThemeColor(color) {
   const themeColorMeta = document.querySelector('meta[name="theme-color"]');
   const appleMobileWebAppMeta = document.querySelector(
@@ -185,12 +528,64 @@ function applyThemeColor(color) {
 const handleThemeChange = (mode) => {
   const themeChange = window.globalFn?.themeChange || {};
   Object.values(themeChange).forEach((fn) => fn(mode));
+  lifecycle.emit("themeChange", { mode });
 };
 
-const sco = {
+const actions = {
   lastWittyWord: "",
   wasPageHidden: false,
   musicPlaying: false,
+  consoleNavState: null,
+  randomPost() {
+    const posts = Solitude.config.random_posts || [];
+    if (!posts.length) return;
+    Solitude.navigate(`${Solitude.config.root}${posts[Solitude.randomNum(posts.length)]}`);
+  },
+  noop() {},
+  navigateTo(url) {
+    Solitude.navigate(url);
+  },
+  openExternal(url) {
+    if (url) window.open(url, "_blank", "noopener");
+  },
+  toggleTargetClass(target, event, element) {
+    const selector = target || element?.dataset.solitudeTarget;
+    const className = element?.dataset.solitudeClass || "show";
+    document.querySelector(selector)?.classList.toggle(className);
+  },
+  setTargetClass(target, event, element) {
+    const selector = target || element?.dataset.solitudeTarget;
+    const className = element?.dataset.solitudeClass || "show";
+    const enabled = element?.dataset.solitudeEnabled !== "false";
+    document
+      .querySelectorAll(selector)
+      .forEach((item) => item.classList.toggle(className, enabled));
+  },
+  showReward() {
+    document
+      .querySelectorAll(".reward-main")
+      .forEach((item) => { item.style.display = "flex"; });
+    const quitBox = document.getElementById("quit-box");
+    if (quitBox) quitBox.style.display = "flex";
+  },
+  hideReward() {
+    document
+      .querySelectorAll(".reward-main")
+      .forEach((item) => { item.style.display = "none"; });
+    const quitBox = document.getElementById("quit-box");
+    if (quitBox) quitBox.style.display = "none";
+  },
+  runConfiguredAction(command) {
+    const source = String(command || "").trim().replace(/;$/, "");
+    const call = source.match(/^(?:Solitude\.)?([A-Za-z_$][\w$]*)\(\)$/);
+    if (call && typeof Solitude[call[1]] === "function") {
+      Solitude[call[1]]();
+    } else {
+      const navigation = source.match(/^(?:pjax\.loadUrl|Solitude\.navigate)\((['"])(.*?)\1\)$/);
+      if (navigation) Solitude.navigate(navigation[2]);
+    }
+    Solitude.hideRightMenu?.();
+  },
   scrollTo(elementId) {
     const targetElement = document.getElementById(elementId);
     if (targetElement) {
@@ -199,47 +594,73 @@ const sco = {
       window.scroll({ top: targetPosition, behavior: "smooth" });
     }
   },
-  musicBind() {
-    const $music = document.querySelector("#nav-music meting-js");
-    if ($music && $music.aplayer) { 
-      this.isMusicBind = true;
-      $music.onclick = () => this.musicPlaying && this.musicToggle(true);
-      $music.aplayer.on('loadeddata', () =>{
-        coverColor(true);
-      })
-    }
-  },
-  musicToggle(isMeting = true) {
-    if (!this.isMusicBind) this.musicBind();
-    
-    const $music = document.querySelector("#nav-music");
-    const $meting = document.querySelector("#nav-music meting-js");
+  syncMusicState(isPlaying) {
+    const $music = document.getElementById("nav-music");
     const $console = document.getElementById("consoleMusic");
-    
-    this.musicPlaying = !this.musicPlaying;
-    
-    $music.classList.toggle("playing", this.musicPlaying);
-    $music.classList.toggle("stretch", this.musicPlaying);
+    this.musicPlaying = Boolean(isPlaying);
+
+    $music?.classList.toggle("playing", this.musicPlaying);
+    $music?.classList.toggle("stretch", this.musicPlaying);
     $console?.classList.toggle("on", this.musicPlaying);
-    
-    if (typeof rm !== "undefined" && rm?.menuItems.music[0]) {
+
+    if (Solitude.rightMenu?.menuItems?.music?.[0]) {
       const $rmText = document.querySelector("#menu-music-toggle span");
       const $rmIcon = document.querySelector("#menu-music-toggle i");
-      $rmText.textContent = this.musicPlaying 
-        ? GLOBAL_CONFIG.right_menu.music.stop
-        : GLOBAL_CONFIG.right_menu.music.start;
-      $rmIcon.className = `solitude fas ${this.musicPlaying ? 'fa-pause' : 'fa-play'}`;
+      if ($rmText) {
+        const label = this.musicPlaying
+          ? Solitude.config.right_menu.music.stop
+          : Solitude.config.right_menu.music.start;
+        Solitude.rightMenu.setLabel($rmText, label);
+      }
+      if ($rmIcon) {
+        $rmIcon.className = `solitude fas ${this.musicPlaying ? "fa-pause" : "fa-play"}`;
+      }
+    }
+  },
+  musicBind() {
+    const $meting = document.querySelector("#nav-music meting-js");
+    const aplayer = $meting?.aplayer;
+    if (!aplayer) {
+      this.isMusicBind = false;
+      return null;
+    }
+
+    this.isMusicBind = true;
+    if (!aplayer.solitudeCapsuleBound) {
+      aplayer.on("play", () => this.syncMusicState(true));
+      aplayer.on("pause", () => this.syncMusicState(false));
+      aplayer.on("ended", () => this.syncMusicState(false));
+      aplayer.on("loadeddata", () => {
+        if (typeof coverColor === "function") coverColor(true);
+        this.syncMusicState(Boolean(aplayer.audio && !aplayer.audio.paused));
+      });
+      aplayer.solitudeCapsuleBound = true;
     }
 
-    if (isMeting && $meting) {
-      this.musicPlaying ? $meting.aplayer.play() : $meting.aplayer.pause();
+    this.syncMusicState(Boolean(aplayer.audio && !aplayer.audio.paused));
+    return aplayer;
+  },
+  handleMusicClick(event) {
+    if (event.target?.closest?.(".music-control-btn")) return;
+    if (!this.musicPlaying) this.musicToggle();
+  },
+  musicToggle(isMeting = true) {
+    const aplayer = this.musicBind();
+    if (!aplayer) return;
+
+    const shouldPlay = Boolean(aplayer.audio?.paused);
+    if (!isMeting) {
+      this.syncMusicState(shouldPlay);
+      return;
     }
+
+    shouldPlay ? aplayer.play() : aplayer.pause();
   },
   musicSkipBack() {
-    document.querySelector("meting-js")?.aplayer?.skipBack();
+    document.querySelector("#nav-music meting-js")?.aplayer?.skipBack();
   },
   musicSkipForward() {
-    document.querySelector("meting-js")?.aplayer?.skipForward();
+    document.querySelector("#nav-music meting-js")?.aplayer?.skipForward();
   },
   switchCommentBarrage() {
     const commentBarrageElement = document.querySelector(".comment-barrage");
@@ -252,14 +673,16 @@ const sco = {
       window.getComputedStyle(commentBarrageElement).display === "flex";
     commentBarrageElement.style.display = isDisplayed ? "none" : "flex";
     consoleCommentBarrage?.classList.toggle("on", !isDisplayed);
-    utils.saveToLocal.set("commentBarrageSwitch", !isDisplayed, 0.2);
-    rm?.menuItems.barrage && rm.barrage(isDisplayed);
+    Solitude.saveToLocal.set("commentBarrageSwitch", !isDisplayed, 0.2);
+    if (Solitude.rightMenu?.menuItems.barrage) {
+      Solitude.rightMenu.barrage(isDisplayed);
+    }
   },
   switchHideAside() {
     const htmlClassList = document.documentElement.classList;
     const consoleHideAside = document.querySelector("#consoleHideAside");
     const isHideAside = htmlClassList.contains("hide-aside");
-    utils.saveToLocal.set("aside-status", isHideAside ? "show" : "hide", 1);
+    Solitude.saveToLocal.set("aside-status", isHideAside ? "show" : "hide", 1);
     htmlClassList.toggle("hide-aside");
     consoleHideAside.classList.toggle("on", !isHideAside);
   },
@@ -281,7 +704,7 @@ const sco = {
     );
   },
   changeWittyWord() {
-    const greetings = GLOBAL_CONFIG.aside.witty_words || [];
+    const greetings = Solitude.config.aside.witty_words || [];
     if (greetings.length === 0) {
       document.getElementById("sayhi").textContent = "Solitude";
       this.lastWittyWord = null;
@@ -304,40 +727,115 @@ const sco = {
       document.documentElement.getAttribute("data-theme") === "dark";
     const newMode = isDarkMode ? "light" : "dark";
     document.documentElement.setAttribute("data-theme", newMode);
-    utils.saveToLocal.set("theme", newMode, 0.02);
-    utils.snackbarShow(GLOBAL_CONFIG.lang.theme[newMode], false, 2000);
-    if (typeof rm === "object") rm.mode(!isDarkMode) && rm.hideRightMenu();
+    Solitude.saveToLocal.set("theme", newMode, 0.02);
+    Solitude.snackbarShow(Solitude.config.lang.theme[newMode], false, 2000);
+    if (Solitude.rightMenu) {
+      Solitude.rightMenu.mode(!isDarkMode);
+      Solitude.rightMenu.hideRightMenu();
+    }
     handleThemeChange(newMode);
   },
   hideTodayCard: () =>
     document.getElementById("todayCard").classList.add("hide"),
-  toTop: () => utils.scrollToDest(0),
-  showConsole: () =>
-    document.getElementById("console")?.classList.toggle("show", true),
-  hideConsole: () =>
-    document.getElementById("console")?.classList.remove("show"),
+  toTop: () => Solitude.scrollToDest(0),
+  showConsole() {
+    const consoleElement = document.getElementById("console");
+    if (!consoleElement || consoleElement.classList.contains("show")) return;
+
+    const header = document.getElementById("page-header");
+    if (header) {
+      this.consoleNavState = {
+        fixed: header.classList.contains("nav-fixed"),
+        visible: header.classList.contains("nav-visible"),
+      };
+      header.classList.add("nav-fixed");
+      header.classList.remove("nav-visible");
+      header.classList.add("console-open");
+    }
+
+    consoleElement.classList.add("show");
+    document
+      .querySelector("#nav-console .console_switchbutton")
+      ?.classList.add("console-open");
+  },
+  hideConsole() {
+    const consoleElement = document.getElementById("console");
+    if (!consoleElement?.classList.contains("show")) return;
+
+    consoleElement.classList.remove("show");
+    document
+      .querySelector("#nav-console .console_switchbutton")
+      ?.classList.remove("console-open");
+
+    const header = document.getElementById("page-header");
+    if (header && this.consoleNavState) {
+      header.classList.remove("console-open");
+      header.classList.toggle("nav-fixed", this.consoleNavState.fixed);
+      header.classList.toggle("nav-visible", this.consoleNavState.visible);
+    }
+    this.consoleNavState = null;
+  },
+  toggleConsole() {
+    const consoleElement = document.getElementById("console");
+    if (consoleElement?.classList.contains("show")) {
+      this.hideConsole();
+    } else {
+      this.showConsole();
+    }
+  },
+  onConsoleCardGroupClick(event) {
+    if (event.target.closest?.(".console-card")) return;
+    this.hideConsole();
+  },
+  onNavBlankClickCloseConsole(event) {
+    if (!document.getElementById("console")?.classList.contains("show")) return;
+    if (
+      event.target.closest?.(
+        "a, button, .back-home-button, .menus_item, #page-name"
+      )
+    ) {
+      return;
+    }
+    this.hideConsole();
+  },
   refreshWaterFall() {
+    const allElements = [...document.querySelectorAll(".waterfall")];
+    const elements = allElements.filter(
+      (element) => element.dataset.solitudeWaterfall !== "true"
+    );
+    if (!elements.length) return;
+    elements.forEach((element) => {
+      element.dataset.solitudeWaterfall = "true";
+    });
+
+    const timers = new Set();
     const observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
-          setTimeout(() => {
+          observer.unobserve(entry.target);
+          const timer = setTimeout(() => {
+            timers.delete(timer);
+            if (!entry.target.isConnected) return;
             waterfall(entry.target).then(() => {
-              entry.target.classList.add("show");
+              if (entry.target.isConnected) entry.target.classList.add("show");
             });
           }, 300);
+          timers.add(timer);
         }
       });
     });
-    document
-      .querySelectorAll(".waterfall")
-      .forEach((el) => observer.observe(el));
+    elements.forEach((element) => observer.observe(element));
+    lifecycle.add(() => {
+      observer.disconnect();
+      timers.forEach(clearTimeout);
+    });
   },
   addRuntime() {
     const el = document.getElementById("runtimeshow");
-    if (el && GLOBAL_CONFIG.runtime) {
+    if (el && Solitude.config.runtime) {
       el.innerText =
-        utils.timeDiff(new Date(GLOBAL_CONFIG.runtime), new Date()) +
-        GLOBAL_CONFIG.lang.day;
+        Solitude.timeDiff(new Date(Solitude.config.runtime), new Date()) +
+        Solitude.config.lang.day;
     }
   },
   toTalk(txt) {
@@ -354,15 +852,15 @@ const sco = {
           new Event("input", { bubble: true, cancelable: true })
         );
         el.value = "> " + txt.replace(/\n/g, "\n> ") + "\n\n";
-        utils.scrollToDest(
-          utils.getEleTop(document.getElementById("post-comment")),
+        Solitude.scrollToDest(
+          Solitude.getEleTop(document.getElementById("post-comment")),
           300
         );
         el.focus();
         el.setSelectionRange(-1, -1);
       }
     });
-    utils.snackbarShow(GLOBAL_CONFIG.lang.totalk, false, 2000);
+    Solitude.snackbarShow(Solitude.config.lang.totalk, false, 2000);
   },
   initbbtalk() {
     const bberTalkElement = document.querySelector("#bber-talk");
@@ -385,7 +883,7 @@ const sco = {
         if (captionText) {
           image.insertAdjacentHTML(
             "afterend",
-            `<div class="img-alt is-center">${utils.escapeHtml(
+            `<div class="img-alt is-center">${Solitude.escapeHtml(
               captionText
             )}</div>`
           );
@@ -393,15 +891,15 @@ const sco = {
       });
   },
   scrollToComment: () =>
-    utils.scrollToDest(
-      utils.getEleTop(document.getElementById("post-comment")),
+    Solitude.scrollToDest(
+      Solitude.getEleTop(document.getElementById("post-comment")),
       300
     ),
   setTimeState() {
     const el = document.getElementById("sayhi");
     if (el) {
       const hours = new Date().getHours();
-      const lang = GLOBAL_CONFIG.aside.state;
+      const lang = Solitude.config.aside.state;
 
       const localData = getLocalData([
         "twikoo",
@@ -415,7 +913,11 @@ const sco = {
         for (let key of keys) {
           const data = localStorage.getItem(key);
           if (data) {
-            return JSON.parse(data);
+            try {
+              return JSON.parse(data);
+            } catch (error) {
+              localStorage.removeItem(key);
+            }
           }
         }
         return null;
@@ -423,8 +925,8 @@ const sco = {
       const nick = localData ? localData.nick || localData.display_name : null;
 
       const prefix = this.wasPageHidden
-        ? GLOBAL_CONFIG.aside.witty_comment.back + nick
-        : GLOBAL_CONFIG.aside.witty_comment.prefix + nick;
+        ? Solitude.config.aside.witty_comment.back + nick
+        : Solitude.config.aside.witty_comment.prefix + nick;
 
       const greetings = [
         { start: 0, end: 5, text: nick ? prefix : lang.goodnight },
@@ -456,7 +958,7 @@ const sco = {
   categoriesBarActive() {
     const categoryBar = document.querySelector("#category-bar");
     const currentPath = decodeURIComponent(window.location.pathname);
-    const isHomePage = currentPath === GLOBAL_CONFIG.root;
+    const isHomePage = currentPath === Solitude.config.root;
     if (categoryBar) {
       const categoryItems = categoryBar.querySelectorAll(".category-bar-item");
       categoryItems.forEach((item) => item.classList.remove("select"));
@@ -482,14 +984,19 @@ const sco = {
           behavior: "smooth",
         });
       };
-      scrollBar.addEventListener("scroll", () => {
-        clearTimeout(this.timeoutId);
-        this.timeoutId = setTimeout(() => {
-          nextElement.style.transform = isScrollBarAtEnd()
-            ? "rotate(180deg)"
-            : "";
-        }, 150);
-      });
+      if (scrollBar.dataset.solitudeScrollBound !== "true") {
+        scrollBar.dataset.solitudeScrollBound = "true";
+        lifecycle.listen(scrollBar, "scroll", () => {
+          clearTimeout(this.timeoutId);
+          this.timeoutId = setTimeout(() => {
+            if (nextElement) {
+              nextElement.style.transform = isScrollBarAtEnd()
+                ? "rotate(180deg)"
+                : "";
+            }
+          }, 150);
+        }, { passive: true });
+      }
       scroll();
     }
   },
@@ -505,18 +1012,20 @@ const sco = {
     if (!pageText) return;
     const pageButton = document.getElementById("toPageButton");
     const pageNumbers = document.querySelectorAll(".page-number");
-    const lastPageNumber = +pageNumbers[pageNumbers.length - 1].textContent;
-    if (!pageText || lastPageNumber === 1) {
-      toGroup.style.display = "none";
+    const lastPageNumber = +(pageNumbers[pageNumbers.length - 1]?.textContent || 1);
+    if (lastPageNumber === 1) {
+      if (toGroup) toGroup.style.display = "none";
       return;
     }
-    pageText.addEventListener("keydown", (event) => {
+    lifecycle.listen(pageText, "keydown", (event) => {
       if (event.key === "Enter") {
-        sco.toPage();
-        pjax.loadUrl(pageButton.href);
+        Solitude.toPage();
+        Solitude.navigate(pageButton.href);
       }
     });
-    pageText.addEventListener("input", () => {
+    lifecycle.listen(pageText, "input", () => {
+      pageText.value = pageText.value.replace(/[^0-9]/g, "");
+      if (pageText.value === "0") pageText.value = "";
       pageButton.classList.toggle(
         "haveValue",
         pageText.value !== "" && pageText.value !== "0"
@@ -583,13 +1092,13 @@ const sco = {
       owoBig.style.left = `${itemRect.left - owoBig.offsetWidth / 4}px`;
       owoBig.style.top = `${itemRect.top}px`;
     };
-    document.addEventListener("mouseover", showOwoBig);
-    document.addEventListener("mouseout", hideOwoBig);
+    lifecycle.listen(document, "mouseover", showOwoBig);
+    lifecycle.listen(document, "mouseout", hideOwoBig);
   },
   changeTimeFormat(selector) {
     selector.forEach((item) => {
       const timeVal = item.getAttribute("datetime");
-      item.textContent = utils.diffDate(timeVal, true);
+      item.textContent = Solitude.diffDate(timeVal, true);
       item.style.display = "inline";
     });
   },
@@ -605,7 +1114,7 @@ const sco = {
         loadTwoComment();
       }
     };
-    utils.addEventListenerPjax(switchBtn, "click", handleSwitchBtn);
+    Solitude.addEventListenerPjax(switchBtn, "click", handleSwitchBtn);
   },
   homeTypeit() {
     if (typeof home_subtitle === "undefined") return;
@@ -619,11 +1128,15 @@ const sco = {
       ty.type(item).pause(500).delete(item);
     });
     ty.go();
+    lifecycle.add(() => ty.destroy?.());
   },
 };
 
+Object.assign(Solitude, actions);
+Solitude.toggleTheme = () => Solitude.switchDarkMode();
+
 const addHighlight = () => {
-  const highlight = GLOBAL_CONFIG.highlight;
+  const highlight = Solitude.config.highlight;
   if (!highlight) return;
   const { copy, expand, limit, syntax } = highlight;
   const $isPrismjs = syntax === "prismjs";
@@ -644,7 +1157,7 @@ const addHighlight = () => {
     ? `<i class="solitude fas fa-angles-down"></i>`
     : "<i></i>";
 
-  const alertInfo = (ele, text) => utils.snackbarShow(text, false, 2000);
+  const alertInfo = (ele, text) => Solitude.snackbarShow(text, false, 2000);
 
   const copyFn = (e) => {
     const $buttonParent = e.parentNode;
@@ -658,7 +1171,7 @@ const addHighlight = () => {
     selection.removeAllRanges();
     selection.addRange(range);
     document.execCommand("copy");
-    alertInfo(e.lastChild, GLOBAL_CONFIG.lang.copy.success);
+    alertInfo(e.lastChild, Solitude.config.lang.copy.success);
     selection.removeAllRanges();
     $buttonParent.classList.remove("copy-true");
   };
@@ -686,14 +1199,14 @@ const addHighlight = () => {
       const hlTools = document.createElement("div");
       hlTools.className = `highlight-tools ${expandClass}`;
       hlTools.innerHTML = expandEle + lang + caption + copyEle;
-      utils.addEventListenerPjax(hlTools, "click", ToolsFn);
+      Solitude.addEventListenerPjax(hlTools, "click", ToolsFn);
       fragment.appendChild(hlTools);
     }
     if (limit && item.offsetHeight > limit + 30) {
       const ele = document.createElement("div");
       ele.className = "code-expand-btn";
       ele.innerHTML = limitEle;
-      utils.addEventListenerPjax(ele, "click", shrinkEle);
+      Solitude.addEventListenerPjax(ele, "click", shrinkEle);
       fragment.appendChild(ele);
     }
     if (service === "hl") {
@@ -706,17 +1219,17 @@ const addHighlight = () => {
   if ($isPrismjs) {
     $syntaxHighlight.forEach((item) => {
       const langName = item.getAttribute("data-language") || "Code";
-      const highlightLangEle = `<div class="code-lang">${utils.escapeHtml(
+      const highlightLangEle = `<div class="code-lang">${Solitude.escapeHtml(
         langName
       )}</div>`;
-      utils.wrap(item, "figure", { class: "highlight" });
+      Solitude.wrap(item, "figure", { class: "highlight" });
       createEle(highlightLangEle, item);
     });
   } else {
     $syntaxHighlight.forEach((item) => {
       let langName = item.getAttribute("class").split(" ")[1];
       if (langName === "plain" || langName === undefined) langName = "Code";
-      const highlightLangEle = `<div class="code-lang">${utils.escapeHtml(
+      const highlightLangEle = `<div class="code-lang">${Solitude.escapeHtml(
         langName
       )}</div>`;
       createEle(highlightLangEle, item, "hl");
@@ -735,8 +1248,8 @@ class toc {
     el.forEach((e) => {
       e.addEventListener("click", (event) => {
         event.preventDefault();
-        utils.scrollToDest(
-          utils.getEleTop(
+        Solitude.scrollToDest(
+          Solitude.getEleTop(
             document.getElementById(
               decodeURI(
                 (event.target.className === "toc-text"
@@ -774,7 +1287,7 @@ class toc {
       if (top === 0) return false;
       let currentIndex = "";
       list.forEach((ele, index) => {
-        if (top > utils.getEleTop(ele) - 80) {
+        if (top > Solitude.getEleTop(ele) - 80) {
           currentIndex = index;
         }
       });
@@ -794,11 +1307,11 @@ class toc {
       }
     };
 
-    window.tocScrollFn = utils.throttle(() => {
+    const tocScrollFn = Solitude.throttle(() => {
       const currentTop = window.scrollY || document.documentElement.scrollTop;
       findHeadPosition(currentTop);
     }, 100);
-    window.addEventListener("scroll", tocScrollFn);
+    lifecycle.listen(window, "scroll", tocScrollFn, { passive: true });
   }
 }
 
@@ -815,7 +1328,7 @@ class tabs {
           const $tabItem = this.parentNode;
           if (!$tabItem.classList.contains("active")) {
             const $tabContent = $tabItem.parentNode.nextElementSibling;
-            const $siblings = utils.siblings($tabItem, ".active")[0];
+            const $siblings = Solitude.siblings($tabItem, ".active")[0];
             $siblings && $siblings.classList.remove("active");
             $tabItem.classList.add("active");
             const tabId = this.getAttribute("data-href").replace("#", "");
@@ -828,22 +1341,25 @@ class tabs {
   }
 
   static lureAddListener() {
-    if (!GLOBAL_CONFIG.lure) return;
+    if (!Solitude.config.lure) return;
     const title = document.title;
-    document.addEventListener("visibilitychange", () => {
-      const { lure } = GLOBAL_CONFIG;
+    let restoreTimer;
+    lifecycle.listen(document, "visibilitychange", () => {
+      const { lure } = Solitude.config;
       document.title =
         document.visibilityState === "hidden" ? lure.jump : lure.back;
       if (document.visibilityState === "visible") {
-        setTimeout(() => {
+        clearTimeout(restoreTimer);
+        restoreTimer = setTimeout(() => {
           document.title = title;
         }, 2000);
       }
     });
+    lifecycle.add(() => clearTimeout(restoreTimer));
   }
 
   static expireAddListener() {
-    const { expire } = GLOBAL_CONFIG;
+    const { expire } = Solitude.config;
     if (!expire) return;
     const list = document.querySelectorAll(".post-meta-date time");
     const post_date = list.length
@@ -873,7 +1389,7 @@ class tabs {
 }
 
 const scrollFnToDo = () => {
-  const { toc } = PAGE_CONFIG;
+  const { toc } = Solitude.page;
 
   if (toc) {
     const $cardTocLayout = document.getElementById("card-toc");
@@ -883,8 +1399,8 @@ const scrollFnToDo = () => {
       if (!target) return;
 
       e.preventDefault();
-      utils.scrollToDest(
-        utils.getEleTop(
+      Solitude.scrollToDest(
+        Solitude.getEleTop(
           document.getElementById(
             decodeURI(target.getAttribute("href")).replace("#", "")
           )
@@ -895,7 +1411,7 @@ const scrollFnToDo = () => {
         $cardTocLayout.classList.remove("open");
       }
     };
-    utils.addEventListenerPjax($cardToc, "click", tocItemClickFn);
+    Solitude.addEventListenerPjax($cardToc, "click", tocItemClickFn);
   }
 };
 
@@ -903,44 +1419,128 @@ const forPostFn = () => {
   scrollFnToDo();
 };
 
-window.refreshFn = () => {
-  const { is_home, is_page, page, is_post, ai_text } = PAGE_CONFIG;
+const initPostCoverTilt = () => {
+  const cover = document.querySelector(".post-cover-aside");
+  const canTilt = window.matchMedia(
+    "(hover: hover) and (pointer: fine)"
+  ).matches;
+  const reduceMotion = window.matchMedia(
+    "(prefers-reduced-motion: reduce)"
+  ).matches;
+  if (!cover || !canTilt || reduceMotion) return;
+
+  const updateTilt = (event) => {
+    const rect = cover.getBoundingClientRect();
+    const x = (event.clientX - rect.left) / rect.width;
+    const y = (event.clientY - rect.top) / rect.height;
+    const rotateX = (0.5 - y) * 10;
+    const rotateY = (x - 0.5) * 10;
+
+    cover.style.setProperty("--post-cover-glow-x", `${(x * 100).toFixed(2)}%`);
+    cover.style.setProperty("--post-cover-glow-y", `${(y * 100).toFixed(2)}%`);
+    cover.style.setProperty("--post-cover-rotate-x", `${rotateX.toFixed(2)}deg`);
+    cover.style.setProperty("--post-cover-rotate-y", `${rotateY.toFixed(2)}deg`);
+    cover.style.setProperty("--post-cover-img-x", `${(-rotateY).toFixed(2)}px`);
+    cover.style.setProperty("--post-cover-img-y", `${rotateX.toFixed(2)}px`);
+  };
+
+  const resetTilt = () => {
+    cover.style.setProperty("--post-cover-rotate-x", "0deg");
+    cover.style.setProperty("--post-cover-rotate-y", "0deg");
+    cover.style.setProperty("--post-cover-img-x", "0px");
+    cover.style.setProperty("--post-cover-img-y", "0px");
+  };
+
+  lifecycle.listen(cover, "pointerenter", updateTilt);
+  lifecycle.listen(cover, "pointermove", updateTilt);
+  lifecycle.listen(cover, "pointerleave", resetTilt);
+  lifecycle.listen(cover, "pointercancel", resetTilt);
+};
+
+const initAboutCardGlow = () => {
+  const aboutPage = document.getElementById("about-page");
+  const canHover = window.matchMedia(
+    "(hover: hover) and (pointer: fine)"
+  ).matches;
+  if (!aboutPage || !canHover) return;
+
+  aboutPage.querySelectorAll(".author-content-item").forEach((card) => {
+    if (card.dataset.aboutGlowBound === "true") return;
+
+    const glow = document.createElement("div");
+    glow.className = "about-pointer-glow";
+    glow.setAttribute("aria-hidden", "true");
+    card.prepend(glow);
+    card.classList.add("about-glow-host");
+    card.dataset.aboutGlowBound = "true";
+
+    const updateGlowPosition = (event) => {
+      const rect = card.getBoundingClientRect();
+      const x = ((event.clientX - rect.left) / rect.width) * 100;
+      const y = ((event.clientY - rect.top) / rect.height) * 100;
+      card.style.setProperty("--about-glow-x", `${x}%`);
+      card.style.setProperty("--about-glow-y", `${y}%`);
+    };
+
+    card.addEventListener("pointerenter", (event) => {
+      updateGlowPosition(event);
+      card.classList.add("is-about-glow-active");
+    });
+    card.addEventListener("pointermove", updateGlowPosition);
+    card.addEventListener("pointerleave", () => {
+      card.classList.remove("is-about-glow-active");
+    });
+    card.addEventListener("pointercancel", () => {
+      card.classList.remove("is-about-glow-active");
+    });
+  });
+};
+
+Solitude.refresh = async () => {
+  lifecycle.disposePage();
+  await loadFeatureModules();
+  const { is_home, is_page, page, is_post, ai_text } = Solitude.page;
   const { runtime, lazyload, lightbox, randomlink, covercolor, lure, expire } =
-    GLOBAL_CONFIG;
+    Solitude.config;
   const timeSelector = ".datetime, .webinfo-item time, .post-meta-date time";
   document.body.setAttribute("data-type", page);
-  sco.changeTimeFormat(document.querySelectorAll(timeSelector));
-  runtime && sco.addRuntime();
+  Solitude.changeTimeFormat(document.querySelectorAll(timeSelector));
+  runtime && Solitude.addRuntime();
   [
     scrollFn,
     sidebarFn,
-    sco.addPhotoFigcaption,
-    sco.setTimeState,
-    sco.tagPageActive,
-    sco.categoriesBarActive,
-    sco.listenToPageInputPress,
-    sco.musicBind,
-    sco.addNavBackgroundInit,
-    sco.refreshWaterFall,
+    initTooltip,
+    () => Solitude.addPhotoFigcaption(),
+    () => Solitude.setTimeState(),
+    () => Solitude.tagPageActive(),
+    () => Solitude.categoriesBarActive(),
+    () => Solitude.listenToPageInputPress(),
+    () => Solitude.musicBind(),
+    () => Solitude.addNavBackgroundInit(),
+    () => Solitude.refreshWaterFall(),
   ].forEach((fn) => fn());
-  lazyload.enable && utils.lazyloadImg();
+  lazyload.enable && Solitude.lazyloadImg();
   lightbox &&
-    utils.lightbox(
+    Solitude.lightbox(
       document.querySelectorAll(
         ".article-container img:not(.flink-avatar,.gallery-group img, .no-lightbox)"
       )
     );
-  randomlink && randomLinksList();
+  randomlink && Solitude.randomLinksList?.();
+  Solitude.config.friend_links.async && Solitude.friendLinks?.init();
   if (is_post) {
-    if (ai_text) {
+    initPostCoverTilt();
+    if (ai_text && ai) {
       ai.init();
+      lifecycle.add(() => ai.cancel());
     }
   }
-  sco.switchComments();
+  Solitude.switchComments();
   initObserver();
   if (is_home) {
     showTodayCard();
-    sco.homeTypeit();
+    initHomeCenter();
+    Solitude.homeTypeit();
   }
   typeof updatePostsBasedOnComments === "function" &&
     updatePostsBasedOnComments();
@@ -952,25 +1552,41 @@ window.refreshFn = () => {
     tabs.expireAddListener();
   }
   if (covercolor.enable) coverColor();
-  if (PAGE_CONFIG.toc) toc.init();
+  if (Solitude.page.toc) toc.init();
   if (lure) tabs.lureAddListener();
-  page === "music" && initializeMusicPlayer();
+  if (page === "music") {
+    initializeMusicPlayer();
+    lifecycle.add(() => Solitude.musicPlayer?.destroy?.());
+  }
+  if (page === "archive") {
+    const { archivePageController, initArchivePage } = await import("./archive-page.js");
+    initArchivePage();
+    lifecycle.add(() => archivePageController.destroy());
+  }
+  initAboutCardGlow();
   forPostFn();
 };
 
-document.addEventListener("DOMContentLoaded", () => {
-  [
-    addCopyright,
-    window.refreshFn,
-    asideStatus,
-    () => (window.onscroll = percent),
-    sco.initConsoleState,
-  ].forEach((fn) => fn());
-});
+const initializeApp = async () => {
+  initActionDelegation(Solitude);
+  initPreloader(Solitude);
+  addCopyright();
+  await Solitude.refresh();
+  asideStatus();
+  window.onscroll = percent;
+  Solitude.initConsoleState();
+  lifecycle.emit("ready", { config: Solitude.config, page: Solitude.page });
+};
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initializeApp, { once: true });
+} else {
+  initializeApp();
+}
 
 document.addEventListener("visibilitychange", () => {
   if (document.hidden) {
-    sco.wasPageHidden = true;
+    Solitude.wasPageHidden = true;
   }
 });
 
@@ -980,13 +1596,13 @@ window.onkeydown = (e) => {
     code === "F12" ||
     (ctrlKey && shiftKey && (code === "KeyI" || code === "KeyC"))
   ) {
-    utils.snackbarShow(GLOBAL_CONFIG.lang.f12, false, 3000);
+    Solitude.snackbarShow(Solitude.config.lang.f12, false, 3000);
   }
   if (code === "Escape") {
-    sco.hideConsole();
+    Solitude.hideConsole();
   }
 };
 
 document.addEventListener("copy", () => {
-  utils.snackbarShow(GLOBAL_CONFIG.lang.copy.success, false, 3000);
+  Solitude.snackbarShow(Solitude.config.lang.copy.success, false, 3000);
 });