{{ define "nav" }}
  <!-- Navigation Bar -->
    <nav>
    <div class="nav-title">
        <a class="home-link" href="{{ "" | relURL }}">
            <img src="/assets/twitter-logo.svg" alt="Twitter">
            Open Source
            <a class="YIRnav-YIR-link" href="#">Year in Review</a>
        </a>
    </div>
    <a id="menu-toggle" href="#" onclick="document.getElementById('nav-menu').classList.toggle('active'); return false;">
        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
    </a>

    <!-- Only in mobile -->
    <ul id="nav-menu">
      <li><a href="#welcome">Welcome</a></li>
      <li><a href="#top10">Top 10 repos</a></li>
      <li><a href="#locations">Locations</a></li>
      <li><a href="#heat">Heat metrics</a></li>
      <li><a href="#light">Light metrics</a></li>
      <li><a href="#love">Love metrics</a></li>
      <li><a href="#follow">@TwitterOSS</a></li>
    </ul>
  </nav>
{{ end }}

{{ define "main" }}
  <!-- Timeline navigation effect from https://codepen.io/nailaahmad/pen/MyZXVE -->
    <div class="YIR-wrapper">
    <div class="YIR-container">
      <div class="YIR-nav-wrapper" id="YIR-navbar">
        <ul class="nav">
          <li><a href="#welcome"><span class="YIR-nav-title">Welcome</span></a></li>
          <li><a href="#top10"><span class="YIR-nav-title">Top 10 repos</span></a></li>
          <li><a href="#locations"><span class="YIR-nav-title">Locations</span></a></li>
          <li><a href="#heat"><span class="YIR-nav-title">Heat metrics</span></a></li>
          <li><a href="#light"><span class="YIR-nav-title">Light metrics</span></a></li>
          <li><a href="#love"><span class="YIR-nav-title">Love metrics</span></a></li>
          <li><a href="#follow"><span class="YIR-nav-title">@TwitterOSS</span></a></li>
        </ul>
      </div>
    </div>

    <section id="welcome">
      <div class="YIR-container-section">
        <div class="YIR-header">
          <h1 class="YIR-subheading" id="date-range">{{ (now.AddDate -1 0 0).Format "Jan 2006" }} - {{ now.Format "Jan 2006" }}</h1>
          <h1 id="YIR-heading-text">Year in Review</h1>
          <h1 class="YIR-subheading" id="type">An overview of the past 12 months of activity on Twitter’s Open Source projects.</h1>
        </div>

        <div class="inline-heading" id="YIR-header-inline-heading">
          <p class="section-description">This webpage updates weekly and provides a sliding window into the previous 12 months. Patches are always welcome.</p>
        </div>
      </div>
    </section>

    <section id="top10">
      <div class="YIR-container-section">
        <div class="inline-heading">
          <h1>Top 10 repos</h1>
          <p class="section-description">These are our top 10 GitHub repositories, ranked by total commit counts.</p>
        </div>

        <table id="top-10-repos">
          <tr>
            <th></th>
            <th></th>
            <th>Total commits</th>
          </tr>
          {{/* put augur data into a slice that can be sorted and indexed */}}
          {{- $repos := slice }}
          {{- range $name, $data := $.Site.Data.augur.repo_commits -}}
            {{ $repos = $repos | append (dict "name" $name "commit_count" $data.commit_count) }}
          {{- end -}}
          {{- range $i, $repo := first 10 (sort $repos "commit_count" "desc") }}
          <tr class="content">
            <td class="num">{{ add $i 1 }}</td>
            <td class="repo"><a href="https://github.com/twitter/{{ .name }}" target="_blank" rel="noopener">{{ .name }}</a></td>
            <td class="commit-value">{{ partial "formatNum" .commit_count }}</td>
          </tr>
          {{- end -}}
        </table>
      </div>
    </section>

    <section id="locations">
      <div class="YIR-container-section">
        <div class="inline-heading">
          <h1 class="large-title">Locations</h1>
          <p class="section-description">Our contributors are located all around the world. This list is based on self reported locations from our contributors’ GitHub profiles.</p>
        </div>

        <div class="locations">
          {{- range $.Site.Data.locations -}}
            <div class="location-item">
              <img src="/assets/year-in-review/flags/{{ .flag }}" alt="{{ .name }} flag">
              {{ .name }}
            </div>
          {{- end -}}
          <p class="locations-disclaimer">*Top 10 locations ranked by commits, accurate as of Aug 2019</p>
        </div>
      </div>
    </section>

    <section id="heat">
      <div class="YIR-container-section">
        <div class="inline-heading">
          <h1>Heat metrics</h1>
          <p class="section-description">Heat means work. We measure heat by the number and frequency of commits and committers across our repos.</p>
        </div>

        <div class="metric-wrapper">
          <svg class="fire-svg in-view" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            width='220px' height ='220px' viewBox="-1 -1 38 38" xml:space="preserve" >
            <path class="fire-st0" d="M35,19c0-2.1-0.4-4-1-5.9c-0.5,5.4-3.3,8.2-6.3,6.9c-2.8-1.2-0.9-5.9-0.8-8.2c0.2-3.8,0-8.2-6.9-11.8
              c2.9,5.5,0.3,8.9-2.3,9.1c-3,0.2-5.7-2.5-4.7-7c-3.2,2.4-3.3,6.4-2.3,9c1,2.7,0,5-2.6,5.2c-2.8,0.3-4.4-3-3-8.3c-2.5,3-4,6.8-4,11
              c0,9.4,7.6,17,17,17S35,28.4,35,19z"/>
            <path class="fire-st1" d="M28.4,24c0.1,3.1-2.6,4.3-4,3.7c-2.1-0.8-1.5-2.3-2.1-5.3s-2.6-5.1-5.7-6c2.2,6.3-1.2,8.7-3.1,9.1
              c-1.9,0.4-3.8,0-4-4C7.4,23.7,6,26.7,6,30c0,0.4,0,0.7,0.1,1.1c3.1,3,7.3,4.9,11.9,4.9s8.9-1.9,11.9-4.9c0-0.4,0.1-0.7,0.1-1.1
              C30,27.8,29.4,25.8,28.4,24z"/>
          </svg>
          <!-- <img src="/assets/year-in-review/fire_outline.svg" alt="Fire emoji" class="emoji-outline"> -->

          <div class="metric">
            <span class="metric-count" id="commit-count">{{ partial "formatNum" (index $.Site.Data.augur.aggregate_summary 0).commit_count }}</span>
            <span class="metric-name">commits</span>
            <div class="description">
              Commits reflect the amount of activity across our repositories.
            </div>
          </div>

          <div class="metric">
            <span class="metric-count" id="committer-count">{{ partial "formatNum" (index $.Site.Data.augur.aggregate_summary 0).committer_count }}</span>
            <span class="metric-name">committers</span>
            <div class="description">
              Committers are the unique individuals that drive change in our repositories.
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="light">
      <div class="YIR-container-section">
        <div class="inline-heading">
          <h1>Light metrics</h1>
          <p class="section-description">Light means visibility. We measure visibility by number of watchers subscribed to updates, and number of people who have favorited our projects.</p>
        </div>

        <div class="metric-wrapper">
          <svg class="sun-svg in-view" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            width='220px' height ='220px' viewBox="-1 -1 38 38" xml:space="preserve">
            <path class="sun-st0" d="M8,18a10,10 0 1,0 20,0a10,10 0 1,0 -20,0"/>
            <path class="sun-st1" d="M16,2c0,0,0-2,2-2s2,2,2,2v2c0,0,0,2-2,2s-2-2-2-2V2z"/>
            <path class="sun-st2" d="M34,16c0,0,2,0,2,2s-2,2-2,2h-2c0,0-2,0-2-2s2-2,2-2H34z"/>
            <path class="sun-st3" d="M4,16c0,0,2,0,2,2s-2,2-2,2H2c0,0-2,0-2-2s2-2,2-2H4z"/>
            <path class="sun-st4" d="M9.1,7.3c0,0,1.4,1.4,0,2.8s-2.8,0-2.8,0L4.9,8.7c0,0-1.4-1.4,0-2.8c1.4-1.4,2.8,0,2.8,0L9.1,7.3z"/>
            <path class="sun-st5" d="M30.1,28.3c0,0,1.4,1.4,0,2.8c-1.4,1.4-2.8,0-2.8,0l-1.4-1.4c0,0-1.4-1.4,0-2.8s2.8,0,2.8,0S30.1,28.3,30.1,28.3z"/>
            <path class="sun-st6" d="M29.7,10.1c0,0-1.4,1.4-2.8,0s0-2.8,0-2.8l1.4-1.4c0,0,1.4-1.4,2.8,0s0,2.8,0,2.8S29.7,10.1,29.7,10.1z"/>
            <path class="sun-st7" d="M8.7,31.1c0,0-1.4,1.4-2.8,0s0-2.8,0-2.8l1.4-1.4c0,0,1.4-1.4,2.8,0s0,2.8,0,2.8S8.7,31.1,8.7,31.1z"/>
            <path class="sun-st8" d="M16,32c0,0,0-2,2-2s2,2,2,2v2c0,0,0,2-2,2s-2-2-2-2V32z"/>
          </svg>
          <!-- <img src="/assets/year-in-review/sun_outline.svg" alt="Fire emoji" class="emoji-outline"> -->

          <div class="metric">
            <span class="metric-count" id="watcher-count">{{ partial "formatNum" (index $.Site.Data.augur.aggregate_summary 0).watcher_count }}</span>
            <span class="metric-name">watchers</span>
            <div class="description">
              Watchers receive notifications for some or all changes to our codebases.
            </div>
          </div>

          <div class="metric">
            <span class="metric-count" id="star-count">{{ partial "formatNum" (index $.Site.Data.augur.aggregate_summary 0).stars_count }}</span>
            <span class="metric-name">stars</span>
            <div class="description">
              Stars show preference for a repository, like a bookmark.
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="love">
      <div class="YIR-container-section">
        <div class="inline-heading">
          <h1>Love metrics</h1>
          <p class="section-description">Love means culture and support. We measure love by the number of users who have copied our projects and contributed changes back upstream.</p>
        </div>

        <div class="metric-wrapper">
          <svg class="heart-svg in-view" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            width='220px' height ='220px' viewBox="-1 -1 38 38" xml:space="preserve">
            <path class="heart-st0" d="M31.6,22.9c2-2.8,3.5-5.8,4-8.8c0.2-0.7,0.3-1.5,0.3-2.2C35.9,6.4,31.5,2,26,2c-3.3,0-6.2,1.6-8,4.1
              C16.2,3.6,13.3,2,10,2c-5.4,0-9.9,4.4-9.9,9.9c0,0.8,0.1,1.5,0.3,2.2C1.8,22.6,11.2,31.6,18,34c2.6-0.9,5.6-2.8,8.4-5.3"/>
            <path class="heart-st1" d="M34.3,23.9l-3.8-1.4l-1.4-3.8C29,18.3,28.6,18,28.2,18s-0.8,0.3-0.9,0.7l-1.4,3.8L22,23.9
              c-0.4,0.1-0.7,0.5-0.7,0.9c0,0.4,0.3,0.8,0.7,0.9l3.8,1.4l1.4,3.8c0.1,0.4,0.5,0.7,0.9,0.7s0.8-0.3,0.9-0.7l1.4-3.8l3.8-1.4
              c0.4-0.1,0.7-0.5,0.7-0.9S34.7,24,34.3,23.9z M11.3,7.9L9,7L8.1,4.7C8,4.3,7.6,4,7.2,4C6.8,4,6.4,4.3,6.2,4.7L5.4,7L3,7.9
              C2.6,8,2.3,8.4,2.3,8.8c0,0.4,0.3,0.8,0.7,0.9l2.4,0.9L6.2,13c0.1,0.4,0.5,0.7,0.9,0.7S8,13.4,8.1,13L9,10.6l2.4-0.9
              C11.7,9.6,12,9.2,12,8.8C12,8.4,11.7,8,11.3,7.9z"/>
            </svg>
          <!-- <img src="/assets/year-in-review/heart_outline.svg" alt="Fire emoji" class="emoji-outline"> -->

          <div class="metric">
            <span class="metric-count" id="fork-count">{{ partial "formatNum" (index $.Site.Data.augur.aggregate_summary 0).fork_count }}</span>
            <span class="metric-name">forks</span>
            <div class="description">
              Forks represent full-copies of our repositories, usually for development and testing.
            </div>
          </div>

          <div class="metric">
            <span class="metric-count" id="merged-count">{{ partial "formatNum" (index $.Site.Data.augur.aggregate_summary 0).merged_count }}</span>
            <span class="metric-name">PRs merged</span>
            <div class="description">
              Our users contribute pull requests (PRs) directly back to us.
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="follow">
      <div class="YIR-container-section">
        <div class="inline-heading">
          <h1>@TwitterOSS</h1>
          <p class="section-description">Making it simple to trust, ship, and grow Open Source at Twitter and beyond. Follow @TwitterOSS to stay updated!</p>
        </div>

        <div class="YIR-tweet-wrapper">
          <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Heat 🔥 Light ☀️ Love 💖<br><br>A year of growth in Twitter Open Source.<br>Built by <a href="https://twitter.com/terns?ref_src=twsrc%5Etfw">@terns</a>, powered by <a href="https://twitter.com/CHAOSSproj?ref_src=twsrc%5Etfw">@CHAOSSproj</a> <a href="https://t.co/sHuWhxAahJ">https://t.co/sHuWhxAahJ</a></p>&mdash; Twitter Open Source (@TwitterOSS) <a href="https://twitter.com/TwitterOSS/status/1162412830189948929?ref_src=twsrc%5Etfw">August 16, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>
      </div>
    </section>

  </div> <!-- End of YIR-wrapper -->
{{ end }}

{{ define "footer"}}<!-- no footer -->{{ end }}