Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

fix: Correct Alpine.js directive syntax in 4 template files

Browse Source 
Fixed templ parsing errors caused by escaped quotes in Alpine.js @click
directives. The previous migration to @click used backslash-escaped
quotes (\") which templ cannot parse correctly.

Files affected:
- templates/api_explorer.templ:28 - Fixed missing <button> tag and quotes
- templates/collection_modal.templ:69,135 - Fixed color picker buttons (edit & create forms)
- templates/collections.templ:216 - Fixed remove book button
- templates/conflicts.templ:110 - Fixed resolve conflict button

Root cause: Commit 08d4561 converted onclick→@click but used escaped quotes
Fix: Replace all @click=\"function()\" with @click="function()"

This aligns with the standard Alpine.js pattern and fixes the 4 templ
generation errors reported in ESBUILD_MIGRATION_PLAN.md line 1168.

Resolves: Template parsing errors preventing build
Related: ESBUILD_MIGRATION_PLAN.md Phase 3 (Template Migration)
This commit is contained in:
john-okeefe
2026-03-09 20:11:31 -04:00
parent 0441568fab
commit 025acb8843
4 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/collection_modal.templ
+10 -10
View File
@@ -66,11 +66,11 @@ templ CollectionModal(collection CollectionData) {
<div class="mb-6">
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Color</label>
<div class="flex gap-2">
<button type="button" @click=\"selectColor('blue')\" class="w-8 h-8 rounded-full color-option bg-blue-500"></button>
<button type="button" @click=\"selectColor('red')\" class="w-8 h-8 rounded-full color-option bg-red-500"></button>
<button type="button" @click=\"selectColor('yellow')\" class="w-8 h-8 rounded-full color-option bg-yellow-500"></button>
<button type="button" @click=\"selectColor('green')\" class="w-8 h-8 rounded-full color-option bg-green-500"></button>
<button type="button" @click=\"selectColor('purple')\" class="w-8 h-8 rounded-full color-option bg-purple-500"></button>
<button type="button" @click="selectColor('blue')" class="w-8 h-8 rounded-full color-option bg-blue-500"></button>
<button type="button" @click="selectColor('red')" class="w-8 h-8 rounded-full color-option bg-red-500"></button>
<button type="button" @click="selectColor('yellow')" class="w-8 h-8 rounded-full color-option bg-yellow-500"></button>
<button type="button" @click="selectColor('green')" class="w-8 h-8 rounded-full color-option bg-green-500"></button>
<button type="button" @click="selectColor('purple')" class="w-8 h-8 rounded-full color-option bg-purple-500"></button>
</div>
<input type="hidden" name="color" id="collection-color" value={ collection.Color }/>
</div>
@@ -132,11 +132,11 @@ templ CollectionModal(collection CollectionData) {
<div class="mb-6">
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Color</label>
<div class="flex gap-2">
<button type="button" @click=\"selectColor('blue')\" class="w-8 h-8 rounded-full color-option bg-blue-500"></button>
<button type="button" @click=\"selectColor('red')\" class="w-8 h-8 rounded-full color-option bg-red-500"></button>
<button type="button" @click=\"selectColor('yellow')\" class="w-8 h-8 rounded-full color-option bg-yellow-500"></button>
<button type="button" @click=\"selectColor('green')\" class="w-8 h-8 rounded-full color-option bg-green-500"></button>
<button type="button" @click=\"selectColor('purple')\" class="w-8 h-8 rounded-full color-option bg-purple-500"></button>
<button type="button" @click="selectColor('blue')" class="w-8 h-8 rounded-full color-option bg-blue-500"></button>
<button type="button" @click="selectColor('red')" class="w-8 h-8 rounded-full color-option bg-red-500"></button>
<button type="button" @click="selectColor('yellow')" class="w-8 h-8 rounded-full color-option bg-yellow-500"></button>
<button type="button" @click="selectColor('green')" class="w-8 h-8 rounded-full color-option bg-green-500"></button>
<button type="button" @click="selectColor('purple')" class="w-8 h-8 rounded-full color-option bg-purple-500"></button>
</div>
<input type="hidden" name="color" id="collection-color" value="blue"/>
</div>