scripts/overview-gallery.js

// Sample database of items
const items = [
    {
        title: 'EvalEval Workshop',
        tags: ['privacy', 'bias', 'environment', 'measuring', 'society'],
        image: 'images/hf-logo.png',
        link: 'projects.html#Evaluation',
        description: 'The EvalEval workshop is organized by our collaborative Social Impact Evaluation project.'
    },
    {
        title: 'Legal Hackathons',
        tags: ['regulation', 'education', 'privacy', 'labor', 'society'],
        image: 'images/hf-logo.png',
        link: 'projects.html#Legal',
        description: 'The Legal Hackathons produce reports analyzing existing and proposed regulation.'
    },
    {
        title: 'AI Energy Scores',
        tags: ['environment', 'measuring', 'society'],
        image: 'images/hf-logo.png',
        link: 'projects.html#Energy',
        description: 'This project works toward standardized reporting of energy costs of AI systems.'
    },
    {
        title: 'Topic Card: Social Systems',
        tags: ['education', 'journalism', 'labor', 'society'],
        image: 'images/hf-logo.png',
        link: 'topics.html#Systems',
        description: 'This topic card on the Impact of AI on Social Systems provides descriptions and resources.'
    },
    {
        title: '🤗 Policy Writings',
        tags: ['regulation', 'openness', 'privacy', 'society'],
        image: 'images/hf-logo.png',
        link: 'projects.html#Policy',
        description: 'Policy-relevant writings, including comments on regulation, responses from RFIs, etc.'
    },
];

// Populate the tag list in the sidebar
const tagList = document.getElementById('tagList');
const uniqueTags = [...new Set(items.flatMap(item => item.tags))];
uniqueTags.forEach(tag => {
    const li = document.createElement('li');
    li.textContent = tag;
    li.className = 'tagListItem'
    li.id = `li-${tag}`
    li.addEventListener('click', () => displayItemsByTag(tag));
    tagList.appendChild(li);
});

// Function to display items based on selected tag
function displayItemsByTag(selectedTag) {
    localStorage.setItem("gallery-tag", selectedTag)
    const itemContainer = document.getElementById('itemGallery');
    itemContainer.innerHTML = '';
    
    const filteredItems = items.filter(item => item.tags.includes(selectedTag));
    
    let itemCount = 0;
    filteredItems.forEach(item => {
        itemCount = itemCount + 1;
        const itemDiv = document.createElement('div');
        itemDiv.className = 'item';
        itemDiv.id = `item-${itemCount}`;
        itemDiv.style.backgroundImage = `url(${item.image})`;
        itemDiv.innerHTML = `
            <h3><a href="${item.link}">${item.title}</a></h3>
            <p>${item.description}</p>
        `;
        itemContainer.appendChild(itemDiv);
    });

    const allTagListItems = document.getElementsByClassName('tagListItem')
    for (const tli of allTagListItems) {
        if (tli.id === `li-${selectedTag}`) {
            tli.style.backgroundColor  = "#cbf5e1";
        } else {
            tli.style.backgroundColor = "White";
        }
    }

    const showing = document.getElementById('sidebarShowing');
    showing.innerHTML = `Showing projects relevant to: <strong>${selectedTag}</strong>`
}

// Start with society
if (!localStorage.getItem("gallery-tag")) {
    displayItemsByTag("society");
} else {
    const selectedTag = localStorage.getItem("gallery-tag");
    displayItemsByTag(selectedTag);
}