deployn/astro-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(layout): create baselayout component

Browse Source
This commit is contained in:
Jewgeni Lewash 2024-02-25 22:35:23 +01:00
parent 5492e6c558
commit 96e9adb513
2 changed files with 49 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/layouts/BaseLayout.astro Normal file
View File

@ -0,0 +1,45 @@
---
import '@/styles/globals.css';
import { ModeToggle } from '@/components/ModeToggle';
const { title } = Astro.props;
---
<script is:inline>
const getThemePreference = () => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme');
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
};
const isDark = getThemePreference() === 'dark';
document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
if (typeof localStorage !== 'undefined') {
const observer = new MutationObserver(() => {
const isDark = document.documentElement.classList.contains('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
}
</script>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#61a8e1" />
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
<link rel="manifest" href="/site.webmanifest" />
<title>{title}</title>
</head>
<body class="dark:bg-black">
<div class="flex items-center justify-center pt-4 dark:text-white">
<ModeToggle client:load />
</div>
<main>
<slot />
</main>
</body>
</html>

44
src/pages/index.astro
View File

@ -1,43 +1,7 @@
---
import '@/styles/globals.css';
import { ModeToggle } from '@/components/ModeToggle';
import BaseLayout from '@/layouts/BaseLayout.astro';
---
<!doctype html>
<script is:inline>
const getThemePreference = () => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme');
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
};
const isDark = getThemePreference() === 'dark';
document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
if (typeof localStorage !== 'undefined') {
const observer = new MutationObserver(() => {
const isDark = document.documentElement.classList.contains('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
}
</script>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#61a8e1" />
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
<link rel="manifest" href="/site.webmanifest" />
<title>Astro Deploy</title>
</head>
<body class="dark:bg-black">
<main>
<div class="flex items-center justify-center px-4 pt-48 dark:text-white">Hello World</div>
<div class="flex items-center justify-center pt-4 dark:text-white">
<ModeToggle client:load />
</div>
</main>
</body>
</html>
<BaseLayout title="Astro Deploy">
<div class="flex items-center justify-center px-4 pt-48 dark:text-white">Hello World</div>
</BaseLayout>