blog/src/layouts/Layout.astro

55 lines
1.7 KiB
Text

---
import Button from '@/components/Button.astro'
import Footer from '@/components/Footer.astro'
import Header from '@/components/Header.astro'
import Navbar from '@/components/Navbar.astro'
import GithubCard from '@/components/Widgets/GithubCard.astro'
import GsapAnimation from '@/components/Widgets/GsapAnimation.astro'
import PhotoSwipe from '@/components/Widgets/PhotoSwipe.astro'
import themeConfig from '@/config'
import Head from '@/layouts/Head.astro'
import { getPageInfo } from '@/utils/page'
import '@/styles/global.css'
import '@/styles/font.css'
import '@/styles/heti.css'
import '@/styles/extend.css'
interface Props {
postTitle?: string
postDescription?: string
postSlug?: string
supportedLangs?: string[]
}
const { postTitle, postDescription, postSlug, supportedLangs = [] } = Astro.props
const { isPost } = getPageInfo(Astro.url.pathname)
const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
const MarginBottom = isPost && themeConfig.comment?.enabled
? 'mb-10' // Post page with comment system
: 'mb-12' // Other pages without comment system
---
<html
lang={Astro.currentLocale}
class:list={[fontStyle, { 'scroll-smooth': isPost }]}
>
<Head {postTitle} {postDescription} {postSlug} />
<body>
<div
class="mx-auto max-w-205.848 min-h-vh w-full min-h-dvh"
p="x-[min(7.25vw,3.731rem)] y-9"
lg="mx-[max(5rem,calc(50vw-35rem))] my-20 max-w-[min(calc(75vw-16rem),44rem)] min-h-full p-0"
>
<Header />
<Navbar />
<main class={MarginBottom}>
<slot />
</main>
<Footer />
</div>
<GsapAnimation />
<Button supportedLangs={supportedLangs} />
<GithubCard />
<PhotoSwipe />
</body>
</html>