Skip to content

Add per-section clap button#13

Open
GrzywN wants to merge 3 commits intomainfrom
@grzywn/clapping
Open

Add per-section clap button#13
GrzywN wants to merge 3 commits intomainfrom
@grzywn/clapping

Conversation

@GrzywN
Copy link
Copy Markdown
Collaborator

@GrzywN GrzywN commented Apr 2, 2026

Adds a clapping feature to the guide — readers can express appreciation for individual sections, not just whole articles.

What's included

ClapButton Astro component (src/components/ClapButton.astro)

  • Fetches current clap count on page load via GET /claps?slug=
  • Accumulates clicks locally, sends them in a single sendBeacon on page leave (pagehide)
  • Shows a conic-gradient progress ring reflecting how many claps the user has given (across all sessions, via user_claps from the API)
  • Graceful degradation: if PUBLIC_API_URL is not set, renders silently without errors
  • Runtime validation of the API response via Zod (astro/zod)

Technical decisions worth noting:

  • State split into local (session claps, sent flag) and remote (server response) for clarity
  • remote.count++ on click is an intentional optimistic update — keeps displayed count in sync without a round-trip

Placed after every ## section across all 17 articles (60 sections total), each with a unique slug matching the article path + section heading.

.env.example updated with PUBLIC_API_URL.

API

The component talks to a separate self-hosted API (agentic-engineering-applause-feature repo). Set PUBLIC_API_URL in .env to point at it.

GET /claps?slug={slug} → { count, max_claps, user_claps }
POST /claps?slug={slug} body: { claps: number }

@GrzywN GrzywN requested a review from mkaput April 2, 2026 09:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant