melawy-site/public/assets/js/mastodon.js

async function fetchData(log, tpl) {
    var log = document.getElementById('log');

    var server_address = `techhub.social`;

    // const response = await fetch('json/posts.json');

    const response = await fetch(`https://${server_address}/api/v1/accounts/111518136987654656/statuses`);

    const data = await response.json();

    data.forEach(obj => {
        let post_tpl = tpl;
        var media_link = "";
        Object.entries(obj).forEach(([key, value]) => {
            if(key == "id") {
                post_tpl = post_tpl.replace(/{post_id}/g, `${value}`);
            }

            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}`);
                post_tpl = post_tpl.replace(/{account_name}/g, `<a href="https://${server_address}/@${value.username}" target="_blank">@${value.username}@${server_address}</a>`);
                // post_tpl = post_tpl.replace('{avatar}', `<img src="${value.avatar}" alt="${value.username}'s Avatar" style="width:48px;height:48px;">`);
                post_tpl = post_tpl.replace(/{avatar}/g, `${value.avatar}`);
                post_tpl = post_tpl.replace(/{profile_link}/g, `${value.url}`);
            }

            if(key == "content") {
                post_tpl = post_tpl.replace('{content}', `${value}`);
            }

            if(key == "media_attachments") {
                value.forEach(obj1 => {
                    Object.entries(obj1).forEach(([k, v]) => {
                        if(k == "preview_url") {
                            media_link += `<img src="${v}" full_src="${obj1.url}" class="fullscreen" onclick="showFullscreenImage(this);">`;
                        }

                    });
                });

                post_tpl = post_tpl.replace('{media_attachments}', `${media_link}`);
            }

            if(key == "created_at") {
                post_tpl = post_tpl.replace(/{created_at}/g, `${value}`);
            }

            if(key == "edited_at") {
                post_tpl = post_tpl.replace(/{edited_at}/g, `${value}`);
            }

            if(key == "favorites_count") {
                post_tpl = post_tpl.replace(/{favorites_count}/g, `${value}`);
            }

            if(key == "replies_count") {
                post_tpl = post_tpl.replace(/{replies_count}/g, `${value}`);
            }

            if(key == "reblogs_count") {
                post_tpl = post_tpl.replace(/{reblogs_count}/g, `${value}`);
            }

            // log.innerHTML  = log.innerHTML + `${key} ${value}` + '<br>';
        });
        log.innerHTML += `${post_tpl}<br>`;
    });
}
async function openInNewTab(url) {
    window.open(url, '_blank').focus();
}

async function getLog() {
    let log = document.getElementById('log');
    if(log == null) {
        setTimeout(getLog, 1000);
    } else {
        getMastodonPage();
    }
}
async function getMastodonPage() {
    let log = document.getElementById('log');

    let tplUrl = 'json/mastodon-tpl.html';
    let response = await fetch(tplUrl);
    var tpl = "";

    log.innerHTML = "";

    const controller = new AbortController();
    const signal = controller.signal;

    // Cancel the fetch request in 500ms
    setTimeout(() => controller.abort(), 500);

    try {
        const response = await fetch(tplUrl, {signal});
        tpl = await response.text();

    } catch(error) {
        // DOMException: The user aborted a request.
        console.log('Error: ', error);
        log.innerHTML = "<p>1) Ой всё сломалось :(</p>";
    }

    if(!tpl) {
        log.innerHTML = "<p>2) Ой всё сломалось :(</p>";
    }

    fetchData(log, tpl);
}

let query = window.location.pathname;

if (qquery == "/" || uery == "/news" || query == "/mastodon") {
    getLog();
}