Update

public/assets/js/mastodon.js

@@ -1,33 +1,36 @@
-let tplUrl = 'json/mastodon-tpl.html';
-let response = await fetch(tplUrl);
-var tpl = "";
-let log = document.getElementById('log');
-log.innerHTML = "";
+let query = window.location.pathname;
 
-const controller = new AbortController();
-const signal = controller.signal;
+if(query == "/mastodon") {
+    let tplUrl = 'json/mastodon-tpl.html';
+    let response = await fetch(tplUrl);
+    var tpl = "";
+    let log = document.getElementById('log');
+    log.innerHTML = "";
 
-// Cancel the fetch request in 500ms
-setTimeout(() => controller.abort(), 500);
+    const controller = new AbortController();
+    const signal = controller.signal;
 
-try {
-    const response = await fetch(tplUrl, { signal });
+    // Cancel the fetch request in 500ms
+    setTimeout(() => controller.abort(), 500);
+
+    try {
+        const response = await fetch(tplUrl, {signal});
         tpl = await response.text();
 
-} catch (error) {
+    } catch(error) {
         // DOMException: The user aborted a request.
-    console.log('Error: ', error)
+        console.log('Error: ', error);
         log.innerHTML = "<p>1) Ой всё сломалось :(</p>";
-}
+    }
 
-if (!tpl) {
+    if(!tpl) {
         log.innerHTML = "<p>2) Ой всё сломалось :(</p>";
-}
-// else {
-//     log.innerHTML = tpl;
-// }
+    }
+    // else {
+    //     log.innerHTML = tpl;
+    // }
 
-async function fetchData() {
+    async function fetchData() {
         var log = document.getElementById('log');
 
         var server_address = `techhub.social`;
@@ -42,11 +45,11 @@ async function fetchData() {
             let post_tpl = tpl;
             var media_link = "";
             Object.entries(obj).forEach(([key, value]) => {
-            if (key == "id") {
+                if(key == "id") {
                     post_tpl = post_tpl.replace(/{post_id}/g, `${value}`);
                 }
 
-            if (key == "account") {
+                if(key == "account") {
                     post_tpl = post_tpl.replace(/{id}/g, `${value.id}`);
                     post_tpl = post_tpl.replace(/{name}/g, `${value.display_name}`);
                     post_tpl = post_tpl.replace(/{server_address}/g, `${server_address}`);
@@ -56,14 +59,14 @@ async function fetchData() {
                     post_tpl = post_tpl.replace(/{profile_link}/g, `${value.url}`);
                 }
 
-            if (key == "content") {
+                if(key == "content") {
                     post_tpl = post_tpl.replace('{content}', `${value}`);
                 }
 
-            if (key == "media_attachments") {
+                if(key == "media_attachments") {
                     value.forEach(obj1 => {
                         Object.entries(obj1).forEach(([k, v]) => {
-                        if (k == "preview_url") {
+                            if(k == "preview_url") {
                                 media_link += `<img src="${v}">`;
                             }
 
@@ -73,23 +76,23 @@ async function fetchData() {
                     post_tpl = post_tpl.replace('{media_attachments}', `${media_link}`);
                 }
 
-            if (key == "created_at") {
+                if(key == "created_at") {
                     post_tpl = post_tpl.replace(/{created_at}/g, `${value}`);
                 }
 
-            if (key == "edited_at") {
+                if(key == "edited_at") {
                     post_tpl = post_tpl.replace(/{edited_at}/g, `${value}`);
                 }
 
-            if (key == "favorites_count") {
+                if(key == "favorites_count") {
                     post_tpl = post_tpl.replace(/{favorites_count}/g, `${value}`);
                 }
 
-            if (key == "replies_count") {
+                if(key == "replies_count") {
                     post_tpl = post_tpl.replace(/{replies_count}/g, `${value}`);
                 }
 
-            if (key == "reblogs_count") {
+                if(key == "reblogs_count") {
                     post_tpl = post_tpl.replace(/{reblogs_count}/g, `${value}`);
                 }
 
@@ -97,10 +100,11 @@ async function fetchData() {
             });
             log.innerHTML += `${post_tpl}<br>`;
         });
-}
+    }
 
-async function openInNewTab(url) {
+    async function openInNewTab(url) {
         window.open(url, '_blank').focus();
-}
+    }
 
-fetchData();
+    fetchData();
+}

public/index.html

@@ -287,6 +287,8 @@
 
     <script src="assets/js/script.js"></script>
 
+    <script src="assets/js/mastodon.js" type="module" async="async"></script>
+
     <script>
 
     </script>

public/mastodon.tpl.html

@@ -2,5 +2,4 @@
         <link rel="stylesheet" href="assets/css/mastodon.css" media="all">
 
         <div id="log"></div>
-        <script src="assets/js/mastodon.js" type="module" async="async"></script>
       </div><!-- /.container -->