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. Ships HeartButton.astro with optimistic updates.

Install

Register

Open astro.config.mjs at the root of your Astro project. Import the plugin at the top, then add it to the plugins array of the emdash() integration - the one that sits inside Astro's top-level integrations array:

// astro.config.mjs
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

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 is heartpost:[postId]:[fingerprint]. The plugin declares no capabilities - KV is auto-available to every plugin.