community.html

---
layout: community
title: "Community stories"
summary: "Practical stories and community advice about working with data."
image: /images/opengraph/community-stories.jpg
---

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>

<div>
    <p class="small text-light-grey text-centered mb-25 mt-5">Explore by Category</p>
    <div class="row filter-list flex flex-row center-xs">
        <span id="Most Recent-filter" class="category-tag filter-button filter-selected mr-25 mb-25 flex flex-row align-center">
            Most Recent
            <span id="remove-filter" class="mini-circle-xs pointer-events-none bg-white text-brand-dark flex align-center justify-center ml-1"><img src="/images/close.svg" alt="Close" width="6" height="6" class="no-zoom"></span>
        </span>
        {% assign filters = '' %}
        {% for post in site.community-posts %}
            {% assign filters = filters | append: post.category_filters | append: ',' %}
        {% endfor %}
        {% assign filters = filters | split: ',' | uniq %}
        {% for filter in filters %}
        <span id="{{filter}}-filter" class="category-tag filter-button mr-25 mb-25 flex flex-row align-center">{{filter}}</span>
        {% endfor %}
    </div>
</div>
<div id="story-list" class="mb-6">
    <div class="row list">

        {% for post in sorted_posts %}
        <div class="story col-xs-12 col-sm-6 col-md-4 p-25">
            <a class="small-card hover-card small-vertical-raise hover-shadow bg-white" href="{{post.url}}">
                <div class="flex flex-row justify-between align-center">
                    {% assign category_filters = post.category_filters | split: ',' %}
                    <span class="category-tag">{{category_filters[0]}}</span>
                    <p class="xs text-light-grey my0">{{post.read_time}}</p>
                </div>
                <p class="fw-900 mt-25 mb-2 small">{{post.title}}</p>
                <div class="flex flex-row align-center">
                    <img
                        class="circle mr05"
                        src="{{post.author_img}}"
                        srcset="{{post.author_img}} 1x"
                        width="36px"
                        height="36px"
                        alt="photo of {{post.author}}"
                    />
                    <div class="flex flex-column justify-around py05">
                        <p class="xs dt my0"><strong>{{post.author}}</strong></p>
                        <p class="xs my0 text-light-grey">{{post.organization}}</p>
                    </div>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
    <div class="flex flex-row justify-center align-baseline pt-2">
        <ul class="pagination flex flex-row justify-center"></ul>
    </div>
</div>

<script type="text/javascript">
    const storyList = new List('story-list', {
        valueNames: ['story', 'category-tag'],
        page: 12,
        pagination: [{
            item: '<li class="p-2"><div class="page flex justify-center align-center"></div></li>',
        }]
    });

    const selectFilterElement = (element) => {
        if (!element.matches('.filter-button')) return;

        // remove existing selected filters
        const removeFilterIcon = document.getElementById('remove-filter');
        if (removeFilterIcon) {
            removeFilterIcon.remove();
        }

        const filterButtons = document.querySelectorAll('.filter-button');
        filterButtons.forEach(filter => {
            if (element !== filter) {
                filter.classList.remove('filter-selected');
            }
        });

        if (element.matches('.filter-selected') || element.innerText === 'Most Recent') {
            storyList.filter();
        } else {
            storyList.filter((item) => {
                return item.values()['category-tag'] === element.innerText;
            });
        }
        if (!element.matches('.filter-selected')){
            // add remove filter icon
            element.innerHTML +=
                '<span id="remove-filter" class="mini-circle-xs pointer-events-none bg-white text-brand-dark flex align-center justify-center ml-1"><img src="/images/close.svg" alt="Close" width="6" height="6" class="no-zoom"></span>';
        }
        element.classList.toggle('filter-selected');
    }

    document.addEventListener('click', function (event) {
        const element = event.target;
        if (!element.matches('.filter-button')) return;
        event.preventDefault();
        selectFilterElement(element);
    }, false);

    // Check for valid category filters within the query parameters
    const params = new Proxy(new URLSearchParams(window.location.search), {
        get: (searchParams, prop) => searchParams.get(prop),
    });

    if (params.filter) {
        const filter = document.getElementById(params.filter + '-filter');
        if (filter) {
            selectFilterElement(filter);
            filter.scrollIntoView();
        }
    }
</script>