From 4d247cfb930cdc45f2f4b8a80a8e225c39aeac75 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Mon, 19 May 2025 14:54:59 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20reducemotion=20config?=
 =?UTF-8?q?=20option=20to=20optimize=20performance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add `reduceMotion` option in theme config to improve performance
- Update Button component to support reduced animations
- Modify GSAP animation logic to adapt to the new configuration
- Update documentation to reflect the new feature
---
 src/components/Button.astro                   | 15 ++++++--
 src/components/Widgets/GsapAnimation.astro    | 35 ++++++++++++-------
 src/config.ts                                 |  8 +++--
 src/content/posts/guides/Theme Guide-en.md    |  8 +++--
 src/content/posts/guides/Theme Guide-es.md    |  8 +++--
 src/content/posts/guides/Theme Guide-ja.md    |  8 +++--
 src/content/posts/guides/Theme Guide-ru.md    |  8 +++--
 src/content/posts/guides/Theme Guide-zh-tw.md |  8 +++--
 src/content/posts/guides/Theme Guide-zh.md    |  8 +++--
 src/layouts/Layout.astro                      |  5 ++-
 src/styles/transition.css                     |  5 ++-
 src/types/index.d.ts                          |  3 +-
 12 files changed, 77 insertions(+), 42 deletions(-)

diff --git a/src/components/Button.astro b/src/components/Button.astro
index a752c10..2654096 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -10,6 +10,7 @@ interface Props {
 }
 
 const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
+const reduceMotion = themeConfig.global.reduceMotion
 
 const { supportedLangs } = Astro.props
 const currentPath = Astro.url.pathname
@@ -61,7 +62,10 @@ const nextUrl = useSupportedLangs
 </div>
 
 <!-- Theme Toggle Script >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
-<script is:inline define:vars={{ lightMode, darkMode }}>
+<script
+  is:inline
+  define:vars={{ lightMode, darkMode, reduceMotion }}
+>
 // Update theme
 function updateTheme() {
   // Toggle website theme
@@ -82,13 +86,18 @@ function updateTheme() {
 
 // Bind click event to the button
 function setupThemeToggle() {
+  // Add reduce-motion class if enabled in config
+  if (reduceMotion) {
+    document.documentElement.classList.add('reduce-motion')
+  }
+
   // Locate theme toggle button
   const themeToggleButton = document.getElementById('theme-toggle-button')
   // Add click listener to the button
   if (themeToggleButton) {
     themeToggleButton.addEventListener('click', () => {
-      // If browser doesn't support View Transitions API, update theme directly
-      if (!document.startViewTransition) {
+      // If reduceMotion is enabled or browser doesn't support View Transitions API, update theme directly
+      if (reduceMotion || !document.startViewTransition) {
         updateTheme()
         return
       }
diff --git a/src/components/Widgets/GsapAnimation.astro b/src/components/Widgets/GsapAnimation.astro
index a302576..b53ec60 100644
--- a/src/components/Widgets/GsapAnimation.astro
+++ b/src/components/Widgets/GsapAnimation.astro
@@ -2,13 +2,22 @@
 import { gsap } from 'gsap'
 
 function setupPostPageAnimation() {
-  const allElements = Array.from(document.querySelectorAll('#gsap-post-page-content > *, #gsap-post-page-tags, #waline'))
+  // Post Content + Tags + Comments
+  const postContent = document.getElementById('gsap-post-page-content')
+  const postContentChildren = postContent ? Array.from(postContent.children) : []
+  const tagsElement = document.getElementById('gsap-post-page-tags')
+  const walineElement = document.getElementById('waline')
+  const allElements = [...postContentChildren, tagsElement, walineElement].filter(Boolean)
+
+  // TOC + Date + Back Button + TOC Icon
   const tocList = document.getElementById('toc-list')
   const tocListChildren = tocList ? Array.from(tocList.children) : []
   const dateElement = document.getElementById('gsap-post-page-date')
   const backButton = document.getElementById('back-button')
   const tocIcon = document.getElementById('toc-icon')
   const tocContainer = document.getElementById('toc-container')
+
+  // Screen Size Check
   const isLargeScreen = window.matchMedia('(min-width: 1024px)').matches
   const isSmallScreen = window.matchMedia('(max-width: 1535px)').matches
 
@@ -81,8 +90,8 @@ function setupPostPageAnimation() {
   }
   else {
     // Post Content + Tags + Comments
-    // First 7 elements
-    gsap.from(allElements.slice(0, 7), {
+    // First 5 elements
+    gsap.from(allElements.slice(0, 5), {
       opacity: 0,
       y: '3rem',
       duration: 0.5,
@@ -90,16 +99,16 @@ function setupPostPageAnimation() {
       ease: 'power2.out',
       stagger: 0.05,
     })
-    // Rest elements as the 8 element
-    if (allElements.length > 7) {
-      gsap.from(allElements.slice(7), {
-        opacity: 0,
-        y: '3rem',
-        duration: 0.5,
-        delay: 0.2 + 0.05 * 5,
-        ease: 'power2.out',
-      })
-    }
+    // Rest elements as the 6 element
+    // if (allElements.length > 5) {
+    //   gsap.from(allElements.slice(7), {
+    //     opacity: 0,
+    //     y: '3rem',
+    //     duration: 0.5,
+    //     delay: 0.2 + 0.05 * 5,
+    //     ease: 'power2.out',
+    //   })
+    // }
   }
 
   // Mobile Animation (for screens smaller than 1536px)
diff --git a/src/config.ts b/src/config.ts
index 6f94cc4..b9df07a 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -58,10 +58,12 @@ export const themeConfig: ThemeConfig = {
     fontStyle: 'sans', // sans, serif
     // date format for posts
     dateFormat: 'YYYY-MM-DD', // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
-    // enable KaTeX for mathematical formulas rendering
-    katex: true, // true, false
     // enable table of contents for all posts by default
     toc: true, // true, false
+    // enable KaTeX for mathematical formulas rendering
+    katex: true, // true, false
+    // reduce animations and transitions to improve performance
+    reduceMotion: false, // true, false
   },
   // GLOBAL SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
 
@@ -143,7 +145,7 @@ export const themeConfig: ThemeConfig = {
       {
         name: 'Email',
         url: 'email@radishzz.cc',
-      }
+      },
       // {
       //   name: 'X',
       //   url: 'https://x.com/radishzz_',
diff --git a/src/content/posts/guides/Theme Guide-en.md b/src/content/posts/guides/Theme Guide-en.md
index eea49fc..c27c173 100644
--- a/src/content/posts/guides/Theme Guide-en.md	
+++ b/src/content/posts/guides/Theme Guide-en.md	
@@ -84,10 +84,12 @@ global: {
   // 2025-04-13, 04-13-2025, 13-04-2025, Apr 13 2025，13 Apr 2025
   // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
   dateFormat: 'YYYY-MM-DD'
-  // enable KaTeX for mathematical formulas rendering
-  katex: true // true, false
   // enable table of contents for all posts by default
   toc: true // true, false
+  // enable KaTeX for mathematical formulas rendering
+  katex: true // true, false
+  // reduce animations and transitions to improve performance
+  reduceMotion: false // true, false
 }
 ```
 
@@ -317,7 +319,7 @@ Pins the article to the top. The higher the number, the higher the priority of t
 
 #### toc
 
-Generate table of contents. Shows h2 to h4 headings. Uses the global `global.toc` configuration by default, but can be overridden individually in each article.
+Generate table of contents. Shows h2 to h4 headings. Determined by the global configuration `global.toc` by default, but can be overridden individually in each article.
 
 #### lang
 
diff --git a/src/content/posts/guides/Theme Guide-es.md b/src/content/posts/guides/Theme Guide-es.md
index 58e17ed..b2d9b67 100644
--- a/src/content/posts/guides/Theme Guide-es.md	
+++ b/src/content/posts/guides/Theme Guide-es.md	
@@ -84,10 +84,12 @@ global: {
   // 2025-04-13, 04-13-2025, 13-04-2025, Apr 13 2025，13 Apr 2025
   // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
   dateFormat: 'YYYY-MM-DD'
-  // habilitar KaTeX para renderizar fórmulas matemáticas
-  katex: true // true, false
   // habilitar tabla de contenidos para todos los artículos por defecto
   toc: true // true, false
+  // habilitar KaTeX para renderizar fórmulas matemáticas
+  katex: true // true, false
+  // reducir animaciones y transiciones para mejorar el rendimiento
+  reduceMotion: false // true, false
 }
 ```
 
@@ -317,7 +319,7 @@ Fija el artículo en la parte superior. Cuanto mayor sea el número, mayor será
 
 #### toc
 
-Genera tabla de contenidos. Muestra encabezados de h2 a h4. Utiliza la configuración global `global.toc` por defecto, pero puede ser modificada individualmente en cada artículo.
+Genera tabla de contenidos. Muestra encabezados de h2 a h4. Determinado por la configuración global `global.toc` por defecto, pero puede ser modificada individualmente en cada artículo.
 
 #### lang
 
diff --git a/src/content/posts/guides/Theme Guide-ja.md b/src/content/posts/guides/Theme Guide-ja.md
index 6f7ff97..9cfb686 100644
--- a/src/content/posts/guides/Theme Guide-ja.md	
+++ b/src/content/posts/guides/Theme Guide-ja.md	
@@ -84,10 +84,12 @@ global: {
   // 2025-04-13, 04-13-2025, 13-04-2025, Apr 13 2025，13 Apr 2025
   // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
   dateFormat: 'YYYY-MM-DD'
-  // 数式表示のためのKaTeXを有効化
-  katex: true // true, false
   // デフォルトですべての記事に目次を表示
   toc: true // true, false
+  // 数式表示のためのKaTeXを有効化
+  katex: true // true, false
+  // アニメーションと遷移効果を減らしてパフォーマンスを向上させる
+  reduceMotion: false // true, false
 }
 ```
 
@@ -317,7 +319,7 @@ abbrlink: theme-guide
 
 #### toc
 
-目次を生成するかどうか。h2からh4までの見出しを表示します。デフォルトではグローバル設定 `global.toc` を使用しますが、記事ごとに個別に設定することも可能です。
+目次を生成するかどうか。h2からh4までの見出しを表示します。デフォルトではグローバル設定項目 `global.toc` によって決定されますが、記事ごとに個別に設定して上書きすることもできます。
 
 #### lang
 
diff --git a/src/content/posts/guides/Theme Guide-ru.md b/src/content/posts/guides/Theme Guide-ru.md
index 7606879..fc39c66 100644
--- a/src/content/posts/guides/Theme Guide-ru.md	
+++ b/src/content/posts/guides/Theme Guide-ru.md	
@@ -84,10 +84,12 @@ global: {
   // 2025-04-13, 04-13-2025, 13-04-2025, Apr 13 2025，13 Apr 2025
   // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
   dateFormat: 'YYYY-MM-DD'
-  // включить KaTeX для отображения математических формул
-  katex: true // true, false
   // включить оглавление для всех статей по умолчанию
   toc: true // true, false
+  // включить KaTeX для отображения математических формул
+  katex: true // true, false
+  // уменьшить анимации и переходы для повышения производительности
+  reduceMotion: false // true, false
 }
 ```
 
@@ -317,7 +319,7 @@ abbrlink: theme-guide
 
 #### toc
 
-Генерировать оглавление. Показывает заголовки от h2 до h4. По умолчанию использует глобальный параметр `global.toc`, но может быть изменен индивидуально в каждой статье.
+Генерировать оглавление. Показывает заголовки от h2 до h4. По умолчанию определяется глобальным параметром `global.toc`, но может быть изменен индивидуально в каждой статье.
 
 #### lang
 
diff --git a/src/content/posts/guides/Theme Guide-zh-tw.md b/src/content/posts/guides/Theme Guide-zh-tw.md
index 3e41c80..5ea1e79 100644
--- a/src/content/posts/guides/Theme Guide-zh-tw.md	
+++ b/src/content/posts/guides/Theme Guide-zh-tw.md	
@@ -84,10 +84,12 @@ global: {
   // 2025-04-13, 04-13-2025, 13-04-2025, Apr 13 2025，13 Apr 2025
   // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
   dateFormat: 'YYYY-MM-DD'
-  // 啟用 KaTeX 數學公式渲染
-  katex: true // true, false
   // 預設為所有文章開啟目錄
   toc: true // true, false
+  // 啟用 KaTeX 數學公式渲染
+  katex: true // true, false
+  // 減少動畫和過渡效果以提高性能
+  reduceMotion: false // true, false
 }
 ```
 
@@ -317,7 +319,7 @@ abbrlink: theme-guide
 
 #### toc
 
-是否生成目錄。顯示 h2 至 h4 標題。預設為全域配置 `global.toc` 的選項，可在文章中單獨設定以覆蓋全域配置。
+是否生成目錄。顯示 h2 至 h4 標題。預設由全域配置項 `global.toc` 決定，可在文章中單獨設定以覆蓋全域配置。
 
 #### lang
 
diff --git a/src/content/posts/guides/Theme Guide-zh.md b/src/content/posts/guides/Theme Guide-zh.md
index 8503193..5456da5 100644
--- a/src/content/posts/guides/Theme Guide-zh.md	
+++ b/src/content/posts/guides/Theme Guide-zh.md	
@@ -84,10 +84,12 @@ global: {
   // 2025-04-13, 04-13-2025, 13-04-2025, Apr 13 2025，13 Apr 2025
   // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
   dateFormat: 'YYYY-MM-DD'
-  // 启用 KaTeX 数学公式渲染
-  katex: true // true, false
   // 默认为所有文章开启目录
   toc: true // true, false
+  // 启用 KaTeX 数学公式渲染
+  katex: true // true, false
+  // 减少动画和过渡效果以提高性能
+  reduceMotion: false // true, false
 }
 ```
 
@@ -317,7 +319,7 @@ abbrlink: theme-guide
 
 #### toc
 
-是否生成目录。显示 h2 至 h4 标题。默认为全局配置 `global.toc` 的选项，可在文章中单独设置以覆盖全局配置。
+是否生成目录。显示 h2 至 h4 标题。默认由全局配置项 `global.toc` 决定，可在文章中单独设置以覆盖全局配置。
 
 #### lang
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 09d2826..2223434 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -25,6 +25,7 @@ interface Props {
 const { postTitle, postDescription, postSlug, supportedLangs = [] } = Astro.props
 const { isPost } = getPageInfo(Astro.url.pathname)
 const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
+const showAnimation = !themeConfig.global.reduceMotion
 const MarginBottom = isPost && themeConfig.comment?.enabled
   ? 'mb-10' // Post page with comments
   : 'mb-12' // Other pages without comments
@@ -48,11 +49,9 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
       </main>
       <Footer />
     </div>
-    <GsapAnimation />
+    {showAnimation && <GsapAnimation />}
     <Button supportedLangs={supportedLangs} />
     <GithubCard />
     <PhotoSwipe />
-    <!-- Fix bottom space being cut off before page transition on mobile -->
-    <div class="fixed bottom-0 w-full"></div>
   </body>
 </html>
diff --git a/src/styles/transition.css b/src/styles/transition.css
index e45510d..efab639 100644
--- a/src/styles/transition.css
+++ b/src/styles/transition.css
@@ -26,9 +26,12 @@ html[data-theme-changing] [data-disable-theme-transition] {
   view-transition-name: none !important;
 }
 
-/* Fallback animation when view-transition-name is not supported */
+/* Fallback transition for browsers not supporting view-transitions or when reduceMotion enabled */
 @supports not (view-transition-name: none) {
   html {
     --at-apply: 'transition-colors duration-300 ease-out';
   }
+}
+html.reduce-motion {
+  --at-apply: 'transition-colors duration-300 ease-out';
 }
\ No newline at end of file
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 61ccbac..8534c0e 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -33,8 +33,9 @@ export interface ThemeConfig {
     moreLocales: typeof supportedLangs[number][]
     fontStyle: 'sans' | 'serif'
     dateFormat: 'YYYY-MM-DD' | 'MM-DD-YYYY' | 'DD-MM-YYYY' | 'MONTH DAY YYYY' | 'DAY MONTH YYYY'
-    katex: boolean
     toc: boolean
+    katex: boolean
+    reduceMotion: boolean
   }
 
   comment: {