fix: back button error and view transition on ios, move scripts from layout to components

src/components/Button.astro

@@ -1,5 +1,5 @@
 ---
-import { moreLocales } from '@/config'
+import { moreLocales, themeConfig } from '@/config'
 import { getNextGlobalLangPath, getNextSupportedLangPath } from '@/i18n/path'
 import { isPostPage, isTagPage } from '@/utils/page'
 
@@ -7,6 +7,8 @@ interface Props {
   supportedLangs: string[]
 }
 
+const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
+
 const { supportedLangs } = Astro.props
 const currentPath = Astro.url.pathname
 const isPost = isPostPage(currentPath)
@@ -25,10 +27,10 @@ const nextUrl = useSupportedLangs
 ---
 
 <div
-class:list={[
+  class:list={[
   'absolute flex gap-6 top-14.6 right-7.25vw min-[823px]:max-[1024px]:right-[calc(50vw-22rem)]',
   '[@supports(-webkit-touch-callout:none)]:top-13.6', // fix position issue on ios
-  'lg:(fixed w-14rem top-auto bottom-47 right-[max(5.625rem,calc(50vw-34.375rem))])'
+  'lg:(fixed w-14rem top-auto bottom-47 right-[max(5.625rem,calc(50vw-34.375rem))])',
 ]}
 >
   <!-- Language switcher -->
@@ -65,3 +67,56 @@ class:list={[
     </svg>
   </button>
 </div>
+
+<!-- Theme toggle >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
+<script is:inline define:vars={{ lightMode, darkMode }}>
+// Update theme
+function updateTheme() {
+  // Toggle website theme
+  document.documentElement.classList.toggle('dark')
+
+  // Get current theme
+  const isDark = document.documentElement.classList.contains('dark')
+  // Update meta theme color
+  const metaThemeColor = document.querySelector('meta[name="theme-color"]')
+  if (metaThemeColor) {
+    metaThemeColor.setAttribute('content', isDark ? darkMode : lightMode)
+  }
+
+  // Update theme configuration in local storage
+  localStorage.setItem('theme', isDark ? 'dark' : 'light')
+  document.dispatchEvent(new Event('theme-changed'))
+}
+
+// Bind click event to the button
+function setupThemeToggle() {
+  // Locate theme toggle button
+  const themeToggleButtons = document.querySelectorAll('.button-theme-toggle')
+  // Add click listener to each button
+  themeToggleButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      // If browser doesn't support View Transitions API, update theme directly
+      if (!document.startViewTransition) {
+        updateTheme()
+        return
+      }
+
+      // Temporarily add markers during animation to implement view transition and disable CSS transitions
+      document.documentElement.style.setProperty('view-transition-name', 'theme-transition')
+      document.documentElement.setAttribute('data-theme-transition', '')
+
+      // If browser supports View Transitions API, use it to update theme
+      const themeTransition = document.startViewTransition(updateTheme)
+      // Remove markers after animation
+      themeTransition.finished.then(() => {
+        document.documentElement.style.removeProperty('view-transition-name')
+        document.documentElement.removeAttribute('data-theme-transition')
+      })
+    })
+  })
+}
+
+// Initialize click event (on first load or page transition)
+setupThemeToggle()
+document.addEventListener('astro:after-swap', setupThemeToggle)
+</script>

src/components/Header.astro

@@ -39,13 +39,19 @@ const SubtitleTag = isPost ? 'div' : 'h2'
       'font-bold font-title',
     ]}
   >
-    <a
+    <!-- Fix text cropping issues during view transition on ios by adding a div tag -->
-      href={getLocalizedPath('/')}
+    <div
+      class="box-content inline-block pr-1"
       transition:name={`site-title-${currentLang}`}
       data-disable-transition-on-theme
     >
-        {headerTitle}
+      <a
+        id="site-title-link"
+        href={getLocalizedPath('/')}
+      >
+          {headerTitle}
       </a>
+    </div>
   </TitleTag>
 
   {headerSubtitle && (

src/components/Widgets/BackHome.astro

@@ -13,3 +13,22 @@
     <path d="M16.6 1.9 4.3 12l12.3 10.1.3 1.6h.8l-.5-5.5h-.8l.1 2.5L6.6 12l9.9-8.7-.1 2.5h.8l.5-5.5h-.8z"></path>
   </svg>
 </button>
+
+<script>
+function setupBackButton() {
+  document.getElementById('back-button')?.addEventListener('click', () => {
+    if (document.referrer && document.referrer.includes(window.location.hostname)) {
+      window.history.back()
+    }
+    else {
+      const titleLink = document.getElementById('site-title-link') as HTMLAnchorElement
+      if (titleLink) {
+        titleLink.click()
+      }
+    }
+  })
+}
+
+setupBackButton()
+document.addEventListener('astro:after-swap', setupBackButton)
+</script>

src/layouts/Layout.astro

@@ -1,8 +1,8 @@
 ---
+import Button from '@/components/Button.astro'
 import Footer from '@/components/Footer.astro'
 import Header from '@/components/Header.astro'
 import Navbar from '@/components/Navbar.astro'
-import Button from '@/components/Button.astro'
 import themeConfig from '@/config'
 import Head from '@/layouts/Head.astro'
 import { getPageInfo } from '@/utils/page'
@@ -18,9 +18,7 @@ interface Props {
 }
 
 const { postTitle, postDescription, postSlug, supportedLangs = [] } = Astro.props
-const { getLocalizedPath, isPost } = getPageInfo(Astro.url.pathname)
+const { isPost } = getPageInfo(Astro.url.pathname)
-const localizedHome = getLocalizedPath('/')
-const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
 const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
 const MarginBottom = isPost && themeConfig.comment?.enabled
   ? 'mb-10' // Post page with comment system
@@ -45,81 +43,8 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
       <main class={MarginBottom}>
         <slot />
       </main>
-      <Button supportedLangs={supportedLangs} />
       <Footer />
     </div>
-
+    <Button supportedLangs={supportedLangs} />
-    <!-- Theme toggle >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
-    <script is:inline define:vars={{ lightMode, darkMode }}>
-    // Update theme
-    function updateTheme() {
-      // Toggle website theme
-      document.documentElement.classList.toggle('dark')
-
-      // Get current theme
-      const isDark = document.documentElement.classList.contains('dark')
-      // Update meta theme color
-      const metaThemeColor = document.querySelector('meta[name="theme-color"]')
-      if (metaThemeColor) {
-        metaThemeColor.setAttribute('content', isDark ? darkMode : lightMode)
-      }
-
-      // Update theme configuration in local storage
-      localStorage.setItem('theme', isDark ? 'dark' : 'light')
-      document.dispatchEvent(new Event('theme-changed'))
-    }
-
-    // Bind click event to the button
-    function setupThemeToggle() {
-      // Locate theme toggle button
-      const themeToggleButtons = document.querySelectorAll('.button-theme-toggle')
-      // Add click listener to each button
-      themeToggleButtons.forEach((button) => {
-        button.addEventListener('click', () => {
-          // If browser doesn't support View Transitions API, update theme directly
-          if (!document.startViewTransition) {
-            updateTheme()
-            return
-          }
-
-          // Temporarily add markers during animation to implement view transition and disable CSS transitions
-          document.documentElement.style.setProperty('view-transition-name', 'theme-transition')
-          document.documentElement.setAttribute('data-theme-transition', '')
-
-          // If browser supports View Transitions API, use it to update theme
-          const themeTransition = document.startViewTransition(updateTheme)
-          // Remove markers after animation
-          themeTransition.finished.then(() => {
-            document.documentElement.style.removeProperty('view-transition-name')
-            document.documentElement.removeAttribute('data-theme-transition')
-          })
-        })
-      })
-    }
-
-    // Initialize click event (on first load or page transition)
-    setupThemeToggle()
-    document.addEventListener('astro:after-swap', setupThemeToggle)
-    </script>
-
-    <!-- Back home >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
-    <script is:inline define:vars={{ localizedHome }}>
-    function setupBackButton() {
-      document.getElementById('back-button')?.addEventListener('click', () => {
-        if (document.referrer) {
-          window.history.back()
-        }
-        else {
-          const siteTitle = document.querySelector(`h1 a[href="${localizedHome}"]`)
-          if (siteTitle) {
-            siteTitle.click()
-          }
-        }
-      })
-    }
-
-    setupBackButton()
-    document.addEventListener('astro:after-swap', setupBackButton)
-    </script>
   </body>
 </html>