Conversation
There was a problem hiding this comment.
Pull request overview
This PR refactors the site's JavaScript from vanilla implementations to Alpine.js, introducing a reactive framework for cleaner, more declarative UI patterns. The changes maintain the same functionality while modernizing the code structure.
Changes:
- Added Alpine.js via CDN and created Alpine stores for theme, menu, and scroll-to-top state management
- Converted all interactive UI components (theme toggle, menu, scroll-to-top, smooth scrolling, code copy buttons) to use Alpine.js directives
- Refactored KaTeX math rendering initialization to use Alpine's lifecycle hooks with polling fallback
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 14 comments.
| File | Description |
|---|---|
| layouts/partials/head.html | Added Alpine.js CDN, x-cloak styles, and Alpine store initialization for theme, menu, and scrollToTop state |
| layouts/partials/header.html | Converted theme toggle and menu toggle buttons to use Alpine store methods and directives |
| layouts/partials/footer.html | Refactored scroll-to-top visibility, smooth scroll handling, and code copy buttons to Alpine components |
| layouts/partials/math.html | Converted KaTeX rendering initialization from DOMContentLoaded event to Alpine x-init with polling |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
cboone
force-pushed
the
claude/convert-to-alpine-js-F6myQ
branch
from
435a1e4 to
bde6fd2
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Replace inline JavaScript with Alpine.js for cleaner, declarative reactive UI patterns. Changes include: - Add Alpine.js via CDN in head.html - Create Alpine stores for theme, menu, and scroll-to-top state - Convert theme toggle to use Alpine store - Convert menu toggle and scroll persistence to Alpine - Convert scroll-to-top button visibility to Alpine with x-show - Convert smooth scroll anchor handling to Alpine component - Convert code copy buttons to Alpine component - Convert KaTeX math initialization to Alpine x-init - Add x-cloak support to prevent FOUC The synchronous theme detection script is preserved to prevent flash of wrong theme before Alpine loads. https://claude.ai/code/session_01GuUReEF5iughHJQNLfmXDt
- Pin Alpine.js to v3.14.8 with SRI hash for security - Initialize theme store from DOM state for proper sync - Replace deprecated substr() with substring() - Use $nextTick for menu scroll position restoration - Use object syntax for :class binding - Use explicit string values for aria-expanded - Add max retries to KaTeX polling to prevent infinite loops - Remove Alpine dependency from KaTeX init (standalone IIFE) - Use @scroll.window directive instead of manual addEventListener
- Add proper error handling for clipboard API with .catch() - Add console.error for execCommand fallback failure - Replace history.replaceState space character with pathname - Add copilot-instructions.md to document intentional patterns
- Change top-link CSS from visibility:hidden to display:none for Alpine x-show compatibility - Replace querySelector with getElementById for cleaner anchor link targeting - Use Number() instead of parseInt() for better NaN handling in scroll position
cboone
force-pushed
the
claude/convert-to-alpine-js-F6myQ
branch
from
38a3036 to
07dcf00
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Replace inline JavaScript with Alpine.js for cleaner, declarative
reactive UI patterns. Changes include:
The synchronous theme detection script is preserved to prevent
flash of wrong theme before Alpine loads.
https://claude.ai/code/session_01GuUReEF5iughHJQNLfmXDt