index.html

---
layout: default
title: Open Source Software Projects - Shopify
description: As a team that greatly benefits from open-source software, these are the projects that we have contributed back to the community.
---

<div class="hero">
  <div class="hero-lines"></div>
  <header class="hero-header">
    <div class="pagewidth">
      <div class="logo--ie">
        <img
          src="/images/shopify-open-source.svg"
          alt="Shopify Open Source"
          class="logo"
        />
      </div>
      <ul class="inline-list git-stats">
        <li><span id="countRepos" class="git-stat is-loading"></span> Repos</li>
        <li>
          <span id="countMembers" class="git-stat is-loading"></span> Members
        </li>
      </ul>
    </div>
  </header>
  <div class="pagewidth">
    <div class="hero-inner">
      <h1 class="hero-text">
        As a team that greatly benefits from open-source software, these are the
        projects that we have contributed back to the community.
      </h1>
    </div>
  </div>
</div>

<div class="pagewidth">
  <div class="filter-bar">
    <div class="button-group js-radio-button-group" id="filters">
      <div class="filter-bar--left">
        Show
      </div>
      <div class="filter-bar--right">
        <button class="btn is-active" data-filter="*">All</button>
        <button class="btn" data-filter=".go">Go</button>
        <button class="btn" data-filter=".javascript">JavaScript</button>
        <button class="btn" data-filter=".typescript">TypeScript</button>
        <button class="btn" data-filter=".liquid">Liquid</button>
        <button class="btn" data-filter=".swift">Swift</button>
        <button class="btn" data-filter=".ruby">Ruby</button>
        <button class="btn" data-filter=".kotlin">Kotlin</button>
        <button
          class="btn"
          data-filter=":not(.go, .javascript, .typescript, .liquid, .swift, .ruby, .kotlin)"
        >
          Other
        </button>
      </div>
    </div>
  </div>
</div>

<div class="repoWrap">
  <div class="pagewidth">
    <div id="repos"></div>
    <div class="repo-loader">
      <div class="repo-loader--inner">
        <div class="spinner spinner-large"></div>
      </div>
    </div>
  </div>
</div>

<script id="repoTemplate" type="text/template">
  {% raw %}
    {{#items}}
    <div class="repo {{languageClass}}{{#unless description}} no-desc{{/unless}}">
      <header class="repo-header">
        <div class="grid">
          <div class="grid-item large--one-half">
            <h2>
            {{#if homepage}}
              {{#if avatar}}
                <a href="{{homepage}}" class="homepage-link">
                  <img src="{{avatar}}" alt="{{name}}">
                </a>
              {{else}}
                <a href="{{homepage}}" class="homepage-link">
                  <i class="icon-world"></i>
                </a>
              {{/if}}
              <a href="{{homepage}}" title="View {{name}} on Github">{{name}}</a>
            {{else}}
              {{#if avatar}}
                <img src="{{avatar}}" class="homepage-link" alt="{{name}}">
              {{/if}}
              <a href="{{url}}" title="View {{name}} on Github">{{name}}</a>
            {{/if}}
            </h2>
          </div>
          <div class="grid-item large--one-half">
            <div class="repo-meta">
              <div class="repo-git">
                <a href="{{url}}" title="View {{name}} on GitHub">
                  <i class="icon-github" title="View on GitHub"></i> Repo
                </a>
              </div>
              <div class="repo-stats">
                <i class="icon-star" title="Stars"></i> {{stars}}
                <i class="icon-forks" title="Forks"></i> {{forks}}
                <span class="repo-lang">{{language}}</span>
              </div>
            </div>
          </div>
        </div>
      </header>
      {{#if description}}
      <p>{{description}}</p>
      {{/if}}
    </div>
    {{/items}}
  {% endraw %}
</script>

<script>
  var repos = {{ site.github.public_repositories | jsonify }};
</script>