1 ---
2 // Import the global.css file here so that it is included on
3 // all pages through the use of the <BaseHead /> component.
4 import { SITE } from '@/config'
5 import type { BaseHeadProps } from '@/types/component.types'
6 import 'katex/dist/katex.min.css'
7
8 const canonicalURL = new URL(Astro.url.pathname, Astro.site)
9
10 const { title, description } = Astro.props as BaseHeadProps
11 ---
12
13 <!-- Global Metadata -->
14 <meta charset="utf-8" />
15 <meta name="viewport" content="width=device-width,initial-scale=1" />
16 {SITE.fadeAnimation && <meta name="view-transition" content="same-origin" />}
17 <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
18 <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
19 <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
20 <link rel="manifest" href="/favicon/site.webmanifest" />
21 <link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
22 <link
23 rel="preload"
24 href="/fonts/Besley-Italic.woff2"
25 as="font"
26 type="font/woff2"
27 crossorigin="anonymous"
28 />
29 <link rel="sitemap" href="/sitemap-index.xml" />
30 <link
31 rel="alternate"
32 type="application/rss+xml"
33 title={SITE.title}
34 href={new URL('rss.xml', Astro.site)}
35 />
36 <meta name="generator" content={Astro.generator} />
37
38 <!-- Canonical URL -->
39 <link rel="canonical" href={canonicalURL} />
40
41 <!-- Primary Meta Tags -->
42 <title>
43 {title || SITE.title}
44 </title>
45 <meta name="title" content={title} />
46 <meta name="description" content={description} />
47
48 <!-- Open Graph / Facebook -->
49 <meta property="og:type" content="website" />
50 <meta property="og:url" content={Astro.url} />
51 <meta property="og:title" content={title} />
52 <meta property="og:description" content={description} />
53 <meta property="og:image" content={new URL('/chiri-og.png', Astro.url)} />
54
55 <!-- Twitter -->
56 <meta property="twitter:card" content="summary_large_image" />
57 <meta property="twitter:url" content={Astro.url} />
58 <meta property="twitter:title" content={title} />
59 <meta property="twitter:description" content={description} />
60 <meta property="twitter:image" content={new URL('/chiri-og.png', Astro.url)} />
61
62 <!-- Transitions Initialization -->
63 <script is:inline define:vars={{ fadeAnimation: SITE.fadeAnimation }}>
64 function initMotionPref(doc = document) {
65 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
66 const supportsViewTransitions = 'startViewTransition' in document
67
68 doc.documentElement.classList.toggle('reduce-motion', prefersReducedMotion)
69
70 doc.documentElement.classList.toggle(
71 'disable-transitions',
72 !fadeAnimation || !supportsViewTransitions
73 )
74
75 doc.documentElement.classList.add('js')
76 }
77
78 initMotionPref()
79
80 document.addEventListener('astro:before-swap', ({ newDocument }) => {
81 initMotionPref(newDocument)
82 })
83
84 document.addEventListener('astro:page-load', () => {
85 initMotionPref()
86 })
87
88 document.addEventListener('visibilitychange', () => {
89 if (document.visibilityState === 'visible') {
90 initMotionPref()
91 }
92 })
93
94 window.addEventListener('pageshow', () => {
95 initMotionPref()
96 })
97 </script>