chore: optimize head component

- Add dynamic theme-color meta tag based on current theme mode
- Preload custom font files for improved performance
- Update ClientRouter configuration for view transitions
- Refactor theme toggle script comments for clarity

package.json

@@ -44,21 +44,21 @@
     "vite": "^6.1.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.2.1",
+    "@antfu/eslint-config": "^4.3.0",
     "@types/markdown-it": "^14.1.2",
     "@types/mdast": "^4.0.4",
     "@types/node": "^22.13.4",
     "@types/sanitize-html": "^2.13.0",
-    "@unocss/eslint-plugin": "^65.5.0",
-    "@unocss/preset-attributify": "^65.5.0",
-    "@unocss/reset": "^65.5.0",
+    "@unocss/eslint-plugin": "^66.0.0",
+    "@unocss/preset-attributify": "^66.0.0",
+    "@unocss/reset": "^66.0.0",
     "astro-eslint-parser": "^1.2.1",
     "eslint": "^9.20.1",
     "eslint-plugin-astro": "^1.3.1",
     "lint-staged": "^15.4.3",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
-    "unocss": "^65.5.0",
+    "unocss": "^66.0.0",
     "unocss-preset-theme": "^0.14.1"
   },
   "lint-staged": {

src/config.ts

@@ -90,11 +90,11 @@ export const themeConfig: ThemeConfig = {
 
   // PRELOAD SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
   preload: {
-    commentURL: '', // https://comment.example.com/
-    imageHostURL: '', // https://image.example.com/
+    commentURL: '', // https://comment.example.com
+    imageHostURL: 'https://image.radishzz.cc', // https://image.example.com
     // If you proxy analytics requests to the custom domain, you can fill in below
-    customGoogleAnalyticsURL: '', // https://custom.example.com/
-    customUmamiAnalyticsURL: '', // https://custom.example.com/
+    customGoogleAnalyticsURL: '', // https://custom.example.com
+    customUmamiAnalyticsURL: '', // https://custom.example.com
     customUmamiAnalyticsJS: '', // https://custom.example.com/custom.js
   },
   // PRELOAD SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END

src/layouts/Head.astro

@@ -10,7 +10,8 @@ interface Props {
 
 const { postTitle, postDescription, postImage } = Astro.props
 const { title, subtitle, description, author, url, favicon } = themeConfig.site
-const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
+const { mode, light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
+const initMetaTheme = mode === 'dark' ? darkMode : lightMode
 const { locale, moreLocale } = themeConfig.global
 const { verification = {}, twitterID = '', googleAnalyticsID = '', umamiAnalyticsID = '' } = themeConfig.seo ?? {}
 const { google = '', bing = '', yandex = '', baidu = '' } = verification
@@ -28,10 +29,11 @@ const { commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', custo
 <meta name="description" content={postDescription || description} />
 <meta name="author" content={author} />
 <meta name="generator" content={Astro.generator} />
-<meta name="theme-color" content="" />
-<ClientRouter fallback="swap" />
+<meta name="theme-color" content={initMetaTheme} />
 
 <!-- Preload -->
+<link rel="preload" href="/font/Snell-Black.woff2" as="font" type="font/woff2" crossorigin />
+<link rel="preload" href="/font/EarlySummer-subset.woff2" as="font" type="font/woff2" crossorigin />
 {commentURL && <link rel="dns-prefetch" href={commentURL} />}
 {imageHostURL && <link rel="dns-prefetch" href={imageHostURL} />}
 {customGoogleAnalyticsURL && <link rel="dns-prefetch" href={customGoogleAnalyticsURL} />}
@@ -74,6 +76,9 @@ const { commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', custo
 {yandex && <meta name="yandex-verification" content={yandex} />}
 {baidu && <meta name="baidu-site-verification" content={baidu} />}
 
+<!-- Global View Transition -->
+<ClientRouter fallback="none" />
+
 <!-- Theme Toggle -->
 <script
   is:inline
@@ -106,15 +111,15 @@ function followSystemTheme() {
   document.dispatchEvent(new Event('theme-changed'))
 }
 
-// 1.Initialize theme on first load
+// Function 1: Initialize theme on first load
 initTheme()
 
-// 2.Update theme before page transition to prevent flashing
+// Function 2: Update theme before page transition to prevent flashing
 document.addEventListener('astro:before-swap', ({ newDocument }) => {
   initTheme(newDocument)
 })
 
-// 3.Listen to system theme changes in real-time
+// Function 3: listen to system theme changes in real-time
 window
   .matchMedia('(prefers-color-scheme: dark)')
   .addEventListener('change', ({ matches: isDark }) => {