svemagie/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-04-02 16:44:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: use Alpine.data() for comments component registration

Browse Source 
Convert commentsSection from a global function to Alpine.data()
registration via the alpine:init event. This is the proper Alpine.js
pattern for reusable components — the component is registered in
Alpine's internal registry before DOM processing begins, eliminating
script loading order issues.

Reverts the hacky approach of moving the script tag to <head>.
This commit is contained in:
Ricardo
2026-02-21 22:40:34 +01:00
parent 0450ae523b
commit c327221352
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
js/comments.js
View File

@@ -1,10 +1,13 @@
/** /**
* Client-side comments component (Alpine.js) * Client-side comments component (Alpine.js)
* Handles IndieAuth flow, comment submission, and display * Handles IndieAuth flow, comment submission, and display
*
* Registered via Alpine.data() so the component is available
* regardless of script loading order.
*/ */
function commentsSection(targetUrl) { document.addEventListener("alpine:init", () => {
return { Alpine.data("commentsSection", (targetUrl) => ({
targetUrl, targetUrl,
user: null, user: null,
meUrl: "", meUrl: "",
@@ -42,7 +45,11 @@ function commentsSection(targetUrl) {
const authError = params.get("auth_error"); const authError = params.get("auth_error");
if (authError) { if (authError) {
this.showStatus(`Authentication failed: ${authError}`, "error"); this.showStatus(`Authentication failed: ${authError}`, "error");
window.history.replaceState({}, "", window.location.pathname + "#comments"); window.history.replaceState(
{},
"",
window.location.pathname + "#comments",
);
} }
}, },
@@ -139,5 +146,5 @@ function commentsSection(targetUrl) {
this.statusMessage = ""; this.statusMessage = "";
}, 5000); }, 5000);
}, },
}; }));
} });