index.html (194 lines of code) (raw):
<!DOCTYPE html>
<!--
Copyright (c) Facebook, Inc. and its affiliates.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Facebook / Peter Cottle">
<meta property="og:title" content="Facebook PathPicker"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://facebook.github.io/pathpicker/" />
<meta property="og:image" content="https://facebook.github.io/PathPicker/assets/og-image.png" />
<meta property="og:description" content="PathPicker is a command line tool to easily select files from piped input."/>
<meta name="description" content="PathPicker is a command line tool to easily select files from piped input."/>
<link rel="icon" href="assets/fpp-favicon.ico">
<title>Facebook PathPicker</title>
<!-- Bootstrap core CSS -->
<link href="assets/bootstrap.min.css" rel="stylesheet">
<!-- our overrides -->
<link href="assets/launch_page.css" rel="stylesheet">
<!-- font awesome for the copy button -->
<link rel="stylesheet" href="assets/font-awesome.css" type="text/css" charset="utf-8">
</head>
<body cz-shortcut-listen="true">
<div style="padding: 0 0; background-color: #000;">
<div style=" font-weight: bold; font-size: 20px; padding: 20px; max-width: 768px; margin: 0 auto; text-align: center; color: white;">
Support Ukraine πΊπ¦
<a href="https://opensource.fb.com/support-ukraine">
Help Provide Humanitarian Aid to Ukraine
</a>
.
</div>
</div>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="https://facebook.github.io/PathPicker/">Facebook PathPicker</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Facebook PathPicker</a></li>
<li><a href="https://github.com/facebook/pathpicker/">View on GitHub</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="github-counter">
<iframe
src="https://ghbtns.com/github-btn.html?user=facebook&repo=pathpicker&type=star&count=true"
frameborder="0"
scrolling="0"
width="94px"
height="30px"
align="right">
</iframe>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="jumbotron pathPickerHeader">
<div class="container">
<div class="heading">
<img id="logo" src="assets/heading@2x.png" />
<p class="lead">Why Pipe when you can Pick?</p>
</div>
</div>
<div class="callToAction">
<p>
brew update; brew install fpp; fpp
<button
id="brew-install-button"
class="btn btn-success"
data-toggle="tooltip"
data-placement="bottom"
data-clipboard-text="brew update; brew install fpp; fpp"
title="Copy to Clipboard">
<i class="icon-paste"></i>
</button>
</p>
</div>
</div>
<div class="container">
<br/>
<div align="center">
<h3>Watch Introductory Video</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/oWTCeNRUNVo"
title="Explain Like I'm 5: PathPicker" frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen ></iframe>
</div>
<br/>
<hr>
<div class="row">
<div class="col-md-6 content">
<h2>Any Input</h2>
<p>
PathPicker accepts a wide range of input -- output from git commands, grep results, searches -- pretty much anything.
</p>
<p>
After parsing the input, PathPicker presents you with a nice UI to select which files you're interested in. After that
you can open them in your favorite editor or execute arbitrary commands.
</p>
<p><a class="btn btn-success" href="https://github.com/facebook/pathpicker/" role="button">More on GitHub</a></p>
</div>
<div class="asciiDemo col-md-6">
<!-- <script type="text/javascript" src="https://asciinema.org/a/19519.js" id="asciicast-19519" async> -->
<!-- </script> -->
<a class="mobile-show" href="https://asciinema.org/a/19519" target="_blank"><img src="https://asciinema.org/a/19519.png" /></a>
<div class="mobile-hide">
<script id="asciicast-19519" src="https://asciinema.org/a/19519.js" async></script>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6 content">
<h2>Arbitrary Commands</h2>
<p>
Besides opening files in your editor, PathPicker also allows you to execute arbitrary commands with the selected
files.
</p>
<p>
You can use your selection to add files to version control, change permissions, scp, delete -- pretty much
whatever you want!
</p>
<a class="btn btn-success" href="https://github.com/facebook/pathpicker/" role="button">More on GitHub</a>
</div>
<div class="asciiDemo col-md-6">
<!-- <script type="text/javascript" src="https://asciinema.org/a/19520.js" id="asciicast-19520" async></script> -->
<a class="mobile-show" href="https://asciinema.org/a/19520" target="_blank"><img src="https://asciinema.org/a/19520.png" /></a>
<div class="mobile-hide">
<script id="asciicast-19520" src="https://asciinema.org/a/19520.js" async></script>
</div>
</div>
</div>
</div>
<!--
==================================================
Bootstrap core JavaScript
==================================================
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="assets/ZeroClipboard.min.js"></script>
<script>
$(window).resize(function() {
if ($(window).width() < 768) {
$("nav").addClass("navbar-fixed-top");
} else {
$("nav").removeClass("navbar-fixed-top");
}
});
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// also wire up the clipboard listener
var client = new ZeroClipboard(
document.getElementById('brew-install-button')
);
client.on('ready', function() {
client.on('aftercopy', function() {
// I weep at how manual this is :(
var toolTip = $('div.tooltip-inner');
toolTip.text('Copied!');
var parentLeft = toolTip.parent().css('left');
// we have to shift over the whole thing manually
parentLeft = parseInt(parentLeft, 10) + 30 + 'px';
toolTip.parent().css('left', parentLeft);
});
});
</script>
<!--
==================================================
GA tracking and FB pixel
==================================================
-->
<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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-37500646-4', 'auto');
ga('send', 'pageview');
</script>
<script>(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
_fbq.push(['addPixelId', '1376649522580546']);
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', '6025101274956', {'value':'0.00','currency':'USD'}]);
</script>
<noscript>
<img height="1" width="1" alt="" style="display:none"
src="https://www.facebook.com/tr?ev=6025101274956&cd[value]=0.00&cd[currency]=USD&noscript=1"
/>
</noscript>
</body>
</html>