feat: reduce layout shift caused by banner (#444)

Author: sapphi-red

.vitepress/config/inlined-scripts/banner.js

@@ -0,0 +1,11 @@
+(() => {
+  const restore = (key, cls, def = false) => {
+    const saved = localStorage.getItem(key);
+    if (saved ? saved !== "false" : def) {
+      document.documentElement.classList.add(cls);
+    }
+  };
+
+  window.__OXC_BANNER_ID__ = "/blog/2025-06-10-oxlint-stable";
+  restore(`oxc-banner-dismissed-${__OXC_BANNER_ID__}`, "banner-dismissed");
+})();

.vitepress/config/shared.ts

@@ -1,8 +1,17 @@
+import { readFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { defineConfig, HeadConfig } from "vitepress";
 import { groupIconMdPlugin, groupIconVitePlugin } from "vitepress-plugin-group-icons";
 
+function inlineScript(file: string): HeadConfig {
+  return [
+    "script",
+    {},
+    readFileSync(resolve(__dirname, `./inlined-scripts/${file}`), "utf-8"),
+  ];
+}
+
 const head: HeadConfig[] = [
   [
     "link",
@@ -31,6 +40,8 @@ const head: HeadConfig[] = [
       content: "https://cdn.jsdelivr.net/gh/oxc-project/oxc-assets/preview-universal.png",
     },
   ],
+  // banner
+  inlineScript("banner.js"),
   // Google Analytics
   ["script", { async: "", src: "https://www.googletagmanager.com/gtag/js?id=G-X7WQ091KL7" }],
   [

.vitepress/theme/components/Banner.vue

@@ -16,6 +16,7 @@ const hide = () => {
   document.documentElement.classList.add("banner-dismissed");
 };
 
+// Sync with inlined-scripts/banner.js
 const slug = "/blog/2025-06-10-oxlint-stable";
 
 const bannerDismissed = useLocalStorage<boolean>(`oxc-banner-dismissed-${slug}`, false);