Replace Hyvor with Coral on Micro

public/coral-transparent.css

@@ -0,0 +1,24 @@
+#coral {
+  --palette-background-body: transparent;
+}
+
+#coral,
+#coral [class*="App-root"],
+#coral [class*="StreamContainer-root"] {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+#coral nav[aria-label="Main Tablist"]:not(:has([role="tab"] ~ [role="tab"])):not(:has(button ~ button)):not(:has(a ~ a)):not(:has(li ~ li)) {
+  display: none !important;
+}
+
+#coral:has(nav[aria-label="Main Tablist"]:not(:has([role="tab"] ~ [role="tab"])):not(:has(button ~ button)):not(:has(a ~ a)):not(:has(li ~ li))) [class*="App-tabContent"] {
+  padding-top: 0 !important;
+}
+
+#coral [class*="FloatingNotificationButton-root"],
+#coral [class*="MobileNotificationButton-"],
+#coral [class*="TabBar-notificationsTab"] {
+  display: none !important;
+}

src/components/CoralComments.astro

@@ -0,0 +1,58 @@
+---
+interface Props {
+  storyID: string;
+  storyURL: string;
+}
+
+const { storyID, storyURL } = Astro.props;
+const coralRoot = "https://coral.neeldhara.cloud";
+---
+
+<section class="coral-comments" aria-label="Comments">
+  <div id="coral_thread" data-story-id={storyID} data-story-url={storyURL}></div>
+</section>
+
+<style>
+  .coral-comments {
+    background: transparent;
+  }
+
+  .coral-comments :global(iframe) {
+    background: transparent !important;
+  }
+</style>
+
+<script is:inline data-astro-rerun 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,
+        customCSSURL: new URL("/coral-transparent.css", window.location.href).toString(),
+        containerClassName: "coral-transparent-stream",
+      });
+    }
+
+    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>

src/components/Head.astro

@@ -84,7 +84,6 @@ const { title, description, image = "/astro-micro.jpg" } = Astro.props;
     animate();
     updateThemeButtons();
     addCopyCodeButtons();
-    setHyvorTheme();
 
     const backToTop = document.getElementById("back-to-top");
     backToTop?.addEventListener("click", (event) => scrollToTop(event));
@@ -206,7 +205,6 @@ const { title, description, image = "/astro-micro.jpg" } = Astro.props;
     window.getComputedStyle(css).opacity;
     document.head.removeChild(css);
 
-    setHyvorTheme();
   }
 
   function preloadTheme() {
@@ -256,13 +254,6 @@ const { title, description, image = "/astro-micro.jpg" } = Astro.props;
     }
   }
 
-  const setHyvorTheme = () => {
-    const isDark = document.documentElement.classList.contains("dark");
-    if (window.hyvorTalk) {
-      window.hyvorTalk.changeTheme(isDark ? "dark" : "light");
-    }
-  };
-
   document.addEventListener("DOMContentLoaded", () => init());
   document.addEventListener("astro:after-swap", () => init());
   preloadTheme();

src/components/Hyvor.astro

@@ -1,70 +0,0 @@
----
-// Hyvor Talk comments component
-interface Props {
-  pageId?: string;
-}
-
-const { pageId } = Astro.props;
-const computedPageId = pageId ?? Astro.url.pathname;
----
-
-<div class="hyvor-comments">
-  <script is:inline async src="https://talk.hyvor.com/embed/embed.js" type="module"></script>
-  <hyvor-talk-comments
-    website-id="15040"
-    page-id={computedPageId}
-    reactions-text=""
-    reactions-enabled="true"
-  ></hyvor-talk-comments>
-</div>
-
-<script is:inline>
-  // Prevent hydration errors by ensuring Hyvor only initializes once
-  if (typeof window !== 'undefined') {
-    window.HYVOR_TALK_CONFIG = window.HYVOR_TALK_CONFIG || {};
-  }
-
-  // Hide the "What's your reaction?" text after Hyvor loads
-  function hideReactionText() {
-    document.querySelectorAll('.reactions-title').forEach(el => {
-      el.style.display = 'none';
-    });
-  }
-
-  // Run multiple times after Hyvor loads
-  [500, 1000, 2000, 3000].forEach(delay => {
-    setTimeout(hideReactionText, delay);
-  });
-
-  // Reinitialize Hyvor after View Transitions navigation (only add listener once)
-  if (!window._hyvorPageLoadListenerAdded) {
-    window._hyvorPageLoadListenerAdded = true;
-    document.addEventListener('astro:page-load', function reloadHyvor() {
-      const commentsEl = document.querySelector('hyvor-talk-comments');
-      if (commentsEl && window.hyvorTalk && typeof window.hyvorTalk.reload === 'function') {
-        window.hyvorTalk.reload();
-      }
-    });
-  }
-</script>
-
-<style is:inline>
-  /* Hide the "What's your reaction?" text but keep the emojis */
-  .reactions-title,
-  .hyvor-comments .reactions-title,
-  .hyvor-comments .hyvor-talk-reactions-heading,
-  .hyvor-comments [class*="reactions-heading"],
-  .hyvor-comments .ht-reactions-title,
-  .hyvor-comments .ht-rating-heading,
-  .hyvor-comments hyvor-talk-reactions [slot="heading"],
-  .hyvor-comments .ht-reactions-header,
-  .hyvor-comments .ht-reactions-section-title,
-  .ht-reactions-title,
-  .ht-rating-heading,
-  [class*="ht-reactions"] > [class*="title"],
-  [class*="ht-reactions"] > [class*="heading"],
-  .hyvor-talk-reactions-header,
-  .hyvor-talk-reactions-title {
-    display: none !important;
-  }
-</style>

src/pages/blog/[...id].astro

@@ -7,7 +7,7 @@ import { readingTime } from "@lib/utils";
 import BackToPrevious from "@components/BackToPrevious.astro";
 import PostNavigation from "@components/PostNavigation.astro";
 import TableOfContents from "@components/TableOfContents.astro";
-import Hyvor from "@components/Hyvor.astro";
+import CoralComments from "@components/CoralComments.astro";
 
 export async function getStaticPaths() {
   const posts = (await getCollection("blog"))
@@ -49,6 +49,8 @@ const prevPost = getPrevPost();
 
 const post = Astro.props;
 const { Content, headings } = await render(post);
+const coralStoryID = `micro:${post.id}`;
+const coralStoryURL = new URL(`/${post.id}/`, Astro.site).toString();
 ---
 
 <Layout title={post.data.title} description={post.data.description ?? ""} image={`/og-${post.id}.png`}>
@@ -93,7 +95,7 @@ const { Content, headings } = await render(post);
         <PostNavigation prevPost={prevPost} nextPost={nextPost} />
       </div>
       <div class="mt-24">
-        <Hyvor />
+        <CoralComments storyID={coralStoryID} storyURL={coralStoryURL} />
       </div>
     </article>
   </Container>