---
import { AstroFont } from 'astro-font';
import { ViewTransitions } from 'astro:transitions';
import { SiteTitle, SiteDescription } from '../consts';
import spaceghost from '../assets/spaceghost.png'

const canonicalURL = new URL(Astro.url.pathname, Astro.site)

const { title = SiteTitle, name = SiteTitle, description = SiteDescription } = Astro.props;
---

<!-- Page Metadata -->
<link rel="canonical" href={canonicalURL} />
<link rel="icon" type="image/svg" href={spaceghost.src} />
<meta name="description" content={description} />
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<!-- OpenGraph Tags -->
<meta property="og:title" content={title} />
<meta property="og:url" content={canonicalURL} />
<meta property="og:locale" content='en' />
<meta property="og:description" content={description} />
<meta property="og:site_name" content={name} />
<meta property="og:image" content={Astro.url+'og.png'} />

<!-- Twitter Tags -->
<meta name="twitter:card" content='summary_large_image' />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={Astro.url+'og.png'} />
<meta name="twitter:image:alt" content="og_alt" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<AstroFont
  config={[
	{
	  src: [],
	  name: "Lato",
	  preload: true,
	  display: "swap",
	  selector: "body",
	  fallback: "sans-serif",
	  googleFontsURL: 'https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap',
	},
	{
	  src: [],
	  preload: false,
	  display: "swap",
	  fallback: "sans-serif",
	  name: "Source Code Pro",
	  cssVariable: "font-source-code",
	  googleFontsURL: 'https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap',
	},
  ]}
/>

<ViewTransitions />
