Added comment system plugin mastodoncomments (#433)

v8/mastodoncomments/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 MasinAD
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

v8/mastodoncomments/README.md

@@ -0,0 +1,43 @@
+Use [Mastodon](https://joinmastodon.org/) as a comment system for static site generator [Nikola](https://getnikola.com).
+
+Mastodon is a federated microblogging network, based on the [ActivityPub](https://www.w3.org/TR/activitypub/) protocol.
+Users can respond to anchor posts in the Fediverse.
+
+# How to configure
+The settings for Mastodon Comments can be passed to the plugin as follows:
+
+```python
+COMMENT_SYSTEM = "mastodoncomments"
+COMMENT_SYSTEM_ID = 'nerdculture.de'
+GLOBAL_CONTEXT = {
+    ...
+    "mastodon_config": {
+        'account_id': '109270094542366763',
+        'account': 'fluchtkapsel'
+    }
+}
+```
+The COMMENT_SYSTEM_ID contains the schemeless URL of the Mastodon instance you wish to use for your comments. See [this page](https://khendrikse.netlify.app/blog/find-your-mastodon-account-id/) on how to find your Mastodon account id.
+
+# How to install
+You need to copy the folder `$BLOG_ROOT/plugins/mastodoncomments/files/assets` to `$BLOG_ROOT/files/assets`
+```
+cp -a plugins/mastodoncomments/files/assets files/
+```
+
+Additionally, it requires DOMpurify in your `files/assets/js` folder which you can install by
+```
+cd files/assets/js && wget https://raw.githubusercontent.com/cure53/DOMPurify/main/dist/purify.min.js
+```
+
+# How to use
+This plugin fetches Mastodon posts which are in reply to a post that is referred to in a Nikola page's or post's meta data. Ideally, you write a blog entry, link to that blog entry on Mastodon and grab this Mastodon post's ID. Put this ID in the post's or page's meta data:
+```
+.. mastodon: 12345678901234567890
+```
+
+# Credits
+This plugin is basically a port of the work for Ghost and Hugo done by
+* [Simon Detheridge](https://sd.ai/blog/2023-10-19/integrating-mastodon-and-ghost/)
+* [Carl Schwan](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/)
+* [Veronica Berglyd Olsen](https://berglyd.net/blog/2023/03/mastodon-comments/)

v8/mastodoncomments/conf.py.sample

@@ -0,0 +1,9 @@
+COMMENT_SYSTEM = "mastodoncomments"
+COMMENT_SYSTEM_ID = 'nerdculture.de'
+GLOBAL_CONTEXT = {
+    ...
+    "mastodon_config": {
+        'account_id': '109270094542366763',
+        'account': 'fluchtkapsel'
+    }
+}

v8/mastodoncomments/files/assets/css/mastodon.css

@@ -0,0 +1,120 @@
+section.comments .avatar {
+  background-position:50%;
+  background-size:cover;
+  border-radius:50%;
+  box-shadow:0 0 2px var(--neutral);
+  margin:0;
+  overflow:hidden
+}
+section.comments #comments-wrapper {
+  margin:1.5em 0;
+  padding:0 var(--card-padding)
+}
+section.comments .comment {
+  display:grid;
+  column-gap:1rem;
+  grid-template-areas:"avatar name" "avatar time" "avatar post" "...... interactions";
+  grid-template-columns:min-content;
+  justify-items:start;
+  margin:0 auto 0 -1em;
+  padding:.5em
+}
+section.comments .comment.comment-reply {
+  margin:0 auto 0 1em
+}
+section.comments .comment .avatar-link {
+  grid-area:avatar;
+  height:4rem;
+  position:relative;
+  width:4rem
+}
+section.comments .comment .avatar-link .avatar {
+  height:100%;
+  width:100%
+}
+section.comments .comment .avatar-link.op::after {
+  background-color:var(--accent-color);
+  border-radius:50%;
+  bottom:-.25rem;
+  color:var(--accent-color-text);
+  content:"✓";
+  display:block;
+  font-size:1.25rem;
+  font-weight:700;
+  height:1.5rem;
+  line-height:1.5rem;
+  position:absolute;
+  right:-.25rem;
+  text-align:center;
+  width:1.5rem
+}
+section.comments .comment .author {
+  align-items:center;
+  display:flex;
+  font-weight:700;
+  gap:.5em;
+  grid-area:name
+}
+section.comments .comment .author .instance {
+  background-color:var(--code-background-color);
+  border-radius:9999px;
+  color:var(--neutral);
+  font-size:smaller;
+  font-weight:400;
+  padding:.25em .75em
+}
+section.comments .comment .author .instance:hover {
+  opacity:.8;
+  text-decoration:none
+}
+section.comments .comment .author .instance.op {
+  background-color:var(--accent-color);
+  color:var(--accent-color-text)
+}
+section.comments .comment .author .instance.op::before {
+  content:"✓";
+  font-weight:700;
+  margin-inline-end:.25em;
+  margin-inline-start:-.25em
+}
+section.comments .comment time {
+  grid-area:time;
+  line-height:1.5rem
+}
+section.comments .comment main {
+  grid-area:post
+}
+section.comments .comment main p:first-child {
+  margin-top:.25em
+}
+section.comments .comment main p:last-child {
+  margin-bottom:0
+}
+section.comments .comment footer {
+  grid-area:interactions
+}
+section.comments .comment footer .faves {
+  color:inherit
+}
+section.comments .comment footer .faves:hover {
+  opacity:.8;
+  text-decoration:none
+}
+section.comments .comment footer .faves::before {
+  color:red;
+  content:"♥";
+  font-size:2rem;
+  margin-inline-end:.25em
+}
+section.comments .comment .emoji {
+  display:inline;
+  height:1.25em;
+  vertical-align:middle;
+  width:1.25em
+}
+section.comments .comment .invisible {
+  display:none
+}
+section.comments .comment .ellipsis::after {
+  content:"…"
+}

v8/mastodoncomments/files/assets/js/mastodon.js

@@ -0,0 +1,183 @@
+let MASTODON_POST_ID
+let MASTODON_ACCOUNT_ID
+let MASTODON_ACCOUNT
+let MASTODON_HOST
+
+function escapeHtml(unsafe) {
+  return unsafe
+		 .replace(/&/g, "&")
+		 .replace(/</g, "&lt;")
+		 .replace(/>/g, "&gt;")
+		 .replace(/"/g, "&quot;")
+		 .replace(/'/g, "&#039;");
+}
+function emojify(input, emojis) {
+  let output = input;
+
+  emojis.forEach(emoji => {
+	let picture = document.createElement("picture");
+
+	let source = document.createElement("source");
+	source.setAttribute("srcset", escapeHtml(emoji.url));
+	source.setAttribute("media", "(prefers-reduced-motion: no-preference)");
+
+	let img = document.createElement("img");
+	img.className = "emoji";
+	img.setAttribute("src", escapeHtml(emoji.static_url));
+	img.setAttribute("alt", `:${ emoji.shortcode }:`);
+	img.setAttribute("title", `:${ emoji.shortcode }:`);
+	img.setAttribute("width", "20");
+	img.setAttribute("height", "20");
+
+	picture.appendChild(source);
+	picture.appendChild(img);
+
+	output = output.replace(`:${ emoji.shortcode }:`, picture.outerHTML);
+  });
+
+  return output;
+}
+
+function loadComments() {
+  let commentsWrapper = document.getElementById('comments-wrapper');
+  document.getElementById('load-comment').innerHTML = "Loading";
+  fetch(`https://${MASTODON_HOST}/api/v1/statuses/${MASTODON_POST_ID}/context`)
+	.then(function(response) {
+		return response.json();
+	})
+	.then(function(data) {
+		let descendants = data['descendants'];
+		if(
+		descendants &&
+		Array.isArray(descendants) &&
+		descendants.length > 0
+		) {
+		commentsWrapper.innerHTML = "";
+
+		descendants.forEach(function(status) {
+			console.log(descendants)
+			if( status.account.display_name.length > 0 ) {
+				status.account.display_name = escapeHtml(status.account.display_name);
+				status.account.display_name = emojify(status.account.display_name, status.account.emojis);
+			} else {
+				status.account.display_name = status.account.username;
+			};
+
+			let instance = "";
+			if( status.account.acct.includes("@") ) {
+				instance = status.account.acct.split("@")[1];
+			} else {
+				instance = `${MASTODON_HOST}`;
+			}
+//			status.account.reply_class = status.in_reply_to_id == `${ MASTODON_ACCOUNT_ID}` ? "reply-original" : "reply-child";
+
+			const isReply = status.in_reply_to_id !== `${ MASTODON_POST_ID }`;
+			console.log(`${status.id} is in reply to id ${ status.in_reply_to_id } (${ MASTODON_POST_ID })`);
+
+			let op = false;
+			if( status.account.acct == `${ MASTODON_ACCOUNT }` ) {
+				op = true;
+			}
+
+			status.content = emojify(status.content, status.emojis);
+
+			let avatarSource = document.createElement("source");
+			avatarSource.setAttribute("srcset", escapeHtml(status.account.avatar));
+			avatarSource.setAttribute("media", "(prefers-reduced-motion: no-preference)");
+
+			let avatarImg = document.createElement("img");
+			avatarImg.className = "avatar";
+			avatarImg.setAttribute("src", escapeHtml(status.account.avatar_static));
+			avatarImg.setAttribute("alt", `@${ status.account.username }@${ instance } avatar`);
+
+			let avatarPicture = document.createElement("picture");
+			avatarPicture.appendChild(avatarSource);
+			avatarPicture.appendChild(avatarImg);
+
+			let avatar = document.createElement("a");
+			avatar.className = "avatar-link";
+			avatar.setAttribute("href", status.account.url);
+			avatar.setAttribute("rel", "external nofollow");
+			avatar.setAttribute("title", `View profile at @${ status.account.username }@${ instance }`);
+			avatar.appendChild(avatarPicture);
+
+			let instanceBadge = document.createElement("a");
+			instanceBadge.className = "instance";
+			instanceBadge.setAttribute("href", status.account.url);
+			instanceBadge.setAttribute("title", `@${ status.account.username }@${ instance }`);
+			instanceBadge.setAttribute("rel", "external nofollow");
+			instanceBadge.textContent = instance;
+
+			let display = document.createElement("span");
+			display.className = "display";
+			display.setAttribute("itemprop", "author");
+			display.setAttribute("itemtype", "http://schema.org/Person");
+			display.innerHTML = status.account.display_name;
+
+			let header = document.createElement("header");
+			header.className = "author";
+			header.appendChild(display);
+			header.appendChild(instanceBadge);
+
+			let permalink = document.createElement("a");
+			permalink.setAttribute("href", status.url);
+			permalink.setAttribute("itemprop", "url");
+			permalink.setAttribute("title", `View comment at ${ instance }`);
+			permalink.setAttribute("rel", "external nofollow");
+			permalink.textContent = new Date( status.created_at ).toLocaleString('en-US', {
+			dateStyle: "long",
+			timeStyle: "short",
+			});
+
+			let timestamp = document.createElement("time");
+			timestamp.setAttribute("datetime", status.created_at);
+			timestamp.appendChild(permalink);
+
+			let main = document.createElement("main");
+			main.setAttribute("itemprop", "text");
+			main.innerHTML = status.content;
+
+			let interactions = document.createElement("footer");
+			if(status.favourites_count > 0) {
+			let faves = document.createElement("a");
+			faves.className = "faves";
+			faves.setAttribute("href", `${ status.url }/favourites`);
+			faves.setAttribute("title", `Favorites from ${ instance }`);
+			faves.textContent = status.favourites_count;
+
+			interactions.appendChild(faves);
+			}
+
+			let comment = document.createElement("article");
+			comment.id = `comment-${ status.id }`;
+			comment.className = isReply ? "comment comment-reply" : "comment";
+			comment.setAttribute("itemprop", "comment");
+			comment.setAttribute("itemtype", "http://schema.org/Comment");
+			comment.appendChild(avatar);
+			comment.appendChild(header);
+			comment.appendChild(timestamp);
+			comment.appendChild(main);
+			comment.appendChild(interactions);
+
+			if(op === true) {
+			comment.classList.add("op");
+
+			avatar.classList.add("op");
+			avatar.setAttribute(
+				"title",
+				"Blog post author; " + avatar.getAttribute("title")
+			);
+
+			instanceBadge.classList.add("op");
+			instanceBadge.setAttribute(
+				"title",
+				"Blog post author: " + instanceBadge.getAttribute("title")
+			);
+			}
+
+			commentsWrapper.innerHTML += DOMPurify.sanitize(comment.outerHTML);
+		});
+		}
+	});
+  }
+  document.getElementById("load-comment").addEventListener("click", loadComments);

v8/mastodoncomments/mastodoncomments.plugin

@@ -0,0 +1,13 @@
+[Core]
+Name = masotodoncomments
+Module = mastodoncomments
+
+[Nikola]
+MinVersion = 8.1.4+
+PluginCategory = CommentSystem
+
+[Documentation]
+Author = Masin Wiedner
+Version = 0.2
+Website = https://plugins.getnikola.com/#cactuscomments
+Description = Use Mastodon https://joinmastodon.org/ as a comment system