-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
398 lines (368 loc) · 21.8 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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pingy CLI: The Simple Frontend Build Tool</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Language" content="en">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<header class="hero-header">
<div class="bg-design-1"></div>
<div class="bg-design-2"></div>
<div class="bg-border"></div>
<div class="container">
<div class="logo">
<img src="images/logo1.svg">
</div>
<h2 class="tagline">No Config • No Plugins</h2>
<div class="headline">
<h1 class="hero-text">
<span><div>The</div><span></span></span><br>
<strong>
<span><div>Simple</div><span></span></span><br>
<span><div>Frontend</div><span></span></span><br>
</strong>
<span><div>Build Tool</div><span></span></span>
</h1>
</div>
<div class="explainer">
<terminal></terminal>
<web-browser></web-browser>
<code-editor></code-editor>
<div class="finished-demo-text">
Pingy CLI does all LESS/SASS/Babel/etc.. compilations in-memory, so it's <b>super</b> fast.
We also include Source Maps so it's easier to debug your code.<br><br>
When it comes time to push your site to production then Pingy CLI has your back too.
Pingy will compile all your assets, minify them and output them to disk so you can upload them wherever
you like.
</div>
</div>
</div>
</header>
<div class="install-code">
<code id="npmInstallPingy" title="Use this command to install Pingy CLI using NodeJS">npm install -g @pingy/cli</code>
<small>(Requires Node.js 6+)</small>
<button class="click-to-copy" data-clipboard-target="#npmInstallPingy">
Click to Copy
<span class="success">Copied!</span>
</button>
</div>
<article class="synopsis">
<p>
Gulp and Grunt and other heavyweight build tools are great for <em>complicated</em> build workflows.
Sometimes you want something <em>simpler</em> that doesn't take lots of configuration to get up and running.<br>
<strong>That's Pingy CLI.</strong><br>
<a style="display:none" class="github-button" href="https://github.com/pingyhq/pingy-cli" data-icon="octicon-star" data-show-count="true" aria-label="Star pingyhq/pingy-cli on GitHub">Star</a>
<a href="https://travis-ci.org/pingyhq/pingy-cli"><img src="https://travis-ci.org/pingyhq/pingy-cli.svg?branch=master" alt="Build Status"></a>
<img src="https://img.shields.io/npm/v/@pingy/cli.svg" alt="npm">
</p>
</article>
<div class="feature">
<article>
<h3>1. Initialise</h3>
<div class="run-code">
<code id="pingyInit">pingy init</code>
<button class="click-to-copy" data-clipboard-target="#pingyInit">
Click to Copy
<span class="success">Copied!</span>
</button>
</div>
<p>
An <strong>interactive prompt</strong> will ask you a few questions and can then install
requested dependencies (e.g. Sass, Less, Babel, CoffeeScript etc..).
Optionally, init can also <strong>scaffold</strong> some boilerplate files for your website.
</p>
<p>
Pingy is <strong>zero-configuration</strong> but it does place a .pingy.json file in your
website folder to help Pingy identify the root of your website.
Currently, this only contains the default folder name for exporting you site
('dist'), you can change this if you like.
</p>
<p>
<em>Coming soon: A non-interactive version of the init command.</em>
In the mean-time, it's worth noting that you can actually initialise a
Pingy project by simply running the command <code>touch .pingy.json</code>.
</p>
</article>
<aside>
<div class="">
<h4>Watch an example of <code>pingy init</code></h4>
<script type="text/javascript" src="https://asciinema.org/a/ek7luzrvy3lb5kgirw6jlyryi.js" id="asciicast-ek7luzrvy3lb5kgirw6jlyryi" async></script>
</div>
</aside>
</div>
<div class="feature">
<article>
<h3>2. Develop</h3>
<div class="run-code">
<code id="pingyDev">pingy dev</code>
<button class="click-to-copy" data-clipboard-target="#pingyDev">
Click to Copy
<span class="success">Copied!</span>
</button>
</div>
<p>
Start-up a local development server. Automatically supports <strong>live
browser reload</strong> and <strong>compilation/transpilation</strong> (with in-memory smart caching).
</p>
<p>
All of this <strong>without any configuration</strong>! Debugging is a joy too because
we show you syntax errors in-browser (instead of hidden away in the terminal),
we also support <strong>SourceMaps</strong> out-of-the-box.
</p>
<h4>2.5 Compilation</h4>
<p>
Pingy CLI works with Sass, Less, Stylus, Jade, Pug, Markdown, EJS, Bublé, LiveScript, Babel & Coffeescript
with more coming soon.
</p>
<p>
Pingy CLI will watch incoming HTTP requests, <storng>compile lazily</storng> in-memory and <strong>cache</strong> the compilation output.
</p>
</article>
<aside>
<h4>How Compilation works</h4>
<p>
<label style="font-weight:bold;">Which plugin do you want to use?</label>
<select id="pluginChanger"></select>
<img src="images/change-me.svg" class="change-me">
</p>
<p>
<strong>1.</strong> Create your <a data-language="name" href="http://sass-lang.com/" data-language="url" target="_blank">Sass</a> file just as you would normally and save it with the
<strong>file extension of <code>.<span data-language="extension">scss</span></code></strong>.
Your <a href="http://sass-lang.com/" data-language="name" target="_blank">Sass</a> file might look like this:
</p>
<plugin-code-editor subtitle="~/Sites/My-Site"></plugin-code-editor>
<p style="margin-top: 30px;">
<strong>2.</strong> Reference the file with it's <strong>compiled</strong> file extension. So in the case of
<a data-language="name" href="http://sass-lang.com/" target="_blank">Sass</a> that would be <code>
<strong>.<span data-language="compiledExtension">css</span></strong></code> (even though that file doesn't exist on disk).
</p>
<plugin-ref-code-editor subtitle="~/Sites/My-Site" title="index.html"></plugin-ref-code-editor>
<p>
Done! You've got <strong>SourceMaps</strong>, <strong>smart caching</strong>, <strong>Live Reload</strong> and <strong>in-browser syntax errors</strong>.
It's that easy!
</p>
<!-- <code-editor-refs></code-editor-refs>
<p style="text-align: center;">
<button type="button" class="button" id="showMeCompilation">⬆ Show Me</button>
</p>
<p>
Simply <em>save</em> your file with the correct corresponding extension,
for example: <code>main.<b>less</b></code> for LESS files or
<code>app.<b>coffee</b></code> for CoffeeScript files.
</p>
<p>
Then reference the file in it's destination format, for example:
<code>main.<b>css</b></code> or <code>app.<b>js</b></code>.
</p>
<p>
Even though <code>main.css</code> and <code>app.js</code> don't exist (<code>404</code>),
Pingy CLI will watch incoming HTTP requests and compile the files lazily in-memory.
</p> -->
</aside>
</div>
<div class="feature">
<article>
<h3>3. Export</h3>
<div class="run-code">
<code id="pingyExport">pingy export</code>
<button class="click-to-copy" data-clipboard-target="#pingyExport">
Click to Copy
<span class="success">Copied!</span>
</button>
</div>
<p>
<strong>Minify</strong> all your assets and <strong>compile</strong> all your source files with one simple command.
Pingy CLI will make sure your site is <strong>optimised</strong> and ready-for-production.
</p>
<p>
One of the really nice things about Pingy CLI is that it <em>doesn't</em> re-compile
your project from scratch each time you do an export.
Pingy CLI is smart and <strong>only re-compiles the files that have changed since your last export</strong>.
</p>
</article>
<aside>
<div class="">
<div class="">
<h4>Watch an example of <code>pingy export</code></h4>
<script type="text/javascript" src="https://asciinema.org/a/8krd3lbyzxkt11rbeiy50ya82.js" id="asciicast-8krd3lbyzxkt11rbeiy50ya82" async></script>
</div>
</div>
</aside>
</div>
<div style="background: #e6f4ff; padding: 20px 0; border-top: 3px #b3deff solid">
<div class="feature">
<div class="feature-list">
<h3>Features</h3>
<table class="compare-minimal">
<thead>
<tr>
<th></th>
<th>Pingy CLI</th>
<th>Gulp/Grunt</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="table-tooltip-item">
<span>Initialise project helper</span>
<div class="tooltip">An interactive prompt can help you install dependencies and scaffold out boilerplate files.</div>
</div>
</td>
<td><img src="images/feature-yes.svg"></td>
<td><img src="images/feature-no.svg"></td>
</tr>
<tr>
<td>
<div class="table-tooltip-item">
<span>Compile/transpile</span>
<div class="tooltip">Pingy CLI works with Sass, Less, Stylus, Jade, Pug, Markdown, EJS, Bublé, LiveScript, Babel & Coffeescript with more coming soon.</div>
</div>
</td>
<td><img src="images/feature-yes.svg"></td>
<td>Requires plugin(s) + config</td>
</tr>
<tr>
<td>
<div class="table-tooltip-item">
<span>Zero-configuration</span>
<div class="tooltip">No time spent configuring your project, just follow Pingy CLI's simple conventions.</div>
</div>
</td>
<td><img src="images/feature-yes.svg"></td>
<td><img src="images/feature-no.svg"></td>
</tr>
<tr>
<td>
<div class="table-tooltip-item">
<span>Live Reload</span>
<div class="tooltip">Reloads the browser/styles when it detects a file change.</div>
</div>
</td>
<td><img src="images/feature-yes.svg"></td>
<td>Requires plugin + config</td>
</tr>
<tr>
<td>
<div class="table-tooltip-item">
<span>Smart efficient file watching</span>
<div class="tooltip">Gulp/Grunt can end up watching huge numbers of files for doing compilation and live-reload.<br>Pingy is more efficient, it knows which files are needed to serve your site and it will only watches those files.</div>
</div>
</td>
<td><img src="images/feature-yes.svg"></td>
<td><img src="images/feature-no.svg"></td>
</tr>
<tr>
<td>Source Maps</td>
<td><img src="images/feature-yes.svg"></td>
<td>Requires plugin + config</td>
</tr>
<tr>
<td>Minification</td>
<td><img src="images/feature-yes.svg"></td>
<td>Requires plugin + config</td>
</tr>
<tr>
<td>
<div class="table-tooltip-item">
<span>In-memory Compilation</span>
<div class="tooltip">Pingy CLI doesn't need to write files to your hard-drive or use temporary directories. It's all done in-memory which makes it super-fast and keeps your file-system clean.</div>
</div>
</td>
<td><img src="images/feature-yes.svg"></td>
<td><img src="images/feature-no.svg"></td>
</tr>
<tr>
<td>
<div class="table-tooltip-item">
<span>Export</span>
<div class="tooltip">Export your site so you can FTP or do whatever you like with it.</div>
</div>
</td>
<td><img src="images/feature-yes.svg"></td>
<td>Requires config</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="pingy-call-to-action">
<topbar></topbar>
<div class="placeholder" title="https://pin.gy/">
<div class="videos" style="left: auto; display: block;">
<div class="inner">
<video playsinline="" webkit-playsinline="" muted="" autoplay="" style="display: block" class="pingy-ui-video" preload="auto" loop>
<source src="https://pin.gy/images/videos/pingy-ui-600-cropped.mp4">
</video>
</div>
</div>
<div class="text">
<a href="https://pin.gy"><img src="./images/check-out.svg" class="check-out"></a>
<svg class="pingy-logo" width="35px" height="49px" viewbox="0 0 35 49" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(4.000000, 4.500000)">
<path d="M18.2132404,34.8651163 L8.20515679,34.8651163 C7.38197352,34.8651163 6.74460209,35.6692093 7.01862857,36.5426977 C7.18374355,37.0695814 7.71100767,37.3953488 8.25777282,37.3953488 L8.27653798,37.3953488 C8.99899652,37.3953488 9.65954843,37.8083721 9.98287944,38.4618605 L9.99603345,38.4884651 C10.4320474,39.3689302 11.3221045,39.9255814 12.296053,39.9255814 L14.1225282,39.9255814 C15.0964767,39.9255814 15.9865338,39.3689302 16.4219038,38.4884651 L16.4350578,38.4618605 C16.7584808,37.8084651 17.4189408,37.3953488 18.1413993,37.3953488 L18.1601645,37.3953488 C18.7068376,37.3953488 19.2341937,37.0695814 19.3993087,36.5426977 C19.6737951,35.6691163 19.0364237,34.8651163 18.2132404,34.8651163 L18.2132404,34.8651163 Z M19.4643429,31.6651163 C19.4643429,32.3634419 18.9038718,32.9302326 18.2132404,32.9302326 L8.20515679,32.9302326 C7.51461742,32.9302326 6.95414634,32.3634419 6.95414634,31.6651163 C6.95414634,30.9914419 7.47644321,30.4455814 8.13322369,30.4075349 C7.35446969,23.2887442 0.0735888502,21.7029767 0.0735888502,13.3209302 C0.0735888502,5.98455814 5.95462578,0.0372093023 13.2091986,0.0372093023 C20.4637714,0.0372093023 26.3448084,5.98455814 26.3448084,13.3209302 C26.3448084,21.7028837 19.0639275,23.2887442 18.2851735,30.4076279 C18.941954,30.4455814 19.4643429,30.9914419 19.4643429,31.6651163 L19.4643429,31.6651163 Z" stroke="#FFFFFF" stroke-width="6" fill="#333333"></path>
<path d="M18.2132404,34.8651163 L8.20515679,34.8651163 C7.38197352,34.8651163 6.74460209,35.6692093 7.01862857,36.5426977 C7.18374355,37.0695814 7.71100767,37.3953488 8.25777282,37.3953488 L8.27653798,37.3953488 C8.99899652,37.3953488 9.65954843,37.8083721 9.98287944,38.4618605 L9.99603345,38.4884651 C10.4320474,39.3689302 11.3221045,39.9255814 12.296053,39.9255814 L14.1225282,39.9255814 C15.0964767,39.9255814 15.9865338,39.3689302 16.4219038,38.4884651 L16.4350578,38.4618605 C16.7584808,37.8084651 17.4189408,37.3953488 18.1413993,37.3953488 L18.1601645,37.3953488 C18.7068376,37.3953488 19.2341937,37.0695814 19.3993087,36.5426977 C19.6737951,35.6691163 19.0364237,34.8651163 18.2132404,34.8651163 L18.2132404,34.8651163 Z M19.4643429,31.6651163 C19.4643429,32.3634419 18.9038718,32.9302326 18.2132404,32.9302326 L8.20515679,32.9302326 C7.51461742,32.9302326 6.95414634,32.3634419 6.95414634,31.6651163 C6.95414634,30.9914419 7.47644321,30.4455814 8.13322369,30.4075349 C7.35446969,23.2887442 0.0735888502,21.7029767 0.0735888502,13.3209302 C0.0735888502,5.98455814 5.95462578,0.0372093023 13.2091986,0.0372093023 C20.4637714,0.0372093023 26.3448084,5.98455814 26.3448084,13.3209302 C26.3448084,21.7028837 19.0639275,23.2887442 18.2851735,30.4076279 C18.941954,30.4455814 19.4643429,30.9914419 19.4643429,31.6651163 L19.4643429,31.6651163 Z" fill="#333333"></path>
<path d="M19.6748601,14.7845305 L14.069291,3.46725365 C13.9882403,3.3221351 13.8816979,3.25581395 13.7601219,3.25581395 C13.5764506,3.25581395 13.4280756,3.40487237 13.4280756,3.58938962 C13.4280756,3.59267285 13.4365728,3.66227722 13.4365728,3.66227722 L14.380421,11.3141616 C14.3908791,11.4060919 14.39284,11.4389242 14.39284,11.4724131 C14.39284,12.0246515 13.9457541,12.4718268 13.3940866,12.4718268 L8.16370363,12.4770799 C7.39306861,12.5374913 6.78518856,13.1829733 6.78518856,13.9709474 C6.78518856,14.2033997 6.83813295,14.4233758 6.93356358,14.6197126 L12.5776971,26.0164436 L12.6129934,26.0899878 C12.6750887,26.1799482 12.7777093,26.2383896 12.8907881,26.2383896 C13.0744593,26.2383896 13.2247953,26.0899878 13.2247953,25.9048139 C13.2176053,25.8378361 12.2776789,18.2253504 12.2776789,18.2253504 C12.2665671,18.1734755 12.2600308,18.1202872 12.2580699,18.0657857 C12.256109,17.4688954 12.703195,17.0210635 13.2548624,17.0210635 L18.4904745,17.0158103 C19.2611095,16.9560556 19.8689895,16.3105736 19.8689895,15.5225995 C19.8689895,15.316413 19.8284642,15.1200761 19.7526426,14.9414687 C19.7526426,14.9408121 19.6748601,14.7845305 19.6748601,14.7845305 Z" fill="#fc0" transform="translate(13.327089, 14.747102) scale(-1, 1) translate(-13.327089, -14.747102)"></path>
</g>
</svg>
<h4>Pingy CLI has been extracted from the <a href="https://pin.gy">Pingy Desktop App</a>. <span>If you make Websites then you should check it out.</span></h4>
<p>Quicker client feedback and website iterations. No more configuring build tools. No more setting up servers. No more messing with the command-line.</p>
</div>
</div>
<footer class="main-footer">
© 2017 Pingy • <a href="mailto:hi@pin.gy">hi@pin.gy</a> • <a href="https://twitter.com/pingyhq">@pingyhq on twitter</a>
<div class="pingy-loves-you" title="Pingy Loves You!">
<svg style="position: relative; top: 2px" width="11px" height="17px" viewBox="0 0 14 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(0.000000, 0.500000)" fill-rule="nonzero" fill="#bbb">
<path d="M13.67486,11.7845305 L8.06929094,0.46725365 C7.98824024,0.3221351 7.88169784,0.25581395 7.76012184,0.25581395 C7.57645054,0.25581395 7.42807554,0.40487237 7.42807554,0.58938962 C7.42807554,0.59267285 7.43657274,0.66227722 7.43657274,0.66227722 L8.38042094,8.3141616 C8.39087904,8.4060919 8.39283994,8.4389242 8.39283994,8.4724131 C8.39283994,9.0246515 7.94575404,9.4718268 7.39408654,9.4718268 L2.16370357,9.4770799 C1.39306855,9.5374913 0.7851885,10.1829733 0.7851885,10.9709474 C0.7851885,11.2033997 0.83813289,11.4233758 0.93356352,11.6197126 L6.57769704,23.0164436 L6.61299334,23.0899878 C6.67508864,23.1799482 6.77770924,23.2383896 6.89078804,23.2383896 C7.07445924,23.2383896 7.22479524,23.0899878 7.22479524,22.9048139 C7.21760524,22.8378361 6.27767884,15.2253504 6.27767884,15.2253504 C6.26656704,15.1734755 6.26003074,15.1202872 6.25806984,15.0657857 C6.25610894,14.4688954 6.70319494,14.0210635 7.25486234,14.0210635 L12.4904744,14.0158103 C13.2611094,13.9560556 13.8689894,13.3105736 13.8689894,12.5225995 C13.8689894,12.316413 13.8284641,12.1200761 13.7526425,11.9414687 C13.7526425,11.9408121 13.67486,11.7845305 13.67486,11.7845305 Z" transform="translate(7.327089, 11.747102) scale(-1, 1) translate(-7.327089, -11.747102) "></path>
</g>
</svg>
♥ <strong>U!</strong>
</div>
</footer>
</div>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
(i[r] =
i[r] ||
function() {
(i[r].q = i[r].q || []).push(arguments);
}), (i[r].l = 1 * new Date());
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
})(
window,
document,
'script',
'https://www.google-analytics.com/analytics.js',
'ga'
);
ga('create', 'UA-76471371-1', 'auto');
ga('send', 'pageview');
</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/bliss.js"></script>
<script src="scripts/utils.js"></script>
<script src="bower_components/clipboard/dist/clipboard.min.js"></script>
<script src="scripts/terminal.js"></script>
<script src="scripts/browser.js"></script>
<script src="scripts/code-editor.js"></script>
<!-- <script src="scripts/code-editor-refs.js"></script> -->
<script src="scripts/main.js"></script>
<script src="scripts/plugin-editor.js"></script>
<script src="scripts/plugin-ref-editor.js"></script>
<script src="scripts/topbar.js"></script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>