redstrate/redstrate.com
1
Fork 0
Code Activity Actions

Add Mastodon comments, contact me section, to posts layout

Browse source
This commit is contained in:
Joshua Goins 2022-09-22 12:23:22 -04:00
parent 06ee4a10b8
commit 8cf5a00197
4 changed files with 76 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
themes/red/assets/external-link.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
Side by side

After

Width:  |  Height:  |  Size: 390 B

3
themes/red/assets/js/purify.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

6
themes/red/layouts/_default/_markup/render-link.html Normal file
View file

@ -0,0 +1,6 @@
{{ $icon := resources.Get "external-link.svg" }}
<a href="{{ .Destination | safeURL }}" {{ if strings.HasPrefix .Destination "http" }}
target="_blank"{{ end }}>{{ .PlainText }}
{{ if strings.HasPrefix .Destination "http" }}<object data="{{ $icon.Permalink }}" type="image/svg+xml"></object>
{{ end -}}</a>

66
themes/red/layouts/_default/single.html
View file

@ -12,4 +12,70 @@
{{ end }}
</ul>
{{ end }}
<h3>Contact Me</h3>
You can send me an <a href="mailto:josh@redstrate.com">e-mail</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, "&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>Not comments found</p>";
}
});
});
</script>
{{ end }}
{{ end }}