https://orodu.net/assets/webmentions.js

1// Copied from https://github.com/sebastiandedeyne/sebastiandedeyne.com/blob/f9c19f78e7a7b57562059a62154f0c9d9641267b/assets/js/webmentions.js.
2
3const container = document.querySelector("[data-webmentions]");
4
5if (container) {
6  renderWebmentions(container);
7}
8
9async function renderWebmentions(container) {
10  const webmentions = await getWebmentions(container.dataset.webmentions);
11
12  if (webmentions.length === 0) {
13    return;
14  }
15
16  const list = document.createElement("ul");
17  list.className = "webmentions";
18
19  webmentions.forEach(webmention => {
20    list.appendChild(renderWebmention(webmention));
21  });
22
23  container.appendChild(list);
24}
25
26function getWebmentions(target) {
27  return fetch(`https://webmention.io/api/mentions.jf2?target=${target}&per-page=999`)
28    .then(response => response.json())
29    .then(data => data.children);
30}
31
32function renderWebmention(webmention) {
33  const action = {
34    "in-reply-to": "replied",
35    "like-of": "liked",
36    "repost-of": "reposted",
37    "mention-of": "mentioned"
38  }[webmention["wm-property"]];
39
40  const rendered = document.importNode(
41    document.getElementById("webmention-template").content,
42    true
43  );
44
45  function set(selector, attribute, value) {
46    rendered.querySelector(selector)[attribute] = value;
47  }
48
49  set(".webmention-author", "href", webmention.author.url || webmention.url);
50  set(".webmention-author-avatar", "src", webmention.author.photo);
51  set(".webmention-author-avatar", "alt", `Photo of ${webmention.author.name}`);
52  // Emojis come through as "????".
53  set(".webmention-author-name", "textContent", webmention.author.name.replace(" ????", ""));
54  set(".webmention-action", "href", webmention.url);
55
56  set(
57    ".webmention-action",
58    "textContent",
59    `${action} on ${webmention["wm-received"].substr(0, 10)}`
60  );
61
62  if (webmention.content) {
63    set(
64      ".webmention-content",
65      "innerHTML",
66      // Emojis come through as "????" which makes for some very rude replies lmao.
67      (webmention.content.html || webmention.content.text | "").replace(" ????", "")
68    );
69  }
70
71  return rendered;
72}