From a803510d7182a713cfa8f4282e72ca15ca4101b7 Mon Sep 17 00:00:00 2001
From: Neeldhara Misra <neeldhara.misra@gmail.com>
Date: Fri, 20 Feb 2026 23:39:05 +0530
Subject: [PATCH] Fix Hyvor comments hydration error and ensure reactions show
 without text

---
 src/components/Hyvor.astro | 55 +++++++++++++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/components/Hyvor.astro b/src/components/Hyvor.astro
index 29f8f5c..25868f5 100644
--- a/src/components/Hyvor.astro
+++ b/src/components/Hyvor.astro
@@ -8,9 +8,52 @@ const { pageId } = Astro.props;
 const computedPageId = pageId ?? Astro.url.pathname;
 ---
 
-<script async src="https://talk.hyvor.com/embed/embed.js" type="module"></script>
-<hyvor-talk-comments
-  website-id="15040"
-  page-id={computedPageId}
-  reactions-text=""
-></hyvor-talk-comments>
+<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);
+  });
+</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>