mirror of
https://github.com/timmypidashev/web.git
synced 2026-04-14 02:53:51 +00:00
75 lines
2.6 KiB
Plaintext
75 lines
2.6 KiB
Plaintext
---
|
|
import "@/style/globals.css";
|
|
import { ClientRouter } from "astro:transitions";
|
|
|
|
import Header from "@/components/header";
|
|
import Footer from "@/components/footer";
|
|
import Background from "@/components/background";
|
|
import ThemeSwitcher from "@/components/theme-switcher";
|
|
import AnimationSwitcher from "@/components/animation-switcher";
|
|
import { THEME_LOADER_SCRIPT, THEME_NAV_SCRIPT } from "@/lib/themes/loader";
|
|
import { ANIMATION_LOADER_SCRIPT, ANIMATION_NAV_SCRIPT } from "@/lib/animations/loader";
|
|
|
|
export interface Props {
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
const { title, description } = Astro.props;
|
|
const ogImage = "https://timmypidashev.dev/og-image.jpg";
|
|
---
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<title>{title}</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<meta property="og:image" content={ogImage} />
|
|
<meta property="og:image:width" content="1200" />
|
|
<meta property="og:image:height" content="630" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:image" content={ogImage} />
|
|
<meta name="twitter:description" content={description} />
|
|
<meta name="description" content={description} />
|
|
<meta property="og:description" content={description} />
|
|
<link rel="icon" type="image/jpeg" href="/me.jpeg" />
|
|
<ClientRouter
|
|
defaultTransition={false}
|
|
handleFocus={false}
|
|
/>
|
|
<style>
|
|
::view-transition-new(:root) {
|
|
animation: none;
|
|
}
|
|
::view-transition-old(:root) {
|
|
animation: 90ms ease-out both fade-out;
|
|
}
|
|
@keyframes fade-out {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
</style>
|
|
<script is:inline set:html={THEME_LOADER_SCRIPT} />
|
|
<script is:inline set:html={ANIMATION_LOADER_SCRIPT} />
|
|
</head>
|
|
<body class="bg-background text-foreground min-h-screen flex flex-col">
|
|
<Header client:load />
|
|
<main class="flex-1 flex flex-col">
|
|
<div class="max-w-5xl mx-auto pt-12 px-4 py-8 flex-1">
|
|
<Background layout="content" position="right" client:only="react" transition:persist />
|
|
<div>
|
|
<slot />
|
|
</div>
|
|
<Background layout="content" position="left" client:only="react" transition:persist />
|
|
</div>
|
|
</main>
|
|
<div class="mt-auto">
|
|
<Footer client:load transition:persist />
|
|
</div>
|
|
<ThemeSwitcher client:only="react" transition:persist />
|
|
<AnimationSwitcher client:only="react" transition:persist />
|
|
<script is:inline set:html={`window.scrollTo(0,0);` + THEME_NAV_SCRIPT} />
|
|
<script is:inline set:html={ANIMATION_NAV_SCRIPT} />
|
|
</body>
|
|
</html>
|