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

chore: remove unused dependencies, enhance scrollbar functionality, and update VSCode settings

Browse source 
- Removed unused `@types/mdast` dependency from package.json and pnpm-lock.yaml.
- Introduced a custom scrollbar component with theme support in Scrollbar.astro.
- Updated Layout.astro to include the new Scrollbar component.
- Enhanced ThemeToggle.astro to dispatch a theme-changed event on toggle.
- Added global scrollbar styles to global.css and created a new scrollbar.css for custom scrollbar styling.
- Updated VSCode settings to improve editor experience and added recommendations for new extensions.
This commit is contained in:
radishzzz 2025-01-22 23:35:52 +00:00
parent 804cf72052
commit ac9e839a75
12 changed files with 341 additions and 208 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/components/Scrollbar.astro Normal file
View file

@ -0,0 +1,48 @@
<script>
import { OverlayScrollbars } from 'overlayscrollbars'
// Store scrollbar instance for later use
let scrollbarsInstance: ReturnType<typeof OverlayScrollbars> | null = null
// Initialize custom scrollbar with theme support
function initScrollbar() {
const bodyElement = document.body
if (!bodyElement.hasAttribute('data-scrollbar-initialized')) {
scrollbarsInstance = OverlayScrollbars({
target: bodyElement,
}, {
scrollbars: {
theme: document.documentElement.classList.contains('dark') ? 'scrollbar-dark' : 'scrollbar-light',
autoHide: 'scroll',
},
overflow: {
x: 'hidden',
},
})
bodyElement.setAttribute('data-scrollbar-initialized', 'true')
}
}
// Handle theme changes and update scrollbar appearance
document.addEventListener('theme-changed', () => {
scrollbarsInstance?.options({
scrollbars: {
theme: document.documentElement.classList.contains('dark') ? 'scrollbar-dark' : 'scrollbar-light',
},
})
})
// Cleanup scrollbar instance before page transitions
document.addEventListener('astro:before-swap', () => {
scrollbarsInstance?.destroy()
scrollbarsInstance = null
})
document.addEventListener('DOMContentLoaded', initScrollbar)
document.addEventListener('astro:page-load', initScrollbar)
</script>
<style is:global>
@import '@/styles/scrollbar.css';
</style>

1
src/components/ThemeToggle.astro
View file

@ -8,6 +8,7 @@
const isDark = document.documentElement.classList.toggle('dark')
themeToggle.setAttribute('aria-pressed', String(isDark))
localStorage.setItem('theme', isDark ? 'dark' : 'light')
document.dispatchEvent(new Event('theme-changed'))
}
// Handle theme toggle with view transitions API

10
src/layouts/Layout.astro
View file

@ -1,5 +1,6 @@
---
import Head from '@/components/Head.astro'
import Scrollbar from '@/components/Scrollbar.astro'
import ThemeToggle from '@/components/ThemeToggle.astro'
import themeConfig from '@/config'
import '@/styles/global.css'
@ -16,11 +17,15 @@ const fontStyle = `font-${themeConfig.global.font}`
const colorMode = themeConfig.color.mode
---
<html lang={Astro.currentLocale || 'en-US'} class={`${fontStyle} ${colorMode}`}>
<html
lang={Astro.currentLocale || 'en-US'}
class:list={[fontStyle, colorMode]}
data-overlayscrollbars-initialize
>
<head>
<Head {postTitle} {postDescription} {postImage} />
</head>
<body>
<body data-overlayscrollbars-initialize>
<ThemeToggle />
<main
class="mx-a max-w-123rem h-dvh"
@ -28,5 +33,6 @@ const colorMode = themeConfig.color.mode
>
<slot />
</main>
<Scrollbar />
</body>
</html>

10
src/pages/index.astro
View file

@ -1,13 +1,13 @@
---
import Layout from '@/layouts/Layout.astro'
// import { getPinnedPosts, getPosts } from '@/utils/content.config'
import { getPinnedPosts, getPosts } from '@/utils/content.config'
// const posts = await getPosts()
// const pinnedPosts = await getPinnedPosts()
const posts = await getPosts()
const pinnedPosts = await getPinnedPosts()
---
<Layout>
<!-- <main>
<main>
{pinnedPosts.length > 0 && (
<section>
<ul>
@ -35,5 +35,5 @@ import Layout from '@/layouts/Layout.astro'
))}
</ul>
</section>
</main> -->
</main>
</Layout>

7
src/styles/global.css
View file

@ -14,6 +14,13 @@ body {
--at-apply: 'transition-all duration-500 ease-in-out';
}
}
* {
scrollbar-width: none;
-ms-overflow-style: none;
}
*::-webkit-scrollbar {
display: none;
}
h1, h2, h3 {
text-rendering: optimizeLegibility;
}

30
src/styles/scrollbar.css Normal file
View file

@ -0,0 +1,30 @@
@import 'overlayscrollbars/overlayscrollbars.css';
.scrollbar-light,
.scrollbar-dark {
--os-size: 1rem;
--os-padding-perpendicular: 0.2rem;
--os-padding-axis: 0.4rem;
--os-handle-border-radius: 0.7rem;
--os-handle-perpendicular-size-hover: 160%;
--os-handle-perpendicular-size-active: 160%;
--os-handle-interactive-area-offset: 3px;
}
.scrollbar-light {
--os-handle-bg: #D1C6BE;
--os-handle-bg-hover: #C1B6AF;
--os-handle-bg-active: #C1B6AF;
}
.scrollbar-dark {
--os-handle-bg: #383838;
--os-handle-bg-hover: #464646;
--os-handle-bg-active: #464646;
}
@media (max-width: 1023px) {
.os-scrollbar {
display: none !important;
}
}