go FAST

1 files changed, 8 insertions, 80 deletions

diff --git a/src/lib/components/Giscus.svelte b/src/lib/components/Giscus.svelte
index 3179764..4caf6e7 100644
--- a/src/lib/components/Giscus.svelte
+++ b/src/lib/components/Giscus.svelte
@@ -1,83 +1,11 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-
-  let container: HTMLDivElement | undefined;
-  let trigger: HTMLDivElement | undefined;
-  let observer: IntersectionObserver | undefined;
-  let isLoading = false;
-  let hasLoaded = false;
-
-  function loadComments() {
-    if (!container || isLoading || hasLoaded) return;
-
-    isLoading = true;
-
-    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;
-
-    script.addEventListener("load", () => {
-      isLoading = false;
-    });
-
-    script.addEventListener("error", () => {
-      isLoading = false;
-      hasLoaded = false;
-      script.remove();
-    });
-
-    container.appendChild(script);
-    hasLoaded = true;
-    observer?.disconnect();
-    observer = undefined;
-  }
-
-  onMount(() => {
-    if (!trigger || !("IntersectionObserver" in window)) return;
-
-    observer = new IntersectionObserver(
-      (entries) => {
-        if (entries.some((entry) => entry.isIntersecting)) {
-          loadComments();
-        }
-      },
-      { rootMargin: "300px 0px" },
-    );
-
-    observer.observe(trigger);
-
-    return () => {
-      observer?.disconnect();
-    };
-  });
-</script>
-
-<div class="giscus-container">
-  {#if !hasLoaded}
-    <button
-      class="comments-toggle"
-      on:click={loadComments}
-      disabled={isLoading}
-    >
-      {isLoading ? "Loading comments..." : "Show comments"}
-    </button>
-  {/if}
-
-  <div class="giscus-trigger" bind:this={trigger}></div>
-  <div bind:this={container}></div>
+<svelte:head>
+  <script src="/giscus-loader.js" defer></script>
+</svelte:head>
+
+<div class="giscus-container" data-giscus-root>
+  <button class="comments-toggle" type="button">Show comments</button>
+  <div class="giscus-trigger"></div>
+  <div class="giscus-slot"></div>
 </div>
 
 <style>