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