Add Mastodon toots to main page

assets/js/mastodon.js

@@ -0,0 +1,85 @@
+const MASTODON_ACCOUNT_ID = '109285376472065471'
+const MASTODON_HOST = 'social.sd.ai'
+
+async function copyElementTextToClipboard(e)
+{
+    const text = e.textContent
+    await navigator.clipboard.write(text)
+
+    e.classList.add('tootClick');
+    setTimeout(() => {
+        e.classList.remove('tootClick');
+    }, 600);
+}
+
+function escapeHtml(unsafe) {
+    return unsafe
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+
+function renderMastodonContent(toots, parentElement) {
+    if (!Array.isArray(toots) || toots.length === 0) {
+        document.getElementById('mastodon-comments-list').innerHTML = "<div class='mastodon-comment'>No comments (yet)!</div>"
+        return
+    }
+    for (const toot of toots) {
+        toot.account.display_name = escapeHtml(toot.account.display_name)
+        console.log(toot)
+        toot.account.emojis.forEach(emoji => {
+            toot.account.display_name = toot.account.display_name.replace(`:${emoji.shortcode}:`,
+                `<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" class="mastodon-emoji" />`);
+        })
+        toot.emojis.forEach(emoji => {
+            toot.content = toot.content.replace(`:${emoji.shortcode}:`,
+                `<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" class="mastodon-emoji" />`);
+        })
+        const comment =
+            `<div class="mastodon-comment">
+               <div class="mastodon-avatar">
+                 <img src="${escapeHtml(toot.account.avatar_static)}" height=60 width=60 alt="${escapeHtml(toot.account.display_name)}'s avatar">
+               </div>
+               <div class="mastodon-body">
+                 <div class="mastodon-meta">
+                   <div class="mastodon-author">
+                     <div class="mastodon-author-link">
+                       <a href="${toot.account.url}" rel="nofollow">
+                         <span>${toot.account.display_name}</span>
+                       </a>
+                       <br/>
+                       <span class="mastodon-author-uid">(@${escapeHtml(toot.account.acct === 's' ? 's@sd.ai' : toot.account.acct)})</span>
+                     </div>
+                   </div>
+                   <div class="toot-link">
+                     <a class="date" href="${toot.uri}" rel="nofollow">
+                      ${toot.created_at.substring(0, 10)}
+                    </a>
+                    <br/>
+                  </div>
+                 </div>
+                 <div class="mastodon-comment-content">
+                   ${toot.content}
+                   <span class="tootlink">${toot.uri}</span>
+                 </div>
+              </div>
+            </div>`
+        const child = DOMPurify.sanitize(comment, {'RETURN_DOM_FRAGMENT': true});
+        const links = child.querySelectorAll('.tootlink');
+        for (const link of links) {
+            link.onclick = function() { return copyToClipboard(this); }
+        }
+        parentElement.appendChild(child);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", async (event) => {
+    if (document.getElementsByClassName('gh-sidebar').length > 0) {
+        const element = document.getElementById('mastodon-comments-list')
+        const response = await fetch(`https://${MASTODON_HOST}/api/v1/accounts/${MASTODON_ACCOUNT_ID}/statuses?exclude_replies=true&exclude_reblogs=true`)
+        const content = await response.json()
+        return renderMastodonContent(content, element)
+    }
+})

assets/js/theme.js

@@ -18,7 +18,6 @@ function changeFavicon() {
 }
 
 function changeTheme(useLight) {
-  console.log({ useLight })
   document.documentElement.classList.remove('light-theme', 'dark-theme', 'has-light-text', 'has-dark-text')
   if (useLight) {
     document.documentElement.classList.add('light-theme', 'has-dark-text')
@@ -39,8 +38,6 @@ themeToggle.addEventListener("click", () => {
   changeTheme(document.documentElement.classList.contains('dark-theme'))
 });
 
-console.log({ localTheme, isOSLight })
-
 if (localTheme === "light") {
   changeTheme(true)
 } else {