[feat] add mastodom comment system

themes/freemind/layout/_partial/post/comment_footer.ejs

@@ -1,8 +1,14 @@
 <% if (item.no_comment){ %>
   <!-- no comment -->
+<% } else { %>
+  <% if (item.fedi_url){ %>
+    <div id="comments">
+      <p id="mastodon-comments-list"></p>
+      <script src="<%- url_for('./js/fedicomment.js') %>" post-url="<%- item.comment_url %>"> async</script>
+    </div>
+    <noscript>Enable JavaScript to view the comments.</a></noscript>
   <% } else { %>
     <blockquote>如不想授权 Giscus 应用，也可以点击下方<strong>左上角数字</strong>直接跳转到 Github Discussions 进行评论。</blockquote>
-  <% if (theme.enable_comment) { %>
     <script src="https://giscus.app/client.js"
             data-repo="SouthFox-D/SouthFox-D.github.io"
             data-repo-id="MDEwOlJlcG9zaXRvcnkyMjg3NDM0MjQ="
@@ -17,6 +23,5 @@
             crossorigin="anonymous"
             async>
     </script>
-  <noscript>Enable JavaScript to view the comments.</a></noscript>
   <% } %>
 <% } %>

themes/freemind/source/css/style.css

@@ -1391,3 +1391,94 @@ code {
   -webkit-animation: wrench 3.75s ease infinite;
   animation: wrench 3.75s ease infinite;
 }
+
+.mastodon-comment {
+  border-radius: 3px;
+  border: 1px #ededf0 solid;
+  padding: 20px;
+  margin-bottom: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+.mastodon-comment p {
+  margin-bottom: 0px;
+}
+.mastodon-comment .author {
+  padding-top:0;
+  display:flex;
+}
+.mastodon-comment .author a {
+  text-decoration: none;
+}
+.mastodon-comment .author .avatar img {
+  margin-right:1rem;
+  min-width:60px;
+  border-radius: 5px;
+}
+.mastodon-comment .author .details {
+  display: flex;
+  flex-direction: column;
+}
+.mastodon-comment .author .details .name {
+  font-weight: bold;
+}
+.mastodon-comment .author .details .user {
+  color: #5d686f;
+  font-size: medium;
+}
+.mastodon-comment .author .date {
+  margin-left: auto;
+  font-size: small;
+}
+/* .mastodon-comment .content { */
+/*   margin: 15px 20px; */
+/* } */
+.mastodon-comment .content p:first-child {
+  margin-top:0;
+  margin-bottom:0;
+}
+.mastodon-comment .status > div {
+  display: inline-block;
+  margin-right: 15px;
+}
+.mastodon-comment .status a {
+  color: #5d686f;
+  text-decoration: none;
+}
+.mastodon-comment .status .replies.active a {
+  color: #003eaa;
+}
+.mastodon-comment .status .reblogs.active a {
+  color: #8c8dff;
+}
+.mastodon-comment .status .favourites.active a {
+  color: #ca8f04;
+}
+
+#mastodon-comments-list .mastodon-comment a {
+  text-decoration: none;
+}
+#mastodon-comments-list .mastodon-comment a .invisible {
+  visibility: unset;
+}
+#mastodon-comments-list .mastodon-comment img,
+video {
+  max-width: unset;
+  margin: unset;
+  display: unset;
+  height: unset;
+}
+@media screen and (max-width: 850px) {
+    #mastodon-comments-list .comment .author {
+        display: block;
+    }
+    #mastodon-comments-list .comment .author > * {
+        display: block;
+    }
+
+    #mastodon-comments-list .comment .author .date {
+        font-size: 0.8em;
+        text-align: left;
+        margin-left: 0;
+    }
+}

themes/freemind/source/js/fedicomment.js

@@ -0,0 +1,115 @@
+var post_url = document.currentScript.getAttribute("post-url");
+var id = post_url.split('/').pop()
+
+
+  function escapeHtml(unsafe) {
+    return unsafe
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  }
+
+  var commentsLoaded = false;
+
+  function toot_active(toot, what) {
+    var count = toot[what+'_count'];
+    return count > 0 ? 'active' : '';
+  }
+
+  function toot_count(toot, what) {
+    var count = toot[what+'_count'];
+    return count > 0 ? count : '';
+  }
+
+  function user_account(account) {
+    var result =`@${account.acct}`;
+    if (account.acct.indexOf('@') === -1) {
+      var domain = new URL(account.url)
+      result += `@${domain.hostname}`
+    }
+    return result;
+  }
+
+  function render_toots(toots, in_reply_to, depth) {
+    var tootsToRender = toots.filter(toot => toot.in_reply_to_id === in_reply_to);
+    tootsToRender.forEach(toot => render_toot(toots, toot, depth));
+  }
+
+  function render_toot(toots, toot, depth) {
+    toot.account.display_name = escapeHtml(toot.account.display_name);
+    toot.account.emojis.forEach(emoji => {
+      toot.account.display_name = toot.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" style="margin-left: calc(10px * ${depth})">
+        <div class="author">
+          <div class="avatar">
+            <img src="${escapeHtml(toot.account.avatar_static)}" height=60 width=60 alt="">
+          </div>
+          <div class="details">
+            <a class="name" href="${toot.account.url}" rel="nofollow">${toot.account.display_name}</a>
+            <a class="user" href="${toot.account.url}" rel="nofollow">${user_account(toot.account)}</a>
+          </div>
+          <a class="date" href="${toot.url}" rel="nofollow">${toot.created_at.substr(0, 10)} ${toot.created_at.substr(11, 8)}</a>
+        </div>
+        <div class="content">${toot.content}</div>
+        <div class="status">
+          <div class="replies ${toot_active(toot, 'replies')}">
+            <a href="${toot.url}" rel="nofollow"><i class="fa fa-reply fa-fw"></i>${toot_count(toot, 'replies')}</a>
+          </div>
+          <div class="reblogs ${toot_active(toot, 'reblogs')}">
+            <a href="${toot.url}" rel="nofollow"><i class="fa fa-retweet fa-fw"></i>${toot_count(toot, 'reblogs')}</a>
+          </div>
+          <div class="favourites ${toot_active(toot, 'favourites')}">
+            <a href="${toot.url}" rel="nofollow"><i class="fa fa-star fa-fw"></i>${toot_count(toot, 'favourites')}</a>
+          </div>
+        </div>
+      </div>`;
+    document.getElementById('mastodon-comments-list').innerHTML += mastodonComment
+
+    render_toots(toots, toot.id, depth + 1)
+  }
+
+  function loadComments() {
+    if (commentsLoaded) return;
+
+    document.getElementById("mastodon-comments-list").innerHTML = "Loading comments from the Fediverse...";
+    const mastodonApiUrl = post_url.replace(/@[^\/]+/, 'api/v1/statuses') + '/context';
+
+    fetch(mastodonApiUrl)
+      .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 = "";
+            render_toots(data['descendants'], id, 0)
+        } else {
+          document.getElementById('mastodon-comments-list').innerHTML = "<p>Not comments found</p>";
+        }
+
+        commentsLoaded = true;
+      });
+  }
+
+  function respondToVisibility(element, callback) {
+    var options = {
+      root: null,
+    };
+
+    var observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (entry.intersectionRatio > 0) {
+          callback();
+        }
+      });
+    }, options);
+
+    observer.observe(element);
+  }
+
+var comments = document.getElementById("mastodon-comments-list");
+respondToVisibility(comments, loadComments);
+