83 lines
3.7 KiB
HTML
83 lines
3.7 KiB
HTML
{{ define "main" }}
|
|
<h2>{{ .Title }}</h2>
|
|
|
|
<div>
|
|
{{ .Content }}
|
|
</div>
|
|
|
|
{{ $related := .Site.RegularPages.Related . | first 5 }}
|
|
{{ with $related }}
|
|
<h3>See Also</h3>
|
|
<ul>
|
|
{{ range . }}
|
|
<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
|
|
{{ end }}
|
|
</ul>
|
|
{{ end }}
|
|
|
|
<h3>Contact Me</h3>
|
|
|
|
The easiest and fastest way you can contact me is via <a href="mailto:josh@redstrate.com">josh@redstrate.com</a>.
|
|
|
|
{{ with .Params.comments }}
|
|
<h3>Comments</h3>
|
|
<p>I <a href="https://{{ .host }}/@{{ .username }}/{{ .id }}">posted this</a> to my Mastodon! You can use any Fediverse account (Mastodon, Pleroma, etc) to <a class="button" href="https://{{ .host }}/interact/{{ .id }}?type=reply">reply</a>.</p>
|
|
<p id="mastodon-comments-list"><button id="load-comment">Load comments</button></p>
|
|
<noscript><p>You need JavaScript to view the comments.</p></noscript>
|
|
{{ $domscript := resources.Get "js/purify.min.js" }}
|
|
<script src="{{ $domscript.Permalink }}" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
function escapeHtml(unsafe) {
|
|
return unsafe
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
}
|
|
|
|
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>Not comments found</p>";
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{{ end }}
|
|
{{ end }}
|