svemagie.net/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-05-15 15:08:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: align client-side webmention selectors with build-time HTML

Browse Source 
- Change .avatar-row selector to .facepile to match build-time template
- Use facepile-avatar class for dynamically created avatar links
- Fix pluralization in updateCount (was only replacing the number,
  now rebuilds the full "N Like/Likes" text correctly)
- Align ring color classes with build-time template
This commit is contained in:
Ricardo
2026-02-23 11:02:32 +01:00
parent f898837b25
commit e3f81293d1
1 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/webmentions.js
+18 -11
View File
@@ -79,26 +79,26 @@
// Append new likes // Append new likes
if (likes.length) { if (likes.length) {
appendAvatars('.webmention-likes .avatar-row', likes, 'likes'); appendAvatars('.webmention-likes .facepile, .webmention-likes .avatar-row', likes, 'likes');
updateCount('.webmention-likes h3', likes.length); updateCount('.webmention-likes h3', likes.length, 'Like');
} }
// Append new reposts // Append new reposts
if (reposts.length) { if (reposts.length) {
appendAvatars('.webmention-reposts .avatar-row', reposts, 'reposts'); appendAvatars('.webmention-reposts .facepile, .webmention-reposts .avatar-row', reposts, 'reposts');
updateCount('.webmention-reposts h3', reposts.length); updateCount('.webmention-reposts h3', reposts.length, 'Repost');
} }
// Append new replies // Append new replies
if (replies.length) { if (replies.length) {
appendReplies('.webmention-replies ul', replies); appendReplies('.webmention-replies ul', replies);
updateCount('.webmention-replies h3', replies.length); updateCount('.webmention-replies h3', replies.length, 'Repl', 'ies', 'y');
} }
// Append new mentions // Append new mentions
if (mentions.length) { if (mentions.length) {
appendMentions('.webmention-mentions ul', mentions); appendMentions('.webmention-mentions ul', mentions);
updateCount('.webmention-mentions h3', mentions.length); updateCount('.webmention-mentions h3', mentions.length, 'Mention');
} }
// Update total count in main header // Update total count in main header
@@ -188,7 +188,7 @@
} }
if (webmentionsSection) { if (webmentionsSection) {
webmentionsSection.appendChild(section); webmentionsSection.appendChild(section);
row = section.querySelector('.avatar-row'); row = section.querySelector('.facepile');
} }
} }
@@ -199,7 +199,7 @@
const link = document.createElement('a'); const link = document.createElement('a');
link.href = author.url || '#'; link.href = author.url || '#';
link.className = 'inline-block'; link.className = 'facepile-avatar';
link.title = author.name || 'Anonymous'; link.title = author.name || 'Anonymous';
link.target = '_blank'; link.target = '_blank';
link.rel = 'noopener'; link.rel = 'noopener';
@@ -208,7 +208,7 @@
const img = document.createElement('img'); const img = document.createElement('img');
img.src = author.photo || '/images/default-avatar.svg'; img.src = author.photo || '/images/default-avatar.svg';
img.alt = author.name || 'Anonymous'; img.alt = author.name || 'Anonymous';
img.className = 'w-8 h-8 rounded-full ring-2 ring-primary-500'; img.className = 'w-8 h-8 rounded-full ring-2 ring-white dark:ring-surface-900';
img.loading = 'lazy'; img.loading = 'lazy';
link.appendChild(img); link.appendChild(img);
@@ -355,7 +355,7 @@
}); });
} }
function updateCount(selector, additionalCount) { function updateCount(selector, additionalCount, noun, pluralSuffix, singularSuffix) {
const header = document.querySelector(selector); const header = document.querySelector(selector);
if (!header) return; if (!header) return;
@@ -364,9 +364,16 @@
if (match) { if (match) {
const currentCount = parseInt(match[1], 10); const currentCount = parseInt(match[1], 10);
const newCount = currentCount + additionalCount; const newCount = currentCount + additionalCount;
if (noun) {
// Rebuild the header text with correct pluralization
var suffix = pluralSuffix || 's';
var singSuffix = singularSuffix || '';
header.textContent = newCount + ' ' + noun + (newCount !== 1 ? suffix : singSuffix);
} else {
header.textContent = text.replace(/\d+/, newCount); header.textContent = text.replace(/\d+/, newCount);
} }
} }
}
function updateTotalCount(additionalCount) { function updateTotalCount(additionalCount) {
const header = document.querySelector('#webmentions h2'); const header = document.querySelector('#webmentions h2');
@@ -390,7 +397,7 @@
header.textContent = `0 ${type === 'likes' ? 'Likes' : 'Reposts'}`; header.textContent = `0 ${type === 'likes' ? 'Likes' : 'Reposts'}`;
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'avatar-row'; row.className = 'facepile';
section.appendChild(header); section.appendChild(header);
section.appendChild(row); section.appendChild(row);