Skip to content

Commit

Permalink
add comments via mastodon toots
Browse files Browse the repository at this point in the history
  • Loading branch information
ghostletters committed Mar 23, 2021
1 parent 8677da3 commit 437294d
Show file tree
Hide file tree
Showing 7 changed files with 112 additions and 1 deletion.
19 changes: 19 additions & 0 deletions content/notes/2020/3/23/2210/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
title: "Add Comments to Hugo Blog"
date: 2021-03-23T22:19:10+01:00
draft: false
tags: ["note", "comment", "mastodon", "javascript"]
description: "Use JavaScript to load comments from Mastodon"

comments:
host: fosstodon.org
username: ghost_letters
id:
---

After reading this [Toot from Surendrajat](https://fosstodon.org/web/statuses/105935391504191020) I wanted to add Mastodon Toots as comments. Thanks [@carl](https://linuxrocks.online/@carl) for inventing the smart comment solution and sharing the required JavaScript / Hugo integration.

Original source: [Adding comments to your static blog with Mastodon](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/)

If you want to see how it all comes together, check out this [git commit]().

1 change: 1 addition & 0 deletions themes/ghostletters/layouts/_default/single.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@ <h1>{{ .Title }}</h1>
<hr>
{{ partial "metadata.html" . }}
</footer>
{{ partial "comments.html" . }}
</article>
{{ end }}
61 changes: 61 additions & 0 deletions themes/ghostletters/layouts/partials/comments.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
{{ with .Params.comments }}
<div class="article-content">
<h2>Comments</h2>
<p>You can use your Mastodon account to reply to this <a class="link" href="https://{{ .host }}/@{{ .username }}/{{ .id }}">post</a>.</p>
<p><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>
<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="comment_author">
<img class="comment_avatar" src="${escapeHtml(reply.account.avatar_static)}" height=40 width=40 alt="">
<a class="comment_display_name" href="${reply.account.url}" rel="nofollow">
${reply.account.display_name}
</a>
${reply.created_at.substr(0, 10)}
<a class="comment_reply" href="${reply.uri}" rel="nofollow">
Reply
</a>
</div>
<div class="content">
<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>
<script src="/js/purify.min.js"></script>
</div>
{{ end }}
4 changes: 4 additions & 0 deletions themes/ghostletters/layouts/partials/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/css/style.css">

{{ if isset .Page.Params "comments" }}
<link rel="stylesheet" type="text/css" href="/css/style_comments.css">
{{ end }}

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

Expand Down
2 changes: 1 addition & 1 deletion themes/ghostletters/layouts/partials/metadata.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="grid-left-right">
<div class="left">
{{ $dateTime := .PublishDate.Format "2006-01-02" }}
{{ $dateFormat := .Site.Params.dateFormat | default "Jan 2, 2006" }}
{{ $dateFormat := .Site.Params.dateFormat | default "2006-01-02" }}
Published
<time datetime="{{ $dateTime }}">{{ .PublishDate.Format $dateFormat }}</time>
</div>
Expand Down
23 changes: 23 additions & 0 deletions themes/ghostletters/static/css/style_comments.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
.mastodon-comment {
background-color: mistyrose;
padding: 8px;
margin-bottom: 8px;
border-radius: 8px;
}

.comment_author {
display: flex;
}

.comment_display_name {
margin-right: 8px;
}

.comment_reply {
flex-grow: 1;
text-align: right;
}

.comment_avatar {
margin-right: 8px;
}
3 changes: 3 additions & 0 deletions themes/ghostletters/static/js/purify.min.js

Large diffs are not rendered by default.

0 comments on commit 437294d

Please sign in to comment.