Background
The KakaoPay support button that sat in the Jekyll header did not come across to Astro. Both images are still in public/assets/img/etc/kakaopay/.
Goal
Bring the button back, and fix the problems in the old implementation while doing it.
Plan
- Decide where it goes. Above Recommend at the end of a post collides least with the current layout.
- Rewrite the modal.
- Show it on desktop only. A QR code cannot be scanned by the phone displaying it.
Verify
- The QR code is readable in dark mode.
- ESC closes the modal and focus stays inside it.
Notes
Do not port js/kakaopay.js as is.
- It overwrites
window.onclick and window.onload wholesale. Use addEventListener instead.
- Replace the userAgent match with
matchMedia('(hover: none)').
- It has no ESC handling, no focus trap and no
aria-modal.
buymeacoffee was already commented out in Jekyll. Do not bring it back.
- The original is in the
jekyll-final tag.
Background
The KakaoPay support button that sat in the Jekyll header did not come across to Astro. Both images are still in
public/assets/img/etc/kakaopay/.Goal
Bring the button back, and fix the problems in the old implementation while doing it.
Plan
Verify
Notes
Do not port
js/kakaopay.jsas is.window.onclickandwindow.onloadwholesale. UseaddEventListenerinstead.matchMedia('(hover: none)').aria-modal.buymeacoffeewas already commented out in Jekyll. Do not bring it back.jekyll-finaltag.