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

fix: issues in last commit

Browse source
This commit is contained in:
radishzzz 2025-01-20 13:51:19 +00:00
parent 6ff3d30f80
commit 42fa1be00f
3 changed files with 39 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/Head.astro
View file

@ -27,9 +27,9 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
<meta name="description" content={postDescription || description} /> <meta name="description" content={postDescription || description} />
<meta name="author" content={author} /> <meta name="author" content={author} />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<meta name="theme-color" content=`"${lightMode}"` /> <meta name="theme-color" content={lightMode} />
<meta name="theme-color" media="(prefers-color-scheme: light)" content={`"${lightMode}"`} /> <meta name="theme-color" media="(prefers-color-scheme: light)" content={lightMode} />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content={`"${darkMode}"`} /> <meta name="theme-color" media="(prefers-color-scheme: dark)" content={darkMode} />
<meta itemprop="name" content={postTitle || title} /> <meta itemprop="name" content={postTitle || title} />
<meta itemprop="image" content={postImage || siteScreenshot} /> <meta itemprop="image" content={postImage || siteScreenshot} />
<meta itemprop="description" content={postDescription || subtitle} /> <meta itemprop="description" content={postDescription || subtitle} />

34
src/components/ThemeToggle.astro
View file

@ -1,40 +1,50 @@
<script> <script>
declare global { declare global {
interface Document { interface Document {
startViewTransition: (callback: () => void) => void startViewTransition: (callback: () => void) => void
} }
} }
const TOGGLE = document.querySelector('button[aria-pressed]') as HTMLButtonElement const TOGGLE = document.querySelector('button[aria-pressed]') as HTMLButtonElement
if (!TOGGLE) if (!TOGGLE)
throw new Error('Theme toggle button not found') throw new Error('Theme toggle button not found')
const isDark = document.documentElement.classList.contains('dark') const isDark = document.documentElement.classList.contains('dark')
TOGGLE.setAttribute('aria-pressed', String(isDark)) TOGGLE.setAttribute('aria-pressed', String(isDark))
function SWITCH() { function SWITCH() {
const isDark = !TOGGLE.matches('[aria-pressed=true]') const isDark = !TOGGLE.matches('[aria-pressed=true]')
TOGGLE.setAttribute('aria-pressed', String(isDark)) TOGGLE.setAttribute('aria-pressed', String(isDark))
const newTheme = isDark ? 'dark' : 'light' const newTheme = isDark ? 'dark' : 'light'
document.documentElement.classList.toggle('dark', isDark) document.documentElement.classList.toggle('dark', isDark)
localStorage.setItem('theme', newTheme) localStorage.setItem('theme', newTheme)
} }
function TOGGLE_THEME() { function TOGGLE_THEME() {
if (!document.startViewTransition) { if (!document.startViewTransition) {
SWITCH() SWITCH()
return return
} }
document.startViewTransition(SWITCH) document.startViewTransition(SWITCH)
} }
TOGGLE.addEventListener('click', TOGGLE_THEME) TOGGLE.addEventListener('click', TOGGLE_THEME)
</script> </script>
<style>
[aria-pressed='true'] .moon-icon,
.sun-icon {
display: none;
}
[aria-pressed='true'] .sun-icon {
display: block;
}
</style>
<button <button
aria-pressed="false" aria-pressed="false"
aria-label="Theme Toggle Button" aria-label="Theme Toggle Button"
class="absolute right-10 top-10 z-999 aspect-square w-8 text-secondary [&[aria-pressed='true']_.sun-icon]:block [&_.sun-icon]:hidden [&[aria-pressed='true']_.moon-icon]:hidden" class="absolute right-10 top-10 z-999 aspect-square w-8 text-secondary"
> >
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="moon-icon" fill="currentColor"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="moon-icon" fill="currentColor">
<g> <g>

4
src/styles/global.css
View file

@ -4,10 +4,10 @@
--uno-colors-background: theme('colors.background'); --uno-colors-background: theme('colors.background');
} }
html { html {
--at-apply: 'min-h-screen min-h-dvh scroll-smooth antialiased text-62.5%'; --at-apply: 'h-[-webkit-fill-available] scroll-smooth antialiased text-62.5%';
} }
body { body {
--at-apply: 'min-h-screen min-h-dvh bg-background text-primary text-1.6rem'; --at-apply: 'min-h-screen min-h-[-webkit-fill-available] bg-background text-primary text-1.6rem';
} }
@supports not (view-transition-name: none) { @supports not (view-transition-name: none) {
body { body {