probot.github.io/index.html

---
layout: default
---
<div class="">
  <div class="container-lg">
    <div class="py-4 px-3 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="/docs/">Build</a>
        <a class="text-inherit px-2 d-inline-block" href="https://github.com/probot/probot">Contribute</a>
      </nav>
    </div>
  </div>

  <div class="container-lg px-3">
    <header class="py-6">
      <div class="pb-0 pt-md-4 py-lg-6">
        <div class="d-flex flex-items-center flex-justify-center gutter-spacious">
          <div class="col-3 offset-1 text-right">
            <img src="/assets/logo.png">
          </div>
          <div class="flex-column col-8">
            <h1 class="alt-h2 text-uppercase lh-condensed text-brand-blue">Probot</h1>
            <h2 class="alt-h2 lh-condensed">
              GitHub Apps to automate <br>and improve your workflow
            </h2>
            <p class="alt-lead text-gray-light mt-2 lh-condensed" style="opacity: 0.6">
              Use one of the pre-built open source apps that extend GitHub, or easily build and share your own.
            </p>
          </div>
        </div>
      </div>
    </header>
  </div>
</div>

<div id="explore" class="bg-gray-light border-top border-gray-light">
  <div class="container-lg px-3 page-section">
    <h2 class="alt-h1 text-center">Discover</h2>
    <p class="lead text-center col-md-8 col-sm-10 mx-auto">
      Check out these apps built by the community that extend your project on GitHub. They're all open source and free to use on any project.
    </p>

    <div class="d-md-flex flex-wrap gutter flex-auto">
      {% for app in site.apps limit:9 %}
        <div class="col-lg-4 col-md-6 mb-3 mt-3">
          <a href="{{ app.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">{{ app.title }}</h3>
            <p class="text-gray lh-condensed px-3 pb-3">{{ app.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="{{ app.installations }} installations">{% octicon cloud-download width:14 class:"v-align-middle" %} <span class="">{{ app.installations }}</span></div>
                <div class="col-3 tooltipped tooltipped-s" aria-label="{{ app.stars }} stars">{% octicon star heigh:16 class:"v-align-middle" %} <span class="">{{ app.stars }}</span></div>
                <div class="col-6 text-right">
                  <img class="avatar tooltipped tooltipped-s" aria-label="Made by {{ app.author }}" height="24" src="https://github.com/{{ app.author }}.png">
                </div>
              </div>
            </div>
          </a>
        </div>
      {% endfor %}
    </div>

    <div class="text-center my-6">
      <p class="lead mx-auto col-md-8">
        Discover dozens of apps that extend GitHub and improve your workflow.
      </p>
      <a class="btn btn-outline btn-large" href="https://github.com/search?q=topic%3Aprobot-plugin&type=Repositories">
        {% octicon telescope class:"mr-2" %}
        Explore more apps
      </a>
    </div>
  </div>
</div>

<div id="build" class="border-top page-section f4">
  <div class="container-lg px-3">
    <h2 class="alt-h1 text-center lh-condensed">Build your own app</h2>
    <p class="alt-lead text-center mb-6">Apps are easy to write and share.</p>
    <p class="text-center mb-6">
      <a class="btn btn-outline btn-large" href="/docs/">
        {% octicon tools class:"mr-2" %}
        Build a Probot App
      </a>
    </p>

    <div class="page-section d-flex flex-column flex-md-row gutter flex-items-center flex-md-items-center">
      <div class="col-6 d-flex flex-column">
          <img src="https://assets-cdn.github.com/images/modules/site/home-illo-conversation.svg" class="d-block width-fit mx-6">
      </div>
      <div class="col-6">
        <h3 class="alt-h3 mb-2">Optimized for GitHub</h3>
        <p class="">
          Receive webhooks and use the authenticated client to access the GitHub API. Granular permissions give each app access only to the data it needs and nothing more.
        </p>
      </div>
    </div>

    <div class="page-section">
      <div class="d-flex flex-md-row gutter flex-items-center flex-md-items-center">
        <div class="col-6">
          <h3 class="alt-h3 mb-2">Easily scriptable</h3>
          <p class="">Focus on what you want to build. A simple API—built on the latest ES6 JavaScript features—hides the details you don't care about.</p>
        </div>
        <div class="col-6">
          <div class="rounded-2 overflow-hidden border" style="margin-left: 60px;">
{% highlight javascript %}
module.exports = robot => {
  robot.on('issues.opened', async context => {
    const params = context.issue({
      body: 'Hello World!'
    });
    context.github.issues.createComment(params);
  });
};
{% endhighlight %}
          </div>
        </div>
      </div>

      <div class="d-flex flex-md-row gutter mt-4">
        <div class="col-6">
          <h2 class="alt-h3 mb-2"></h2>
          <p>Apps are first class actors within GitHub.</p>
          <p class="mt-3">
            <a href="/docs/">Get started with Probot {% octicon chevron-right %}</a>
          </p>
        </div>

        <div class="col-6">
          <img src="https://github.com/probot.png" height="44" width="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>
</div>