---
import TwSizeIndicator from "@/components/TwSizeIndicator.astro";
import config from "@/config/config.json";
import theme from "@/config/theme.json";
import { plainify } from "@/lib/utils/textConverter";
import Footer from "@/partials/Footer.astro";
import Header from "@/partials/Header.astro";
import "@/styles/main.scss";
import { AstroFont } from "astro-font";
import { ViewTransitions } from "astro:transitions";

// font families
const pf = theme.fonts.font_family.primary;
const sf = theme.fonts.font_family.secondary;

let fontPrimary, fontSecondary;
if (theme.fonts.font_family.primary) {
  fontPrimary = theme.fonts.font_family.primary
    .replace(/\+/g, " ")
    .replace(/:[ital,]*[ital@]*[wght@]*[0-9,;]+/gi, "");
}
if (theme.fonts.font_family.secondary) {
  fontSecondary = theme.fonts.font_family.secondary
    .replace(/\+/g, " ")
    .replace(/:[ital,]*[ital@]*[wght@]*[0-9,;]+/gi, "");
}

// types for frontmatters
export interface Props {
  title?: string;
  meta_title?: string;
  description?: string;
  image?: string;
  noindex?: boolean;
  canonical?: string;
}

// distructure frontmatters
const { title, meta_title, description, image, noindex, canonical } =
  Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <!-- favicon -->
    <link rel="shortcut icon" href={config.site.favicon} />
    <!-- theme meta -->
    <meta name="theme-name" content="bookworm-light-astro" />
    <meta name="msapplication-TileColor" content="#000000" />
    <meta
      name="theme-color"
      media="(prefers-color-scheme: light)"
      content="#fff"
    />
    <meta
      name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="#000"
    />
    <meta name="generator" content={Astro.generator} />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- google font css -->
    <AstroFont
      config={[
        {
          src: [],
          preload: false,
          display: "swap",
          name: fontPrimary!,
          fallback: "sans-serif",
          cssVariable: "font-primary",
          googleFontsURL: `https://fonts.googleapis.com/css2?family=${pf}&display=swap`,
        },
        {
          src: [],
          preload: false,
          display: "swap",
          name: fontSecondary!,
          fallback: "sans-serif",
          cssVariable: "font-secondary",
          googleFontsURL: `https://fonts.googleapis.com/css2?family=${sf}&display=swap`,
        },
      ]}
    />

    <!-- responsive meta -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=5"
    />

    <!-- title -->
    <title>
      {plainify(meta_title ? meta_title : title ? title : config.site.title)}
    </title>

    <!-- canonical url -->
    {canonical && <link rel="canonical" href={canonical} item-prop="url" />}

    <!-- noindex robots -->
    {noindex && <meta name="robots" content="noindex,nofollow" />}

    <!-- meta-description -->
    <meta
      name="description"
      content={plainify(
        description ? description : config.metadata.meta_description,
      )}
    />

    <ViewTransitions />

    <!-- author from config.json -->
    <meta name="author" content={config.metadata.meta_author} />

    <!-- og-title -->
    <meta
      property="og:title"
      content={plainify(
        meta_title ? meta_title : title ? title : config.site.title,
      )}
    />

    <!-- og-description -->
    <meta
      property="og:description"
      content={plainify(
        description ? description : config.metadata.meta_description,
      )}
    />
    <meta property="og:type" content="website" />
    <meta
      property="og:url"
      content={`${config.site.base_url}/${Astro.url.pathname.replace("/", "")}`}
    />

    <!-- twitter-title -->
    <meta
      name="twitter:title"
      content={plainify(
        meta_title ? meta_title : title ? title : config.site.title,
      )}
    />

    <!-- twitter-description -->
    <meta
      name="twitter:description"
      content={plainify(
        description ? description : config.metadata.meta_description,
      )}
    />

    <!-- og-image -->
    <meta
      property="og:image"
      content={`${config.site.base_url}${
        image ? image : config.metadata.meta_image
      }`}
    />

    <!-- twitter-image -->
    <meta
      name="twitter:image"
      content={`${config.site.base_url}${
        image ? image : config.metadata.meta_image
      }`}
    />
    <meta name="twitter:card" content="summary_large_image" />
  </head>
  <body>
    <TwSizeIndicator />
    <Header />
    <main id="main-content" class="min-h-[60vh]">
      <slot />
    </main>
    <Footer />
  </body>
</html>
