src/layouts/BlogLayout.astro

---
import "@fontsource/inter/variable.css";
import "@fontsource/fira-code";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import TagsLine from "@components/TagsLine.astro";

let { pubDate } = Astro.props.content;
const { frontmatter } = Astro.props;
export interface Props {
  title?: string;
  description?: string;
  image?: string;
  ImageAlt?: string;
}

const thisDate = new Date(pubDate).toLocaleDateString("en", {
  dateStyle: "long",
});
pubDate = pubDate.split("T")[0];

const ogImageParams = "./banner.png";

const canonicalURL = new URL(Astro.url).href;
---

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>{frontmatter.title}</title>
    <link rel="sitemap" href="/sitemap-index.xml" />
    <link rel="canonical" href={canonicalURL} />
    <meta name="title" content={frontmatter.title} />
    <meta name="description" content={frontmatter.description} />
    <meta property="og:type" content="website" />
    <meta property="og:url" content={canonicalURL} />
    <meta property="og:title" content={frontmatter.title} />
    <meta property="og:description" content={frontmatter.description} />
    <meta property="og:image" content={ogImageParams} />
    <meta property="og:site_name" content="Angular Snippets" />
    <meta property="og:locale" content="en_US" />
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content={canonicalURL} />
    <meta name="twitter:site" content="@SantoshYadavDev" />
    <meta name="twitter:creator" content={frontmatter.contributedBy} />
    <meta property="twitter:title" content={frontmatter.title} />
    <meta property="twitter:description" content={frontmatter.description} />
    <meta property="twitter:image" content={ogImageParams} />
    <meta name="generator" content={Astro.generator} />
    <meta name="author" content="Lance Ross" />
    <script is:inline>
      // credits to satnaing on github
      const primaryColorScheme = "none";
      const darkModeMediaQuery = window.matchMedia(
        "(prefers-color-scheme: dark)"
      ).matches;
      const currentTheme = localStorage.getItem("theme");
      let theme;
      if (currentTheme) {
        theme = currentTheme === "dark" ? "dark" : "";
      } else {
        if (
          primaryColorScheme === "dark" ||
          (primaryColorScheme === "none" && darkModeMediaQuery)
        ) {
          theme = "dark";
        } else if (primaryColorScheme === "light") {
          theme = "";
        } else {
          theme = darkModeMediaQuery ? "dark" : "";
        }
      }
      document.documentElement.className = theme;
    </script>
    <script src="@scripts/main.js"></script>
  </head>
  <body
    class="font-inter dark:bg-zinc-900 dark:text-white selection:bg-sky-600/60 scrollbar-thin scrollbar-thumb-zinc-400 scrollbar-track-zinc-300 dark:scrollbar-thumb-zinc-600 dark:scrollbar-track-zinc-800"
  >
    <Header />
    <main class="mx-auto !max-w-screen-lg m-auto p-6 max-w-7xl">
      <section class="dark:text-slate-200 dark:bg-inherit px-3">
        <header class="mb-5">
          <h1 class="font-bold text-4xl mb-4 dark:text-white">
            {frontmatter.title}
          </h1>
          <nav
            class="flex flex-col sm:flex-row sm:space-x-3 text-base text-zinc-600 dark:text-zinc-400"
          >
            <time datetime={frontmatter.pubDate} class="mb-3 sm:mb-0">
              {thisDate}
            </time>
            <span class="mb-3 sm:mb-0">
              {frontmatter.contributedBy}
            </span>
          </nav>
          <div class="my-2">
            <TagsLine tags={frontmatter.tags} />
          </div>
        </header>
        <article
          class="mx-auto !max-w-screen-lg prose prose-zinc sm:prose-lg prose-img:mx-auto prose-a:dark:text-blue-400 prose-a:no-underline prose-pre:scrollbar-thin prose-pre:scrollbar-thumb-zinc-400 prose-pre:scrollbar-track-zinc-300 prose-pre:dark:scrollbar-thumb-zinc-500 prose-pre:dark:scrollbar-track-zinc-700 dark:bg-zinc-900 hover:prose-a:underline prose-a:text-blue-700 dark:prose-invert prose-a:underline-offset-2"
        >
          <slot />
        </article>
        <section class="flex flex-row justify-between my-16">
          <a href="/snippets" class="hover:underline">Back to snippets</a>
        </section>
        <Footer />
      </section>
    </main>
  </body>
</html>