Files
mariosant.dev/src/layouts/Layout.astro
2022-11-11 13:48:15 +05:30

72 lines
1.8 KiB
Plaintext

---
import { SEO } from "astro-seo";
import Footer from "@components/footer.astro";
import Navbar from "@components/navbar/navbar.astro";
import "@fontsource/inter/variable.css";
export interface Props {
title: string;
}
// const { src } = await getImage({
// src: "../../assets/hero.png",
// width: 800,
// height: 742,
// format: "avif",
// });
// console.log(src);
const resolvedImageWithDomain = new URL("/opengraph.jpg", Astro.url).toString();
const { title } = Astro.props;
console.log(resolvedImageWithDomain, Astro.url);
const makeTitle = title
? title + " | " + "Astroship"
: "Astroship - Starter Template for Astro with TailwindCSS & Alpine.js";
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<!-- <link rel="preload" as="image" href={src} alt="Hero" /> -->
<SEO
title={makeTitle}
description="Astroship is a starter website template for Astro built with TailwindCSS."
twitter={{
creator: "@surjithctly",
site: "@web3templates",
card: "summary_large_image",
}}
openGraph={{
basic: {
type: "website",
title: `Astroship - Starter Template for Astro`,
image: resolvedImageWithDomain,
},
image: {
alt: "Astroship Homepage Screenshot",
},
}}
/>
</head>
<body>
<Navbar />
<slot />
<Footer />
<style is:global>
/* Improve Page speed */
/* https://css-tricks.com/almanac/properties/c/content-visibility/ */
img {
content-visibility: auto;
}
/* Avoid Alpine.js Hidden Element Flash */
[x-cloak] {
display: none;
}
</style>
</body>
</html>