1---
2import "../styles/global.css";
3import NavButton from "../components/NavButton.astro";
4
5const { title } = Astro.props;
6
7const navButtons = [
8 { title: "home", route: "/" },
9 { title: "blog", route: "/blog" },
10 { title: "github", route: "https://github.com/bigspeedfpv" },
11];
12
13const isHome = Astro.url.pathname === "/";
14---
15
16<!doctype html>
17<html lang="en">
18 <head>
19 <meta charset="UTF-8" />
20 <meta name="viewport" content="width=device-width" />
21 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
22 <meta name="generator" content={Astro.generator} />
23 <title>{title ? `${title} - Andrew Brower` : "Andrew Brower"}</title>
24 <link rel="preload" href="/fonts/LibreBaskerville-Regular.woff2" as="font" type="font/woff2" crossorigin />
25 <link rel="preload" href="/fonts/LibreBaskerville-Bold.woff2" as="font" type="font/woff2" crossorigin />
26 <link rel="preload" href="/fonts/LibreBaskerville-Italic.woff2" as="font" type="font/woff2" crossorigin />
27 </head>
28 <body class="bg-sepia dark:bg-zinc-900 dark:text-zinc-100/80 flex justify-center font-display">
29 <div class="p-12 w-full max-w-[750px]">
30 <header class="my-8 h-8 flex flex-row justify-between items-center flex-wrap">
31 <!-- the home page has its own header! -->
32 <h1 class="font-bold text-2xl mr-4">{isHome ? "" : <a href="/">Andrew Brower</a>}</h1>
33 <div class="flex gap-4 flex-wrap">
34 {navButtons.map(({title, route}) => <NavButton href={route}, text={title} />)}
35 </div>
36 </header>
37 <main class="relative">
38 <slot />
39 </main>
40 </div>
41 </body>
42</html>