Skip to content

Commit 8a3f907

Browse files
codingcodaxcodingcodax
committed
feat(components): create head 
1 parent 770b652 commit 8a3f907

File tree

1 file changed

+155
-0
lines changed

1 file changed

+155
-0
lines changed

‎src/components/head.astro‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
---
2+
import '~/styles/global.css';
3+
4+
import geistMono400 from '@fontsource/geist-mono/files/geist-mono-latin-400-normal.woff2';
5+
import geistSans400 from '@fontsource/geist-sans/files/geist-sans-latin-400-normal.woff2';
6+
import geistSans500 from '@fontsource/geist-sans/files/geist-sans-latin-500-normal.woff2';
7+
import geistSans600 from '@fontsource/geist-sans/files/geist-sans-latin-600-normal.woff2';
8+
import { ClientRouter } from 'astro:transitions';
9+
10+
import { SITE } from '~/config/consts';
11+
12+
type Props = {
13+
title: string;
14+
description: string;
15+
image?: string;
16+
};
17+
18+
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
19+
20+
const { title, description, image = '/OG.png' } = Astro.props;
21+
---
22+
23+
<!-- Global Metadata -->
24+
<meta charset='utf-8' />
25+
<meta name='viewport' content='width=device-width, initial-scale=1' />
26+
<meta name='generator' content={Astro.generator} />
27+
<link
28+
rel='icon'
29+
type='image/png'
30+
href='/favicons/favicon-96x96.png'
31+
sizes='96x96'
32+
/>
33+
<link rel='icon' type='image/svg+xml' href='/favicons/favicon.svg' />
34+
<link rel='shortcut icon' href='/favicons/favicon.ico' />
35+
<link
36+
rel='apple-touch-icon'
37+
sizes='180x180'
38+
href='/favicons/apple-touch-icon.png'
39+
/>
40+
<meta name='apple-mobile-web-app-title' content='Alexis Guzman' />
41+
<link rel='manifest' href='/favicons/site.webmanifest' />
42+
<link rel='sitemap' href='/sitemap-index.xml' />
43+
44+
<!-- Font preloads -->
45+
<link
46+
rel='preload'
47+
href={geistSans400}
48+
as='font'
49+
type='font/woff2'
50+
crossorigin
51+
/>
52+
<link
53+
rel='preload'
54+
href={geistSans500}
55+
as='font'
56+
type='font/woff2'
57+
crossorigin
58+
/>
59+
<link
60+
rel='preload'
61+
href={geistSans600}
62+
as='font'
63+
type='font/woff2'
64+
crossorigin
65+
/>
66+
<link
67+
rel='preload'
68+
href={geistMono400}
69+
as='font'
70+
type='font/woff2'
71+
crossorigin
72+
/>
73+
<meta name='apple-mobile-web-app-title' content='Alexis Guzman' />
74+
<link rel='manifest' href='/favicons/site.webmanifest' />
75+
<link rel='sitemap' href='/sitemap-index.xml' />
76+
77+
<!-- Canonical URL -->
78+
<link rel='canonical' href={canonicalURL} />
79+
80+
<!-- Primary Meta Tags -->
81+
<title>{title}</title>
82+
<meta name='title' content={title} />
83+
<meta name='description' content={description} />
84+
85+
<!-- Open Graph / Facebook -->
86+
<meta property='og:type' content='website' />
87+
<meta property='og:url' content={Astro.url} />
88+
<meta property='og:site_name' content={title} />
89+
<meta property='og:locale' content='en_US' />
90+
<meta property='og:title' content={title} />
91+
<meta property='og:description' content={description} />
92+
<meta property='og:image' content={new URL(image, Astro.url)} />
93+
<meta property='og:image:width' content='1920' />
94+
<meta property='og:image:height' content='1080' />
95+
<meta property='og:image:alt' content='Alexis Guzman Banner' />
96+
97+
<!-- Twitter -->
98+
<meta property='twitter:card' content='summary_large_image' />
99+
<meta name='twitter:site' content='@codingcodax' />
100+
<meta name='twitter:creator' content='@codingcodax' />
101+
<meta property='twitter:url' content={Astro.url} />
102+
<meta property='twitter:title' content={title} />
103+
<meta property='twitter:description' content={description} />
104+
<meta property='twitter:image' content={new URL(image, Astro.url)} />
105+
<meta name='twitter:image:width' content='1920' />
106+
<meta name='twitter:image:height' content='1080' />
107+
<meta name='twitter:image:alt' content='Alexis Guzman Banner' />
108+
109+
<ClientRouter />
110+
111+
<!-- RSS Link -->
112+
<link
113+
rel='alternate'
114+
type='application/rss+xml'
115+
title={SITE.NAME}
116+
href={new URL('rss.xml', Astro.site)}
117+
/>
118+
119+
<script>
120+
import type { TransitionBeforeSwapEvent } from 'astro:transitions/client';
121+
122+
document.addEventListener('astro:before-swap', (e) =>
123+
[
124+
...(e as TransitionBeforeSwapEvent).newDocument.head.querySelectorAll(
125+
'link[as="font"]',
126+
),
127+
].forEach((link) => link.remove()),
128+
);
129+
</script>
130+
131+
<script is:inline>
132+
const init = () => {
133+
document.documentElement.classList.toggle(
134+
'dark',
135+
localStorage.theme === 'dark' ||
136+
(!('theme' in localStorage) &&
137+
window.matchMedia('(prefers-color-scheme: dark)').matches),
138+
);
139+
140+
const animate = () => {
141+
const animateElements = document.querySelectorAll('.animate');
142+
143+
animateElements.forEach((element, index) => {
144+
setTimeout(() => {
145+
element.classList.add('show');
146+
}, index * 150);
147+
});
148+
};
149+
150+
animate();
151+
};
152+
153+
document.addEventListener('DOMContentLoaded', () => init());
154+
document.addEventListener('astro:after-swap', () => init());
155+
</script>

0 commit comments

Comments
 (0)