communities-of-practice.html

---
layout: default
title: Communities of Practice
permalink: /communities-of-practice
---

<!-- Header banner -->
<div class="header-container flex-container">
    <div class="header-text ">
        <h1 class="title1">Communities of Practice</h1>
        <p>
             Communities of Practice started at Hack for LA in 2020, post-Covid. These communities have been a vital connection point in our fully remote organization. They have enabled us to connect people across projects in ways that are both meaningful for the individuals, and have helped the organization build professional infrastructure to support our community, nonprofit and government project partnerships. These communities have also enabled Hack for LA to provide rapid response to the evolving crises of 2020.
        </p>
        <p class="sub-p">
            If you'd like to join one of the Communities of Practice that has a regular meeting time, join their Slack channel and look for the meeting details, usually pinned or in the description. Otherwise, see the "How to get started" sections below.
        </p>
            <div class="header-self-invite--communities">
                <svg version="1.1" class="self-invite-img" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg" width="100%">
                    {% include svg/icon-slack.svg %}
                </svg>
                <p class="alert--communities">To join the Slack channels below, you first need to be a member of our Hack for LA Slack Community. If you have not joined yet, please follow the steps in <a href="/getting-started" target="_blank">Getting Started</a>.
            </p></div>
    </div>
    <img class="header-hero-image" src="/assets/images/communities-of-practice/comm-prac-header.svg" alt="community of practice header" />
</div>

<section class="content-section content--communities">
    {% assign sorted_communities = site.data.internal.communities | sort %}
    {% for community in sorted_communities %}
    {% if community[1].visible == true %}
    <div class="page-card card-primary page-card-lg page-card-container">
        <div class="page-card-image-container">
            <img class="page-card-image" src="{{ community[1].image }}" alt=""/>
        </div>
        <div class="page-card-content">
            <h3 class = "Title4">{{ community[1].name}}</h3>
            <p>{{ community[1].description}}</p>
            <p>
                <strong>Meeting Times:</strong> 
                <span id="meeting-times-{{ community[1].name | replace: ' ', '-' | downcase }}"></span><br>            </p>
            <p>
                <strong>Leadership Type:</strong> 
                {% if community[1].leadership-type %}{{ community[1].leadership-type }}{% else %}TBD{% endif %}
            </p>
            {% if community[1].leadership[0].name %}
                <div class='leader-list--communities'>
                {% for leader in community[1].leadership %}
                <div class='leader-card--communities'>
                    <a href='{{ leader.links.github }}' target='_blank' title='GitHub Profile' rel='noopener noreferrer'><img class='leader-img--communities' src='{{ leader.picture }}' /></a>
                    <div class='leader-description'>
                        <p class='leader-description-field'><strong>Name: </strong>
                        {% if page.status == "Completed" and item.links.linkedin %}
                        <a href='{{ leader.links.linkedin }}' target='_blank' title='Linkedin Profile' rel="noopener noreferrer">
                        {% elsif page.status == "Completed" %}
                            <a href='{{ leader.links.github }}' target='_blank' title='GitHub Profile' rel="noopener noreferrer">
                        {% else %}
                            <a href='{{ leader.links.slack }}' target='_blank' title='Slack Direct Message' rel="noopener noreferrer">
                        {%  endif %}
                        {{ leader.name }}</a></p>
                        <p class='leader-description-field'><strong>Role: </strong>{{ leader.role }}</p>
                    </div>
                </div>
                {% endfor %}
                </div>
            {% endif %}                
            {% if community[1].status == "Seeking" and community[1].recruiting-message %}
                <p><strong>How to get started:</strong> {{ community[1].recruiting-message }}</p>
            {% endif %}
            <div class="align-center link-buttons">
                {% assign url_links = false %}

                {% if community[1].links[0].url %}
                    {% assign url_links = true %}
                    <a href="{{ community[1].links[0].url }}" class="btn btn-primary btn-md btn--default cop-btn" target="_blank" title="{{community[1].name}} Slack channel" rel="noopener noreferrer">
                        {% include svg/icon-slack.svg %}
                        Join Slack Channel
                    </a>
                {% endif %}
                
                {% if community[1].links[1].url %}
                    {% assign url_links = true %}
                    <a href="{{ community[1].links[1].url }}" class="btn btn-primary btn-md btn--default cop-btn" target="_blank" rel="noopener noreferrer"
                        title="{{community[1].name}} GitHub Repo">
                        <img class="button-icon" id="github-icon" src="/assets/images/communities-of-practice/icon-github-small.svg" alt="github icon" />
                        View GitHub
                    </a>
                {% endif %}

                {% if url_links == false %}
                    <button class="btn btn-primary btn-md">Coming soon...</button>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}
    {% endfor %}
</section>
<script type="module" src="assets/js/communities-of-practice.js"></script>