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

Add Coral comments and Rybbit analytics
Some checks are pending
Build / build (push) Waiting to run
Details

Browse source
This commit is contained in:
Neeldhara Misra 2026-06-24 00:12:31 +05:30
parent 00f4b98df4
commit 3fae4a6daf
28 changed files with 428 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

46
sites/vibes/src/components/CoralComments.astro Normal file
View file

@ -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>

6
sites/vibes/src/components/RybbitAnalytics.astro Normal file
View file

@ -0,0 +1,6 @@
---
const rybbitSiteId = "7";
const rybbitScriptUrl = "https://analytics.neeldhara.cloud/api/script.js";
---
<script defer src={rybbitScriptUrl} data-site-id={rybbitSiteId}></script>

6
sites/vibes/src/layouts/DefaultLayout.astro
View file

@ -1,5 +1,6 @@
---
import BaseHead from '@/components/BaseHead.astro';
import RybbitAnalytics from '@/components/RybbitAnalytics.astro';
import Footer from '@/components/sections/footer';
import Navbar from '@/components/sections/navbar';
@ -7,8 +8,9 @@ const { title, description } = Astro.props;
---
<html lang="en">
<head>
<BaseHead title={title} description={description} />
<head>
<BaseHead title={title} description={description} />
<RybbitAnalytics />
</head>
<body class={`h-screen antialiased flex flex-col`}
>

5
sites/vibes/src/pages/[...slug].astro
View file

@ -1,5 +1,6 @@
---
import { getCollection, render } from 'astro:content';
import CoralComments from '@/components/CoralComments.astro';
import DefaultLayout from '@/layouts/DefaultLayout.astro';
import { BlogPost } from '@/components/sections/blog-post';
import NewsletterSignup from '@/components/sections/newsletter-signup';
@ -16,6 +17,9 @@ export async function getStaticPaths() {
const post = Astro.props;
const { Content } = await render(post);
const postSlug = post.id.replace(/\/index$/, '');
const coralStoryID = `${ACTIVE_BLOG_SITE.key}:${postSlug}`;
const coralStoryURL = new URL(`/${postSlug}/`, ACTIVE_BLOG_SITE.url).toString();
---
<DefaultLayout title={`${post.data.title} | ${SITE_TITLE}`} description={post.data.description}>
@ -25,5 +29,6 @@ const { Content } = await render(post);
</BlogPost>
</div>
<CoralComments storyID={coralStoryID} storyURL={coralStoryURL} />
<NewsletterSignup client:load />
</DefaultLayout>