Files
portfolio/src/layouts/Layout.astro
2025-05-01 02:48:54 +03:00

77 lines
2.5 KiB
Plaintext

---
import '@/styles/global.css'
import '@/styles/typography.css'
import Footer from '@/components/Footer.astro'
import Head from '@/components/Head.astro'
import Navbar from '@/components/react/navbar'
import { SITE } from '@/consts'
import { cn } from '@/lib/utils'
import Posthog from '@/components/Posthog.astro'
const {
isWide = false,
canonicalUrl = SITE.href
} = Astro.props
---
<!doctype html>
<html lang={SITE.locale}>
<Head>
<slot name="head" />
<script src="https://analytics.ahrefs.com/analytics.js" data-key="+FHMgRP7/Duxaq5D0gZtJw" async></script>
<link rel="sitemap" href="/sitemap-index.xml" />
<script is:inline data-astro-rerun>
(function() {
try {
const localStorageTheme = localStorage.getItem('theme');
const isDark =
(localStorageTheme === 'dark') ||
(!localStorageTheme && window.matchMedia('(prefers-color-scheme: dark)').matches);
document.documentElement.classList.toggle('dark', isDark);
localStorage.setItem('theme', isDark ? 'dark' : 'light');
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (!localStorage.getItem('theme')) {
document.documentElement.classList.toggle('dark', e.matches);
localStorage.setItem('theme', e.matches ? 'dark' : 'light');
}
});
} catch (error) {
console.warn('Theme setting failed:', error);
}
})();
</script>
<link rel="canonical" href={canonicalUrl} />
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/rss.xml" />
<Posthog />
</Head>
<body>
<div class="flex h-fit min-h-screen w-full flex-col gap-y-4 sm:gap-y-6 font-sans">
<Navbar client:load />
<main class="flex grow flex-col bg-background mt-16 lg:mt-6" aria-label="Main content" role="main">
<div
class={cn(
'mx-auto flex grow flex-col gap-y-4 sm:gap-y-6 px-3 py-10 sm:py-16 md:py-20 lg:py-24 sm:px-6 lg:px-8',
!isWide && 'max-w-5xl'
)}
>
<slot />
</div>
</main>
<Footer />
</div>
<script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-QVK59XQK72"
></script>
<script is:inline>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-QVK59XQK72");
</script>
</body>
</html>