Add Coral comments and Rybbit analytics

sites/vibes/src/components/CoralComments.astro

@@ -0,0 +1,46 @@
+---
+interface Props {
+  storyID: string;
+  storyURL: string;
+}
+
+const { storyID, storyURL } = Astro.props;
+const coralRoot = "https://coral.neeldhara.cloud";
+---
+
+<section class="container max-w-3xl py-10 md:py-12" aria-label="Comments">
+  <div id="coral_thread" data-story-id={storyID} data-story-url={storyURL}></div>
+</section>
+
+<script is:inline define:vars={{ coralRoot, storyID, storyURL }}>
+  (function () {
+    var d = document;
+
+    function renderCoral() {
+      if (!window.Coral || !d.getElementById("coral_thread")) return;
+
+      window.Coral.createStreamEmbed({
+        id: "coral_thread",
+        autoRender: true,
+        rootURL: coralRoot,
+        storyID: storyID,
+        storyURL: storyURL,
+      });
+    }
+
+    var existingScript = d.querySelector("script[data-coral-embed]");
+    if (existingScript) {
+      existingScript.addEventListener("load", renderCoral, { once: true });
+      renderCoral();
+      return;
+    }
+
+    var s = d.createElement("script");
+    s.src = coralRoot + "/assets/js/embed.js";
+    s.async = false;
+    s.defer = true;
+    s.dataset.coralEmbed = "true";
+    s.onload = renderCoral;
+    (d.head || d.body).appendChild(s);
+  })();
+</script>