fix(docs): resolve hydration mismatch and favicon 404 issues

- Add minimal theme preload script to prevent FOUC
- Fix favicon path to use base variable for GitHub Pages
- Theme script only sets data-theme attribute (no color mode)
- Maintains SSR/client consistency while eliminating flash

Fixes:
- Hydration mismatch error from localStorage access before Vue mount
- Favicon 404 on GitHub Pages deployment
- FOUC when theme applies after hydration

The new script is minimal and safe:
- Runs synchronously in head (before render)
- Only reads localStorage and sets attribute
- Matches what ThemeSwitcher.vue will do after mount
- No DOM manipulation that could cause mismatch
This commit is contained in:
catlog22
2026-03-02 17:47:27 +08:00
parent b780734649
commit 2dce4b3e8f

View File

@@ -20,6 +20,16 @@ export default withMermaid(defineConfig({
ignoreDeadLinks: true,
head: [
['link', { rel: 'icon', href: `${base}favicon.svg`, type: 'image/svg+xml' }],
[
'script',
{},
`(function() {
try {
var theme = localStorage.getItem('ccw-theme') || 'blue';
document.documentElement.setAttribute('data-theme', theme);
} catch (e) {}
})()`
],
['meta', { name: 'theme-color', content: '#3b82f6' }],
['meta', { name: 'og:type', content: 'website' }],
['meta', { name: 'og:locale', content: 'en_US' }],