The engagement bundle

The engagement bar your blog needed from day one.

320 words·2min read

A convenience bundle that composes heartpost, sharepost, and shortlink into one component. Drop EngagementBar.astro into your Post layout and readers get all three signals with one import.

npm install @plugdash/engage

betaGitHub

circle

pill

ghost

Every variant. The first is the default, no configuration.

Setup

Install and register
bash
```
npm install @plugdash/engage
```
js
```
// engage is not registered in astro.config.mjs.
// Register heartpost, sharepost, and shortlink instead,
// then import EngagementBar.astro directly:
```

Add to your layout

import EngagementBar from "@plugdash/engage/EngagementBar.astro"

<EngagementBar post={post} />

engage is a bundle. Register heartpost, sharepost, and shortlink as plugins, then import EngagementBar.astro from @plugdash/engage in your Post layout.

It looks right. But it's yours to change.

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

Components are intentionally simple. Copy src/EngagementBar.astrointo your theme and modify freely - no upstream coupling.

Pairs well with

engage wraps these three. Install all three, then use engage's component.

heartpost

alpha

The simplest signal readers can send. Show them you counted it.

npm install @plugdash/heartpost

beta

Readers who want to share your work shouldn't have to work for it.

npm install @plugdash/sharepost

shortlink