index.html

---
layout: default.liquid
---

<div class="container-lg px-3">
  <header class="py-6">
    <div class="pb-0 pt-md-4 py-lg-6">
      <div
        class="d-md-flex flex-md-items-center flex-md-row-reverse flex-md-justify-center gutter-md-spacious"
      >
        <div class="col-md-8 text-center text-md-left">
          <h1 class="h2 text-uppercase lh-condensed text-brand-blue">
            Probot
          </h1>
          <h2 class="h2 lh-condensed">
            GitHub Apps to automate <br />and improve your workflow
          </h2>
          <p
            class="alt-lead color-text-tertiary mt-2 lh-condensed"
            style="opacity: 0.6"
          >
            Use pre-built apps to extend GitHub,<br />
            and easily build and share your own.
          </p>
        </div>
        <div
          class="col-3 mx-auto mx-md-0 offset-md-1 text-center text-md-right"
        >
          <img src="/assets/img/logo.png" class="width-fit" alt="Probot logo" />
        </div>
      </div>
    </div>
  </header>
</div>

<div id="explore" class="color-bg-tertiary-light border-top border-gray-light">
  <div class="container-lg px-3 pt-4 page-section">
    <h2 class="h1 text-center">Explore</h2>
    <p class="lead text-center col-md-7 col-sm-10 mx-auto">
      Check out these hosted apps 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">
      {% assign apps = collections.apps %} {% for app
      in apps limit:6 %} {% include "app" app: app.data %} {% 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="/apps/">
        {% octicon "telescope" class="mr-2" %} Explore more apps
      </a>
    </div>
  </div>
</div>

<div id="build" class="border-top page-section f4 pt-4">
  <div class="container-lg px-3">
    <h2 class="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/">
        <i class="m-2">{% octicon "tools" %}</i> 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-md-6 hide-md">
        <img
          alt=""
          src="/assets/img/conversation.svg"
          class="d-block width-fit mx-6"
        />
      </div>
      <div class="col-md-6">
        <h3 class="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-md-flex flex-md-row gutter-md flex-md-items-center">
        <div class="col-md-5">
          <h3 class="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-md-7">
          <div
            class="rounded-2 overflow-hidden border"
            style="margin-left: 60px"
          >
{% highlight javascript %}
export default (app) => {
  app.on('issues.opened', async context => { 
    const params = context.issue({ body: 'Hello World!' })
    await context.octokit.issues.createComment(params) 
  })
}
{% endhighlight %}
          </div>
        </div>
      </div>

      <div class="d-md-flex flex-md-row flex-md-row-reverse gutter mt-4">
        <div class="col-md-7">
          <img
            alt=""
            src="https://github.com/probot.png"
            height="44"
            width="44"
            class="avatar rounded-1 float-left"
          />
          <div
            class="timeline-comment box rounded-2 border color-bg-primary"
            style="margin-left: 60px"
          >
            <div class="color-bg-tertiary px-3 py-2 border-bottom">
              <strong>@probot</strong> commented
            </div>
            <p class="m-0 p-3">Hello World!</p>
          </div>
        </div>
        <div class="col-md-5">
          <h2 class="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>
    </div>
  </div>
</div>