probot.github.io/_layouts/plugin.html

---
layout: default
---

<div class="border-bottom bg-gray-dark text-white">
  <div class="container-lg px-3">
    <div class="py-4 d-flex d-flex-row">
      <h1 class="alt-h5 col-4 lh-default v-align-middle">
        <a href="/" class="no-underline text-uppercase text-inherit">
          <img style="margin: -12px 8px -10px 0;" src="/assets/probot-head.png" height="36" alt="">
          Probot
        </a>
      </h1>
      <nav class="text-bold col-8 text-right">
        <a class="text-inherit px-2 d-inline-block" href="/#explore">Explore</a>
        <a class="text-inherit px-2 d-inline-block" href="/#build">Build</a>
        <a class="text-inherit px-2 d-inline-block" href="https://github.com/probot/probot">Contribute</a>
      </nav>
    </div>
  </div>
</div>

<div class="border-bottom">
  <div class="container-lg px-3 jumbotron jumbotron-minitron">
    <div class="d-flex d-flex-row gutter-spacious flex-items-center">
      <div class="flex-column col-3 text-center">
        <div class="cover rounded-2"
           style="background-image: url({{ page.background }}); background-size: cover; background-position: center;"></div>
      </div>
      <div class="flex-column col-7">
        <h1 class="alt-h1 lh-condensed-ultra">{{ page.title }}</h1>
        <p class="text-gray">{{ page.description }}</p>
      </div>
      <div class="flex-column col-2 text-right">
        <a class="btn btn-primary btn-large" href="https://github.com/apps/{{ page.slug }}/installations/new">Install</a>
      </div>
    </div>
  </div>
</div>

<div class="">
  <div class="container-lg px-3 py-6">
    <div class="d-flex flex-row-reverse d-flex-row gutter-spacious">
      <div class="flex-coumn col-9">
        <div class="mb-6 bg-white">
          <div class="d-flex flex-items-center  flex-justify-center">
            {% for screenshot in page.screenshots limit:1 %}
              <img src="{{ screenshot }}" style="max-width:100%; max-height:100%;">
            {% endfor %}
          </div>
          <div class="d-flex flex-items-center flex-justify-center p-2">
            {% for screenshot in page.screenshots %}
              <div class="rounded border mx-1" style="width:125px; height: 70px; background-image: url({{ screenshot }}); background-size: cover; background-position: center;">
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="flex-column col-3">
        <h4 class="alt-h4 text-gray">Topics</h4>
        {% for topic in page.topics %}
          <a class="bg-blue-light rounded-2 px-2 py-1" href="#">#{{ topic }}</a>
        {% endfor %}

        <h4 class="mt-4 alt-h4 text-gray">About</h4>

        <p>
          <span class="text-gray-light">Author:</span>
          <img class="avatar" src="https://github.com/{{ page.author }}.png" height="26">
          <span class="text-bold text-inherit">@{{ page.author }}</span>
        </p>
        <p><span class="text-gray-light">Updated:</span> June 12, 2017</p>
        <p><strong>{{ page.installs | default: 0 }}</strong> <span class="text-gray-light">installs</span></p>
        <p><strong>{{ page.stars | default: 0 }}</strong> <span class="text-gray-light">stars</span></p>
      </div>
    </div>
  </div>
</div>

<div class="py-6">
  <div class="container-lg px-3">
    <div class="d-flex flex-row-reverse d-flex-row gutter-spacious">
      <div class="flex-coumn col-9">
        <div class="markdown-body">
          {{ content }}
        </div>
      </div>
      <div class="flex-column col-3">
        <h4 class="mt-4 alt-h4 text-gray">This App is used by</h4>
        {% for organization in page.organizations %}
          <a href="https://github.com/{{ organization }}"><img class="avatar avatar-group-item" src="https://github.com/{{ organization }}.png" height="35"></a>
        {% endfor %}
      </div>
    </div>
  </div>
</div>