astro-hashnode/package/src/layouts/Layout.astro

72 lines
2.1 KiB
Plaintext

---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
import { getPublication } from '../hn-gql'
import { SEO } from "astro-seo";
import { AstroFont } from "astro-font";
import type { AstroHashnodeLayoutProps } from '../proptypes/layouttypes'
import { ViewTransitions } from 'astro:transitions';
import config from "virtual:astro-hashnode/config";
const useTranstions = config.useViewTransitions;
const pubData = await getPublication();
const pubHeader = pubData.title;
const { pageTitle, hideFooter, hideHeader, ogImage } = Astro.props as AstroHashnodeLayoutProps;
---
<html lang="en">
<head>
<AstroFont
config={[
{
src: [],
name: "Poppins",
googleFontsURL: 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400;1,700&display=swap',
preload: true,
display: "swap",
selector: "body",
cssVariable: "astro-font",
fallback: "sans-serif",
},
]}
/>
<SEO
title={pageTitle ? pageTitle + " | " + pubHeader : pubHeader}
description={pubData.descriptionSEO}
charset='utf-8'
openGraph={{
basic: {
title: pageTitle ? pageTitle + " | " + pubHeader : pubHeader,
type: 'text',
image: ogImage || pubData.favicon,
},
optional: {
description: pubData.descriptionSEO,
siteName: pubHeader,
}
}}
extend={{
link: [
{ rel: 'icon', type: 'image/svg+xml', href: pubData.favicon },
],
meta: [
{ name: 'viewport', content: "width=device-width, initial-scale=1" },
{ name: 'generator', content: Astro.generator },
]
}}
/>
{useTranstions && <ViewTransitions />}
</head>
<body>
<div class="flex flex-col">
{!hideHeader && <Header />}
<div class="flex flex-wrap flex-col mt-0 mr-auto mb-0 ml-auto lg:w-[60%]">
<slot />
</div>
{!hideFooter && <Footer />}
</div>
</body>
</html>