reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-16 03:32:51 +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>

2
src/layouts/Layout.astro
View file

@ -5,7 +5,6 @@ import Header from '@/components/Header.astro'
import Navbar from '@/components/Navbar.astro'
import GithubCard from '@/components/Widgets/GithubCard.astro'
import PhotoSwipe from '@/components/Widgets/PhotoSwipe.astro'
import Scrollbar from '@/components/Widgets/Scrollbar.astro'
import themeConfig from '@/config'
import Head from '@/layouts/Head.astro'
import { getPageInfo } from '@/utils/page'
@ -50,7 +49,6 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
<Footer />
</div>
<Button supportedLangs={supportedLangs} />
<Scrollbar />
<GithubCard />
<PhotoSwipe />
</body>

4
src/pages/404.astro
View file

@ -6,8 +6,8 @@ import Layout from '@/layouts/Layout.astro'
<!-- Decorative Line -->
<div class="uno-decorative-line"></div>
<!-- Page Not Found -->
<h3 class="mt--1.3 text-8 text-primary font-bold leading-1.2em font-navbar lg:text-9">PAGE<br>NOT<br>FOUND</h3>
<p class="mt-3.6 text-3.6 leading-1.4em font-navbar lg:(mt-4 text-4)">It looks like the page you're looking for<br>does not exist or has been moved.</p>
<h3 class="mt--1.3 text-8 text-primary font-bold leading-1.2em font-navbar lg:text-9">PAGE<br >NOT<br >FOUND</h3>
<p class="mt-3.6 text-3.6 leading-1.4em font-navbar lg:(mt-4 text-4)">It looks like the page you're looking for<br >does not exist or has been moved.</p>
<!-- Unused Div -->
<div class=""></div>
</Layout>

2
src/styles/extend.css
View file

@ -8,7 +8,7 @@
/* Heading Anchor Link */
.heading-anchor-link {
--at-apply: 'inline-block translate-y-0.1em c-secondary/0';
--at-apply: 'inline-block translate-y-0.08em c-secondary/0';
}
h1:hover .heading-anchor-link,
h2:hover .heading-anchor-link,

2
src/styles/global.css
View file

@ -23,7 +23,7 @@ body {
}
.highlight-static::after,
.highlight-hover::after {
--at-apply: 'content-[""] absolute bottom-0.5em left-0 z--1 h-0.5em w-full bg-mark';
--at-apply: 'content-[""] absolute left-0 z--1 h-0.5em w-full bg-mark';
}
.highlight-static::after,
.highlight-hover:hover::after {

20
src/styles/heti.css
View file

@ -12,7 +12,7 @@
/* Customized Post Title */
.heti .post-title {
--at-apply: 'mb-2 text-8.6 c-primary font-bold leading-12 lg:text-9';
--at-apply: 'mb-2 text-8.6 c-primary font-bold lg:text-9';
}
/* Headings */
@ -22,37 +22,37 @@
.heti :where(h4),
.heti :where(h5),
.heti :where(h6) {
--at-apply: 'mb-3 mt-6 font-semibold';
--at-apply: 'mb-4 mt-6 font-semibold';
}
.heti :where(h1) {
--at-apply: 'text-7 leading-12';
--at-apply: 'mt-9 text-7';
}
.heti :where(h2) {
--at-apply: 'text-6 leading-9';
--at-apply: 'mt-9 text-6';
}
.heti :where(h3) {
--at-apply: 'text-5 leading-9';
--at-apply: 'mt-6.75 text-5';
}
.heti :where(h4) {
--at-apply: 'text-4.5 leading-6';
--at-apply: 'text-4.5';
}
.heti :where(h5) {
--at-apply: 'text-4 leading-6';
--at-apply: 'text-4';
}
.heti :where(h6) {
--at-apply: 'text-3.5 leading-6';
--at-apply: 'text-3.5';
}
.heti :where(h1),
.heti :where(h2),
.heti :where(h3) {
--at-apply: 'text-balance cjk:text-pretty cjk:tracking-0.05em';
--at-apply: 'text-balance leading-1.33em cjk:text-pretty cjk:tracking-0.05em';
}
.heti :where(h1 + h2),
.heti :where(h2 + h3),
.heti :where(h3 + h4),
.heti :where(h4 + h5),
.heti :where(h5 + h6) {
--at-apply: 'mt-3';
--at-apply: 'mt-4';
}
/* Paragraphs */