---
import '../styles/global.scss';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';

import { ViewTransitions } from 'astro:transitions';

interface Props {
	title?: string;
}

const { title } = Astro.props;
---

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>{title || 'LBRY Tech'}</title>

		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="author" content="${config.meta.title}"/>
		<meta name="description" content="${description}"/>
		<meta name="title" content="${config.meta.title}"/>
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>

		<!-- / Open Graph / -->
		<meta property="og:title" content={title}/>
		<meta property="og:description" content="${description}"/>
		<!-- <meta property="og:image" content="${newMetadata && newMetadata["og:image"] ? newMetadata["og:image"] : "/assets/media/images/og-image.png"}"/> -->
		<meta property="og:image:height" content="${newMetadata && newMetadata["og:image:height"] ? newMetadata["og:image:height"] : 1125}"/>
		<meta property="og:image:width" content="${newMetadata && newMetadata["og:image:width"] ? newMetadata["og:image:width"] : 2000}"/>
		<meta property="og:locale" content="en_US"/>
		<meta property="og:site_name" content="LBRY.tech"/>
		<meta property="og:type" content="website"/>
		<meta property="og:url" content="https://lbry.tech${state.href}"/>

		<!-- / Social/App Stuff / -->
		<meta name="apple-mobile-web-app-title" content="${config.meta.title}"/>
		<meta name="application-name" content="${config.meta.title}"/>
		<meta name="msapplication-TileColor" content="${config.meta.color}"/>
		<meta name="msapplication-TileImage" content="/assets/apple-touch-icon.png"/>
		<meta name="theme-color" content="${config.meta.color}"/>

		<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png"/>
		<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml"/>
		<link rel="mask-icon" href="/assets/favicon.svg" color="${config.meta.color}"/>
		<link rel="shortcut icon" href="/assets/favicon.ico"/>
		<ViewTransitions />
	</head>
	<body>
		<Header/>
		<main><slot /></main>
		<Footer/>
	</body>
</html>
<style is:global>
</style>
