[darkmastermindz]

Summary

In the About card's plain-English XP view, every entry now has a 👏 kudos button with a live count that all visitors share. A Netlify function counts the kudos and keeps them in a separate JSON document in Netlify Blobs, apart from the site's data.

Related Issue

None. Requested directly.

Changes Made

• netlify/functions/kudos.mjs (/api/kudos):
  • GET returns { counts }. POST { id } adds one kudos and returns { id, count, counted }.
  • The counts are one JSON document (counts) in the site-wide Netlify Blobs store kudos.
  • Only ids of real XP entries count. Stored data is cleaned on every read: no unknown keys, no prototype keys, no non-integers.
  • Once per visitor per entry per day:
    • A marker keyed by an HMAC of IP, entry and day is written with onlyIfNew.
    • The IP address is never stored.
    • The HMAC key comes from the existing sign-in secret, so there's no new setting.
  • Same-origin only: a POST whose Sec-Fetch-Site says another site is refused.
  • Simultaneous kudos: writes to the count are checked against its ETag (onlyIfMatch) and retried, so kudos sent at the same moment are all counted.
• data/xp.mjs:
  • The XP data (education, experience, achievements) moves out of the About card unchanged, so the card and the function share one list.
  • xpId gives each entry a stable id from the fields that name it, so rewording a line keeps its kudos.
• composables/useKudos.js:
  • Fetches the counts and refreshes them every 15 seconds while the plain-English XP list is showing and the tab is visible.
  • Counts a tap straight away, and undoes it if the request fails.
  • Remembers in localStorage which entries this browser has already given kudos to.
• components/AboutCard.vue:
  • A small 👏 button on each plain-English XP entry.
  • Its label names the entry and the count, e.g. "Give kudos: Senior Software Engineer at Wells Fargo, 3 so far". The count isn't read out on every refresh.
  • A tap doesn't flip or hold the card.
  • Buttons hide where the function isn't running (a local preview).
• public/sw.js: the service worker leaves /api/kudos alone, so a count is never an old cached copy.
• Tests:
  • tests/security/kudos.test.mjs runs against an in-memory store. It covers: once a day per visitor, simultaneous kudos, hostile bodies (KUDOS_BODIES in payloads.mjs) and unknown ids, cross-site requests, methods, and cleaning of stored data.
  • An accessibility test in tests/e2e/a11y.spec.mjs covers the buttons before and after a tap.
• README: a new paragraph on kudos in "About card".
• New dependency: @netlify/blobs.

How to Test

1. Run npm test: 278 tests, including the new kudos tests.
2. Run npm run generate.
3. Run PLAYWRIGHT_CHROMIUM_PATH=/opt/pw-browsers/chromium npx playwright test tests/e2e/a11y.spec.mjs -g "About card|XP kudos" --project="Pixel 7" --project="Galaxy Tab S9 landscape". The browser path is only needed here; CI installs its own browser.
4. On the deploy preview:
   • Open /#xp and hold the card for plain English.
   • Tap 👏 on an entry. The count goes up, the button turns green, and the card stays in plain English.
   • Reload: the count stays. A second tap the same day doesn't count again.

Additional Notes

• No setup: Netlify provides the Blobs store to the function automatically.
• Deploy previews share the live counts: the store is site-wide, so a kudos given while testing a preview counts on the live site too.
• Merged with main after About card: makerspace hobbies sentence, and "Graduate" on the yoga teacher training line #261. The "Graduate" wording comes from About card: makerspace hobbies sentence, and "Graduate" on the yoga teacher training line #261. This PR moves the XP data without changing it: data/xp.mjs matches main's data exactly.
• Gear editor (signed in, collected into a PR) + glossary terms with hover definitions #255 (gear editor + glossary):
  • Its glossary test reads the XP readable/highlight text from components/AboutCard.vue.
  • When I bring Gear editor (signed in, collected into a PR) + glossary terms with hover definitions #255 up to date, I'll point that test at data/xp.mjs.
  • The template line Gear editor (signed in, collected into a PR) + glossary terms with hover definitions #255 changes (<TermText>) sits right next to the new button, so that merge may need a small hand fix too.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Nginuw5wmUjUSkmQB1J3pS