const topicsArray = document.getElementById('topics-gallery');

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

for (topicName of topics) {
    fetchAndParseYAML(`resources/topics/${topicName}.yaml`, addTopicCard);
}