blog/src/layouts/Layout.astro
2025-02-06 15:24:34 +00:00

57 lines
1.7 KiB
Text

---
import Footer from '@/components/Footer.astro'
import LanguageSwitcher from '@/components/LanguageSwitcher.astro'
import MainHeader from '@/components/MainHeader.astro'
import MobileHeader from '@/components/MobileHeader.astro'
import Navigation from '@/components/Navbar.astro'
import PhotoSwipe from '@/components/PhotoSwipe.astro'
import Scrollbar from '@/components/Scrollbar.astro'
import ThemeToggle from '@/components/ThemeToggle.astro'
import themeConfig from '@/config'
import Head from '@/layouts/Head.astro'
import { getPagePath } from '@/utils/path'
import '@/styles/font.css'
import '@/styles/global.css'
import '@/styles/photoswipe.css'
interface Props {
postTitle?: string
postDescription?: string
postImage?: string
}
const { postTitle, postDescription, postImage } = Astro.props
const fontStyle = `font-${themeConfig.global.fontStyle}`
const { isHome, isPost } = getPagePath(Astro.url.pathname);
---
<html
lang={Astro.currentLocale || 'en-US'}
class:list={[fontStyle]}
data-overlayscrollbars-initialize
>
<Head {postTitle} {postDescription} {postImage} />
<body data-overlayscrollbars-initialize>
<div
class="mx-a max-w-492 h-dvh"
p="x-[calc(9.942vw-1.18rem)] y-[calc(7.3vw+0.52rem)] lg:(x-36 y-[max(10.4vh,7.8rem)])"
lg="grid cols-[1fr_22rem] rows-1 gap-[min(calc(16.83vw-6.27rem),18rem)]"
>
<div class={!isHome && isPost ? 'hidden lg:block' : ''}>
<MainHeader />
<Navigation />
<Footer />
</div>
{!isHome && isPost && <MobileHeader /> }
<main class="col-start-1 row-start-1">
<slot />
</main>
</div>
<ThemeToggle />
<LanguageSwitcher />
<Scrollbar />
<PhotoSwipe />
</body>
</html>