---
import { AstroFont } from "astro-font";
import theme from "@/config/theme.json";
const { head } = Astro.locals.starlightRoute;

// Get base path from config
const base = import.meta.env.BASE_URL;

// font families
const pf = theme.fonts.font_family.primary;
// @ts-ignore
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, "");
}
// @ts-ignore
if (theme.fonts.font_family.secondary) {
    // @ts-ignore
    fontSecondary = theme.fonts.font_family.secondary
        .replace(/\+/g, " ")
        .replace(/:[ital,]*[ital@]*[wght@]*[0-9,;.]+/gi, "");
}
---

{
    head.map(({ tag: Tag, attrs, content }) => {
        // Skip default favicon link
        if (Tag === "link" && attrs.rel === "shortcut icon") {
            return null;
        }
        return <Tag {...attrs} set:html={content} />;
    })
}

<!-- Custom favicon -->
<link rel="shortcut icon" href={`${base}/favicon.svg`} type="image/svg+xml" />

<!-- 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`,
        },
    ]}
/>
