Kommentare in meinem statischen Blog via Mastodon

{{ with .Params.comments }}
<div class="masto-comments datenschutz">
<p><a href="/ueber/datenschutz/#kommentare">(Datenschutzinformationen zu Kommentaren via Mastodon)</a></p>
</div>
<div id="mastodon-comments-wrapper">
  <div id="mastodon-comments-buttons">
    <a class="btn btn-sm btn-outline-primary" href="https://{{ .host }}/interact/{{ .id }}?type=reply" target="_blank">Kommentar schreiben</a>
    <a class="btn btn-sm btn-outline-primary" href="https://{{ .host }}/@{{ .username }}/{{ .id }}" target="_blank">Tröt öffnen</a>
  </div>
  <div id="mastodon-comments-list">
    <button id="load-comments" class="btn btn-sm btn-primary">Kommentare anzeigen (via Mastodon)</button>
  </div>
  <noscript><p>Du benötigst JavaScript, um die Kommentare hier anzeigen zu lassen.</p></noscript>
  <script src="/my_js/purify.min.js"></script>
  <script>
  document.getElementById('load-comments').addEventListener('click', loadComment)

  function escapeHtml(unsafe) {
    return unsafe
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
  }

  function loadComment() {
    document.getElementById('load-comments').innerHTML = 'Lade …';
    fetch('https://{{ .host }}/api/v1/statuses/{{ .id }}/context')
      .then(function(response) {
        return response.json();
      })
      .then(function(data) {
      if(data['descendants'] &&
        Array.isArray(data['descendants']) && 
        data['descendants'].length > 0) {
        document.getElementById('mastodon-comments-list').innerHTML = "";
        data['descendants'].forEach(function(reply) {
          reply.account.display_name = escapeHtml(reply.account.display_name);
          reply.account.emojis.forEach(emoji => {
          reply.account.display_name = reply.account.display_name.replace(`:${emoji.shortcode}:`,
            `<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" height="20" width="20" />`);
          });
          replyCreationDate = new Date(reply.created_at).toLocaleDateString(undefined, { day: 'numeric', month: 'short', hour: 'numeric', minute: 'numeric' });
          replyCreationDateLong = new Date(reply.created_at).toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric', hour: 'numeric', minute: 'numeric' });
          mastodonComment =
          `<div class="mastodon-comment">
            <div class="avatar">
              <img src="${escapeHtml(reply.account.avatar_static)}" alt="">
            </div>
            <div class="content">
              <div class="author-wrapper">
                <a class="author" href="${reply.account.url}" rel="nofollow">
                  <span class="author-name">${reply.account.display_name}</span>
                  <span class="author-handle">${escapeHtml(reply.account.acct)}</span>
                </a>
                <a class="date" href="${reply.uri}" rel="nofollow" title="${replyCreationDateLong}">
                  ${replyCreationDate}
                </a>
              </div>
              <div class="mastodon-comment-content">${reply.content}</div> 
            </div>
          </div>`;
          document.getElementById('mastodon-comments-list').appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true}));
        });
      } else {
          document.getElementById('mastodon-comments-list').innerHTML = "<p>Keine Kommentare gefunden</p>";
      }
    });
  };
  </script>
</div>
{{ else }}
<p class="mastodon-comments nocomment">Kommentare sind für diesen Blogbeitrag (noch) nicht aktiviert. Nach der Veröffentlichung eines Blogbeitrags dauert das in der Regel noch ein paar Minuten.</p>
{{ end }}
<p><details class="mastodon-comments email">
  <summary class="mastodon-comments email-summary">Alternative: Anmerkung per E-Mail</summary>
  <div class="mastodon-comments emailcontent">
    <p>Du kannst mir Anmerkungen zum Blogbeitrag per E-Mail schicken, <a href='mailto:user@tld.org?subject=Anmerkung zum Blog&body=Hallo Natenom. Zum Blogbeitrag "{{ $.Page.Permalink }}" habe ich eine Anmerkung:'>wenn du hier klickst</a>. Der Inhalt davon bleibt privat und wird nicht hier im Kommentarbereich veröffentlicht.</p>
  </div>
</details></p>

/* Für Kommentar, die von Mastodon geladen werden. :) */
#mastodon-comments-wrapper {
	#mastodon-comments-buttons {
		margin-bottom: 0.5em;
	}
	#mastodon-comments-list {
		button#load-comments {
			border: 0;
			border-radius: var(--#{$prefix}border-radius);
			background-color: var(--#{$prefix}btn-border-color);
			margin: 0 auto;
		}
		.mastodon-comment {
			display: grid;
			grid-gap: 1em;
			grid-template-columns: auto 1fr;
			.avatar img {
				border-radius: var(--#{$prefix}border-radius);
				position: relative;
				top: 6px;
				width: 48px;
			}
			.content {
				.author-wrapper {
					.author {
						.author-name {
							font-weight: bold;
						}
						&:hover {
							color: var(--hbs-link-color);
							text-decoration: none;
							.author-name {
								color: var(--hbs-link-hover-color);
								text-decoration: underline;
							}
						}
					}
					.date {
						float: right;
					}
				}
			}
		}
	}
}