---
import GlobalStyles from "@components/GlobalStyles.astro";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import ImageWrapper from "@components/misc/ImageWrapper.astro";
import { profileConfig, siteConfig } from "@/config";
import ConfigCarrier from "@components/ConfigCarrier.astro";
import { pathsEqual } from "@utils/url-utils";
import {
AUTO_MODE,
DARK_MODE,
DEFAULT_THEME,
LIGHT_MODE,
} from "../constants/constants";
import { defaultFavicons } from "../constants/icon";
import type { Favicon } from "../types/config";
import { hslToHex } from "../utils/color-utils";
import { url } from "../utils/url-utils";
interface Props {
title: string;
banner: string;
description?: string;
cover?: string;
}
let { title, banner, description, cover } = Astro.props;
const isHomePage = pathsEqual(Astro.url.pathname, "/");
const testPathName = Astro.url.pathname;
const anim = {
old: {
name: "fadeIn",
duration: "4s",
easing: "linear",
fillMode: "forwards",
mixBlendMode: "normal",
},
new: {
name: "fadeOut",
duration: "4s",
easing: "linear",
fillMode: "backwards",
mixBlendMode: "normal",
},
};
const myFade = {
forwards: anim,
backwards: anim,
};
// defines global css variables
// why doing this in Layout instead of GlobalStyles: https://github.com/withastro/astro/issues/6728#issuecomment-1502203757
const configHue = siteConfig.themeColor.hue;
if (!banner || typeof banner !== "string" || banner.trim() === "") {
banner = cover ?? siteConfig.banner.src;
}
// TODO don't use post cover as banner for now
// banner = siteConfig.banner.src;
const enableBanner = siteConfig.banner.enable;
let pageTitle: string;
if (title) {
pageTitle = `${title} - ${siteConfig.title}`;
} else {
pageTitle = `${siteConfig.title} - ${siteConfig.subtitle}`;
}
const favicons: Favicon[] =
siteConfig.favicon.length > 0 ? siteConfig.favicon : defaultFavicons;
const siteLang = siteConfig.lang.replace("_", "-");
---
{pageTitle}
{favicons.map(favicon => (
))}