website/_includes/addl-post-fns.html

<!-- This is mainly for the 'post.html' -->
<script>
    function insertHeaderLink() {
        const HEADINGS = document.querySelectorAll(`article.post div[itemprop="articleBody"] h1[id], h2[id]`);
        const MAIN_NODE_LIST = document.querySelector('div.post-content[itemprop="articleBody"]');
        if (HEADINGS.length === 0) return null;

        // creating an element containing the links to the selected headers
        const LIST_CONTAINER = document.createElement('div');
        let listOfTopics = document.createElement("ul");
        LIST_CONTAINER.textContent = `"{{ page.title }}" Outline:`;
        LIST_CONTAINER.setAttribute("id", "list-container")

        HEADINGS.forEach((header) => {
            // Filling up the list
            let listItem = document.createElement("li");
            const LINK_SETTER = `<a class="heading-links" href="#${header.id}">${header.innerHTML}</a>`;
            header.innerHTML = LINK_SETTER, listItem.innerHTML = LINK_SETTER;
            listItem.querySelector("a").setAttribute("class", "list-links");
            listOfTopics.appendChild(listItem);
        });

        LIST_CONTAINER.appendChild(listOfTopics);
        MAIN_NODE_LIST.insertBefore(LIST_CONTAINER, MAIN_NODE_LIST.firstChild);
    }

    function insertCenterTags() {
        const TAGS  = document.querySelectorAll('iframe');
        
        TAGS.forEach((tag) => {
            const center = document.createElement('center');
            tag.appendChild(center)
        })
    }

    function resourcesLink() {
        const RESOURCES = document.querySelector("article.post .post-content h2#resources");
        if (RESOURCES === null) return null;
        else if (RESOURCES.nextElementSibling.tagName === 'UL') {
            const LIST_OF_HEADERS = Array.from(RESOURCES.nextElementSibling.children);
            console.log(LIST_OF_HEADERS)
            LIST_OF_HEADERS.forEach(source_li => {
                const INNER_LIST_OF_LINKS = source_li.children[1];
                if (INNER_LIST_OF_LINKS === undefined) return null;
                INNER_LIST_OF_LINKS.setAttribute("class", "resources-link");
                const LIST_OF_LINKS = Array.from(INNER_LIST_OF_LINKS.children);
                console.log(LIST_OF_LINKS);
                LIST_OF_LINKS.forEach(li => {
                    li.children[0].innerHTML = `<img src="{{ 'assets/main/icons/open-in-new-window.svg' | relative_url}}" style="height: 1em; width: 1em; padding: 0;"><span style="margin-left: 0.75em">${li.children[0].innerHTML}</span>`;
                    li.children[0].setAttribute("target", "_blank");
                })
            });
        };
    }

    insertHeaderLink();
    // insertCenterTags();
    resourcesLink();

</script>