engage

What it does

Composes heartpost, sharepost, and shortlink into a single EngagementBar.astro component. engage has no plugin logic of its own - it is a convenience package that exports one Astro component.

Do not register engage in astro.config.mjs. Register the three underlying plugins instead, then import EngagementBar directly.

Install

Also install the three plugins it composes:

npm install @plugdash/heartpost @plugdash/sharepost @plugdash/shortlink

Register the three plugins (not engage)

Open astro.config.mjs at the root of your Astro project. Import all three plugins at the top, then add them to the plugins array of the emdash() integration - the one that sits inside Astro's top-level integrations array. Do not import or register anything from @plugdash/engage here.

// astro.config.mjs
import { defineConfig } from "astro/config"
import emdash from "emdash/astro"
import { heartpostPlugin } from "@plugdash/heartpost"
import { sharepostPlugin } from "@plugdash/sharepost"
import { shortlinkPlugin } from "@plugdash/shortlink"

export default defineConfig({
  integrations: [
    emdash({
      plugins: [
        heartpostPlugin(),
        sharepostPlugin({ via: "abhinavs" }),
        shortlinkPlugin({ autoCreate: true }),
      ],
    }),
  ],
})

Add the component

---
import EngagementBar from "@plugdash/engage/EngagementBar.astro"
---
<EngagementBar post={post} />

Live demo

Props

prop	type	default	description
post	EmDash content item		Required
showHeart	boolean	true	Render heart button
showShare	boolean	true	Render share buttons
showCopy	boolean	true	Render copy link
variant	"circle" | "pill" | "ghost"	"circle"	Visual style

CSS custom properties

token	description
--plugdash-engage-gap	Space between actions
--plugdash-engage-size	Button size
--plugdash-engage-radius	Button radius

For agents

engage has no capabilities, no hooks, and no metadata of its own. Its component reads from all three underlying plugins' metadata/KV routes. If a user installs engage without the three underlying plugins, the component will render with empty counts and broken share URLs.