sync content

Author: Rinai-R

astro.config.mjs

@@ -40,7 +40,8 @@ export default defineConfig({
 			// when the Tailwind class `transition-all` is used
 			containers: ["main", "#toc"],
 			smoothScrolling: true,
-			cache: true,
+			// Swup cache + client:only islands can get out of sync and break hydration.
+			cache: false,
 			preload: true,
 			accessibility: true,
 			updateHead: true,
@@ -102,7 +103,7 @@ export default defineConfig({
 		}),
 		svelte(),
 		sitemap(),
-	],
+	].filter(Boolean),
 	markdown: {
 		remarkPlugins: [
 			remarkMath,

src/layouts/Layout.astro

@@ -347,6 +347,11 @@ function scheduleSwupRecovery() {
 }
 
 function setClickOutsideToClose(panel: string, ignores: string[]) {
+	const registry = (window as unknown as { __clickOutsideRegistry?: Set<string> }).__clickOutsideRegistry
+		?? ((window as unknown as { __clickOutsideRegistry: Set<string> }).__clickOutsideRegistry = new Set<string>());
+	if (registry.has(panel)) return;
+	registry.add(panel);
+
 	document.addEventListener("click", event => {
 		const panelDom = document.getElementById(panel);
 		if (!panelDom) {
@@ -377,6 +382,8 @@ function loadHue() {
 }
 
 let bodyScrollbarInitialized = false;
+let bodyScrollbarScheduled = false;
+const enableBodyScrollbar = false;
 let katexObserver: IntersectionObserver | undefined;
 const katexObserverOptions = {
 	root: null,
@@ -419,28 +426,69 @@ function ensureKatexObserver() {
 	}, katexObserverOptions);
 }
 
-function initCustomScrollbar() {
+function initBodyScrollbar() {
+	if (!enableBodyScrollbar) return;
 	const bodyElement = document.body;
-	if (!bodyElement) return;
-	if (!bodyScrollbarInitialized) {
-		OverlayScrollbars(
-			// docs say that a initialization to the body element would affect native functionality like window.scrollTo
-			// but just leave it here for now
-			{
-				target: bodyElement,
-				cancel: {
-					nativeScrollbarsOverlaid: true,    // don't initialize the overlay scrollbar if there is a native one
-				}
-			}, {
+	if (!bodyElement || bodyScrollbarInitialized) return;
+
+	OverlayScrollbars(
+		{
+			target: bodyElement,
+			cancel: {
+				// Avoid replacing native overlay scrollbars (macOS, etc.)
+				nativeScrollbarsOverlaid: true,
+			},
+		},
+		{
 			scrollbars: {
 				theme: 'scrollbar-base scrollbar-auto py-1',
 				autoHide: 'move',
 				autoHideDelay: 500,
 				autoHideSuspend: false,
 			},
-		});
-		bodyScrollbarInitialized = true;
+		}
+	);
+
+	bodyScrollbarInitialized = true;
+}
+
+function scheduleBodyScrollbarInit() {
+	if (bodyScrollbarInitialized || bodyScrollbarScheduled) return;
+	bodyScrollbarScheduled = true;
+
+	const run = () => {
+		bodyScrollbarScheduled = false;
+		initBodyScrollbar();
+	};
+
+	// Defer body-level DOM mutation until after the initial hydration window.
+	if (document.readyState === 'complete') {
+		requestAnimationFrame(run);
+		return;
+	}
+
+	window.addEventListener(
+		'load',
+		() => {
+			run();
+		},
+		{ once: true }
+	);
+
+	const requestIdle = (window as Window & {
+		requestIdleCallback?: (cb: () => void, opts?: { timeout: number }) => void;
+	}).requestIdleCallback;
+	if (requestIdle) {
+		requestIdle(run, { timeout: 1500 });
+		return;
 	}
+	setTimeout(run, 0);
+}
+
+function initCustomScrollbar() {
+	const bodyElement = document.body;
+	if (!bodyElement) return;
+	scheduleBodyScrollbarInit();
 
 	ensureKatexObserver();
 	const katexElements = document.querySelectorAll('.katex-display') as NodeListOf<HTMLElement>;
@@ -472,9 +520,31 @@ function init() {
 }
 
 /* Load settings when entering the site */
-init();
+if (document.readyState === 'loading') {
+	document.addEventListener('DOMContentLoaded', init, { once: true });
+} else {
+	init();
+}
+
+function syncNavbarForRoute(isHome: boolean) {
+	const navbar = document.getElementById('navbar');
+	if (!navbar) return;
+	navbar.setAttribute('data-is-home', String(isHome));
+	if (navbar.getAttribute('data-transparent-mode') === 'semifull') {
+		// Non-home pages should always render the blurred state immediately.
+		navbar.classList.toggle('scrolled', !isHome || window.scrollY > 8);
+	}
+}
 
 const setup = () => {
+	// In dev, swup's cached HTML can get out of sync with hot-updated JS and break islands.
+	if (import.meta.env.DEV) {
+		try {
+			window.swup?.cache?.empty?.();
+		} catch (error) {
+			console.warn('Failed to clear swup cache in dev:', error);
+		}
+	}
 	// TODO: temp solution to change the height of the banner
 /*
 	window.swup.hooks.on('animation:out:start', () => {
@@ -511,19 +581,20 @@ const setup = () => {
 		updateScrollThresholds();
 		requestScrollUpdate();
 	});
-	window.swup.hooks.on('visit:error', (visit: {to: {url: string}}) => {
-		clearAnimationFlags();
-		window.location.href = visit.to.url;
-	});
 	window.swup.hooks.on('visit:start', (visit: {to: {url: string}}) => {
+		if (import.meta.env.DEV) {
+			window.swup?.cache?.empty?.();
+		}
 		scheduleSwupRecovery();
 		// change banner height immediately when a link is clicked
 		const bodyElement = document.querySelector('body')
-		if (pathsEqual(visit.to.url, url('/'))) {
+		const isHomeTarget = pathsEqual(visit.to.url, url('/'));
+		if (isHomeTarget) {
 			bodyElement!.classList.add('lg:is-home');
 		} else {
 			bodyElement!.classList.remove('lg:is-home');
 		}
+		syncNavbarForRoute(isHomeTarget);
 		updateScrollThresholds();
 		requestScrollUpdate();
 
@@ -545,6 +616,7 @@ const setup = () => {
 		if (heightExtend) {
 			heightExtend.classList.remove('hidden')
 		}
+		syncNavbarForRoute(document.body.classList.contains('lg:is-home'));
 		refreshScrollTargets();
 		updateScrollThresholds();
 		requestScrollUpdate();

src/layouts/MainGridLayout.astro

@@ -95,7 +95,7 @@ const mainPanelTop = isBannerMode
 <!-- Navbar -->
 <slot slot="head" name="head"></slot>
 {isFullscreenMode && <FullscreenWallpaper config={siteConfig.wallpaper}></FullscreenWallpaper>}
-<div id="top-row" class="z-50 pointer-events-none relative transition-all duration-700 max-w-[var(--page-width)] px-0 md:pl-6 md:pr-2 mx-auto lg:ml-auto lg:mr-6" class:list={[""]}>
+<div id="top-row" class="z-50 pointer-events-none relative transition-all duration-700 max-w-[var(--page-width)] px-0 md:pl-6 md:pr-2 2xl:pl-12 2xl:pr-0 mx-auto" class:list={[""]}>
     <div id="navbar-wrapper" class="pointer-events-auto sticky top-0 transition-all">
         <Navbar></Navbar>
     </div>
@@ -117,9 +117,9 @@ const mainPanelTop = isBannerMode
      class:list={[{"mobile-main-no-banner": !isHomePage && isBannerMode, "no-banner-layout": !isBannerMode}]}
      style={`top: ${mainPanelTop}`}>
     <!-- The pointer-events-none here prevent blocking the click event of the TOC -->
-    <div class="relative max-w-[var(--page-width)] mx-auto lg:ml-auto lg:mr-6 pointer-events-auto">
+    <div class="relative max-w-[var(--page-width)] mx-auto 2xl:pl-12 2xl:pr-0 pointer-events-auto">
         <div id="main-grid" class="transition duration-700 w-full left-0 right-0 grid grid-cols-1 lg:grid-cols-[16rem_minmax(0,max(0px,calc(var(--page-width)_-_16rem_-_0.75rem)))] 2xl:grid-cols-[16rem_minmax(0,max(0px,calc(var(--page-width)_-_16rem_-_12.5rem_-_1.5rem)))_12.5rem] grid-rows-[auto_1fr_auto] lg:grid-rows-[auto]
-    mx-auto gap-2 lg:gap-3 px-0 md:pl-6 md:pr-2"
+    mx-auto gap-2 lg:gap-3 px-0 md:pl-6 md:pr-2 2xl:pl-12 2xl:pr-0"
         >
             <!-- Banner image credit -->
             {hasBannerCredit && <a href={siteConfig.wallpaper.banner?.credit?.url || "#"} id="banner-credit" target={hasBannerLink ? "_blank" : undefined} rel={hasBannerLink ? "noopener" : undefined} aria-label="Visit image source"