Added comment system plugin mastodoncomments

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/css/mastodon.sd.css

@@ -0,0 +1,91 @@
+.tootlink-tip {
+    font-size: 0.9em;
+    padding: 1em;
+    padding-top: 0.3em;
+}
+.mastodon-comments-top {
+    padding-bottom: 1.5em;
+}
+.mastodon-comment {
+    background-color: var(--background-color);
+    border-radius: var(--card-border-radius);
+    padding: 10px;
+    margin-bottom: 1rem;
+    display: flex;
+    border-top: 1px solid var(--background-secondary);
+    .mastodon-body {
+        flex-grow: 1;
+    }
+    .mastodon-avatar {
+        flex-shrink: 1;
+    }
+    .mastodon-avatar img {
+        margin-right: 1rem;
+        min-width: 60px;
+    }
+    .mastodon-meta {
+        padding-top: 0;
+        display: flex;
+        .mastodon-author {
+            flex-grow: 1;
+            white-space: nowrap;
+            .mastodon-author-uid {
+                font-size: 80%;
+                color: var(--color-secondary-text);
+            }
+        }
+        .toot-link {
+            flex-shrink: 1;
+            text-align: right;
+        }
+    }
+    .mastodon-comment-content {
+        padding-top: 10px;
+    }
+    .disabled {
+        color: var(--color-secondary-text)
+    }
+}
+span.tootlink {
+    font-size: 0.7em;
+    font-family: monospace;
+    padding: 0.2em 0.4em;
+    cursor: pointer;
+    border: 1px solid var(--background-secondary)
+}
+a.date {
+    font-size: 0.9em;
+    color: var(--color-secondary-text)
+}
+span.tootlink::after {
+    content: "\f0c5";
+    font-family: "Font Awesome 6 Free";
+    font-weight: 900;
+    padding-left: 4px;
+}
+.tootClick {
+    animation: tootClickFrames .6s linear;
+}
+
+@keyframes tootClickFrames {
+    0% {
+        background-color: var(--background-secondary);
+    }
+    100% {
+        background-color: var(--background-color);
+    }
+}
+.mastodon-emoji {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+}
+.mastodon-comment-content p:first-child {
+    margin-top: 0;
+}
+#toot-link-top {
+    color: var(--ghost-accent-color);
+    text-decoration: underline;
+}
+
+