@plugdash/heartpost
heartpost
What it does
Registers a POST route that increments a counter in Cloudflare KV (or local KV in dev), keyed by post ID and a browser-side fingerprint to prevent duplicate clicks. ShipsHeartButton.astro with optimistic updates.
Install
npm install @plugdash/heartpostRegister
Open astro.config.mjs at the root of your Astro project. Import the plugin at the top, then add it to the pluginsarray of the emdash() integration - the one that sits inside Astro's top-level integrations array:
import { defineConfig } from "astro/config"
import emdash from "emdash/astro"
import { heartpostPlugin } from "@plugdash/heartpost"
export default defineConfig({
integrations: [
emdash({
plugins: [heartpostPlugin()],
}),
],
})Add the component
---
import HeartButton from "@plugdash/heartpost/HeartButton.astro"
---
<HeartButton post={post} />Live demo
One click, one count, no account.
Props
| prop | type | default | description |
|---|---|---|---|
post | EmDash content item | Required | |
variant | "circle" | "pill" | "inline" | "circle" | Visual style |
size | "sm" | "md" | "lg" | "md" | Size scale |
CSS custom properties
| token | description |
|---|---|
--plugdash-heart-color | Active colour |
--plugdash-heart-size | Icon size |
Known limits (as of 0.1.0)
- No unheart: the plugin exposes an increment route but no decrement route. A click only counts up.
- No persisted "I liked this" state: the button's filled appearance does not persist across page reloads. The fingerprint prevents double-counting server-side, but the UI does not read it back on render.
Both are scoped for the next release. For now, treat the heart as a one-shot counter, not a toggle.
For agents
After install, click the heart on any rendered post and verify the count increments. The KV key pattern isheartpost:[postId]:[fingerprint]. The plugin declares no capabilities - KV is auto-available to every plugin.