chore: update dependencies and enhance theme configuration

- Bump versions of several dependencies in package.json and pnpm-lock.yaml, including astro (5.1.9), @types/node (22.10.10), and lint-staged (15.4.2).
- Introduce new Header, Footer, and Navigation components for improved layout structure.
- Update theme configuration to clarify supported font styles and title spacing options.
- Refactor theme toggle button for better accessibility and visual consistency.
- Minor adjustments to CSS for improved button scaling effects and layout responsiveness.

src/components/Header.astro

@@ -0,0 +1,30 @@
+---
+import themeConfig from '@/config'
+
+const { title, subtitle } = themeConfig.site
+const { titleSpace = 2 } = themeConfig.global
+
+const marginClass = {
+  1: 'mb-1',
+  2: 'mb-2',
+  3: 'mb-3',
+  4: 'mb-4',
+}[titleSpace] || 'mb-3'
+---
+
+<header>
+  <h1
+    class={`${marginClass} mt--1.6 text-12 c-primary font-bold font-title`}
+    aria-label="Title Tag"
+  >
+    <a href="/">
+      {title}
+    </a>
+  </h1>
+  <h3
+    class="text-5.6 c-primary font-navbar opacity-50"
+    aria-label="Meta Description"
+  >
+    {subtitle}
+  </h3>
+</header>

src/components/Navigation.astro

@@ -0,0 +1,87 @@
+---
+import themeConfig from '@/config'
+import { ui } from '@/utils/ui'
+
+// Configuration
+const defaultLocale = themeConfig.global.locale
+const moreLocales = themeConfig.global.moreLocale
+const currentPath = Astro.url.pathname
+
+// Path utilities
+const cleanPath = (path: string) => path.replace(/^\/+|\/+$/g, '')
+
+// Language utilities
+function getLangFromPath(path: string) {
+  const secondaryLang = moreLocales.find(lang =>
+    path.startsWith(`/${lang}/`) || path === `/${lang}` || path === `/${lang}/`,
+  )
+  return secondaryLang || defaultLocale
+}
+
+const currentLang = getLangFromPath(currentPath)
+const currentUI = ui[currentLang as keyof typeof ui]
+
+// Localization utilities
+function getLocalizedPath(path: string) {
+  const clean = cleanPath(path)
+  return currentLang === defaultLocale ? `/${clean}` : `/${currentLang}/${clean}`
+}
+
+// Page type detection utilities
+function isHomePage(path: string) {
+  const clean = cleanPath(path)
+  return clean === '' || moreLocales.includes(clean)
+}
+function isPostPage(path: string) {
+  const clean = cleanPath(path)
+  return clean.startsWith('posts') || moreLocales.some(lang => clean.startsWith(`${lang}/posts`))
+}
+function isTagPage(path: string) {
+  const clean = cleanPath(path)
+  return clean.startsWith('tags') || moreLocales.some(lang => clean.startsWith(`${lang}/tags`))
+}
+function isAboutPage(path: string) {
+  const clean = cleanPath(path)
+  return clean.startsWith('about') || moreLocales.some(lang => clean.startsWith(`${lang}/about`))
+}
+
+// Active state detection
+const isPostActive = isHomePage(currentPath) || isPostPage(currentPath)
+const isTagActive = isTagPage(currentPath)
+const isAboutActive = isAboutPage(currentPath)
+---
+
+<nav class="mb-18 mt-10 text-5.6 text-secondary font-semibold leading-11.4 font-navbar">
+  <ul>
+    <li>
+      <a
+        href={getLocalizedPath('/')}
+        class:list={[
+          isPostActive ? 'font-bold opacity-100' : 'opacity-25',
+        ]}
+      >
+        {currentUI.posts}
+      </a>
+    </li>
+    <li>
+      <a
+        href={getLocalizedPath('/tags')}
+        class:list={[
+          isTagActive ? 'font-bold opacity-100' : 'opacity-25',
+        ]}
+      >
+        {currentUI.tags}
+      </a>
+    </li>
+    <li>
+      <a
+        href={getLocalizedPath('/about')}
+        class:list={[
+          isAboutActive ? 'font-bold opacity-100' : 'opacity-25',
+        ]}
+      >
+        {currentUI.about}
+      </a>
+    </li>
+  </ul>
+</nav>

src/components/ThemeToggle.astro

@@ -46,7 +46,7 @@ window.addEventListener('pageshow', (event) => {
 <button
   aria-pressed="false"
   aria-label="Theme Toggle Button"
-  class="absolute right-10 top-10 z-999 aspect-square w-8 c-secondary"
+  class="absolute right-9.6 top-21 z-999 aspect-square w-8 c-secondary active:scale-92"
 >
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" 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" />

src/config/index.ts

@@ -14,7 +14,7 @@ export const themeConfig: ThemeConfig = {
 
   // COLOR SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
   color: {
-    mode: 'light', // light, dark. Default to match system theme
+    mode: 'light', // light, dark. Matches system theme by default, falls back to configured theme mode if not available.
     light: {
       primary: '#17191A', // title text color in light mode
       secondary: '#505050', // post text color in light mode
@@ -32,9 +32,10 @@ export const themeConfig: ThemeConfig = {
 
   // GLOBAL SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
   global: {
-    locale: 'zh', // zh, zh-tw, ja, en, es, ru. Default locale setting
+    locale: 'zh', // Support only zh, zh-tw, ja, en, es, ru. Default locale setting
     moreLocale: ['zh-tw', 'ja', 'en', 'es', 'ru'], // ['zh', 'zh-tw', 'ja', 'en', 'es', 'ru']. NOT fill in the default locale code again
-    font: 'sans', // sans, serif, italic. Choose the font style for posts
+    font: 'sans', // Support only sans, serif. Choose the font style for posts
+    titleSpace: 4, // Support only 1, 2, 3, 4. Space between title and subtitle, 1 is the smallest, 4 is the largest
   },
   // GLOBAL SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
 

src/layouts/Head.astro

@@ -15,6 +15,7 @@ const { verification = {}, twitterID = '', facebookID = '', facebookLink = '', g
 const { google = '', bing = '', yandex = '', baidu = '' } = verification
 const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', customUmamiAnalyticsURL = '', customUmamiAnalyticsJS = '' } = themeConfig.preload
 ---
+
 <head>
 <!-- Basic -->
 <meta charset="utf-8" />

src/layouts/Layout.astro

@@ -1,4 +1,7 @@
 ---
+import Footer from '@/components/Footer.astro'
+import Header from '@/components/Header.astro'
+import Navigation from '@/components/Navigation.astro'
 import PhotoSwipe from '@/components/PhotoSwipe.astro'
 import Scrollbar from '@/components/Scrollbar.astro'
 import ThemeToggle from '@/components/ThemeToggle.astro'
@@ -14,7 +17,6 @@ interface Props {
 }
 
 const { postTitle, postDescription, postImage } = Astro.props
-
 const fontStyle = `font-${themeConfig.global.font}`
 ---
 
@@ -25,14 +27,25 @@ const fontStyle = `font-${themeConfig.global.font}`
 >
   <Head {postTitle} {postDescription} {postImage} />
   <body data-overlayscrollbars-initialize>
-    <ThemeToggle />
-    <main
-      class="mx-a max-w-123rem h-dvh"
-      lg="grid gap-x-6 cols-[3fr_1fr] rows-[1fr_9rem]"
+    <div
+      class="mx-a max-w-492 h-dvh"
+      p="x-[calc(9.94vw-1.1784rem)] y-[calc(5.42vw+2.4488rem)] lg:(x-36 y-10.4167dvh)"
+      lg="grid cols-[1fr_22rem] rows-1 gap-[min(calc(16.8269vw-6.2727rem),18rem)]"
     >
-      <slot />
-    </main>
+      <div>
+        <Header />
+        <Navigation />
+        <Footer />
+      </div>
+
+      <main class="col-start-1 row-start-1">
+        <slot />
+      </main>
+
+    </div>
+    <ThemeToggle />
     <Scrollbar />
     <PhotoSwipe />
   </body>
 </html>
+

src/pages/about.astro

@@ -3,5 +3,5 @@ import Layout from '@/layouts/Layout.astro'
 ---
 
 <Layout>
-  <h1 class="font-bold font-title">重新编排Retypeset</h1>
+  about me
 </Layout>

src/styles/photoswipe.css

@@ -3,7 +3,7 @@
 }
 .pswp__button--zoom,
 .pswp__button--close {
-  --at-apply: 'mt-2 lg:mt-4 active:scale-90';
+  --at-apply: 'mt-2 lg:mt-4 active:scale-92';
 }
 .pswp__button--zoom svg:hover,
 .pswp__button--close svg:hover {

src/types/index.d.ts

@@ -30,7 +30,8 @@ export interface ThemeConfig {
   global: {
     locale: typeof langPath[number]
     moreLocale: typeof langPath[number][]
-    font: 'sans' | 'serif' | 'italic'
+    font: 'sans' | 'serif'
+    titleSpace: 1 | 2 | 3 | 4
   }
 
   comment?: {