probot.github.io/index.html at 60fd3b35001527e0454d4a00be1d9f1b3d53a70e · probot/probot.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
---
layout: default
---
<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="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 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/logo.png" class="width-fit" alt="Probot logo">
        </div>
      </div>
    </div>
  </header>
</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">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 = site.apps | sort: 'installations' | reverse %}
      {% for app in apps limit:6 %}
        {% include app.html app=app %}
      {% 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">
  <div class="container-lg px-3">
    <h2 class="alt-h1 text-center lh-condensed">Quickstarts</h2>
    <p class="alt-lead text-center">Apps are easy to write and share.</p>
    <p class="text-center">
      <a href="/docs/">Get started with this app {% octicon chevron-right %}</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-7 hide-md">
          <img alt="" src="/assets/comment.png" class="width-fit">
      </div>
      <div class="col-md-6">
        <h3 class="alt-h3 mb-2">Comment on an Issue</h3>
        <p class="">
          Get started with an app that will post a comment any time an issue is opened.
        </p>
        <p class="mt-3">
          <a href="/docs/">Get started with this app {% octicon chevron-right %}</a>
        </p>
      </div>
    </div>

    <div class="page-section d-flex flex-column flex-md-row gutter flex-items-center flex-md-items-center">
      <div class="col-md-6">
        <h3 class="alt-h3 mb-2">Create a Check</h3>
        <p class="">
          Get started with an app that creates successful checks on pull requests.
        </p>
        <p class="mt-3">
          <a href="/docs/">Get started with this app {% octicon chevron-right %}</a>
        </p>
      </div>

      <div class="col-md-7 hide-md">
          <img alt="" src="/assets/checks.png" class="width-fit">
      </div>
    </div>

    <div class="page-section d-flex flex-column flex-md-row gutter flex-items-center flex-md-items-center">
      <div class="col-md-7 hide-md">
          <img alt="" src="/assets/pr.png" class="width-fit">
      </div>
      <div class="col-md-6">
        <h3 class="alt-h3 mb-2">Open a Pull Request</h3>
        <p class="">
          Get started with an app that will open a new pull request when you install it on your repository.
        </p>
        <p class="mt-3">
          <a href="/docs/">Get started with this app {% octicon chevron-right %}</a>
        </p>
      </div>
    </div>

    <p class="text-center mb-6">
      <a class="btn btn-outline btn-large" href="/docs/">
        {% octicon versions class:"mr-2" %}
        Browse Quickstarts
      </a>
    </p>
  </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-md-6 hide-md">
          <img alt="" src="/assets/conversation.svg" class="d-block width-fit mx-6">
      </div>
      <div class="col-md-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-md-flex flex-md-row gutter-md flex-md-items-center">
        <div class="col-md-5">
          <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-md-7">
          <div class="rounded-2 overflow-hidden border" style="margin-left: 60px;">
{% highlight javascript %}
module.exports = app => {
  app.on('issues.opened', async context => {
    const params = context.issue({
      body: 'Hello World!'
    })
    await context.github.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 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 class="col-md-5">
          <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>
    </div>
  </div>
</div>