engage

What it does

Composes heartpost, sharepost, andshortlink into a single EngagementBar.astrocomponent. 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 importEngagementBar 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 theplugins array of the emdash() integration - the one that sits inside Astro's top-level integrationsarray. Do not import or register anything from@plugdash/engage here.

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

CSS custom properties

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.