✨ feat: i18n support for header, subtitle and about pages

src/components/MobileHeader.astro

@@ -1,11 +1,20 @@
 ---
 import themeConfig from '@/config'
+import { ui } from '@/i18n/ui'
 import { getPageInfo } from '@/utils/page'
 
-const { title, subtitle } = themeConfig.site
-const { titleSpace } = themeConfig.global
-const { getLocalizedPath } = getPageInfo(Astro.url.pathname)
+const { currentLang, getLocalizedPath } = getPageInfo(Astro.url.pathname)
+const currentUI = ui[currentLang as keyof typeof ui]
 
+const { title, subtitle } = themeConfig.site
+const headerTitle = title || currentUI.title
+const headerSubtitle = !subtitle
+  ? ''
+  : (subtitle === 'Revive the beauty of typography'
+      ? currentUI.subtitle
+      : subtitle)
+
+const { titleSpace } = themeConfig.global
 const marginBottom = {
     1: 'mb-1.625',
     2: 'mb-2.875',
@@ -18,21 +27,21 @@ const marginBottom = {
     <!-- Fix text cropping issues during view transition on ios by adding a div tag -->
     <div
       class="box-content inline-block pr-1.25"
-      transition:name="site-title"
+      transition:name={`site-title-${currentLang}`}
       data-disable-transition-on-theme
     >
       <a href={getLocalizedPath('/')}>
-        {title}
+        {headerTitle}
       </a>
     </div>
   </h3>
 
-  {subtitle && (
+  {headerSubtitle && (
     <div
       class="text-3.5 opacity-0"
       aria-hidden="true"
     >
-      {subtitle}
+      {headerSubtitle}
     </div>
   )}
 </header>