vielle.dev
+20
-14
src/components/Base.astro
+20
-14
src/components/Base.astro
···
3
3
4
4
interface Props {
5
5
title?: string;
6
-
graph: {
6
+
graph?: {
7
7
description: string;
8
8
url: string;
9
9
type?: "website" | "article" | `${"music" | "video"}.${string}`;
···
26
26
<title>
27
27
{title}
28
28
</title>
29
-
<meta name="description" content={graph.description} />
30
29
<meta name="generator" content={Astro.generator} />
30
+
{
31
+
graph && (
32
+
<Fragment>
33
+
<meta name="description" content={graph.description} />
31
34
32
-
<!-- opengraph -->
33
-
<meta property="og:url" content={graph.url.toString()} />
34
-
<meta property="og:type" content={graph.type ?? "website"} />
35
-
<meta property="og:title" content={title} />
36
-
<meta property="og:description" content={graph.description} />
37
-
{graph.image && <meta property="og:image" content={graph.image} />}
38
-
39
-
<!-- twt card markup -->
40
-
<meta name="twitter:card" content="summary_large_image" />
41
-
<meta name="twitter:title" content={title} />
42
-
<meta name="twitter:description" content={graph.description} />
43
-
{graph.image && <meta name="twitter:image" content={graph.image} />}
35
+
{/* opengraph */}
36
+
<meta property="og:url" content={graph.url.toString()} />
37
+
<meta property="og:type" content={graph.type ?? "website"} />
38
+
<meta property="og:title" content={title} />
39
+
<meta property="og:description" content={graph.description} />
40
+
{graph.image && <meta property="og:image" content={graph.image} />}
44
41
42
+
{/* twt card markup */}
43
+
<meta name="twitter:card" content="summary_large_image" />
44
+
<meta name="twitter:title" content={title} />
45
+
<meta name="twitter:description" content={graph.description} />
46
+
{graph.image && <meta name="twitter:image" content={graph.image} />}
47
+
</Fragment>
48
+
)
49
+
}
50
+
45
51
<style is:global>
46
52
@layer reset {
47
53
:root {