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/art/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/art/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/art/src/layouts/DefaultLayout.astro
View file

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

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

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

46
sites/poetry/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/poetry/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/poetry/src/layouts/DefaultLayout.astro
View file

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

6
sites/poetry/src/pages/[...slug].astro
View file

@ -1,5 +1,6 @@
--- ---
import { getCollection, render } from 'astro:content'; import { getCollection, render } from 'astro:content';
import CoralComments from '@/components/CoralComments.astro';
import DefaultLayout from '@/layouts/DefaultLayout.astro'; import DefaultLayout from '@/layouts/DefaultLayout.astro';
import { BlogPost } from '@/components/sections/blog-post'; import { BlogPost } from '@/components/sections/blog-post';
import { ACTIVE_BLOG_SITE } from '@/blog-sites.js'; import { ACTIVE_BLOG_SITE } from '@/blog-sites.js';
@ -15,6 +16,9 @@ export async function getStaticPaths() {
const post = Astro.props; const post = Astro.props;
const { Content } = await render(post); 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}> <DefaultLayout title={`${post.data.title} | ${SITE_TITLE}`} description={post.data.description}>
@ -23,4 +27,6 @@ const { Content } = await render(post);
<Content /> <Content />
</BlogPost> </BlogPost>
</div> </div>
<CoralComments storyID={coralStoryID} storyURL={coralStoryURL} />
</DefaultLayout> </DefaultLayout>

46
sites/puzzles/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/puzzles/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/puzzles/src/layouts/DefaultLayout.astro
View file

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

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

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

46
sites/reflections/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/reflections/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/reflections/src/layouts/DefaultLayout.astro
View file

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

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

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

46
sites/research/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/research/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/research/src/layouts/DefaultLayout.astro
View file

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

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

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

46
sites/reviews/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/reviews/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/reviews/src/layouts/DefaultLayout.astro
View file

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

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

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

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 BaseHead from '@/components/BaseHead.astro';
import RybbitAnalytics from '@/components/RybbitAnalytics.astro';
import Footer from '@/components/sections/footer'; import Footer from '@/components/sections/footer';
import Navbar from '@/components/sections/navbar'; import Navbar from '@/components/sections/navbar';
@ -7,8 +8,9 @@ const { title, description } = Astro.props;
--- ---
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title={title} description={description} /> <BaseHead title={title} description={description} />
<RybbitAnalytics />
</head> </head>
<body class={`h-screen antialiased flex flex-col`} <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 { getCollection, render } from 'astro:content';
import CoralComments from '@/components/CoralComments.astro';
import DefaultLayout from '@/layouts/DefaultLayout.astro'; import DefaultLayout from '@/layouts/DefaultLayout.astro';
import { BlogPost } from '@/components/sections/blog-post'; import { BlogPost } from '@/components/sections/blog-post';
import NewsletterSignup from '@/components/sections/newsletter-signup'; import NewsletterSignup from '@/components/sections/newsletter-signup';
@ -16,6 +17,9 @@ export async function getStaticPaths() {
const post = Astro.props; const post = Astro.props;
const { Content } = await render(post); 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}> <DefaultLayout title={`${post.data.title} | ${SITE_TITLE}`} description={post.data.description}>
@ -25,5 +29,6 @@ const { Content } = await render(post);
</BlogPost> </BlogPost>
</div> </div>
<CoralComments storyID={coralStoryID} storyURL={coralStoryURL} />
<NewsletterSignup client:load /> <NewsletterSignup client:load />
</DefaultLayout> </DefaultLayout>