---
import "@/styles/reset.css";
import "@/styles/global.css";

import smartypants from "smartypants";
import Footer from "@/components/Footer.astro";
import JsonLd from "@/components/JsonLd.astro";
import Nav from "@/components/Nav.astro";

const siteName = "Adrian Altner";
const siteUrl = "https://adrian-altner.com";

export interface Props {
  title: string;
  description: string;
  image?:
    | {
        src: string;
        alt: string;
      }
    | undefined;
  navDesktopHidden?: boolean;
  navHidden?: boolean;
  footerHidden?: boolean;
  footerDark?: boolean;
}

const {
  title,
  description,
  image,
  navDesktopHidden,
  navHidden,
  footerHidden,
  footerDark,
} = Astro.props;

function smartypantsText(str: string): string {
  return smartypants(str, 1).replace(/&#(\d+);/g, (_, code) =>
    String.fromCharCode(Number(code)),
  );
}

const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const pageTitle = Astro.url.pathname === "/" ? title : `${title} · ${siteName}`;
const isHomepage = Astro.url.pathname === "/";

const websiteSchema = {
  "@context": "https://schema.org",
  "@type": "WebSite",
  name: siteName,
  url: siteUrl,
};

const personSchema = {
  "@context": "https://schema.org",
  "@type": "Person",
  name: siteName,
  url: siteUrl,
  jobTitle: "Photographer & Software Developer",
  sameAs: [
    "https://www.instagram.com/adrian.altner/",
    "https://www.linkedin.com/in/adrian-altner/",
    "https://github.com/adrian-altner",
  ],
};
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="generator" content={Astro.generator} />
    <meta name="theme-color" content="#111111" />
    <link rel="canonical" href={canonicalURL} />
    <link rel="me" href="https://mastodon.social/@altner" />
    <link rel="me" href="https://github.com/adrian-altner" />
    <link rel="me" href="https://www.instagram.com/adrian.altner/" />
    <link rel="me" href="https://www.linkedin.com/in/adrian-altner/" />
    <meta name="fediverse:creator" content="@altner@mastodon.social" />
    <link rel="webmention" href="https://webmention.io/adrian-altner.com/webmention" />
    <link rel="pingback" href="https://webmention.io/adrian-altner.com/xmlrpc" />
    <link rel="alternate" type="application/rss+xml" title="Adrian Altner" href="/rss.xml" />
    <link rel="alternate" type="application/rss+xml" title="Adrian Altner — Blog" href="/rss/blog.xml" />
    <link rel="alternate" type="application/rss+xml" title="Adrian Altner — Notes" href="/rss/notes.xml" />
    <link rel="alternate" type="application/rss+xml" title="Adrian Altner — Links" href="/rss/links.xml" />
    <link rel="alternate" type="application/rss+xml" title="Adrian Altner — Photos" href="/rss/photos.xml" />
    <link rel="preload" href="/fonts/Exo2-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin />
    <link rel="preload" href="/fonts/Exo2-Italic-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin />
    <link rel="preload" href="/fonts/JetBrainsMono-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin />
    <link rel="preload" href="/fonts/JetBrainsMono-Italic-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
    <title set:html={smartypants(pageTitle, 1)} />
    <meta name="description" content={smartypantsText(description)} />
    <meta property="og:title" content={smartypantsText(title)} />
    <meta property="og:type" content="website" />
    <meta property="og:description" content={smartypantsText(description)} />
    <meta property="og:url" content={canonicalURL} />
    <meta property="og:locale" content="en_US" />
    <meta property="og:site_name" content={siteName} />
    {
      image ? (
        <>
          <meta property="og:image" content={image.src} />
          <meta property="og:image:alt" content={image.alt} />
          <meta name="twitter:card" content="summary_large_image" />
          <meta name="twitter:image" content={image.src} />
        </>
      ) : (
        <meta name="twitter:card" content="summary" />
      )
    }
    <JsonLd schema={websiteSchema} />
    {isHomepage && <JsonLd schema={personSchema} />}
    <slot name="head" />
  </head>
  <body>
    {navHidden
      ? <Nav hidden={true} desktopHidden={true} />
      : navDesktopHidden
        ? <Nav desktopHidden={true} />
        : <Nav title={siteName} />
    }
    <slot />
    {!footerHidden && <Footer dark={footerDark} />}
  </body>
</html>
