← Back to docs
@seriphxyz/astro
Drop-in Astro components for comments, reactions, forms, and subscriptions. Includes a content loader for fetching posts at build time.
Installation
npm install @seriphxyz/astro
Add your site key to .env:
SERIPH_SITE_KEY=your_site_key_hereQuick Start
Reactions
---
import Reactions from "@seriphxyz/astro/Reactions"
---
<Reactions
siteKey={import.meta.env.SERIPH_SITE_KEY}
pageId={Astro.url.pathname}
reactions={["like", "love", "clap"]}
/>Form
---
import Form from "@seriphxyz/astro/Form"
---
<Form siteKey={import.meta.env.SERIPH_SITE_KEY} formSlug="contact">
<input name="email" type="email" required />
<textarea name="message" required></textarea>
<button type="submit">Send</button>
</Form>Subscribe
---
import Subscribe from "@seriphxyz/astro/Subscribe"
---
<Subscribe
siteKey={import.meta.env.SERIPH_SITE_KEY}
buttonText="Subscribe"
/>Waitlist
---
import Waitlist from "@seriphxyz/astro/Waitlist"
---
<Waitlist
siteKey={import.meta.env.SERIPH_SITE_KEY}
/>Feedback
---
import Feedback from "@seriphxyz/astro/Feedback"
---
<Feedback
siteKey={import.meta.env.SERIPH_SITE_KEY}
/>Polls
---
import Poll from "@seriphxyz/astro/Poll"
---
<Poll
siteKey={import.meta.env.SERIPH_SITE_KEY}
pollId="your-poll-id"
/>Announcements
---
import Announcements from "@seriphxyz/astro/Announcements"
---
<Announcements
siteKey={import.meta.env.SERIPH_SITE_KEY}
/>Page Views
---
import Views from "@seriphxyz/astro/Views"
---
<Views
siteKey={import.meta.env.SERIPH_SITE_KEY}
pageId={Astro.url.pathname}
/>Content Loader
Fetch posts from Seriph at build time using Astro's content collections:
// src/content.config.ts
import { defineCollection } from "astro:content"
import { seriphPostsLoader } from "@seriphxyz/astro/loader"
const posts = defineCollection({
loader: seriphPostsLoader({
siteKey: import.meta.env.SERIPH_SITE_KEY,
}),
})
export const collections = { posts }Then use in your pages:
---
import { getCollection } from "astro:content"
const posts = await getCollection("posts")
---
{posts.map((post) => (
<article>
<h2>{post.data.title}</h2>
<p>{post.data.excerpt}</p>
</article>
))}Full API Reference
For complete documentation including all props, events, styling, and the JavaScript API, see the package README:
Comments