Claps

The claps module adds a clap button to any page. Counts are stored in Cloudflare KV for fast reads, pre-built to a static JSON file at build time, and updated by a lightweight Worker handler.

Installation

pnpm add @stedefast/module-claps

Setup

// stedefast.config.ts
import { defineConfig } from "@stedefast/core";
import { ClapsModule } from "@stedefast/module-claps";

export default defineConfig({
  // ...
  modules: [
    ClapsModule({
      maxClapsPerPage: 50,  // default: 50 — per-user limit stored in localStorage
    }),
  ],
  cloudflare: {
    projectName: "my-site",
    kvNamespaces: [{ binding: "CLAPS_KV", namespaceId: "YOUR_KV_NAMESPACE_ID" }],
  },
});

Cloudflare bindings

Create a KV namespace:

wrangler kv namespace create CLAPS_KV

Copy the id into your config.

Using the island in a template

<div
  data-island="ClapsIsland"
  data-props={JSON.stringify({ pageId: page.slug })}
/>

The island loads dist/data/claps/counts.json, shows the count for the current page immediately, and updates optimistically when clicked. Each user's clap count is tracked in localStorage to enforce maxClapsPerPage.

How it works

1. Build time — buildStaticExport() reads all KV keys with prefix claps: and writes dist/data/claps/counts.json
2. Page load — Island fetches /data/claps/counts.json from CDN, renders count immediately
3. Clap — POST /_modules/claps/clap increments the KV counter
4. Next build — Static JSON is regenerated with updated counts

Configuration reference

Option	Type	Default	Description
maxClapsPerPage	number	50	Maximum claps a single user can give to one page