<script lang="ts">
    import { onMount } from "svelte";

    let container: HTMLDivElement;

    onMount(() => {
        const script = document.createElement("script");
        script.src = "https://giscus.app/client.js";
        script.setAttribute("data-repo", "wenekar/giscus");
        script.setAttribute("data-repo-id", "R_kgDOREZgEQ");
        script.setAttribute("data-category", "Announcements");
        script.setAttribute("data-category-id", "DIC_kwDOREZgEc4C1nRY");
        script.setAttribute("data-mapping", "pathname");
        script.setAttribute("data-strict", "0");
        script.setAttribute("data-reactions-enabled", "1");
        script.setAttribute("data-emit-metadata", "0");
        script.setAttribute("data-input-position", "top");
        script.setAttribute("data-theme", "preferred_color_scheme");
        script.setAttribute("data-lang", "en");
        script.setAttribute("data-loading", "lazy");
        script.crossOrigin = "anonymous";
        script.async = true;
        container.appendChild(script);
    });
</script>

<div class="giscus-container" bind:this={container}></div>
