website/js/customElements/blogFooter.js

class blogFooter extends HTMLElement {
    connectedCallback(){
        this.getBlogEntries();
    }

    async getBlogEntries() {
        let ul = document.createElement("ul");
        this.appendChild(ul);
        var graphql = JSON.stringify({
        query: 'query($count: Int!) { blogPosts(count: $count) { title id }}',
        variables: {
            "count": 5
        }
        })
        var requestOptions = {
        method: 'POST',
        body: graphql,
        headers: { 'Content-Type': 'application/json' }
        };
        let posts = (await (await fetch("/API/graphql.php", requestOptions)).json()).data.blogPosts;
        posts.forEach((element) => {
            let li = document.createElement("li");
            let a = document.createElement("a");
            a.href = "/post.html?id=" + element["id"];
            a.innerText = element["title"];
            li.appendChild(a);
            ul.appendChild(li);
        });
    }
}

customElements.define("jl-footer_blog", blogFooter);