From 5697532810b325fd634d3806dd079d3e203eb539 Mon Sep 17 00:00:00 2001
From: pen <blueskyred2006@163.com>
Date: Fri, 13 Dec 2024 01:13:10 +0800
Subject: [PATCH 1/5] Fix the page flickers when the  search dialog pops up

---
 source/css/_common/components/third-party/search.styl | 1 +
 source/css/_common/outline/header/github-banner.styl  | 2 +-
 source/css/_common/scaffolding/base.styl              | 1 -
 source/js/third-party/search/algolia-search.js        | 3 +++
 source/js/third-party/search/local-search.js          | 3 +++
 5 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl
index 5b229ad2c..5dd193d5d 100644
--- a/source/css/_common/components/third-party/search.styl
+++ b/source/css/_common/components/third-party/search.styl
@@ -1,6 +1,7 @@
 if (hexo-config('local_search.enable') or hexo-config('algolia_search.enable')) {
   .search-active {
     overflow: hidden;
+    padding-right: var(--dialog-scrollgutter, 0);
   }
 
   .search-pop-overlay {
diff --git a/source/css/_common/outline/header/github-banner.styl b/source/css/_common/outline/header/github-banner.styl
index 214f76859..e3938026a 100644
--- a/source/css/_common/outline/header/github-banner.styl
+++ b/source/css/_common/outline/header/github-banner.styl
@@ -22,7 +22,7 @@ if (hexo-config('github_banner.enable')) {
       color: white;
       fill: var(--theme-color);
       position: absolute;
-      right: 0;
+      right: var(--dialog-scrollgutter, 0);
       top: 0;
       z-index: $zindex-0;
     }
diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl
index abf962208..e4990e15c 100644
--- a/source/css/_common/scaffolding/base.styl
+++ b/source/css/_common/scaffolding/base.styl
@@ -16,7 +16,6 @@ body {
   line-height: $line-height-base;
   min-height: 100%;
   position: relative;
-  transition: padding $transition-ease;
 
   if (hexo-config('body_scrollbar.overlay')) {
     overflow-x: hidden;
diff --git a/source/js/third-party/search/algolia-search.js b/source/js/third-party/search/algolia-search.js
index 6a0707893..5837c0c62 100644
--- a/source/js/third-party/search/algolia-search.js
+++ b/source/js/third-party/search/algolia-search.js
@@ -96,6 +96,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Handle and trigger popup window
   document.querySelectorAll('.popup-trigger').forEach(element => {
     element.addEventListener('click', () => {
+      document.body.style.setProperty("--dialog-scrollgutter", `${window.innerWidth - document.body.clientWidth}px`);
       document.body.classList.add('search-active');
       // Wait for search-popup animation to complete
       setTimeout(() => input.focus(), 500);
@@ -104,6 +105,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Monitor main search box
   const onPopupClose = () => {
+    document.body.style.setProperty("--dialog-scrollgutter", 0);
     document.body.classList.remove('search-active');
   };
 
@@ -117,6 +119,7 @@ document.addEventListener('DOMContentLoaded', () => {
   window.addEventListener('keydown', event => {
     if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
       event.preventDefault();
+      document.body.style.setProperty("--dialog-scrollgutter", `${window.innerWidth - document.body.clientWidth}px`);
       document.body.classList.add('search-active');
       setTimeout(() => input.focus(), 500);
     }
diff --git a/source/js/third-party/search/local-search.js b/source/js/third-party/search/local-search.js
index 1241f9278..43834b049 100644
--- a/source/js/third-party/search/local-search.js
+++ b/source/js/third-party/search/local-search.js
@@ -57,6 +57,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Handle and trigger popup window
   document.querySelectorAll('.popup-trigger').forEach(element => {
     element.addEventListener('click', () => {
+      document.body.style.setProperty("--dialog-scrollgutter", `${window.innerWidth - document.body.clientWidth}px`);
       document.body.classList.add('search-active');
       // Wait for search-popup animation to complete
       setTimeout(() => input.focus(), 500);
@@ -66,6 +67,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Monitor main search box
   const onPopupClose = () => {
+    document.body.style.setProperty("--dialog-scrollgutter", 0);
     document.body.classList.remove('search-active');
   };
 
@@ -82,6 +84,7 @@ document.addEventListener('DOMContentLoaded', () => {
   window.addEventListener('keydown', event => {
     if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
       event.preventDefault();
+      document.body.style.setProperty("--dialog-scrollgutter", `${window.innerWidth - document.body.clientWidth}px`)
       document.body.classList.add('search-active');
       setTimeout(() => input.focus(), 500);
       if (!localSearch.isfetched) localSearch.fetchData();

From 703a1cfae0d04b2d5f5daa3e243bae0e726d3e32 Mon Sep 17 00:00:00 2001
From: pen <blueskyred2006@163.com>
Date: Fri, 13 Dec 2024 01:41:22 +0800
Subject: [PATCH 2/5] Fixd eslint error

---
 source/js/third-party/search/algolia-search.js | 6 +++---
 source/js/third-party/search/local-search.js   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/source/js/third-party/search/algolia-search.js b/source/js/third-party/search/algolia-search.js
index 5837c0c62..9f5469195 100644
--- a/source/js/third-party/search/algolia-search.js
+++ b/source/js/third-party/search/algolia-search.js
@@ -96,7 +96,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Handle and trigger popup window
   document.querySelectorAll('.popup-trigger').forEach(element => {
     element.addEventListener('click', () => {
-      document.body.style.setProperty("--dialog-scrollgutter", `${window.innerWidth - document.body.clientWidth}px`);
+      document.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - document.body.clientWidth}px`);
       document.body.classList.add('search-active');
       // Wait for search-popup animation to complete
       setTimeout(() => input.focus(), 500);
@@ -105,7 +105,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Monitor main search box
   const onPopupClose = () => {
-    document.body.style.setProperty("--dialog-scrollgutter", 0);
+    document.body.style.setProperty('--dialog-scrollgutter', 0);
     document.body.classList.remove('search-active');
   };
 
@@ -119,7 +119,7 @@ document.addEventListener('DOMContentLoaded', () => {
   window.addEventListener('keydown', event => {
     if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
       event.preventDefault();
-      document.body.style.setProperty("--dialog-scrollgutter", `${window.innerWidth - document.body.clientWidth}px`);
+      document.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - document.body.clientWidth}px`);
       document.body.classList.add('search-active');
       setTimeout(() => input.focus(), 500);
     }
diff --git a/source/js/third-party/search/local-search.js b/source/js/third-party/search/local-search.js
index 43834b049..bf37a1ec6 100644
--- a/source/js/third-party/search/local-search.js
+++ b/source/js/third-party/search/local-search.js
@@ -57,7 +57,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Handle and trigger popup window
   document.querySelectorAll('.popup-trigger').forEach(element => {
     element.addEventListener('click', () => {
-      document.body.style.setProperty("--dialog-scrollgutter", `${window.innerWidth - document.body.clientWidth}px`);
+      document.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - document.body.clientWidth}px`);
       document.body.classList.add('search-active');
       // Wait for search-popup animation to complete
       setTimeout(() => input.focus(), 500);
@@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Monitor main search box
   const onPopupClose = () => {
-    document.body.style.setProperty("--dialog-scrollgutter", 0);
+    document.body.style.setProperty('--dialog-scrollgutter', 0);
     document.body.classList.remove('search-active');
   };
 
@@ -84,7 +84,7 @@ document.addEventListener('DOMContentLoaded', () => {
   window.addEventListener('keydown', event => {
     if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
       event.preventDefault();
-      document.body.style.setProperty("--dialog-scrollgutter", `${window.innerWidth - document.body.clientWidth}px`)
+      document.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - document.body.clientWidth}px`);
       document.body.classList.add('search-active');
       setTimeout(() => input.focus(), 500);
       if (!localSearch.isfetched) localSearch.fetchData();

From 35d439e9507d580b54604bcfd83edd2e0d2130a7 Mon Sep 17 00:00:00 2001
From: pen <blueskyred2006@163.com>
Date: Sat, 14 Dec 2024 02:54:51 +0800
Subject: [PATCH 3/5] padding change margin

---
 .../components/third-party/search.styl        |  2 +-
 .../_common/outline/header/github-banner.styl |  2 +-
 source/css/_common/scaffolding/base.styl      |  2 +-
 .../js/third-party/search/algolia-search.js   | 19 ++++++++++++++++---
 source/js/third-party/search/local-search.js  | 18 +++++++++++++++---
 5 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl
index 5dd193d5d..be6f3ef92 100644
--- a/source/css/_common/components/third-party/search.styl
+++ b/source/css/_common/components/third-party/search.styl
@@ -1,7 +1,7 @@
 if (hexo-config('local_search.enable') or hexo-config('algolia_search.enable')) {
   .search-active {
     overflow: hidden;
-    padding-right: var(--dialog-scrollgutter, 0);
+    margin-right: var(--dialog-scrollgutter, 0);
   }
 
   .search-pop-overlay {
diff --git a/source/css/_common/outline/header/github-banner.styl b/source/css/_common/outline/header/github-banner.styl
index e3938026a..214f76859 100644
--- a/source/css/_common/outline/header/github-banner.styl
+++ b/source/css/_common/outline/header/github-banner.styl
@@ -22,7 +22,7 @@ if (hexo-config('github_banner.enable')) {
       color: white;
       fill: var(--theme-color);
       position: absolute;
-      right: var(--dialog-scrollgutter, 0);
+      right: 0;
       top: 0;
       z-index: $zindex-0;
     }
diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl
index e4990e15c..329d1bbdf 100644
--- a/source/css/_common/scaffolding/base.styl
+++ b/source/css/_common/scaffolding/base.styl
@@ -16,7 +16,7 @@ body {
   line-height: $line-height-base;
   min-height: 100%;
   position: relative;
-
+  transition: padding $transition-ease;
   if (hexo-config('body_scrollbar.overlay')) {
     overflow-x: hidden;
     @supports (overflow-x: clip) {
diff --git a/source/js/third-party/search/algolia-search.js b/source/js/third-party/search/algolia-search.js
index 9f5469195..9fe69b17f 100644
--- a/source/js/third-party/search/algolia-search.js
+++ b/source/js/third-party/search/algolia-search.js
@@ -23,6 +23,19 @@ document.addEventListener('DOMContentLoaded', () => {
   let isSearching = false;
   let pendingQuery = null;
 
+/**
+ * Sets the CSS variable '--dialog-scrollgutter' to the specified gap value.
+ * If no gap is provided, it calculates the gap as the difference between
+ * the window's inner width and the document body's client width.
+ *
+ * @param {string} [gap] - The gap value to be set. If not provided, the
+ *                         default gap is calculated automatically.
+ */
+  const setGutter = (gap) => {
+    const gutter = gap || `${window.innerWidth - document.body.clientWidth}px`;
+    document.body.style.setProperty('--dialog-scrollgutter', gutter);
+  }
+
   const searchAlgolia = async(searchText, page = 0) => {
     if (isSearching) {
       pendingQuery = { searchText, page };
@@ -96,7 +109,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Handle and trigger popup window
   document.querySelectorAll('.popup-trigger').forEach(element => {
     element.addEventListener('click', () => {
-      document.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - document.body.clientWidth}px`);
+      setGutter();
       document.body.classList.add('search-active');
       // Wait for search-popup animation to complete
       setTimeout(() => input.focus(), 500);
@@ -105,7 +118,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Monitor main search box
   const onPopupClose = () => {
-    document.body.style.setProperty('--dialog-scrollgutter', 0);
+    setGutter('0');
     document.body.classList.remove('search-active');
   };
 
@@ -119,7 +132,7 @@ document.addEventListener('DOMContentLoaded', () => {
   window.addEventListener('keydown', event => {
     if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
       event.preventDefault();
-      document.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - document.body.clientWidth}px`);
+      setGutter();
       document.body.classList.add('search-active');
       setTimeout(() => input.focus(), 500);
     }
diff --git a/source/js/third-party/search/local-search.js b/source/js/third-party/search/local-search.js
index bf37a1ec6..b54e8a65f 100644
--- a/source/js/third-party/search/local-search.js
+++ b/source/js/third-party/search/local-search.js
@@ -15,6 +15,18 @@ document.addEventListener('DOMContentLoaded', () => {
   const input = document.querySelector('.search-input');
   const container = document.querySelector('.search-result-container');
 
+  /**
+   * Sets the CSS variable '--dialog-scrollgutter' to the specified gap value.
+   * If no gap is provided, it calculates the gap as the difference between
+   * the window's inner width and the document body's client width.
+   *
+   * @param {string} [gap] - The gap value to be set. If not provided, the
+   *                         default gap is calculated automatically.
+   */
+  const setGutter = (gap) => {
+    document.body.style.setProperty('--dialog-scrollgutter', gap || `${window.innerWidth - document.body.clientWidth}px`);
+  }
+
   const inputEventFunction = () => {
     if (!localSearch.isfetched) return;
     const searchText = input.value.trim().toLowerCase();
@@ -57,7 +69,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Handle and trigger popup window
   document.querySelectorAll('.popup-trigger').forEach(element => {
     element.addEventListener('click', () => {
-      document.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - document.body.clientWidth}px`);
+      setGutter();
       document.body.classList.add('search-active');
       // Wait for search-popup animation to complete
       setTimeout(() => input.focus(), 500);
@@ -67,7 +79,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Monitor main search box
   const onPopupClose = () => {
-    document.body.style.setProperty('--dialog-scrollgutter', 0);
+    setGutter('0');
     document.body.classList.remove('search-active');
   };
 
@@ -84,7 +96,7 @@ document.addEventListener('DOMContentLoaded', () => {
   window.addEventListener('keydown', event => {
     if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
       event.preventDefault();
-      document.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - document.body.clientWidth}px`);
+      setGutter();
       document.body.classList.add('search-active');
       setTimeout(() => input.focus(), 500);
       if (!localSearch.isfetched) localSearch.fetchData();

From e14852d786d179f91dfe7143f94dc97ec5fe1f4b Mon Sep 17 00:00:00 2001
From: pen <blueskyred2006@163.com>
Date: Sat, 14 Dec 2024 03:01:10 +0800
Subject: [PATCH 4/5] Fix eslint error

---
 source/js/third-party/search/algolia-search.js | 6 +++---
 source/js/third-party/search/local-search.js   | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/source/js/third-party/search/algolia-search.js b/source/js/third-party/search/algolia-search.js
index 9fe69b17f..9a17389a0 100644
--- a/source/js/third-party/search/algolia-search.js
+++ b/source/js/third-party/search/algolia-search.js
@@ -23,7 +23,7 @@ document.addEventListener('DOMContentLoaded', () => {
   let isSearching = false;
   let pendingQuery = null;
 
-/**
+ /**
  * Sets the CSS variable '--dialog-scrollgutter' to the specified gap value.
  * If no gap is provided, it calculates the gap as the difference between
  * the window's inner width and the document body's client width.
@@ -31,10 +31,10 @@ document.addEventListener('DOMContentLoaded', () => {
  * @param {string} [gap] - The gap value to be set. If not provided, the
  *                         default gap is calculated automatically.
  */
-  const setGutter = (gap) => {
+  const setGutter = gap => {
     const gutter = gap || `${window.innerWidth - document.body.clientWidth}px`;
     document.body.style.setProperty('--dialog-scrollgutter', gutter);
-  }
+  };
 
   const searchAlgolia = async(searchText, page = 0) => {
     if (isSearching) {
diff --git a/source/js/third-party/search/local-search.js b/source/js/third-party/search/local-search.js
index b54e8a65f..ff0744066 100644
--- a/source/js/third-party/search/local-search.js
+++ b/source/js/third-party/search/local-search.js
@@ -23,9 +23,9 @@ document.addEventListener('DOMContentLoaded', () => {
    * @param {string} [gap] - The gap value to be set. If not provided, the
    *                         default gap is calculated automatically.
    */
-  const setGutter = (gap) => {
+  const setGutter = gap => {
     document.body.style.setProperty('--dialog-scrollgutter', gap || `${window.innerWidth - document.body.clientWidth}px`);
-  }
+  };
 
   const inputEventFunction = () => {
     if (!localSearch.isfetched) return;

From cef57c67d7b2880c5165a8e9403f0e43de53f098 Mon Sep 17 00:00:00 2001
From: pen <blueskyred2006@163.com>
Date: Sat, 14 Dec 2024 03:05:50 +0800
Subject: [PATCH 5/5] Expected indentation of 2 spaces but found 1  indent

---
 source/js/third-party/search/algolia-search.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/source/js/third-party/search/algolia-search.js b/source/js/third-party/search/algolia-search.js
index 9a17389a0..502acd677 100644
--- a/source/js/third-party/search/algolia-search.js
+++ b/source/js/third-party/search/algolia-search.js
@@ -23,14 +23,14 @@ document.addEventListener('DOMContentLoaded', () => {
   let isSearching = false;
   let pendingQuery = null;
 
- /**
- * Sets the CSS variable '--dialog-scrollgutter' to the specified gap value.
- * If no gap is provided, it calculates the gap as the difference between
- * the window's inner width and the document body's client width.
- *
- * @param {string} [gap] - The gap value to be set. If not provided, the
- *                         default gap is calculated automatically.
- */
+  /**
+   * Sets the CSS variable '--dialog-scrollgutter' to the specified gap value.
+   * If no gap is provided, it calculates the gap as the difference between
+   * the window's inner width and the document body's client width.
+   *
+   * @param {string} [gap] - The gap value to be set. If not provided, the
+   *                         default gap is calculated automatically.
+   */
   const setGutter = gap => {
     const gutter = gap || `${window.innerWidth - document.body.clientWidth}px`;
     document.body.style.setProperty('--dialog-scrollgutter', gutter);