<style>
.giscus {
margin-top: 6rem;
}
</style>
<script
src="{% src='https://giscus.app/client.js' %}"
data-repo="{% repo %}"
data-repo-id="{% repo-id %}"
data-category="{% category %}"
data-category-id="{% category-id %}"
data-mapping="title"
data-strict="0"
data-reactions-enabled="{% reactions-enabled=1 %}"
data-emit-metadata="0"
data-input-position="bottom"
data-lang="{% lang=en %}"
data-loading="{% loading=lazy %}"
crossorigin="anonymous"
data-theme="{% theme=book %}"
async
></script>
<script>
(() => {
const giscusScript = document.querySelector("script[data-repo][data-repo-id]");
if (giscusScript?.getAttribute("data-theme") !== "book") return;
const mapTheme = (theme) => (["light", "rust"].includes(theme) ? "light" : "dark");
const bookTheme = localStorage.getItem("mdbook-theme") || html.getAttribute("class");
giscusScript.setAttribute("data-theme", mapTheme(bookTheme));
document.querySelectorAll("button[role='menuitem'].theme").forEach((btn) => {
btn.addEventListener("click", (event) => {
const theme = mapTheme(event.target.id);
const iframe = document.querySelector("iframe.giscus-frame");
if (iframe) iframe.contentWindow.postMessage({ giscus: { setConfig: { theme } } }, "*");
});
});
})();
</script>