58 lines
1.5 KiB
Text
58 lines
1.5 KiB
Text
---
|
|
interface Props {
|
|
storyID: string;
|
|
storyURL: string;
|
|
}
|
|
|
|
const { storyID, storyURL } = Astro.props;
|
|
const coralRoot = "https://coral.neeldhara.cloud";
|
|
---
|
|
|
|
<section class="coral-comments 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>
|
|
|
|
<style>
|
|
.coral-comments {
|
|
background: transparent;
|
|
}
|
|
|
|
.coral-comments :global(iframe) {
|
|
background: transparent !important;
|
|
}
|
|
</style>
|
|
|
|
<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,
|
|
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>
|