From 738de116d965712239bc69c1327dd51bccdd1c8b Mon Sep 17 00:00:00 2001 From: SouthFox Date: Thu, 15 Jun 2023 18:32:19 +0800 Subject: [PATCH] [feat] add mastodom comment system --- .../layout/_partial/post/comment_footer.ejs | 39 +++--- themes/freemind/source/css/style.css | 91 ++++++++++++++ themes/freemind/source/js/fedicomment.js | 115 ++++++++++++++++++ 3 files changed, 228 insertions(+), 17 deletions(-) create mode 100644 themes/freemind/source/js/fedicomment.js diff --git a/themes/freemind/layout/_partial/post/comment_footer.ejs b/themes/freemind/layout/_partial/post/comment_footer.ejs index f944fa5..0525d9d 100644 --- a/themes/freemind/layout/_partial/post/comment_footer.ejs +++ b/themes/freemind/layout/_partial/post/comment_footer.ejs @@ -1,22 +1,27 @@ <% if (item.no_comment){ %> - + <% } else { %> -
如不想授权 Giscus 应用，也可以点击下方左上角数字直接跳转到 Github Discussions 进行评论。
- <% if (theme.enable_comment) { %> + <% if (item.fedi_url){ %> +
+

+ +
+ + <% } else { %> +
如不想授权 Giscus 应用，也可以点击下方左上角数字直接跳转到 Github Discussions 进行评论。
- + data-repo="SouthFox-D/SouthFox-D.github.io" + data-repo-id="MDEwOlJlcG9zaXRvcnkyMjg3NDM0MjQ=" + data-category="博客评论" + data-category-id="DIC_kwDODaJZAM4CA7bf" + data-mapping="og:title" + data-reactions-enabled="0" + data-emit-metadata="0" + data-input-position="top" + data-theme="dark_dimmed" + data-lang="zh-CN" + crossorigin="anonymous" + async> + <% } %> <% } %> diff --git a/themes/freemind/source/css/style.css b/themes/freemind/source/css/style.css index d34e0d5..5ed7170 100644 --- a/themes/freemind/source/css/style.css +++ b/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; + } +} diff --git a/themes/freemind/source/js/fedicomment.js b/themes/freemind/source/js/fedicomment.js new file mode 100644 index 0000000..7db777b --- /dev/null +++ b/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, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); + } + + 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}:`, `Emoji ${emoji.shortcode}`); + }); + mastodonComment = + `
+
+
+ +
+
+ ${toot.account.display_name} + ${user_account(toot.account)} +
+ ${toot.created_at.substr(0, 10)} ${toot.created_at.substr(11, 8)} +
+
${toot.content}
+
+
+ ${toot_count(toot, 'replies')} +
+
+ ${toot_count(toot, 'reblogs')} +
+
+ ${toot_count(toot, 'favourites')} +
+
+
`; + 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 = "

Not comments found

"; + } + + 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); +