Skip to content

Add live release version + Discord member badges to landing page#37

Merged
Aaronontheweb merged 1 commit into
devfrom
feature/live-stat-badges
May 20, 2026
Merged

Add live release version + Discord member badges to landing page#37
Aaronontheweb merged 1 commit into
devfrom
feature/live-stat-badges

Conversation

@Aaronontheweb
Copy link
Copy Markdown
Contributor

Summary

Adds two live-fetched badges to the landing page:

  • Latest release → pulls the latest non-prerelease tag from the GitHub Releases API
  • Discord members → pulls the approximate member count from the Discord invite endpoint

Each badge is rendered as a styled .stat-pill (rounded chip, dark theme, JetBrains Mono numeric, teal accent) and ships in two locations:

  • Hero — below the GitHub / Get Started CTA buttons, above the "Built by the team behind Akka.NET" line
  • Community section — under the "Join the community" heading, above the social tiles

How it works

Browser-side fetch() on page load. Each pill ships with the hidden attribute and is revealed only on a successful response — a failed fetch leaves the pill hidden (no zeros, no broken numbers, no error UI). min-height on the row wrappers reserves vertical space so the pills appearing doesn't cause layout shift.

GitHub:  https://api.github.com/repos/netclaw-dev/netclaw/releases/latest
         → tag_name → "v0.19.0"
Discord: https://discord.com/api/v9/invites/ayqrChDtNs?with_counts=true
         → approximate_member_count → 41

Both endpoints confirmed to send CORS headers.

Known trade-offs

  • GitHub unauthenticated API limit is 60 req/hr/IP. A heavily NAT-shared visitor IP could hit it; the pill stays hidden in that case.
  • Numbers reflect the moment the page loaded, not the deploy time — that's deliberate (always-live).
  • Discord member count is currently 41. Small but honest; the pill scales with the server.

Test plan

  • npm run build passes (112 pages).
  • Previewed locally over Tailscale — both pills populate within ~500ms of page load on both placements.

Diff

One file touched: src/pages/index.astro. Adds ~30 lines of CSS, ~14 lines of hero markup, ~14 lines of community markup, ~30 lines of JS in the existing inline <script> block.

Two .stat-pill badges fetch live data on page load and render in both the
hero (below the CTA buttons) and the community section (under the join
heading): the latest GitHub release tag from api.github.com, and the
total Discord member count from the invite endpoint with_counts.

Each pill ships hidden and reveals only on a successful fetch, so a
failed request leaves no broken numbers or zeros. min-height on the
wrapper rows reserves vertical space to avoid layout shift when pills
appear.
@Aaronontheweb Aaronontheweb enabled auto-merge (squash) May 20, 2026 21:47
@Aaronontheweb Aaronontheweb merged commit de1f088 into dev May 20, 2026
2 checks passed
@Aaronontheweb Aaronontheweb deleted the feature/live-stat-badges branch May 20, 2026 21:55
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