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

perf: remove overlayscrollbars to fix page loading lag, update heading margins

Browse source
This commit is contained in:
radishzzz 2025-05-14 15:25:27 +01:00
parent c2547dd65d
commit 41fca8569e
11 changed files with 124 additions and 241 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Comments/Waline.astro
View file

@ -125,7 +125,7 @@ document.addEventListener('astro:page-load', initWaline)
--at-apply: 'w-1.2';
}
#waline .wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-thumb {
background: oklch(var(--un-preset-theme-colors-secondary) / 0.25);
--at-apply: 'bg-secondary/25';
}
#waline .wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-track-piece {
--at-apply: 'bg-transparent';

8
src/components/Footer.astro
View file

@ -10,7 +10,7 @@ const year = Number(startYear) === currentYear
? startYear
: `${startYear}-${currentYear}`
// i18n RSS Path
// i18n RSS Feed Path
const currentLang = getLangFromPath(Astro.url.pathname)
const links = socialLinks.map((link) => {
if (link.name === 'RSS') {
@ -21,6 +21,8 @@ const links = socialLinks.map((link) => {
}
return link
})
const footerLinkClass = 'highlight-hover transition-colors after:bottom-0 hover:c-primary'
---
<footer
@ -30,7 +32,7 @@ const links = socialLinks.map((link) => {
<p>
{links.map((link, index) => (
<>
<a class="highlight-hover transition-colors hover:c-primary after:bottom-0!" href={link.url} target="_blank" rel="noopener noreferrer">
<a class={footerLinkClass} href={link.url} target="_blank" rel="noopener noreferrer">
{link.name}
</a>
{index < links.length - 1 && ' / '}
@ -39,7 +41,7 @@ const links = socialLinks.map((link) => {
</p>
<p>
Powered by <a class="highlight-hover transition-colors hover:c-primary after:bottom-0!" href="https://astro.build/" target="_blank" rel="noopener noreferrer">Astro</a> and <a class="highlight-hover transition-colors hover:c-primary after:bottom-0!" href="https://github.com/radishzzz/astro-theme-retypeset" target="_blank" rel="noopener noreferrer">Retypeset</a>
Powered by <a class={footerLinkClass} href="https://astro.build/" target="_blank" rel="noopener noreferrer">Astro</a> and <a class={footerLinkClass} href="https://github.com/radishzzz/astro-theme-retypeset" target="_blank" rel="noopener noreferrer">Retypeset</a>
</p>
<p>

4
src/components/Navbar.astro
View file

@ -10,7 +10,9 @@ const isTagActive = isTag
const isAboutActive = isAbout
function getNavItemClass(isActive: boolean) {
return isActive ? 'font-bold c-primary highlight-static' : 'hover:(c-primary font-bold) transition-all highlight-hover'
return isActive
? 'highlight-static c-primary font-bold after:bottom-0.5em'
: 'highlight-hover transition-colors after:bottom-0.5em hover:(c-primary font-bold)'
}
const navItems = [

110
src/components/Widgets/Scrollbar.astro
View file

@ -1,110 +0,0 @@
<script>
import { OverlayScrollbars } from 'overlayscrollbars'
function setupScrollbar() {
// Add scrollbar to body
const bodyElement = document.body
if (!bodyElement.hasAttribute('data-scrollbar-initialized')) {
OverlayScrollbars({
target: bodyElement,
cancel: {
nativeScrollbarsOverlaid: true,
},
}, {
scrollbars: {
theme: 'scrollbar-body',
autoHide: 'scroll',
autoHideDelay: 800,
},
overflow: {
x: 'hidden',
},
})
bodyElement.setAttribute('data-scrollbar-initialized', 'true')
}
// Add scrollbar to TOC content
const tocElement = document.getElementById('toc-content')
if (tocElement && !tocElement.hasAttribute('data-scrollbar-initialized')) {
OverlayScrollbars({
target: tocElement,
}, {
scrollbars: {
theme: 'scrollbar-widget',
autoHide: 'never',
},
overflow: {
x: 'hidden',
},
})
tocElement.setAttribute('data-scrollbar-initialized', 'true')
}
// Add scrollbar to code blocks
const preElements = document.querySelectorAll('pre')
preElements.forEach((pre) => {
if (!pre.hasAttribute('data-scrollbar-initialized')) {
OverlayScrollbars({
target: pre,
}, {
scrollbars: {
theme: 'scrollbar-widget',
autoHide: 'leave',
autoHideDelay: 500,
},
overflow: {
y: 'hidden',
},
})
pre.setAttribute('data-scrollbar-initialized', 'true')
}
})
}
setupScrollbar()
document.addEventListener('astro:after-swap', setupScrollbar)
</script>
<style is:global>
@import 'overlayscrollbars/overlayscrollbars.css';
.scrollbar-body {
--os-size: 0.8rem;
--os-padding-perpendicular: 0.15rem;
--os-padding-axis: 0.2rem;
--os-handle-border-radius: 99rem;
--os-handle-perpendicular-size: 75%;
--os-handle-perpendicular-size-hover: 100%;
--os-handle-perpendicular-size-active: 100%;
--os-handle-interactive-area-offset: 0.2rem;
--os-handle-bg: oklch(var(--un-preset-theme-colors-secondary) / 0.25);
--os-handle-bg-hover: oklch(var(--un-preset-theme-colors-secondary) / 0.40);
--os-handle-bg-active: oklch(var(--un-preset-theme-colors-secondary) / 0.40);
--os-handle-max-size: 80%;
--os-handle-min-size: 12%;
}
.scrollbar-widget {
--os-size: 0.4rem;
--os-padding-perpendicular: 0;
--os-padding-axis: 0.05rem;
--os-handle-border-radius: 99rem;
--os-handle-perpendicular-size: 75%;
--os-handle-perpendicular-size-hover: 100%;
--os-handle-perpendicular-size-active: 100%;
--os-handle-interactive-area-offset: 0.2rem;
--os-handle-bg: oklch(var(--un-preset-theme-colors-secondary) / 0.15);
--os-handle-bg-hover: oklch(var(--un-preset-theme-colors-secondary) / 0.30);
--os-handle-bg-active: oklch(var(--un-preset-theme-colors-secondary) / 0.30);
--os-handle-min-size: 12%;
}
@media (min-width: 1536px) {
#toc-content .os-scrollbar {
--at-apply: 'hidden';
}
}
</style>