dracublog/layouts/partials/fedi-comments.html

{{ with .Params.comments }}
<h3>Comments</h3>

<p>
	You may <a class="link" href="https://{{ .host }}/@{{ .user }}/{{ .id }}" target="_blank">view</a>
	or <a class="link" href="https://{{ .host }}/interact/{{ .id }}?type=reply" target="_blank">reply</a>
	if you have an account anywhere in the Fediverse.
</p>

<p id="mastodon-comments-list"><button id="load-comment">Load comments</button></p>
<noscript>
	<p>
		You would need JavaScript to view comments here on this page.
		However, you can still <a class="link" href="https://{{ .host }}/@{{ .user }}/{{ .id }}" target="_blank">view</a>
		or <a class="link" href="https://{{ .host }}/interact/{{ .id }}?type=reply" target="_blank">reply</a>
		if you have an account anywhere in the Fediverse.
	</p>
</noscript>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.9/purify.min.js "></script>
<script type="text/javascript">
function escapeHtml(unsafe) {
	return unsafe
	.replace(/&/g, "&amp;")
	.replace(/</g, "&lt;")
	.replace(/>/g, "&gt;")
	.replace(/"/g, "&quot;")
	.replace(/'/g, "&#039;");
	}

document.getElementById("load-comment").addEventListener("click", function() {
	document.getElementById("load-comment").innerHTML = "Loading... 🚀";
		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" />`);
					});
					mastodonComment =
					`<div class="mastodon-comment">
						<div class="avatar">
							<img src="${escapeHtml(reply.account.avatar_static)}" height=60 width=60 alt="">
							</div>
							<div class="content">
								<div class="author">
									<a href="${reply.account.url}" rel="nofollow">
										<span>${reply.account.display_name}</span>
										<span class="disabled">${escapeHtml(reply.account.acct)}</span>
										</a>
										<a class="date" href="${reply.uri}" rel="nofollow">
											${reply.created_at.substr(0, 10)}
											</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>No comments, add yours?</p>";
									}
								});
								});
</script>
{{ end }}