My website, rebuilt yet again
1---
2// Import the global.css file here so that it is included on
3// all pages through the use of the <BaseHead /> component.
4import '../styles/global.css';
5import type { ImageMetadata } from 'astro';
6import { SITE_TITLE } from '../consts';
7import { Font } from 'astro:assets';
8import { AT_HANDLE, getAvatarBlob } from '../lib/atproto';
9
10interface Props {
11 title: string;
12 description: string;
13 image?: ImageMetadata;
14}
15
16const canonicalURL = new URL(Astro.url.pathname, Astro.site);
17const avatarUrl = await getAvatarBlob(AT_HANDLE);
18
19const { title, description, image } = Astro.props;
20---
21
22<!-- Global Metadata -->
23<meta charset="utf-8" />
24<meta name="viewport" content="width=device-width,initial-scale=1" />
25<link rel="icon" href={avatarUrl} />
26<link rel="sitemap" href="/sitemap-index.xml" />
27<link
28 rel="alternate"
29 type="application/rss+xml"
30 title={SITE_TITLE}
31 href={new URL('rss.xml', Astro.site)}
32/>
33
34<Font cssVariable="--font-geist-mono" preload />
35
36<!-- Canonical URL -->
37<link rel="canonical" href={canonicalURL} />
38
39<!-- Primary Meta Tags -->
40<title>{title}</title>
41<meta name="title" content={title} />
42<meta name="description" content={description} />
43
44<!-- Open Graph / Facebook -->
45<meta property="og:type" content="website" />
46<meta property="og:url" content={Astro.url} />
47<meta property="og:title" content={title} />
48<meta property="og:description" content={description} />
49{image && <meta property="og:image" content={new URL(image.src, Astro.url)} />}
50
51<!-- Twitter -->
52<meta property="twitter:card" content="summary_large_image" />
53<meta property="twitter:url" content={Astro.url} />
54<meta property="twitter:title" content={title} />
55<meta property="twitter:description" content={description} />
56{image && <meta property="twitter:image" content={new URL(image.src, Astro.url)} />}