blog.z0x.ca/src/components/Head.astro

---
import "../styles/global.css";
import "../styles/callout.css";
import "@fontsource-variable/nunito";

interface Props {
  title: string;
  description: string;
  image?: string;
}

const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
---

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />

<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />

<meta property="og:type" content="website" />
<meta property="og:url" content={Astro.url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(image, Astro.url)} />

<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={Astro.url} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={new URL(image, Astro.url)} />

<script is:inline>
  function init() {
    preloadTheme();
    onScroll();
    updateThemeButtons();
    addCopyCodeButtons();

    const backToTop = document.getElementById("back-to-top");
    backToTop?.addEventListener("click", (event) => scrollToTop(event));

    const backToPrev = document.getElementById("back-to-prev");
    backToPrev?.addEventListener("click", () => window.history.back());

    const lightThemeButton = document.getElementById("light-theme-button");
    lightThemeButton?.addEventListener("click", () => {
      localStorage.setItem("theme", "light");
      toggleTheme(false);
      updateThemeButtons();
    });

    const darkThemeButton = document.getElementById("dark-theme-button");
    darkThemeButton?.addEventListener("click", () => {
      localStorage.setItem("theme", "dark");
      toggleTheme(true);
      updateThemeButtons();
    });

    const systemThemeButton = document.getElementById("system-theme-button");
    systemThemeButton?.addEventListener("click", () => {
      localStorage.setItem("theme", "system");
      toggleTheme(window.matchMedia("(prefers-color-scheme: dark)").matches);
      updateThemeButtons();
    });

    window
      .matchMedia("(prefers-color-scheme: dark)")
      .addEventListener("change", (event) => {
        if (localStorage.theme === "system") {
          toggleTheme(event.matches);
        }
      });

    document.addEventListener("scroll", onScroll);
  }

  function updateThemeButtons() {
    const theme = localStorage.getItem("theme");
    const lightThemeButton = document.getElementById("light-theme-button");
    const darkThemeButton = document.getElementById("dark-theme-button");
    const systemThemeButton = document.getElementById("system-theme-button");

    function removeActiveButtonTheme(button) {
      button?.classList.remove("bg-black/5");
      button?.classList.remove("dark:bg-white/5");
    }

    function addActiveButtonTheme(button) {
      button?.classList.add("bg-black/5");
      button?.classList.add("dark:bg-white/5");
    }

    removeActiveButtonTheme(lightThemeButton);
    removeActiveButtonTheme(darkThemeButton);
    removeActiveButtonTheme(systemThemeButton);

    if (theme === "light") {
      addActiveButtonTheme(lightThemeButton);
    } else if (theme === "dark") {
      addActiveButtonTheme(darkThemeButton);
    } else {
      addActiveButtonTheme(systemThemeButton);
    }
  }

  function onScroll() {
    if (window.scrollY > 0) {
      document.documentElement.classList.add("scrolled");
    } else {
      document.documentElement.classList.remove("scrolled");
    }
  }

  function scrollToTop(event) {
    event.preventDefault();
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  }

  function toggleTheme(dark) {
    const css = document.createElement("style");

    css.appendChild(
      document.createTextNode(
        `* {
             -webkit-transition: none !important;
             -moz-transition: none !important;
             -o-transition: none !important;
             -ms-transition: none !important;
             transition: none !important;
          }
        `,
      ),
    );

    document.head.appendChild(css);

    if (dark) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }

    window.getComputedStyle(css).opacity;
    document.head.removeChild(css);
  }

  function preloadTheme() {
    const userTheme = localStorage.theme;

    if (userTheme === "light" || userTheme === "dark") {
      toggleTheme(userTheme === "dark");
    } else {
      toggleTheme(window.matchMedia("(prefers-color-scheme: dark)").matches);
    }
  }

  function addCopyCodeButtons() {
    let copyButtonLabel = "📋";
    let codeBlocks = Array.from(document.querySelectorAll("pre"));

    async function copyCode(codeBlock, copyButton) {
      const codeText = codeBlock.innerText;
      const buttonText = copyButton.innerText;
      const textToCopy = codeText.replace(buttonText, "");

      await navigator.clipboard.writeText(textToCopy);
      copyButton.innerText = "✅";

      setTimeout(() => {
        copyButton.innerText = copyButtonLabel;
      }, 2000);
    }

    for (let codeBlock of codeBlocks) {
      const wrapper = document.createElement("div");
      wrapper.style.position = "relative";

      const copyButton = document.createElement("button");
      copyButton.innerText = copyButtonLabel;
      copyButton.classList = "copy-code";

      codeBlock.setAttribute("tabindex", "0");
      codeBlock.appendChild(copyButton);

      codeBlock.parentNode.insertBefore(wrapper, codeBlock);
      wrapper.appendChild(codeBlock);

      copyButton?.addEventListener("click", async () => {
        await copyCode(codeBlock, copyButton);
      });
    }
  }

  document.addEventListener("DOMContentLoaded", () => init());
  document.addEventListener("astro:after-swap", () => init());
  preloadTheme();
</script>