@smbcloud / pepakbasajawa-web
Code Commits Issues Pulls Cloud Agent CI/CD
copilot/add-i18n-support-for-english
copilot/add-i18n-support-for-english dependabot/npm_and_yarn/astro-5.16.4 dependabot/npm_and_yarn/katex-0.16.27 dependabot/npm_and_yarn/prettier-3.7.4 dependabot/npm_and_yarn/tailwindcss-4.1.16 dependabot/npm_and_yarn/tailwindcss/vite-4.1.16 dependabot/npm_and_yarn/typescript-eslint-8.46.2 dependabot/npm_and_yarn/typescript-eslint/parser-8.46.2 development main
astro 76 lines 2.18 KB
Raw
1 ---
2 import { SITE } from '@/config'
3 import TransitionWrapper from '@/components/layout/TransitionWrapper.astro'
4 import type { LayoutProps } from '@/types'
5 import { getLangFromUrl } from '@/i18n/utils'
6
7 type Props = LayoutProps
8
9 const { type = 'page' } = Astro.props
10 const contentWidth = SITE.contentWidth
11 const widthValue = Math.min(parseFloat(contentWidth), 50)
12 const shouldUseCustomWidth = widthValue > 25
13 const finalWidth = shouldUseCustomWidth ? `${widthValue}rem` : '25rem'
14
15 const currentLang = getLangFromUrl(Astro.url)
16 const language = currentLang === 'id' ? 'id-ID' : 'en-US'
17 ---
18
19 <html
20 lang={language}
21 class={SITE.fadeAnimation ? 'view-transitions-enabled' : 'view-transitions-disabled'}
22 {...SITE.fadeAnimation ? { 'transition:animate': 'initial' } : {}}
23 >
24 <head>
25 <slot name="head" />
26 <script is:inline>
27 // Initialize theme based on system preference
28 function initTheme() {
29 const htmlElement = document.documentElement
30 const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
31
32 // Remove any existing theme classes
33 htmlElement.classList.remove('light', 'dark')
34
35 // Apply the appropriate theme class
36 htmlElement.classList.add(isDark ? 'dark' : 'light')
37 }
38
39 // Run on initial load
40 initTheme()
41
42 // Listen for system theme changes
43 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
44 const htmlElement = document.documentElement
45 htmlElement.classList.remove('light', 'dark')
46 htmlElement.classList.add(e.matches ? 'dark' : 'light')
47 })
48 </script>
49 </head>
50 <body
51 data-centered={SITE.centeredLayout}
52 class={!SITE.fadeAnimation ? 'no-fade' : ''}
53 style={`
54 max-width: ${finalWidth};
55 ${shouldUseCustomWidth ? `--content-width: ${widthValue}rem;` : ''}
56 `}
57 >
58 <TransitionWrapper type={type} class="layout-wrapper">
59 <slot />
60 </TransitionWrapper>
61 </body>
62 </html>
63
64 <style is:global>
65 .layout-wrapper {
66 display: flex;
67 flex-direction: column;
68 min-height: calc(100vh - 7.5rem);
69 }
70
71 @media (max-width: 768px) {
72 .layout-wrapper {
73 min-height: calc(100vh - 5.5rem);
74 }
75 }
76 </style>