fix: Escape JSON for HTML attributes in Alpine.js x-data #3
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The workflow-name-based badge URL was showing "no status" because GitHub requires workflow runs on the specified branch. Using the filename-based URL format (actions/workflows/publish.yml/badge.svg) is more reliable and works regardless of when the workflow last ran. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The JSON data being embedded in x-data attributes was not properly escaped, causing Alpine.js parsing errors when the data contained quotes or special characters. Changes: - Add html.escape() wrapper around json.dumps() for all x-data attrs - Add new enhanced UI components with proper escaping: - video_playback: Screenshot sequence video player - action_timeline: Horizontal/vertical timeline with seek - comparison_view: Side-by-side comparison - action_filter: Action type filter components - failure_analysis: Benchmark failure analysis panel - Add enhanced_capture_example showing new components - Update .gitignore to exclude generated HTML viewer files - Export new components from components/__init__.py The fix ensures quotes are encoded as " entities so browsers can properly parse the HTML attributes before Alpine.js processes them. Closes issue with Alpine Expression Error: Unexpected token ';' Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Problem
The generated HTML was breaking with:
Alpine Expression Error: Unexpected token ';'
Expression: "{ currentStep: 0, isPlaying: false, ... steps: [{"
This happened because JSON data with double quotes was being embedded directly in HTML attributes, causing the browser's HTML parser to see the quotes as attribute delimiters.
Solution
Wrap all json.dumps() calls with html.escape() when embedding JSON in HTML attributes.
Test plan
Generated with Claude Code