Blogs/micro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix Hyvor comments hydration error and ensure reactions show without text

Browse source
This commit is contained in:
Neeldhara Misra 2026-02-20 23:39:05 +05:30
parent 928c6dcb3e
commit a803510d71
1 changed files with 49 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/components/Hyvor.astro
View file

@ -8,9 +8,52 @@ const { pageId } = Astro.props;
const computedPageId = pageId ?? Astro.url.pathname; const computedPageId = pageId ?? Astro.url.pathname;
--- ---
<script async src="https://talk.hyvor.com/embed/embed.js" type="module"></script> <div class="hyvor-comments">
<hyvor-talk-comments <script is:inline async src="https://talk.hyvor.com/embed/embed.js" type="module"></script>
<hyvor-talk-comments
website-id="15040" website-id="15040"
page-id={computedPageId} page-id={computedPageId}
reactions-text="" reactions-text=""
></hyvor-talk-comments> 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>