website/js/customElements/footer.js

class Footer extends HTMLElement {
    constructor() {
        super();

        this.socialButtons = [
            {
                "link": "//www.thingiverse.com/jonasled/designs/",
                "icon": "3d_model",
            },
            {
                "link": "//paypal.me/jonasled",
                "icon": "paypal",
            },
            {
                "link": "//matrix.to/#/@jonasled:jonasled.de",
                "icon": "matrix"
            },
            {
                "link": "//twitter.com/jonasled1",
                "icon": "twitter"
            }
        ];
        this.links = [
            {
            "name": "Datenschutzerklärung",
            "link": "/datenschutzerklaerung.html"
            },
            {
            "name": "Bildquellen",
            "link": "/bildquellen.html"
            },
            {
            "name": "Impressum",
            "link": "/impressum.html"
            },
            {
            "name": "Quellcode",
            "link": "//gitlab.jonasled.de/jonasled/website"
            }
        ]
        const footer = document.createElement("footer");
        this.appendChild(footer);

        const blueBar = document.createElement("div");
        blueBar.id = "blueBar";
        footer.appendChild(blueBar);

        const footerContent = document.createElement("div");
        footerContent.id = "footerContent";
        footer.appendChild(footerContent);

        const footerLinks = document.createElement("div");
        footerContent.appendChild(footerLinks);

        this.links.forEach(link => {
            const linkElement = document.createElement("a");
            linkElement.href = link["link"];
            linkElement.innerText = link["name"];
            footerLinks.appendChild(linkElement);

            const linebreak = document.createElement("br");
            footerLinks.appendChild(linebreak);
        });

        const footerPostDiv = document.createElement("div");
        footerPostDiv.id = "newestPost";
        footerContent.appendChild(footerPostDiv);

        const postHeadline = document.createElement("h3");
        postHeadline.innerText = "Neueste Beiträge";
        footerPostDiv.appendChild(postHeadline);

        const footerPost = document.createElement("jl-footer_blog");
        footerPostDiv.appendChild(footerPost);

        const footerIconDiv = document.createElement("div");
        footerIconDiv.className = "center";
        footerContent.appendChild(footerIconDiv);

        const socialButtonsContainer = document.createElement("p");
        socialButtonsContainer.className = "center";
        footerIconDiv.appendChild(socialButtonsContainer);

        this.socialButtons.forEach(button => {
            const link = document.createElement("a");
            link.href = button["link"];
            socialButtonsContainer.appendChild(link)

            const icon = document.createElement("jl-svg");
            icon.setAttribute("data-name", button["icon"]);
            link.appendChild(icon);
        });
    }
}

customElements.define("jl-footer", Footer);