reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-16 19:51:07 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: optimize website performance and layout

Browse source 
- Replace ScrollButton with BackToTop component
- Improve theme toggle and scrollbar event handling
- Update layout and index page styling
- Optimize client:load and client:idle directives
- Remove deprecated Heti addon plugin
This commit is contained in:
radishzzz 2025-02-17 16:06:00 +00:00
parent 14f53a979a
commit 47951152d1
13 changed files with 164 additions and 559 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/layouts/Head.astro
View file

@ -80,7 +80,7 @@ function getCurrentTheme() {
return document.documentElement.classList.contains('dark')
}
function updateThemeColor(isDark) {
function updateMetaTheme(isDark) {
const metaThemeColor = document.querySelector('meta[name="theme-color"]')
if (metaThemeColor) {
metaThemeColor.setAttribute('content', isDark ? darkMode : lightMode)
@ -89,7 +89,7 @@ function updateThemeColor(isDark) {
function syncTheme() {
const isDark = getCurrentTheme()
updateThemeColor(isDark)
updateMetaTheme(isDark)
}
function initTheme() {
@ -105,7 +105,7 @@ function initTheme() {
const isDark = theme === 'dark'
document.documentElement.classList.toggle('dark', isDark)
updateThemeColor(isDark)
updateMetaTheme(isDark)
}
initTheme()
@ -113,7 +113,7 @@ initTheme()
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) {
document.documentElement.classList.toggle('dark', e.matches)
updateThemeColor(e.matches)
updateMetaTheme(e.matches)
}
})

14
src/layouts/Layout.astro
View file

@ -1,4 +1,5 @@
---
import BackToTop from '@/components/BackToTop.astro'
import Footer from '@/components/Footer.astro'
import LanguageSwitcher from '@/components/LanguageSwitcher.astro'
import MainHeader from '@/components/MainHeader.astro'
@ -6,7 +7,6 @@ import MobileHeader from '@/components/MobileHeader.astro'
import Navigation from '@/components/Navbar.astro'
import PhotoSwipe from '@/components/PhotoSwipe.astro'
import Scrollbar from '@/components/Scrollbar.astro'
import ScrollButton from '@/components/ScrollButton.astro'
import ThemeToggle from '@/components/ThemeToggle.astro'
import themeConfig from '@/config'
import Head from '@/layouts/Head.astro'
@ -35,8 +35,8 @@ const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'fon
<Head {postTitle} {postDescription} {postImage} />
<body data-overlayscrollbars-initialize>
<div
class="mx-a max-w-492 min-h-dvh"
p="x-[calc(9.942vw-1.18rem)] y-[calc(7.3vw+0.52rem)] lg:(x-36 y-[max(10.4vh,7.8rem)])"
class="mx-auto max-w-313.344 min-w-128 min-h-dvh"
p="x-[min(7.25vw,5.568rem)] y-17.6 lg:(x-36 y-[max(10.4vh,7.8rem)])"
lg="grid cols-[1fr_22rem] rows-1 gap-[min(calc(16.83vw-6.27rem),18rem)]"
>
<div class={!isHome && isPost ? 'hidden lg:block' : ''}>
@ -51,10 +51,10 @@ const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'fon
<slot />
</main>
</div>
<ThemeToggle />
<Scrollbar client:load />
<ThemeToggle client:idle />
<LanguageSwitcher />
<Scrollbar />
<PhotoSwipe />
<ScrollButton />
<BackToTop client:idle />
<PhotoSwipe client:idle />
</body>
</html>