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: enrich build-time reply badges with conversations API platform data

Browse Source 
Build-time reply cards rendered from webmention.io cache lack platform
provenance — they fall through URL heuristics to "webmention" (IndieWeb badge).
After conversations API data arrives with NodeInfo-resolved platform names,
enrichBuildTimeBadges() upgrades matching build-time cards with correct badges.

Also adds wm-provenance-badge class to all badge variants for reliable
DOM selection during enrichment.

Confab-Link: http://localhost:8080/sessions/184584f4-67e1-485a-aba8-02ac34a600fe
This commit is contained in:
Ricardo
2026-03-15 16:11:39 +01:00
parent 6046eceaac
commit d4984f43bf
1 changed files with 49 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
js/webmentions.js
View File

@@ -205,6 +205,8 @@
const cached = getCachedData();
if (cached) {
processWebmentions(cached);
// Enrich build-time badges from cached conversations data
enrichBuildTimeBadges(cached.filter(function(c) { return c.platform; }));
}
// Conversations API URLs (dual-fetch for enriched data)
@@ -266,11 +268,54 @@
if (!cached) {
processWebmentions(allChildren);
}
// Enrich build-time reply badges with conversations API platform data
// Build-time cards have badges from URL heuristics (often wrong for AP servers).
// Conversations items have NodeInfo-resolved platform names — use them to upgrade.
enrichBuildTimeBadges(convItems);
})
.catch((err) => {
console.debug('[Webmentions] Error fetching:', err.message);
});
function enrichBuildTimeBadges(convItems) {
if (!convItems || !convItems.length) return;
convItems.forEach(function(item) {
if (!item.platform) return;
// Find matching build-time reply card: try URL match, then author URL match
var li = null;
if (item.url) {
li = document.querySelector('.webmention-replies li[data-wm-url="' + CSS.escape(item.url) + '"]');
}
if (!li && item.author && item.author.url) {
li = document.querySelector('.webmention-replies li[data-author-url="' + CSS.escape(item.author.url) + '"]');
}
if (!li) return;
// Skip cards we rendered client-side (they already have correct badges)
if (li.dataset.new === 'true') return;
var newPlatform = detectPlatform(item);
var currentPlatform = li.dataset.platform;
if (newPlatform === currentPlatform) return;
// Update the badge
li.dataset.platform = newPlatform;
var oldBadge = li.querySelector('.wm-provenance-badge');
if (oldBadge) {
oldBadge.replaceWith(createProvenanceBadge(newPlatform));
}
// Update reply button platform
var replyBtn = li.querySelector('.wm-reply-btn');
if (replyBtn) {
replyBtn.dataset.platform = newPlatform;
}
});
}
function appendAvatars(selector, items, type) {
let row = document.querySelector(selector);
@@ -641,26 +686,26 @@
var span = document.createElement('span');
var svg;
if (platform === 'mastodon') {
span.className = 'inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 rounded-full';
span.className = 'wm-provenance-badge inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 rounded-full';
span.title = 'Mastodon';
svg = createSvgIcon('0 0 24 24', 'currentColor', [
{ tag: 'path', attrs: { d: 'M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z' } }
]);
} else if (platform === 'bluesky') {
span.className = 'inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-sky-100 dark:bg-sky-900/30 text-sky-600 dark:text-sky-400 rounded-full';
span.className = 'wm-provenance-badge inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-sky-100 dark:bg-sky-900/30 text-sky-600 dark:text-sky-400 rounded-full';
span.title = 'Bluesky';
svg = createSvgIcon('0 0 568 501', 'currentColor', [
{ tag: 'path', attrs: { d: 'M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z' } }
]);
} else if (platform === 'activitypub') {
span.className = 'inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-full';
span.className = 'wm-provenance-badge inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-full';
span.title = 'Fediverse (ActivityPub)';
svg = createSvgIcon('0 0 24 24', 'currentColor', [
{ tag: 'path', attrs: { d: 'M13.09 4.43L24 10.73v2.51L13.09 19.58v-2.51L21.83 12 13.09 6.98v-2.55zM13.09 9.49L17.44 12l-4.35 2.51V9.49z' } },
{ tag: 'path', attrs: { d: 'M10.91 4.43L0 10.73v2.51l8.74-5.03v10.09l2.18 1.28V4.43zM6.56 12L2.18 14.51l4.35 2.51V12z' } }
]);
} else {
span.className = 'inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-400 rounded-full';
span.className = 'wm-provenance-badge inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-400 rounded-full';
span.title = 'IndieWeb';
svg = createSvgIcon('0 0 24 24', 'none', [
{ tag: 'circle', attrs: { cx: '12', cy: '12', r: '10' } },