mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 19:51:07 +02:00
6bcd51765d
- 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
174 lines
6 KiB
Text
174 lines
6 KiB
Text
---
|
|
import themeConfig from '@/config'
|
|
import { ClientRouter } from 'astro:transitions'
|
|
|
|
interface Props {
|
|
postTitle?: string
|
|
postDescription?: string
|
|
postImage?: string
|
|
}
|
|
|
|
const { postTitle, postDescription, postImage } = Astro.props
|
|
const { title, subtitle, description, author, url, favicon } = themeConfig.site
|
|
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
|
|
const { commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', customUmamiAnalyticsURL = '', customUmamiAnalyticsJS = '' } = themeConfig.preload
|
|
---
|
|
|
|
<head>
|
|
<!-- Basic info -->
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
{favicon.toLowerCase().endsWith('.webp') && <link rel="icon" type="image/webp" href={favicon} />}
|
|
{favicon.toLowerCase().endsWith('.svg') && <link rel="icon" type="image/svg+xml" href={favicon} />}
|
|
{favicon.toLowerCase().endsWith('.png') && <link rel="icon" type="image/png" href={favicon} />}
|
|
<title>{postTitle ? `${postTitle} | ${title}` : `${title} - ${subtitle}`}</title>
|
|
<meta name="description" content={postDescription || description} />
|
|
<meta name="author" content={author} />
|
|
<meta name="generator" content={Astro.generator} />
|
|
<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} />}
|
|
{customUmamiAnalyticsURL && <link rel="dns-prefetch" href={customUmamiAnalyticsURL} />}
|
|
<link rel="alternate" href="/rss.xml" type="application/rss+xml" title="RSS" />
|
|
<link rel="canonical" href={Astro.url} />
|
|
|
|
<!-- i18n hreflang generate -->
|
|
{[locale, ...moreLocale].map(lang => (
|
|
<link
|
|
rel="alternate"
|
|
href={`${url}${lang === locale ? '' : lang}`}
|
|
hreflang={lang === 'zh-tw' ? 'zh-TW' : lang}
|
|
/>
|
|
))}
|
|
|
|
<!-- Facebook Open Graph -->
|
|
<meta property="og:title" content={postTitle || title} />
|
|
<meta property="og:type" content={postTitle ? 'article' : 'website'} />
|
|
<meta property="og:image" content={postImage || favicon} />
|
|
<meta property="og:url" content={Astro.url} />
|
|
<meta property="og:description" content={postDescription || subtitle} />
|
|
<meta property="og:site_name" content={title} />
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary" />
|
|
<meta name="twitter:title" content={postTitle || title} />
|
|
<meta name="twitter:description" content={postDescription || subtitle} />
|
|
<meta name="twitter:image" content={postImage || favicon} />
|
|
{twitterID && (
|
|
<>
|
|
<meta name="twitter:site" content={twitterID} />
|
|
<meta name="twitter:creator" content={twitterID} />
|
|
</>
|
|
)}
|
|
|
|
<!-- Site Verification -->
|
|
{google && <meta name="google-site-verification" content={google} />}
|
|
{bing && <meta name="msvalidate.01" content={bing} />}
|
|
{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
|
|
define:vars={{ defaultMode: themeConfig.color.mode, lightMode, darkMode }}
|
|
>
|
|
// Check if current theme is dark mode
|
|
// Priority: Local storage theme > Default theme > System preference
|
|
function isCurrentDark() {
|
|
const currentTheme = localStorage.getItem('theme')
|
|
if (currentTheme)
|
|
return currentTheme === 'dark'
|
|
if (defaultMode)
|
|
return defaultMode === 'dark'
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
}
|
|
|
|
// Initialize theme
|
|
function initTheme(doc = document) {
|
|
const isDark = isCurrentDark()
|
|
doc.documentElement.classList.toggle('dark', isDark)
|
|
const metaTheme = doc.querySelector('meta[name="theme-color"]')
|
|
if (metaTheme) {
|
|
metaTheme.setAttribute('content', isDark ? darkMode : lightMode)
|
|
}
|
|
}
|
|
|
|
// Follow system theme changes automatically
|
|
function followSystemTheme() {
|
|
initTheme()
|
|
document.dispatchEvent(new Event('theme-changed'))
|
|
}
|
|
|
|
// Function 1: Initialize theme on first load
|
|
initTheme()
|
|
|
|
// Function 2: Update theme before page transition to prevent flashing
|
|
document.addEventListener('astro:before-swap', ({ newDocument }) => {
|
|
initTheme(newDocument)
|
|
})
|
|
|
|
// Function 3: listen to system theme changes in real-time
|
|
window
|
|
.matchMedia('(prefers-color-scheme: dark)')
|
|
.addEventListener('change', ({ matches: isDark }) => {
|
|
localStorage.setItem('theme', isDark ? 'dark' : 'light')
|
|
followSystemTheme()
|
|
})
|
|
</script>
|
|
|
|
<!-- Google Analytics -->
|
|
{
|
|
googleAnalyticsID && (
|
|
<>
|
|
<script
|
|
type="text/partytown"
|
|
crossorigin="anonymous"
|
|
src={`${customGoogleAnalyticsURL || 'https://www.googletagmanager.com'}/gtag/js?id=${googleAnalyticsID}`}
|
|
/>
|
|
<script
|
|
type="text/partytown"
|
|
define:vars={{ googleAnalyticsID, customGoogleAnalyticsURL }}
|
|
>
|
|
window.dataLayer = window.dataLayer || []
|
|
function gtag(...args) {
|
|
dataLayer.push(args)
|
|
}
|
|
gtag('js', new Date())
|
|
if (customGoogleAnalyticsURL) {
|
|
gtag('config', googleAnalyticsID, {
|
|
transport_url: customGoogleAnalyticsURL,
|
|
})
|
|
}
|
|
else {
|
|
gtag('config', googleAnalyticsID)
|
|
}
|
|
</script>
|
|
</>
|
|
)
|
|
}
|
|
|
|
<!-- Umami Analytics -->
|
|
{
|
|
umamiAnalyticsID && (
|
|
<script
|
|
type="text/partytown"
|
|
crossorigin="anonymous"
|
|
data-website-id={umamiAnalyticsID}
|
|
src={customUmamiAnalyticsJS || 'https://analytics.umami.is/script.js'}
|
|
data-cache="true"
|
|
/>
|
|
)
|
|
}
|
|
</head>
|