forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1---
2import { themeConfig } from '@/config'
3import { ClientRouter } from 'astro:transitions'
4import ThemeManager from '@/components/ui/ThemeManager.astro'
5import FaviconThemeSwitcher from '@/components/ui/FaviconThemeSwitcher.astro'
6import TransitionWrapper from '@/components/layout/TransitionWrapper.astro'
7import type { LayoutProps } from '@/types'
8
9type Props = LayoutProps
10
11const { type = 'page' } = Astro.props
12const language = themeConfig.site.language || 'en-US'
13const contentWidth = themeConfig.general.contentWidth
14const fadeAnimation = themeConfig.general.fadeAnimation
15const widthValue = Math.min(parseFloat(contentWidth), 50)
16const shouldUseCustomWidth = widthValue > 25
17const finalWidth = shouldUseCustomWidth ? `${widthValue}rem` : '25rem'
18---
19
20<html lang={language}>
21 <head>
22 <ThemeManager />
23 {fadeAnimation && <ClientRouter />}
24 <slot name="head" />
25 </head>
26 <body
27 data-centered={themeConfig.general.centeredLayout}
28 style={`
29 max-width: ${finalWidth};
30 ${shouldUseCustomWidth ? `--content-width: ${widthValue}rem;` : ''}
31 `}
32 >
33 <FaviconThemeSwitcher />
34
35 {
36 fadeAnimation ? (
37 <TransitionWrapper type={type} class="layout-wrapper">
38 <slot />
39 </TransitionWrapper>
40 ) : (
41 <div class="layout-wrapper">
42 <slot />
43 </div>
44 )
45 }
46 </body>
47</html>
48
49<style is:global>
50 .layout-wrapper {
51 display: flex;
52 flex-direction: column;
53 min-height: calc(100vh - 7.5rem);
54 }
55
56 @media (max-width: 768px) {
57 .layout-wrapper {
58 min-height: calc(100vh - 5.5rem);
59 }
60 }
61</style>