main.js

export function renderSocialLinks(socials, container, documentRoot = document) {
    const links = socials.map(({ name, url, icon }) => {
        const link = documentRoot.createElement("a");
        link.className = "social-link";
        link.href = url;
        link.target = "_blank";
        link.rel = "noopener noreferrer";
        link.setAttribute("aria-label", name);

        const image = documentRoot.createElement("img");
        image.src = icon;
        image.alt = "";
        link.append(image);
        return link;
    });

    container.replaceChildren(...links);
}

async function loadSocialLinks() {
    const container = document.getElementById("social-links");

    try {
        const response = await fetch("./socials.json");
        if (!response.ok) throw new Error(`Social links request failed: ${response.status}`);
        renderSocialLinks(await response.json(), container);
    } catch (error) {
        console.error(error);
        container.textContent = "Social links are unavailable right now.";
    }
}

if (typeof document !== "undefined") {
    loadSocialLinks();
    document.getElementById("fader").classList.add("fade-out");
}