/
index.html
199 lines (187 loc) · 9.41 KB
/
index.html
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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
{% extends "page.html" %}
{% block head %}
<meta id="base-url" data-url="{{base_url}}">
<meta id="badge-base-url" data-url="{{badge_base_url}}">
<script src="{{static_url("dist/bundle.js")}}"></script>
{{ super() }}
{% endblock head %}
{% block main %}
<div id="main" class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
{% block header %}
<div id="header" class="text-center">
<h3>Turn a Git repo into a collection of interactive notebooks</h3>
<div id="explanation">
Have a repository full of Jupyter notebooks? With Binder, open those notebooks in an executable environment, making your code immediately reproducible by anyone, anywhere.
</div>
</div>
{% endblock header %}
{% block form %}
<form id="build-form" class="form jumbotron">
<h4 id="form-header" class='row'>Build and launch a repository</h4>
<input type="hidden" id="provider_prefix" value="gh"/>
<div class="form-group row">
<label for="repository">GitHub repo or Gist name or GitLab.com URL</label>
<div class="input-group">
<input class="form-control" type="text" id="repository" data-lpignore="true" placeholder="GitHub repository name or link"/>
<div class="input-group-btn" id="url-type-btn">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
title="Specify source of repository"
>
<span id="provider_prefix-selected">
GitHub
</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="provider_prefix_sel">
<li class="dropdown-item" value="gh"><a href="#">GitHub</a></li>
<li class="dropdown-item" value="gist"><a href="#">Gist</a></li>
<li class="dropdown-item" value="gl"><a href="#">GitLab.com</a></li>
<li class="dropdown-item" value="git"><a href="#">Git repository</a></li>
<li class="dropdown-item" value="zenodo"><a href="#">Zenodo DOI</a></li>
</ul>
</div>
</div>
</div>
<div class="form-row row">
<div class="form-group col-md-4">
<label for="ref">Git branch, tag, or commit</label>
<input class="form-control" type="text" id="ref" placeholder="master"/>
</div>
<div class="form-group col-md-6">
<label for="filepath"></label>
<div class="input-group">
<input class="form-control" type="text" id="filepath"
placeholder=""
/>
<div class="input-group-btn" id="url-or-file-btn">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
title="Specify whether the path to open is a URL or a file"
>
<span id="url-or-file-selected">
{{ 'URL' if urlpath else 'File' }}
</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">File</a></li>
<li class="dropdown-item"><a href="#">URL</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group col-md-2">
<div class="btn-group" id="launch-buttons">
<button id="submit" class="btn-submit" type="submit">launch</button>
</div>
</div>
</div>
<!--url section-->
<div class="url row">
<div class="dropdownmenu">
<label>Copy the URL below and share your Binder with others:</label>
</div>
<div class="url-row">
<pre id="basic-url-snippet" data-default="Fill in the fields to see a URL for sharing your Binder."></pre>
<img class="icon clipboard" src="{{static_url("images/copy-icon-black.svg")}}" data-clipboard-target="#basic-url-snippet" alt="Copy to clipboard">
</div>
</div>
<div class="badges row">
<div class="dropdownmenu" id="toggle-badge-snippet">
<label>Copy the text below, then paste into your README to show a binder badge: <img id="badge" src="{{static_url("images/badge_logo.svg")}}"></label>
<a id="badge-link"></a>
<a href="#" title="show badge snippets"><span id="badge-snippet-caret" class="glyphicon glyphicon-triangle-right"></span></a>
</div>
<div id="badge-snippets" class="hidden">
<!--Markdown section-->
<div class="badge-snippet-row">
<pre id="markdown-badge-snippet" data-default="Fill in the fields to see the markdown badge snippet."></pre>
<img class="icon" src="{{static_url("images/markdown-icon.svg")}}">
<img class="icon clipboard"
src="{{static_url("images/copy-icon-black.svg")}}"
data-clipboard-target="#markdown-badge-snippet"
alt="Copy markdown link to clipboard">
</div>
<!--RST section-->
<div class="badge-snippet-row">
<pre id="rst-badge-snippet" data-default="Fill in the fields to see the rST badge snippet."></pre>
<img class="icon" src="{{static_url("images/rst-icon.svg")}}">
<img class="icon clipboard" src="{{static_url("images/copy-icon-black.svg")}}"
data-clipboard-target="#rst-badge-snippet"
alt="Copy rst link to clipboard">
</div>
</div>
</div>
<div id="build-progress" class="progress on-build hidden row">
<div id="phase-failed" class="progress-bar progress-bar-danger progress-bar-striped hidden" style="width: 100%">
Failed
</div>
<div id="phase-waiting" class="progress-bar progress-bar-danger progress-bar-striped active hidden" style="width: 10%">
Waiting
</div>
<div id="phase-already-built" class="progress-bar progress-bar-warning progress-bar-striped active hidden" style="width: 90%">
Already built!
</div>
<div id="phase-building" class="progress-bar progress-bar-warning progress-bar-striped active hidden" style="width: 40%">
Building
</div>
<div id="phase-pushing" class="progress-bar progress-bar-info progress-bar-striped active hidden" style="width: 40%">
Pushing
</div>
<div id="phase-launching" class="progress-bar progress-bar-success progress-bar-striped active hidden" style="width: 10%">
Launching
</div>
</div>
<div id="log-container" class="panel panel-default on-build hidden row">
<div id="toggle-logs" class="panel-heading">
Build logs
<button type="button" class="btn btn-link btn-xs pull-right">show</button>
</div>
<div class="panel-body hidden">
<div id="log"></div>
</div>
</div>
</form>
{% endblock form %}
</div>
</div>
{% block how_it_works %}
<div id="how-it-works">
<h3 class="text-center">How it works</h3>
<div class="row">
<div class="col-md-1 col-md-offset-2 point-container">
<span class="point point-orange">1</span>
</div>
<div class="col-md-7 front">
<span class="front-em">Enter your repository information</span><br />Provide in the above form a URL or a GitHub repository that contains Jupyter notebooks, as well as a branch, tag, or commit hash. Launch will build your Binder repository. If you specify a path to a notebook file, the notebook will be opened in your browser after building.
</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-2 point-container">
<span class="point point-red">2</span>
</div>
<div class="col-md-7 front">
<span class="front-em">We build a Docker image of your repository</span><br />Binder will search for a dependency file, such as requirements.txt or environment.yml, in the repository's root directory (<a href="http://mybinder.readthedocs.io/en/latest/using.html#preparing-a-repository-for-binder">more details on more complex dependencies in documentation</a>). The dependency files will be used to build a Docker image. If an image has already been built for the given repository, it will not be rebuilt. If a new commit has been made, the image will automatically be rebuilt.
</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-2 point-container">
<span class="point point-blue">3</span>
</div>
<div class="col-md-7 front">
<span class="front-em">Interact with your notebooks in a live environment!</span><br />A <a href="https://jupyterhub.readthedocs.io/en/latest/">JupyterHub</a> server will host your repository's contents. We offer you a reusable link and badge to your live repository that you can easily share with others.
</div>
</div>
</div>
{% endblock how_it_works %}
</div>
{% endblock main %}
{% block footer %}
{{ super () }}
<script type="text/javascript">
indexMain();
</script>
{% endblock footer %}