Files
website-astro-stefanimhoff.de/src/layouts/BaseLayout.astro
2024-06-26 17:36:42 +02:00

196 lines
4.8 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
import '../styles/global.css';
import { SEO } from 'astro-seo';
import { site } from '../data/site';
import { isProduction } from '../utils';
import ThemeProvider from '../components/ThemeProvider.astro';
import PageHeader from '../components/PageHeader.astro';
import PageFooter from '../components/PageFooter.astro';
import SearchModal from '../components/SearchModal.astro';
import Scripts from '../components/Scripts.astro';
export interface Props {
backLink?: string;
cover?: string;
description?: string;
footer?: boolean;
header?: boolean;
nofollow?: boolean;
noindex?: boolean;
title: string;
}
const {
backLink,
description,
footer = true,
header = true,
nofollow,
noindex,
title,
cover = '/assets/images/branding/og/bonsai.jpg',
} = Astro.props;
const currentPath = new URL(Astro.request.url).pathname;
const fullTitle = `${title} · ${site.description}`;
const fullDescription = description || site.description;
const fullUrl = site.url + currentPath;
const fullImage = site.url + cover;
const schema = JSON.stringify({
'@context': 'https://schema.org/',
'@type': 'WebSite',
name: site.author,
url: site.url,
});
const pagefind = !noindex && { 'data-pagefind-body': '' };
const webManifest = isProduction && {
rel: 'manifest',
href: '/manifest.webmanifest',
};
---
<!doctype html>
<html lang="en" class="no-js box-border h-screen scroll-smooth text-[125%]">
<head>
<SEO
charset="UTF-8"
title={fullTitle}
description={fullDescription}
canonical={fullUrl}
nofollow={nofollow}
noindex={noindex}
openGraph={{
basic: {
image: fullImage,
title: fullTitle,
type: 'article',
url: fullUrl,
},
image: {
height: 675,
width: 1200,
},
optional: {
description: fullDescription,
},
}}
twitter={{
card: 'summary_large_image',
creator: site.twitter,
description: fullDescription,
image: fullImage,
site: site.twitter,
title: fullTitle,
}}
extend={{
link: [
{ rel: 'stylesheet', href: '/assets/styles/print.css', media: 'print' },
{ rel: 'sitemap', href: '/sitemap-index.xml' },
{ rel: 'icon', href: '/favicon.ico' },
{
rel: 'icon',
href: '/assets/images/branding/favicons/favicon.svg',
type: 'image/svg+xml',
},
{
rel: 'apple-touch-icon',
href: '/assets/images/branding/favicons/apple-touch-icon.png',
},
{ ...webManifest },
{
as: 'font',
crossorigin: '',
href: '/assets/fonts/secuela-regular-vf.woff2',
rel: 'preload',
type: 'font/woff2',
},
{
as: 'font',
crossorigin: '',
href: '/assets/fonts/secuela-italic-vf.woff2',
rel: 'preload',
type: 'font/woff2',
},
{
rel: 'alternate',
type: 'application/rss+xml',
title: 'Stefan Imhoff',
href: site.url + '/rss.xml',
},
{
rel: 'alternate',
type: 'application/rss+xml',
title: 'Stefan Imhoff (Haiku)',
href: site.url + '/rss-haiku.xml',
},
{
rel: 'alternate',
type: 'application/rss+xml',
title: 'Stefan Imhoff (Sketchnotes)',
href: site.url + '/rss-sketchnotes.xml',
},
{
rel: 'alternate',
type: 'application/rss+xml',
title: 'Stefan Imhoff (AI Art)',
href: site.url + '/rss-ai-art.xml',
},
],
meta: [
{
name: 'viewport',
content: 'width=device-width, initial-scale=1.0, viewport-fit=cover',
},
{ name: 'author', content: site.author },
{ name: 'generator', content: Astro.generator },
],
}}
/>
<script type="module">
document.documentElement.classList.remove('no-js');
document.documentElement.classList.add('js');
</script>
<ThemeProvider />
{
isProduction && (
<script
defer
src="https://umami.kogakure.cloud/script.js"
data-website-id="ca67348d-b662-4205-a2c1-f1d8e4c68adb"
/>
)
}
<Scripts />
</head>
<body
class="flex grow flex-col bg-shibui-100 font-sans font-normal leading-relaxed text-shibui-950 common-ligatures dark:bg-shibui-900 dark:text-shibui-200/[0.87]"
>
<div class="flex h-screen grow flex-col" id="swup">
{header && <PageHeader backLink={backLink} />}
<div class="page-content flex grow">
<main class="h-full w-full" {...pagefind}>
<slot />
</main>
</div>
{footer && <PageFooter />}
</div>
<SearchModal />
<script>
console.info(
'👋 I see youre interested in the source code of this site? You can find it here 👉 https://github.com/kogakure/website-astro-stefanimhoff.de'
);
</script>
<script type="application/ld+json" set:html={schema} />
<style is:global>
.astro-code {
@apply overflow-auto rounded-2 p-[1em] font-mono text-code mbe-10 mbs-0;
}
</style>
<slot name="rss-writer" />
</body>
</html>