112 lines
3.7 KiB
HTML
112 lines
3.7 KiB
HTML
{{ if .Site.Params.comments.enabled }}
|
|
|
|
<section id="email-comments">
|
|
<p>If you want to start a discussion about this topic, you can send me an <strong><a href="mailto:{{ $.Site.Params.comments.commentsEmail }}?subject={{ replace (printf "Re: %s" $.Page.Title) "\"" "'" }}">e-mail: <i>blog@rennerocha.com</i></a></strong> ✉️</p>
|
|
</section>
|
|
|
|
{{ if .Params.mastodon_id}}
|
|
<section id="mastodon-comments">
|
|
<h4>Comments</h4>
|
|
<div class="comment-ingress">
|
|
Comment by replying to <strong><a href="https://chaos.social/@rennerocha/{{ .Params.mastodon_id }}">this post on Mastodon</a></strong>.
|
|
</div>
|
|
|
|
<div id="comments" data-id="{{ .Params.mastodon_id }}">
|
|
<p>Loading comments...</p>
|
|
</div>
|
|
|
|
<div class="continue-discussion">
|
|
<p>Continue discussion on <a href="https://chaos.social/@rennerocha/{{ .Params.mastodon_id }}">Fediverse</a> »</p>
|
|
</div>
|
|
</section>
|
|
|
|
<template id="comment-template">
|
|
<hr />
|
|
<article class="blog-comment" style="display: grid; grid-template-columns: 10% 90%;">
|
|
<div>
|
|
<img />
|
|
</div>
|
|
<div class="comment-content">
|
|
<div class="author" style="font-size: smaller; font-weight: bold"></div>
|
|
<div class="publish-date" style="font-size: smaller; font-weight: lighter; font-style: italic;"></div>
|
|
<div class="comment" style="font-size: larger; font-weight: bold"></div>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script type="text/javascript">
|
|
function renderComment(comment, target, parentId) {
|
|
const node = document
|
|
.querySelector("template#comment-template")
|
|
.content.cloneNode(true);
|
|
|
|
const author = node.querySelector(".author");
|
|
|
|
let mastodonAcct = comment.account.acct;
|
|
if (mastodonAcct === "rennerocha") {
|
|
mastodonAcct = "rennerocha@chaos.social";
|
|
}
|
|
|
|
let in_reply_to_id = comment.in_reply_to_id;
|
|
|
|
author.innerHTML = `<a href="${comment.account.url}" target=_blank>${comment.account.display_name} (${mastodonAcct})</a>`;
|
|
|
|
const commentContainer = node.querySelector(".blog-comment");
|
|
if (in_reply_to_id !== parentId) {
|
|
commentContainer.classList.add("indent");
|
|
}
|
|
|
|
const publishDate = node.querySelector(".publish-date");
|
|
const dateObj = new Date(comment.created_at);
|
|
|
|
const dateTime = `${dateObj.getDate()}.${
|
|
dateObj.getMonth() + 1
|
|
}.${dateObj.getFullYear()} ${dateObj.getHours()}:${dateObj.getMinutes()}`;
|
|
|
|
publishDate.innerHTML = `<a href="${comment.url}" target=_blank>${dateTime}</a>`;
|
|
|
|
const userComment = node.querySelector(".comment");
|
|
userComment.innerHTML = comment.content;
|
|
|
|
const avatar = node.querySelector("img");
|
|
avatar.src = comment.account.avatar_static;
|
|
avatar.setAttribute("width", "50");
|
|
avatar.setAttribute("height", "50");
|
|
|
|
target.appendChild(node);
|
|
}
|
|
|
|
async function renderComments() {
|
|
const commentsNode = document.querySelector("#comments");
|
|
|
|
const mastodonPostId = commentsNode.dataset?.id;
|
|
|
|
if (!mastodonPostId) {
|
|
return;
|
|
}
|
|
|
|
commentsNode.innerHTML = "";
|
|
|
|
const originalPost = await fetch(
|
|
`https://chaos.social/api/v1/statuses/${mastodonPostId}`
|
|
);
|
|
const originalData = await originalPost.json();
|
|
renderComment(originalData, commentsNode, null);
|
|
|
|
const response = await fetch(
|
|
`https://chaos.social/api/v1/statuses/${mastodonPostId}/context`
|
|
);
|
|
const data = await response.json();
|
|
const comments = data.descendants;
|
|
|
|
comments.forEach((comment) => {
|
|
renderComment(comment, commentsNode, mastodonPostId);
|
|
});
|
|
}
|
|
|
|
renderComments();
|
|
</script>
|
|
|
|
{{ end }}
|
|
|
|
{{ end }}
|