Add link to plant question hachyderm post

Author: unixorn

404.html

@@ -262,6 +262,111 @@ <h3 id="stem-three">Stem three<a hidden class="anchor" aria-hidden="true" href="
   </div>
   <div>
 
+<div class="article-content">
+  <h2>Comments</h2>
+  <p>You can use your Mastodon account to reply to this<a class="button" href="https://hachyderm.io/@unixorn/112899281969429083">post</a></p>
+  <p><button class="button" id="replyButton" href="https://hachyderm.io/@unixorn/112899281969429083">Reply</button></p>
+  <dialog id="toot-reply" class="mastodon" data-component="dialog">
+    <h3>Reply to unixorn'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://hachyderm.io/@unixorn/112899281969429083">
+      <button class="button" id="copyButton">Copy</button>
+      <button class="button" id="cancelButton">Close</button>
+    </div>
+  </dialog>
+  <p id="mastodon-comments-list"><button id="load-comment" class="button">Load comments</button></p>
+  <noscript><p>You need JavaScript to view the comments.</p></noscript>
+  <script src="https://unixorn.github.io/assets/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://hachyderm.io/@unixorn/112899281969429083');
+    });
+
+    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://hachyderm.io/api/v1/statuses/112899281969429083/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 == "112899281969429083" ? "reply-original" : "reply-child";
+                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 viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="none" transform="rotate(180)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path stroke="#535358" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.608 12.526l7.04-6.454C13.931 4.896 16 5.806 16 7.546V11c13 0 11 16 11 16s-4-10-11-10v3.453c0 1.74-2.069 2.65-3.351 1.475l-7.04-6.454a2 2 0 010-2.948z"></path> </g></svg></div>
+                    <div class="mastodon-comment">
+                     <div class="avatar">
+                       <img src="${escapeHtml(reply.account.avatar_static)}" height=60 width=60 alt="">
+                     </div>
+                     <div class="content">
+                       <div class="author">
+                         <a href="${reply.account.url}" rel="nofollow">
+                           <span>${reply.account.display_name}</span>
+                           <span class="disabled">${escapeHtml(reply.account.acct)}</span>
+                         </a>
+                         <a class="date" href="${reply.uri}" rel="nofollow">
+                           ${reply.created_at.substr(0, 10)}
+                         </a>
+                       </div>
+                       <div class="mastodon-comment-content">${reply.content}</div>
+                     </div>
+                   </div>
+                  </div>`;
+                document.getElementById('mastodon-comments-list').appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true}));
+              });
+          } else {
+            document.getElementById('mastodon-comments-list').innerHTML = "<p>No comments found</p>";
+          }
+        });
+      });
+  </script>
+</div>
+
   </div>
 
   <footer class="post-footer">