<!-- style="color:#aa55ff"-->
<h4 class="page__comments-title">Leave a comment</h4>
<div class="giscus">
<script>
  function getTheme() {
    return document.body.classList.contains("dark")
      ? "catppuccin_macchiato"
      : "catppuccin_latte";
  }

  let giscusAttributes = {
    src: "https://giscus.app/client.js",
    "data-repo": "sofijacom/sofijacom.github.io",
    "data-repo-id": "R_kgDON7iIDw",
    "data-category": "General",
    "data-category-id": "DIC_kwDON7iID84Cq1Zx",
    "data-mapping": "title",
    "data-strict": "0",
    "data-reactions-enabled": "1",
    "data-reactions-layout": "compact",
    "data-emit-metadata": "0",
    "data-input-position": "bottom",
    "data-theme": getTheme(),
    "data-lang": "en",
    "data-loading": "lazy",
    crossorigin: "anonymous",
    async: "",
  };

  let giscusScript = document.createElement("script");
  Object.entries(giscusAttributes).forEach(([key, value]) =>
    giscusScript.setAttribute(key, value),
  );
  document.querySelector("main").appendChild(giscusScript);

  function changeGiscusTheme() {
    const iframe = document.querySelector("iframe.giscus-frame");

    const setGisSrc = (theme) => {
      if (!iframe) {
        return;
      }

      const iframeSrc = iframe.src;
      const iframeUrl = new URL(iframeSrc);
      const iframeSearchParams = iframeUrl.searchParams;
      iframeSearchParams.set("theme", theme);

      iframe.src = iframeUrl.toString();
    };

    const sendMessage = (message) => {
      if (iframe?.contentWindow) {
        iframe.contentWindow.postMessage(
          { giscus: message },
          "https://giscus.app",
        );
      }
    };

    // Giscus doesn't accept messages if it's not loaded
    if (iframe?.classList.contains("giscus-frame--loading")) {
      setGisSrc(getTheme());
    } else {
      sendMessage({ setConfig: { theme: getTheme() } });
    }
  }

  const themeToggle = document.getElementById("theme-toggle");
  
  if (typeof themeToggle !== "undefined") {
    themeToggle.addEventListener("click", () =>
      // Add timeout to wait for actual switch before changing theme.
      setTimeout(changeGiscusTheme, 100),
    );
  }
</script>
  
<!--
<style>
.giscus, .giscus-frame {
    width: 100%;
    min-height: 150px;
    padding-right: 20px;
    padding-left: 20px;
}

.giscus-frame {
    border: none;
    color-scheme: light dark;    
}
        
.giscus-frame--loading {
    opacity: 0;
}
</style>
-->
  
<!-- Themes
light, dark, catppuccin_latte, catppuccin_macchiato, gruvbox_light, transparent_dark, preferred_color_scheme, cobalt, purple_dark
-->
