refactor: fix button positions and adjust component structure

src/components/Comments/Waline.astro

@@ -33,6 +33,8 @@ const {
 >
 </div>
 
+<!-- Not use 'is:inline' or 'define:vars' -->
+<!-- 'define:vars' ≈ 'is:inline' -->
 <script>
 import { init } from '@waline/client'
 import '@waline/client/style'

src/components/Footer.astro

@@ -1,4 +1,6 @@
 ---
+import LanguageSwitcher from '@/components/Widgets/LanguageSwitcher.astro'
+import ThemeToggle from '@/components/Widgets/ThemeToggle.astro'
 import themeConfig from '@/config'
 
 interface Props {
@@ -21,6 +23,12 @@ const year = Number(startYear) === currentYear
     className,
   ]}
 >
+  <!-- only show on desktop -->
+  <div class="mb-11.5 ml-1.5 hidden gap-7 lg:flex">
+    <ThemeToggle />
+    <LanguageSwitcher />
+  </div>
+
   <p>
     {links.map((link, index) => (
       <>

src/components/Navbar.astro

@@ -36,7 +36,7 @@ const navItems = [
 
 <nav
   class="mb-10.625 text-3.6 font-semibold leading-8.75 font-navbar"
-  lg="fixed bottom-40 text-4 leading-9.72"
+  lg="fixed bottom-50 text-4 leading-9.72"
 >
   <ul>
     {navItems.map(item => (

src/components/Widgets/LanguageSwitcher.astro

@@ -1,73 +1,73 @@
 ---
-import themeConfig from '@/config'
-import { getPagePath } from '@/utils/path'
-import { getCollection } from 'astro:content'
+// import themeConfig from '@/config'
+// import { getPagePath } from '@/utils/path'
+// import { getCollection } from 'astro:content'
 
-// 获取当前页面路径信息
-const { isPost } = getPagePath(Astro.url.pathname)
+// // 获取当前页面路径信息
+// const { isPost } = getPagePath(Astro.url.pathname)
 
-// 获取默认语言
-const defaultLocale = themeConfig.global.locale
+// // 获取默认语言
+// const defaultLocale = themeConfig.global.locale
 
-// 定义固定的语言顺序（按照要求的顺序）
-const fixedLangOrder = [defaultLocale, ...themeConfig.global.moreLocale]
+// // 定义固定的语言顺序（按照要求的顺序）
+// const fixedLangOrder = [defaultLocale, ...themeConfig.global.moreLocale]
 
-// 获取当前文章的可用语言
-let availableLangs: string[] = []
-let currentPostSlug = ''
+// // 获取当前文章的可用语言
+// let availableLangs: string[] = []
+// let currentPostSlug = ''
 
-// 如果是文章页，获取当前文章对象
-if (isPost) {
-  // 从URL中提取文章slug
-  const pathParts = Astro.url.pathname.split('/')
-  const slugIndex = pathParts.findIndex(part => part === 'posts') + 1
-  if (slugIndex > 0 && pathParts.length > slugIndex) {
-    currentPostSlug = pathParts[slugIndex]
+// // 如果是文章页，获取当前文章对象
+// if (isPost) {
+//   // 从URL中提取文章slug
+//   const pathParts = Astro.url.pathname.split('/')
+//   const slugIndex = pathParts.findIndex(part => part === 'posts') + 1
+//   if (slugIndex > 0 && pathParts.length > slugIndex) {
+//     currentPostSlug = pathParts[slugIndex]
 
-    // 获取所有文章
-    const posts = await getCollection('posts')
+//     // 获取所有文章
+//     const posts = await getCollection('posts')
 
-    // 找到所有具有相同abbrlink或slug的文章
-    const relatedPosts = posts.filter(post =>
-      post.data.abbrlink === currentPostSlug || post.slug === currentPostSlug,
-    )
+//     // 找到所有具有相同abbrlink或slug的文章
+//     const relatedPosts = posts.filter(post =>
+//       post.data.abbrlink === currentPostSlug || post.slug === currentPostSlug,
+//     )
 
-    if (relatedPosts.length > 0) {
-      // 收集所有相关文章支持的语言
-      const supportedLangs = new Set()
+//     if (relatedPosts.length > 0) {
+//       // 收集所有相关文章支持的语言
+//       const supportedLangs = new Set()
 
-      relatedPosts.forEach((post) => {
-        // 处理lang属性
-        if (typeof post.data.lang === 'string' && post.data.lang.trim() !== '') {
-          supportedLangs.add(post.data.lang)
-        }
-        // 如果没有指定语言，则假定支持默认语言
-        else {
-          supportedLangs.add(defaultLocale)
-        }
-      })
+//       relatedPosts.forEach((post) => {
+//         // 处理lang属性
+//         if (typeof post.data.lang === 'string' && post.data.lang.trim() !== '') {
+//           supportedLangs.add(post.data.lang)
+//         }
+//         // 如果没有指定语言，则假定支持默认语言
+//         else {
+//           supportedLangs.add(defaultLocale)
+//         }
+//       })
 
-      // 按照固定顺序筛选出可用的语言
-      availableLangs = fixedLangOrder.filter(lang => supportedLangs.has(lang))
-    }
-  }
-}
-else {
-  // 非文章页面使用所有语言
-  availableLangs = fixedLangOrder
-}
+//       // 按照固定顺序筛选出可用的语言
+//       availableLangs = fixedLangOrder.filter(lang => supportedLangs.has(lang))
+//     }
+//   }
+// }
+// else {
+//   // 非文章页面使用所有语言
+//   availableLangs = fixedLangOrder
+// }
 
-// 当前语言
-function getLanguageDisplayName(code: string) {
-  return new Intl.DisplayNames(['en'], { type: 'language' }).of(code) || code
-}
+// // 当前语言
+// function getLanguageDisplayName(code: string) {
+//   return new Intl.DisplayNames(['en'], { type: 'language' }).of(code) || code
+// }
 ---
 
 <button
   type="button"
   id="language-switcher"
-  class="aspect-square w-4 c-secondary active:scale-90"
-  aria-label={`Current Language: ${getLanguageDisplayName(defaultLocale)}. Click to switch to next language.`}
+  class="uno-button"
+  aria-label="Click to switch to next language"
 >
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -79,7 +79,7 @@ function getLanguageDisplayName(code: string) {
   </svg>
 </button>
 
-<script is:inline define:vars={{ availableLangs, currentPostSlug, isPost, defaultLocale }}>
+<!-- <script is:inline define:vars={{ availableLangs, currentPostSlug, isPost, defaultLocale }}>
 document.addEventListener('astro:page-load', () => {
   const langSwitch = document.getElementById('language-switcher')
 
@@ -137,4 +137,4 @@ function buildNewPath(currentLang, nextLang, segments) {
   }
   return `/${newSegments.join('/')}/`
 }
-</script>
+</script> -->

src/components/Widgets/ThemeToggle.astro

@@ -1,12 +1,7 @@
----
-import { themeConfig } from '@/config'
-
-const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
----
 <button
   id="theme-toggle"
   aria-label="Theme Toggle Button"
-  class="aspect-square w-4.2 c-secondary active:scale-90"
+  class="uno-button id-theme-toggle w-4.2"
 >
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -16,49 +11,3 @@ const { light: { background: lightMode }, dark: { background: darkMode } } = the
     <path d="m12 1c-6.1 0-11 4.9-11 11s4.9 11 11 11 11-4.9 11-11-4.9-11-11-11m0 20c-5.8 0-10.5-4-10.5-9s4.7-9 10.5-9 10.5 4 10.5 9-4.7 9-10.5 9" />
   </svg>
 </button>
-
-<script 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 themeToggleButton = document.getElementById('theme-toggle')
-  // Add click listener
-  themeToggleButton.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/config.ts

@@ -58,7 +58,7 @@ export const themeConfig: ThemeConfig = {
     // font styles for text
     fontStyle: 'sans', // sans, serif
     // date format for posts
-    dateFormat: 'MONTH DAY YYYY', // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
+    dateFormat: 'YYYY-MM-DD', // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
     // space between title and subtitle
     titleSpace: 3, // 1, 2, 3
   },

src/layouts/Layout.astro

@@ -4,13 +4,14 @@ import Footer from '@/components/Footer.astro'
 import MainHeader from '@/components/MainHeader.astro'
 import MobileHeader from '@/components/MobileHeader.astro'
 import Navigation from '@/components/Navbar.astro'
-// import LanguageSwitcher from '@/components/Widgets/LanguageSwitcher.astro'
+import LanguageSwitcher from '@/components/Widgets/LanguageSwitcher.astro'
 // import PhotoSwipe from '@/components/PhotoSwipe.astro'
 // import Scrollbar from '@/components/Scrollbar.astro'
 import ThemeToggle from '@/components/Widgets/ThemeToggle.astro'
 import themeConfig from '@/config'
 import Head from '@/layouts/Head.astro'
 import { getPagePath } from '@/utils/path'
+
 import '@/styles/font.css'
 import '@/styles/global.css'
 import '@/styles/heti.css'
@@ -23,8 +24,8 @@ interface Props {
 
 const { postTitle, postDescription, postSlug } = Astro.props
 const { isHome, isPost } = getPagePath(Astro.url.pathname)
+const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
 const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
-
 const footerMarginClass = isPost && themeConfig.comment?.waline?.serverURL
   ? 'mt-8'
   : 'mt-12'
@@ -45,31 +46,94 @@ const footerMarginClass = isPost && themeConfig.comment?.waline?.serverURL
     <!-- desktop max div width: 1100px+90px*2=1280px/4=320 / max words number: 42+2=44 / max content width: 44*16px=704px / title width: 14*16px=224px / max-gap: 1100px-704px-224px=172px/16=10.75rem -->
     <!-- content width: calc(32rem+(100vw-1024px)*(44rem-32rem)/(1280-1024))=calc(75vw-16rem) / gap width: calc(6.75rem+(100vw-1024px)*(10.75rem-6.75rem)/(1280-1024))=calc(25vw-9.25rem) -->
     <div
-      class="mx-auto max-w-205.848 min-h-vh min-w-80 min-h-dvh w-full"
+      class="mx-auto max-w-205.848 min-h-vh w-full min-h-dvh"
       p="x-[min(7.25vw,3.731rem)] y-8 lg:(x-22.5 y-20)"
       lg="max-w-320 grid cols-[min(calc(75vw-16rem),44rem)_14rem] gap-[min(calc(25vw-9.25rem),10.75rem)]"
     >
+      <!-- hide header and navigation on mobile for post pages -->
       <div class={!isHome && isPost ? 'hidden lg:block' : ''}>
         <MainHeader />
         <Navigation />
+        <!-- only show footer on desktop-->
         <Footer class="fixed hidden lg:block" />
       </div>
 
-      {!isHome && isPost && <MobileHeader /> }
+      <!-- show simple header on mobile for post pages -->
+      {!isHome && isPost && <MobileHeader />}
 
+      <!-- main content area -->
       <main class="col-start-1 row-start-1">
         <slot />
       </main>
-      <Footer class={`block lg:hidden ${footerMarginClass}`} />
-    </div>
 
-    <!--  fix position issue on ios   -->
-    <div class="absolute right-[min(7.25vw,3.731rem)] top-13.5 flex gap-6 [@supports(-webkit-touch-callout:none)]:top-12.5">
-      <!-- <LanguageSwitcher /> -->
-      <ThemeToggle />
+      <!-- show footer on mobile -->
+      <Footer class={`block lg:hidden ${footerMarginClass}`} />
     </div>
     <!-- <Scrollbar /> -->
     <!-- <BackToTop /> -->
     <!-- <PhotoSwipe /> -->
+
+    <!-- only show on mobile (fix position issue on ios / fix right distance)-->
+    <div class="absolute right-7.25vw top-13.5 flex gap-6 [@supports(-webkit-touch-callout:none)]:top-12.5 min-[823px]:right-[calc(50vw-22rem)] lg:hidden">
+      <ThemeToggle />
+      <LanguageSwitcher />
+    </div>
+
+    <!--===============================================  Theme Toggle  ===============================================-->
+    <script 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('.id-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>
+
   </body>
 </html>