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="flex-column col-3 text-right pr-4">
            <img height="200" 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">
              Stop relying on a human<br>
              to 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 py-6">
    <h2 class="alt-h2 text-center">Explore</h2>
    <p class="alt-lead text-center">Find all the things to do all the things.</p>

    <div class="d-md-flex flex-wrap gutter flex-auto">
      {% for plugin in site.plugins limit:6 %}
        <div class="flex-column col-lg-4 col-md-6 anim-fade-in mb-3 mt-3">
          <a href="{{ plugin.url }}" class="d-block bg-white rounded-1 box-shadow border text-inherit no-underline" style="height:100%">
            <div class="cover text-center position-relative p-4">
              <div class="cover-bg" style="background-image: url({{ plugin.background }});"></div>
            </div>
            <h3 class="lh-condensed px-3 pt-3">{{ plugin.title }}</h3>
            <p class="lh-condensed px-3 pb-3">{{ plugin.description }}</p>
          </a>
        </div>
      {% endfor %}
    </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>