probot.github.io/index.html

---
layout: default
---
<div class="bg-gray-dark text-white border-bottom">
  <div class="container-lg px-3">
    <div class="py-4 clearfix">
      <nav class="text-bold d-block float-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>

    <header class="py-6">
      <div class="pb-0 pt-md-4 py-lg-6">
        <div class="d-flex flex-items-center flex-justify-center">
          <div class="col-3 text-right p-4">
            <img src="/assets/logo.png">
          </div>
          <div class="flex-column col-9">
            <h1 class="alt-h2 text-uppercase lh-condensed text-gray">Probot</h1>
            <h2 class="alt-h1 lh-condensed">
              Why should a human<br>
              do the work of a robot?
            </h2>
            <div class="alt-lead text-gray">GitHub Apps to automate and improve your workflow</div>
          </div>
        </div>
      </div>
    </header>
  </div>
</div>
<div id="explore">
  <div class="container-lg px-3 featurette">
    <h2 class="alt-h2 text-center">Explore</h2>
    <p class="lead text-center col-md-8 col-sm-10 mx-auto">Replace this with a pitch about all the awesome apps built by the community that you can just use.</p>

    <div class="d-md-flex flex-wrap gutter flex-auto">
      {% for plugin in site.plugins limit:6 %}
        <div class="col-lg-4 col-md-6 mb-3 mt-3">
          <a href="{{ plugin.url }}" class="d-flex flex-column bg-white rounded-1 box-shadow border text-inherit no-underline" style="height:100%">
            <h3 class="h4 px-3 pt-3">{{ plugin.title }}</h3>
            <p class="text-gray lh-condensed px-3 pb-3">{{ plugin.description }}</p>
            <div class="text-gray-light pl-3 pr-2 py-2 bg-gray-light border-top" style="margin-top: auto;">
              <div class="d-flex flex-row">
                <div class="col-3 tooltipped tooltipped-s" aria-label="{{ plugin.installs }} installations">{% octicon cloud-download width:14 class:"v-align-middle" %} <span class="">{{ plugin.installs }}</span></div>
                <div class="col-3 tooltipped tooltipped-s" aria-label="{{ plugin.stars }} stars">{% octicon star heigh:16 class:"v-align-middle" %} <span class="">{{ plugin.stars }}</span></div>
                <div class="col-6 text-right" style="margin-top: auto;">
                  <img class="avatar tooltipped tooltipped-s" aria-label="Made by {{ plugin.author }}" height="24" src="https://github.com/{{ plugin.author }}.png">
                </div>
              </div>
            </div>
          </a>
        </div>
      {% endfor %}
    </div>

    <div class="text-center my-6">
      <h3 class="alt-h2">By the community, for the community</h3>
      <p class="lead mx-auto col-md-8">Find a bunch of really cool plugins built by other people in the community, just for you.</p>
      <a class="btn btn-outline">Explore more plugins</a>
    </div>
  </div>
</div>

<div id="build" class="border-top bg-gray-light featurette">
  <div class="container-lg px-3">
    <h2 class="alt-h1 text-center">Build your own bot</h2>
    <p class="alt-lead text-center mb-6">Something about how easy it is to get started.</p>

    <div class="mt-6">
      <div class="d-flex flex-column flex-md-row flex-items-center flex-md-items-center my-4">
        <div class="col-6 d-flex flex-column pr-6">
          <h3 class="alt-h3 mb-2">Easily scriptable:</h3>
          <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="col-6 d-flex flex-column">
          <div class="rounded-2 overflow-hidden border" style="margin-left: 60px;">
{% highlight javascript %}
module.exports = robot => {
  robot.on('issues.opened', context => {
    const params = context.issue({
      body: 'Hello World!'
    });
    context.github.issues.createComment(params);
  });
};
{% endhighlight %}
          </div>

          <div class="mt-6">
            <img src="https://github.com/probot.png" height="44" class="avatar rounded-1 float-left">
            <div class="timeline-comment box rounded-2 border bg-white" style="margin-left: 60px;">
              <div class="bg-gray px-3 py-2 border-bottom">
                <strong>@probot</strong> commented
              </div>
              <p class="m-0 p-3">Hello World!</p>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-6">
        <div class="d-flex flex-column flex-md-row flex-items-center flex-md-items-center my-4">
          <div class="col-6 d-flex flex-column pr-6">
            <img src="https://assets-cdn.github.com/images/modules/site/home-illo-business.svg" class="d-block width-fit mx-auto mb-4">
          </div>
          <div class="col-6 d-flex flex-column pr-6">
            <h3 class="alt-h3 mb-2">Full access to the GitHub API</h3>
            <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </div>

    </div>

    <h3>Somethign cool about it</h3>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    <h3>Somethign cool about it</h3>
    <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

    <h3>Somethign cool about it</h3>
    <p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
  </div>
</div>
<div class="bg-gray-dark mt-6 pt-6" style="height: 300px;">
</div>