---
import { config } from "../../config";
interface Props {
  title: string;
  description: string;
  image?: string;
}

let canonicalURL: URL | undefined = undefined;
try {
  canonicalURL = new URL(Astro.url.pathname, Astro.site);
} catch (error) {
  // console.error(error);
}

const { title, description, image = "main.png" } = Astro.props;
---

<!-- Global Metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

{config.SITE_FAVICON ? (
  <link
    rel="icon"
    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>${config.SITE_FAVICON}</text></svg>`
  />
) : null}

<meta name="generator" content={Astro.generator} />

<!-- Canonical URL -->
<link rel="canonical" href={canonicalURL} />

<!-- Primary Meta Tags -->
<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content={Astro.url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta
  property="og:image"
  content={new URL(config.BASE + "/open-graph/" + image, Astro.url)}
/>

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={Astro.url} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta
  property="twitter:image"
  content={new URL(config.BASE + "/open-graph/" + image, Astro.url)}
/>