🚀 refactor: redesign the layout, reduce page size, and significantly improve build speed

src/components/Button.astro

@@ -0,0 +1,67 @@
+---
+import { moreLocales } from '@/config'
+import { getNextGlobalLangPath, getNextSupportedLangPath } from '@/i18n/path'
+import { isPostPage, isTagPage } from '@/utils/page'
+
+interface Props {
+  supportedLangs: string[]
+}
+
+const { supportedLangs } = Astro.props
+const currentPath = Astro.url.pathname
+const isPost = isPostPage(currentPath)
+const isTag = isTagPage(currentPath)
+
+// Check if there are other languages to switch
+const showLanguageSwitcher = moreLocales.length > 0
+
+// Check if only the supported language switch list is used
+const useSupportedLangs = isPost || (isTag && supportedLangs.length > 0)
+
+// Choose a language switch list according to the page type
+const nextUrl = useSupportedLangs
+  ? getNextSupportedLangPath(currentPath, supportedLangs) // Switch between supported languages
+  : getNextGlobalLangPath(currentPath) // Switch between all languages
+---
+
+<div
+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))])'
+]}
+>
+  <!-- Language switcher -->
+  {showLanguageSwitcher && (
+    <a
+      href={nextUrl}
+      class="aspect-square w-4 c-secondary active:scale-90 hover:c-primary"
+      aria-label="Switch website language"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+        class="h-full w-full"
+        fill="currentColor"
+      >
+        <path d="M19 21 12.3 2h-1L4.7 21l-2.5.2v.8h6.3v-.8L5.7 21l2-5.9h7.5l2 5.9-3.3.2v.8h7.9v-.8zM8 14.3l3.4-10.1 3.5 10.1z" />
+      </svg>
+    </a>
+  )}
+
+  <!-- Theme toggle -->
+  <button
+    aria-label="Switch light/dark theme"
+    class="button-theme-toggle aspect-square w-4.2 c-secondary active:scale-90 hover:c-primary"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      fill="currentColor"
+    >
+      <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>
+</div>