const projectsArray = document.getElementById('projects-gallery');

function addProjectCard(projectObject) {
    const projectCard = document.createElement('article');
    projectCard.className = "content-card";
    projectCard.id = `project-${projectName}`;
    projectCard.appendChild(Object.assign(document.createElement('h3'), {textContent: projectObject["title-short"], className: "card-title"}));
    projectCard.appendChild(Object.assign(document.createElement('p'), {textContent: projectObject.abstract, className: "card-abstract"}));
    const badges = Object.assign(document.createElement('div'), {className: "badges"});
    for (tag of projectObject.tags) {
        badges.appendChild(Object.assign(document.createElement('span'), {className: `badge ${tag}`, textContent: tag}));
    }
    projectCard.appendChild(badges);
    projectsArray.appendChild(projectCard);
}

for (projectName of projects) {
    fetchAndParseYAML(`resources/projects/${projectName}.yaml`, addProjectCard);
}