feat: enhance image handling and analytics configuration

- Add @unpic/astro for improved image optimization
- Configure image service with blurhash placeholder
- Update analytics script to support custom JavaScript URLs
- Modify preload configuration for more flexible analytics integration
- Remove deprecated rehype image transformation plugin
This commit is contained in:
radishzzz 2025-02-21 01:25:38 +00:00
parent 6bcd51765d
commit ad9fabe937
8 changed files with 218 additions and 146 deletions

View file

@ -15,7 +15,7 @@ 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
const { commentURL = '', imageHostURL = '', customGoogleAnalyticsJS = '', customUmamiAnalyticsJS = '' } = themeConfig.preload
---
<head>
@ -34,10 +34,10 @@ const { commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', custo
<!-- 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="preconnect" href={commentURL} crossorigin />}
{commentURL && <link rel="dns-prefetch" href={commentURL} />}
{imageHostURL && <link rel="preconnect" href={imageHostURL} crossorigin />}
{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} />
@ -45,7 +45,7 @@ const { commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', custo
{[locale, ...moreLocale].map(lang => (
<link
rel="alternate"
href={`${url}${lang === locale ? '' : lang}`}
href={`${url}${lang === locale ? '' : `/${lang}`}`}
hreflang={lang === 'zh-tw' ? 'zh-TW' : lang}
/>
))}
@ -105,12 +105,6 @@ function initTheme(doc = document) {
}
}
// Follow system theme changes automatically
function followSystemTheme() {
initTheme()
document.dispatchEvent(new Event('theme-changed'))
}
// Function 1: Initialize theme on first load
initTheme()
@ -124,51 +118,45 @@ window
.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', ({ matches: isDark }) => {
localStorage.setItem('theme', isDark ? 'dark' : 'light')
followSystemTheme()
initTheme()
document.dispatchEvent(new Event('theme-changed'))
})
</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 && (
{googleAnalyticsID && (
<>
<script
type="text/partytown"
crossorigin="anonymous"
data-website-id={umamiAnalyticsID}
src={customUmamiAnalyticsJS || 'https://analytics.umami.is/script.js'}
data-cache="true"
src={customGoogleAnalyticsJS || `https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsID}`}
/>
)
}
<script type="text/partytown" define:vars={{ googleAnalyticsID, customGoogleAnalyticsJS }}>
window.dataLayer = window.dataLayer || []
function gtag(...args) {
dataLayer.push(args)
}
gtag('js', new Date())
if (customGoogleAnalyticsJS) {
gtag('config', googleAnalyticsID, {
transport_url: new URL(customGoogleAnalyticsJS).origin,
})
}
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>