Adding a new version of Mastodon comments

README.md

@@ -75,12 +75,16 @@ FEDIRINGURL = ''   # This is needed because the SITEURL includes the https:// an
 #
 SHOW_BOTTOM_IMAGE = False # This defaults as false, change to true if you want to show the article image at the bottom
 SHOW_TOP_IMAGE = True # This shows the article image at the top before the content. It will not be included in the ATOM or RSS feed.
+
 # Commenting
 #
+
+# Mastodon Comments
 MASTODON_COMMENTS = False
-MASTODON_EMBED = '' # This is where you add the Mastodon Embed code, it needs a overhaul so I will link to the repo when I have time to play with it.
-TWITTER_COMMENTS = True
-# I'm using HashOver for comments, but there are a few different ones that you can use.
+MASTODON_HOST = 'url.tld
+MASTODON_USER = 'user'
+
+# If you use a hosted commenting engine like hashover, commento, etc.
 COMMENTS = False
 COMMENT_EMBED ='' # This is the emdbed code that you need for the comments.
 
@@ -114,6 +118,29 @@ So, the below set up is for this [post](https://jeffmackinnon.com/20230511-new_f
 :image_alt: Macro photo of a flower.
 
 ```
+### Mastodon comments
+
+To use the mastodon commenting system you will need to edit the article with the mastodon id of where it is posted.
+
+For example, for this [post with flowers](https://jeffmackinnon.com/20230704-sea-of-white-flowers.html) I have the following tags in the post:
+
+```
+:date: 2023-07-04
+:author: Jeff
+:category: microblog
+:tags: flowers, year-of-flowers
+:slug: 20230704-sea-of-white-flowers
+:status: published
+:image: {photo}microblog/865A2210.JPG
+:alt_text_image: white flowers with yellow center.
+:mastodon_post_id: 110656661657103654
+
+```
+
+The critical one here is the `:mastodon_post_id:` with the ID of the mastodon post.
+
+In the future this may be automatic using a plugin and some fancy JS.
+
 
 ## RoadMap
 
@@ -122,7 +149,6 @@ In order of percieved importance, but not in the order that I will get them done
 - [ ] Make installable
 - [X] Create custom colours
 - [ ] Figure out how to create a Dark Mode
-- [ ] Add paths for the .html files so I can take them out of the theme themselves.
 
 ### Roadmap notes
 

static/css-include/pelican.css

@@ -232,8 +232,77 @@ box-shadow: 0 0 10px rgba(0,0,0,.5);
     max-width: 650px;
 }
 
+/*************************************************/
 
+/* Mastodon Comments */
+.mastodon-comment {
+    background-color:var(--body-background);
+    border-radius:var(--card-border-radius);
+    padding:var(--card-padding);
+    margin-bottom:1rem;
+    display:flex;
+    gap:1rem;
+    flex-direction:column;
+    flex-grow:2
+   }
+   .mastodon-comment .comment {
+    display:flex;
+    flex-direction:row;
+    gap:1rem;
+    flex-wrap:true
+   }
+   .mastodon-comment .comment-avatar img {
+    width:6rem
+   }
+   .mastodon-comment .content {
+    flex-grow:2
+   }
+   .mastodon-comment .comment-author {
+    display:flex;
+    flex-direction:column
+   }
+   .mastodon-comment .comment-author-name {
+    font-weight:700
+   }
+   .mastodon-comment .comment-author-name a {
+    display:flex;
+    align-items:center
+   }
+   .mastodon-comment .comment-author-date {
+    margin-left:auto
+   }
+   .mastodon-comment .disabled {
+    color:var(--accent-color)
+   }
+   .mastodon-comment-content p:first-child {
+    margin-top:0
+   }
 
+   .mastodon {
+    --dlg-bg:#282c37;
+    --dlg-w:600px;
+    --dlg-color:#9baec8;
+    --dlg-button-p:0.75em 2em;
+    --dlg-outline-c:#00D9F5
+   }
+
+.mastodon-wrapper {
+    display: flex;
+    gap: 3rem;
+    flex-direction: row;
+  }
+
+.mastodon-comment-content p:first-child {
+    margin-top: 0;
+}
+
+.mastodon {
+  --dlg-bg: #282c37;
+  --dlg-w: 600px;
+  --dlg-color: #9baec8;
+  --dlg-button-p: 0.75em 2em;
+  --dlg-outline-c: #00D9F5;
+}
 
 
 /* -- admonitions ----------------------------------------------------------- */

templates/article.html

@@ -159,10 +159,11 @@
       </div>
       {% endif %}
 
-      {% if MASTODON_COMMENTS is sameas True %}
-      <div class="comments">
+
+      {% if MASTODON_COMMENTS == True and article.mastodon_post_id is defined %}
+            <div class="comments">
         <h3>Comment on Mastodon</h3>
-        {{ MASTODON_EMBED }}
+        {% include 'include/mastodon-comments.html' %}
       </div>
       {% endif %}
 

templates/include/mastodon-comments.html

@@ -0,0 +1,106 @@
+  <p>You can use your Mastodon account to reply to this <a class="link" href="https://{{ MASTODON_HOST }}/@{{ MASTODON_USER }}/{{ article.mastodon_post_id }}">post</a>.</p>
+  <p><button id="replyButton" href="https://{{ MASTODON_HOST }}/@{{ MASTODON_USER }}/{{ article.mastodon_post_id }}">Reply</button></p>
+  <p id="mastodon-comments-list"><button id="load-comment">Load comments</button></p>
+  <dialog id="toot-reply" class="mastodon" data-component="dialog">
+    <h3>Reply to {{ MASTODON_USER }}'s post</h3>
+    <p>
+      With an account on the Fediverse or Mastodon, you can respond to this post.
+      Since Mastodon is decentralized, you can use your existing account hosted by another Mastodon server or compatible platform if you don't have an account on this one.
+    </p>
+    <p>Copy and paste this URL into the search field of your favourite Fediverse app or the web interface of your Mastodon server.</p>
+    <div class="copypaste">
+      <input type="text" readonly="" value="https://{{ MASTODON_HOST }}/@{{ MASTODON_USER }}/{{ article.mastodon_post_id }}">
+      <button class="button" id="copyButton">Copy</button>
+      <button class="button" id="cancelButton">Close</button>
+    </div>
+    <p><a href="https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/">Learn how @carlschwan wrote the code that
+        loads Mastodon posts into this webpage here.</a></p>
+  </dialog>
+  <noscript><p>You need JavaScript to view the comments.</p></noscript>
+  <!-- <script src="/assets/js/purify.min.js"></script> -->
+  <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/purify.min.js"></script>
+
+  
+  <script type="text/javascript">
+
+    const dialog = document.querySelector('dialog');
+
+    document.getElementById('replyButton').addEventListener('click', () => {
+      dialog.showModal();
+    });
+
+    document.getElementById('copyButton').addEventListener('click', () => {
+      navigator.clipboard.writeText('https://{{ MASTODON_HOST }}/@{{ MASTODON_USER }}/{{ article.mastodon_post_id }}');
+    });
+
+    document.getElementById('cancelButton').addEventListener('click', () => {
+      dialog.close();
+    });
+
+    dialog.addEventListener('keydown', e => {
+      if (e.key === 'Escape') dialog.close();
+    });
+
+    const dateOptions = {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+    };
+
+    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://{{ MASTODON_HOST }}/api/v1/statuses/{{ article.mastodon_post_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.reply_class = reply.in_reply_to_id == "{{ article.mastodon_post_id }}" ? "reply-original" : "reply-child";
+                reply.created_date = new Date(reply.created_at);
+                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-wrapper">
+  <div class="comment-level ${reply.account.reply_class}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" stroke="currentColor" d="m 307,477.17986 c -11.5,-5.1 -19,-16.6 -19,-29.2 v -64 H 176 C 78.8,383.97986 -4.6936293e-8,305.17986 -4.6936293e-8,207.97986 -4.6936293e-8,94.679854 81.5,44.079854 100.2,33.879854 c 2.5,-1.4 5.3,-1.9 8.1,-1.9 10.9,0 19.7,8.9 19.7,19.7 0,7.5 -4.3,14.4 -9.8,19.5 -9.4,8.8 -22.2,26.4 -22.2,56.700006 0,53 43,96 96,96 h 96 v -64 c 0,-12.6 7.4,-24.1 19,-29.2 11.6,-5.1 25,-3 34.4,5.4 l 160,144 c 6.7,6.2 10.6,14.8 10.6,23.9 0,9.1 -3.9,17.7 -10.6,23.8 l -160,144 c -9.4,8.5 -22.9,10.6 -34.4,5.4 z" />
+  </svg></div>
+  <div class="mastodon-comment">
+    <div class="comment">
+      <div class="comment-avatar"><img src="${escapeHtml(reply.account.avatar_static)}" alt=""></div>
+      <div class="comment-author">
+        <div class="comment-author-name"><a href="${reply.account.url}" rel="nofollow">${reply.account.display_name}</a></div>
+        <div class="comment-author-reply"><a href="${reply.account.url}" rel="nofollow">${escapeHtml(reply.account.acct)}</a></div>
+      </div>
+      <div class="comment-author-date">${reply.created_date.toLocaleString(navigator.language, dateOptions)}</div>
+    </div>
+    <div class="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>

templates/index.html

@@ -54,9 +54,6 @@
     <h2>Articles</h2>
 </header>
 {% endblock %}
-
 {% include 'include/paginated_posts.html' %}
-
-
 </section><!-- /#content -->
 {% endblock content %}