Personal Site
vielle.dev
1---
2import Header from "./Header.astro";
3
4interface Props {
5 title?: string;
6 graph?: {
7 description: string;
8 url: string;
9 type?: "website" | "article" | `${"music" | "video"}.${string}`;
10 image?: string;
11 };
12}
13
14const { graph } = Astro.props;
15const title = Astro.props.title
16 ? `${Astro.props.title} | vielle.dev`
17 : "vielle.dev";
18---
19
20<html lang="en">
21 <head>
22 <meta charset="utf-8" />
23 <meta name="viewport" content="width=device-width" />
24 <link rel="sitemap" href="/sitemap-index.xml" />
25 <link
26 rel="alternate"
27 type="application/rss+xml"
28 title="vielle.dev"
29 href={new URL("rss", Astro.site)}
30 />
31 <link
32 rel="icon"
33 href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🪤</text></svg>"
34 />
35
36 <title>
37 {title}
38 </title>
39 <meta name="generator" content={Astro.generator} />
40 {
41 graph && (
42 <Fragment>
43 <meta name="description" content={graph.description} />
44
45 {/* opengraph */}
46 <meta property="og:url" content={graph.url.toString()} />
47 <meta property="og:type" content={graph.type ?? "website"} />
48 <meta property="og:title" content={title} />
49 <meta property="og:description" content={graph.description} />
50 {graph.image && <meta property="og:image" content={graph.image} />}
51
52 {/* twt card markup */}
53 <meta name="twitter:card" content="summary_large_image" />
54 <meta name="twitter:title" content={title} />
55 <meta name="twitter:description" content={graph.description} />
56 {graph.image && <meta name="twitter:image" content={graph.image} />}
57 </Fragment>
58 )
59 }
60
61 <style is:global>
62 @layer reset {
63 :root {
64 font-family: sans-serif;
65 interpolate-size: allow-keywords;
66 image-rendering: pixelated;
67 }
68
69 * {
70 margin: 0;
71 padding: 0;
72 }
73
74 html,
75 body {
76 min-width: 30ch;
77 min-height: 100svh;
78 }
79
80 img,
81 svg,
82 iframe,
83 audio,
84 video {
85 max-width: 100%;
86 display: block;
87 }
88 }
89 </style>
90 <slot name="head" />
91 </head>
92 <body>
93 <Header />
94 <slot />
95 </body>
96</html>