Merge pull request #91 from lbryio/quickstart

Quickstart
This commit is contained in:
Jeremy Kauffman 2017-02-27 18:17:26 -05:00 committed by GitHub
commit 22dcbb07d0
28 changed files with 768 additions and 382 deletions

View file

@ -89,9 +89,9 @@ class Controller
$router->get(['/ios', 'get-ios'], 'DownloadActions::executeGet');
$router->get('/roadmap', 'ContentActions::executeRoadmap');
$router->get('/developer-program', 'AcquisitionActions::executeDeveloperProgram');
$router->post('/developer-program/post', 'AcquisitionActions::executeDeveloperProgramPost');
$router->get('/developer-program/callback', 'AcquisitionActions::executeDeveloperProgramGithubCallback');
$router->post('/quickstart/auth', 'DeveloperActions::executeQuickstartAuth');
$router->get('/quickstart/{step}?', 'DeveloperActions::executeQuickstart');
$router->get('/quickstart/github/callback', 'DeveloperActions::executeQuickstartGithubCallback');
$router->get(['/press-kit.zip', 'press-kit'], 'ContentActions::executePressKit');
@ -127,7 +127,8 @@ class Controller
'/deck.pdf' => 'https://www.dropbox.com/s/0xj4vgucsbi8rtv/lbry-deck.pdf?dl=1',
'/pln.pdf' => 'https://www.dropbox.com/s/uevjrwnyr672clj/lbry-pln.pdf?dl=1',
'/plan.pdf' => 'https://www.dropbox.com/s/uevjrwnyr672clj/lbry-pln.pdf?dl=1',
'/api-help' => 'https://lbryio.github.io/lbry/api/',
'/api' => 'https://lbryio.github.io/lbry',
'/api-help' => 'https://lbryio.github.io/lbry'
];

View file

@ -6,9 +6,11 @@ class Session
KEY_DOWNLOAD_ALLOWED = 'beta_download_allowed2',
KEY_PREFINERY_USER_ID = 'prefinery_user_id',
KEY_PREFINER_USED_CUSTOM_CODE = 'prefinery_used_custom_code',
KEY_DEVELOPER_LAST_FORM = 'developer_last_form',
KEY_DEVELOPER_CREDITS_ERROR = 'developer_credits_error',
KEY_DEVELOPER_CREDITS_SUCCESS = 'developer_credits_success',
KEY_DEVELOPER_CREDITS_WALLET_ADDRESS = 'developer_credits_wallet_address',
KEY_DEVELOPER_RETURN_URL_SUCCESS = 'developer_return_url_success',
KEY_GITHUB_ACCESS_TOKEN = 'github_access_token',
KEY_LIST_SUB_ERROR = 'list_error',
KEY_USER_CULTURE = 'user_culture';

View file

@ -2,8 +2,6 @@
class AcquisitionActions extends Actions
{
const DEVELOPER_REWARD = 250;
public static function executeThanks()
{
return ['acquisition/thanks'];
@ -41,145 +39,4 @@ class AcquisitionActions extends Actions
}
return [$template];
}
public static function executeDeveloperProgram()
{
return ['acquisition/developer-program', [
'defaultWalletAddress' => Session::get(Session::KEY_DEVELOPER_CREDITS_WALLET_ADDRESS),
'error' => Session::getFlash(Session::KEY_DEVELOPER_CREDITS_ERROR),
'success' => Session::getFlash(Session::KEY_DEVELOPER_CREDITS_SUCCESS)
]];
}
public static function executeDeveloperProgramPost()
{
$walletAddress = trim(Request::getPostParam('wallet'));
Session::set(Session::KEY_DEVELOPER_CREDITS_WALLET_ADDRESS, $walletAddress);
if (!$walletAddress)
{
Session::setFlash(Session::KEY_DEVELOPER_CREDITS_ERROR, 'Please provide a wallet address.');
}
elseif (!preg_match('/^b[1-9A-HJ-NP-Za-km-z]{33}$/', $walletAddress))
{
Session::setFlash(Session::KEY_DEVELOPER_CREDITS_ERROR, 'This does not appear to be a valid wallet address.');
}
else
{
if (!Config::get('github_developer_credits_client_id'))
{
throw new Exception('no github client id');
}
$githubParams = [
'client_id' => Config::get('github_developer_credits_client_id'),
'redirect_uri' => Request::getHostAndProto() . '/developer-program/callback',
'scope' => 'user:email',
'allow_signup' => false
];
return Controller::redirect('https://github.com/login/oauth/authorize?' . http_build_query($githubParams));
}
return Controller::redirect('/developer-program');
}
public static function executeDeveloperProgramGithubCallback()
{
$code = Request::getParam('code');
$walletAddress = Session::get(Session::KEY_DEVELOPER_CREDITS_WALLET_ADDRESS);
if (!$walletAddress)
{
Session::setFlash(Session::KEY_DEVELOPER_CREDITS_ERROR, 'Your wallet address disappeared while authenticated with GitHub.');
}
elseif (!$code)
{
Session::setFlash(Session::KEY_DEVELOPER_CREDITS_ERROR, 'This does not appear to be a valid response from GitHub.');
}
else
{
$authResponseData = Curl::post('https://github.com/login/oauth/access_token', [
'code' => $code,
'client_id' => Config::get('github_developer_credits_client_id'),
'client_secret' => Config::get('github_developer_credits_client_secret')
], [
'headers' => ['Accept: application/json'],
'json_response' => true
]);
if (!$authResponseData || !isset($authResponseData['access_token']))
{
Session::setFlash(Session::KEY_DEVELOPER_CREDITS_ERROR, 'Request to GitHub failed.');
}
elseif (isset($authResponseData['error_description']))
{
Session::setFlash(Session::KEY_DEVELOPER_CREDITS_ERROR, 'GitHub replied: ' . $authResponseData['error_description']);
}
else
{
$accessToken = $authResponseData['access_token'];
$userResponseData = Curl::get('https://api.github.com/user', [], [
'headers' => ['Authorization: token ' . $accessToken, 'Accept: application/json', 'User-Agent: lbryio'],
'json_response' => true
]);
if (date('Y-m-d', strtotime($userResponseData['created_at'])) > '2017-01-30')
{
Session::setFlash(Session::KEY_DEVELOPER_CREDITS_ERROR, 'This GitHub account is too recent.');
}
else
{
$lockName = 'github_dev_credits_write';
$dataFile = ROOT_DIR . '/data/writeable/github_developer_credits';
$lock = Lock::getLock($lockName, true); // EXCLUSIVE LOCK. IF SENDING CREDITS IS SLOW, THIS COULD BLOCK USERS
$existing = is_file($dataFile) ? json_decode(file_get_contents($dataFile), true) : [];
if (isset($existing[$userResponseData['login']]) || isset($existing[$userResponseData['id']]))
{
Session::setFlash(Session::KEY_DEVELOPER_CREDITS_ERROR, 'You already received credits.');
}
else
{
$response =
Curl::post('http://localhost:5279/lbryapi', [
'method' => 'send_amount_to_address',
'params' => [['amount' => 250, 'address' => $walletAddress]],
], [
'json_data' => true,
'json_response' => true,
]);
if ($response === [true])
{
$existing[$userResponseData['id']] = [$userResponseData['email'], $walletAddress, date('Y-m-d H:i:s'), $userResponseData['login']];
file_put_contents($dataFile, json_encode($existing));
Session::setFlash(Session::KEY_DEVELOPER_CREDITS_SUCCESS,
'Credits on their way to address ' . $walletAddress . ' for GitHub user ' . $userResponseData['login'] . '. It may take up to a minute for them to arrive.');
}
else
{
if (isset($response['faultString']) && stripos($response['faultString'], 'InsufficientFundsError') !== false)
{
Slack::sendErrorIfProd('Github dev credits need a refill');
Session::setFlash(Session::KEY_DEVELOPER_CREDITS_ERROR,
'Our wallet is running low on funds. Please ping jeremy@lbry.io so he can refill it, then try again.');
}
else
{
Slack::sendErrorIfProd('Error claiming github dev credits: ' . var_export($response, true));
Session::setFlash(Session::KEY_DEVELOPER_CREDITS_ERROR,
'Failed to send credits. This is an error on our side. Please email jeremy@lbry.io if it persists.');
}
}
}
Lock::freeLock($lock);
$lock = null;
}
}
}
return Controller::redirect('/developer-program');
}
}

View file

@ -0,0 +1,128 @@
<?php
class DeveloperActions extends Actions
{
const DEVELOPER_REWARD = 250,
API_DOC_URL = 'https://lbryio.github.io/lbry/api/';
public static function executeQuickstart(string $step = null)
{
$stepLabels = [
'' => 'Home',
'install' => 'Installation',
'api' => 'The API',
'credits' => 'Credits'
];
$allSteps = array_keys($stepLabels);
$currentStep = $step ?: $allSteps[0];
$viewParams = [
'currentStep' => $currentStep,
'stepLabels' => $stepLabels
];
if ($currentStep !== 'all')
{
if (!isset($stepLabels[$currentStep]))
{
Controller::redirect('/quickstart');
}
$stepNum = array_flip($allSteps)[$currentStep];
$viewParams += [
'stepNum' => $stepNum,
'prevStep' => $stepNum === 0 ? null : $allSteps[$stepNum - 1],
'nextStep' => $stepNum + 1 >= count($allSteps) ? null : $allSteps[$stepNum + 1],
];
}
return ['developer/quickstart', $viewParams];
}
public static function prepareQuickstartHomePartial(array $vars)
{
return $vars + [
'usdValue' => static::DEVELOPER_REWARD * LBRY::getLBCtoUSDRate()
];
}
public static function prepareFormNewDeveloperRewardPartial(array $vars)
{
return $vars + [
'defaultWalletAddress' => Session::get(Session::KEY_DEVELOPER_CREDITS_WALLET_ADDRESS),
'error' => Session::get(Session::KEY_DEVELOPER_LAST_FORM) == "new_developer" ? Session::getFlash(Session::KEY_DEVELOPER_CREDITS_ERROR) : '',
'apiUrl' => LBRY::getApiUrl('/user/new_github')
];
}
public static function prepareFormCreditsPublishPartial(array $vars)
{
return $vars + [
'defaultWalletAddress' => Session::get(Session::KEY_DEVELOPER_CREDITS_WALLET_ADDRESS),
'error' => Session::get(Session::KEY_DEVELOPER_LAST_FORM) == "new_publish" ? Session::getFlash(Session::KEY_DEVELOPER_CREDITS_ERROR) : '',
'apiUrl' => LBRY::getApiUrl('/reward/new')
];
}
public static function executeQuickstartAuth()
{
Session::set(Session::KEY_DEVELOPER_CREDITS_WALLET_ADDRESS, trim(Request::getPostParam('wallet_address')));
Session::set(Session::KEY_DEVELOPER_LAST_FORM, Request::getPostParam('formName'));
if (Request::getPostParam('returnUrl'))
{
Session::set(Session::KEY_DEVELOPER_RETURN_URL_SUCCESS, Request::getPostParam('returnUrl'));
}
if (!Config::get('github_developer_credits_client_id'))
{
throw new Exception('no github client id');
}
$gitHubParams = [
'client_id' => Config::get('github_developer_credits_client_id'),
'redirect_uri' => Request::getHostAndProto() . '/quickstart/github/callback',
'scope' => 'user:email public_repo',
'allow_signup' => false
];
return Controller::redirect('https://github.com/login/oauth/authorize?' . http_build_query($gitHubParams));
}
public static function executeQuickstartGithubCallback()
{
$code = Request::getParam('code');
if (!$code)
{
Session::setFlash(Session::KEY_DEVELOPER_CREDITS_ERROR, 'This does not appear to be a valid response from GitHub.');
}
else
{
$authResponseData = Curl::post('https://github.com/login/oauth/access_token', [
'code' => $code,
'client_id' => Config::get('github_developer_credits_client_id'),
'client_secret' => Config::get('github_developer_credits_client_secret')
], [
'headers' => ['Accept: application/json'],
'json_response' => true
]);
if (!$authResponseData || !isset($authResponseData['access_token']))
{
Session::setFlash(Session::KEY_DEVELOPER_CREDITS_ERROR, 'Request to GitHub failed.');
}
elseif (isset($authResponseData['error_description']))
{
Session::setFlash(Session::KEY_DEVELOPER_CREDITS_ERROR, 'GitHub replied: ' . $authResponseData['error_description']);
}
else
{
Session::set(Session::KEY_GITHUB_ACCESS_TOKEN, $authResponseData['access_token']);
}
}
return Controller::redirect(Session::get(Session::KEY_DEVELOPER_RETURN_URL_SUCCESS, '/quickstart/credits'));
}
}

19
lib/thirdparty/LBRY.class.php vendored Normal file
View file

@ -0,0 +1,19 @@
<?php
class LBRY
{
public static function getApiUrl($endpoint)
{
return Config::get('lbry_api_server') . $endpoint;
}
public static function getLBCtoUSDRate()
{
$response = CurlWithCache::get(static::getApiUrl('/lbc/exchange_rate'), [], [
'cache' => 3600, //one hour
'json_response' => true
]);
return $response['data']['lbc_usd'] ?? 0;
}
}

View file

@ -69,8 +69,8 @@ class Curl
$ch = curl_init();
// curl_setopt($ch, CURLOPT_VERBOSE, true);
// curl_setopt($ch, CURLOPT_STDERR, fopen(sys_get_temp_dir().'/curl-debug-'.date('Ymd-His'), 'w+'));
curl_setopt($ch, CURLOPT_VERBOSE, true);
curl_setopt($ch, CURLOPT_STDERR, fopen(sys_get_temp_dir().'/curl-debug-'.date('Ymd-His'), 'w+'));
if ($ch === false || $ch === null)
{

View file

@ -1,32 +0,0 @@
<?php NavActions::setNavUri('/learn') ?>
<?php Response::setMetaDescription('Be up and running with the LBRY API in just a few minutes.') ?>
<?php Response::setMetaTitle('LBRY Quickstart') ?>
<?php echo View::render('nav/_header', ['isDark' => false, 'isAbsolute' => false]) ?>
<main >
<div class="content content-light markdown">
<h1>Developer Program</h1>
<div class="notice notice-info spacer1">This program is being revamped and will be re-enabled by 2/23.</div>
<p>All developers with a GitHub account prior to January 31st, 2017 are eligible for <?php echo AcquisitionActions::DEVELOPER_REWARD ?> free credits.</p>
<p>To claim your credits, enter a wallet address in the form below and authenticate with GitHub.</p>
<p>
We will store your GitHub username and email address, but nothing else.
</p>
<form method="POST" action="/developer-program/post" class="form-inset">
<h3 style="margin-top: 0">Receive Credits</h3>
<?php if ($error): ?>
<div class="notice notice-error spacer1"><?php echo $error ?></div>
<?php elseif ($success): ?>
<div class="notice notice-success spacer1"><?php echo $success ?></div>
<?php endif ?>
<div class="form-row">
<label for="wallet">Wallet Address</label>
<div class="form-input">
<input type="text" name="wallet" value="<?php echo $defaultWalletAddress ?>"
class="required standard input-wallet" placeholder="bYnFQUPTTDM1BYNCxgxKEav4FFQsrgDBoE">
</div>
</div>
<input type="submit" value="Continue to GitHub" class="btn-primary">
</form>
</div>
</main>
<?php echo View::render('nav/_footer') ?>

View file

@ -0,0 +1,28 @@
<?php js_start() ?>
lbry.quickstartForm('#form-new-publish-reward', "<?php echo $apiUrl ?>");
<?php js_end() ?>
<form method="POST" action="/quickstart/auth" class="form-inset" id="form-new-publish-reward">
<h4 style="margin-top: 0">Publishing Reward</h4>
<div class="notice notice-error spacer1 <?php echo isset($error) && $error ? '' : 'hide' ?>"><?php echo $error ?? null ?></div>
<div class="notice notice-success spacer1 hide"></div>
<div class="form-row">
<label for="wallet">Wallet Address</label>
<div class="form-input">
<input type="text" name="wallet_address" value="<?php echo $defaultWalletAddress ?>"
class="required standard " placeholder="bYnFQUPTTDM1BYNCxgxKEav4FFQsrgDBoE">
</div>
</div>
<div class="form-row">
<label for="wallet">Publishing Transaction ID</label>
<div class="form-input">
<input type="text" name="transaction_hash" value="<?php echo '' ?>"
class="required standard " placeholder="e99240e60499b372371a4e461ca25506745686b4c8fa3dd646a83f44ad358255">
</div>
</div>
<div class="submit-row">
<input type="hidden" name="returnUrl" value="<?php echo $returnUrl ?? '/quickstart/credits#no-return' ?>" />
<input type="hidden" name="formName" value="new_publish" />
<input type="hidden" name="access_token" value="<?php echo Session::get(Session::KEY_GITHUB_ACCESS_TOKEN) ?>" />
<input type="submit" value="Send" class="btn-primary" data-submit-label="Send" data-submitting-label="Sending credits..." />
</div>
</form>

View file

@ -0,0 +1,23 @@
<?php js_start() ?>
lbry.quickstartForm('#form-new-developer-reward', "<?php echo $apiUrl ?>");
<?php js_end() ?>
<form method="POST" action="/quickstart/auth" class="form-inset" id="form-new-developer-reward">
<h4 style="margin-top: 0">Receive Credits</h4>
<div class="notice notice-error spacer1 <?php echo isset($error) && $error ? '' : 'hide' ?>"><?php echo $error ?? null ?></div>
<div class="notice notice-success spacer1 hide"></div>
<div class="form-row">
<label for="wallet">Wallet Address</label>
<div class="form-input">
<input type="text" name="wallet_address" value="<?php echo $defaultWalletAddress ?>"
class="required standard " placeholder="bYnFQUPTTDM1BYNCxgxKEav4FFQsrgDBoE">
</div>
</div>
<div class="submit-row spacer-half">
<input type="hidden" name="returnUrl" value="<?php echo $returnUrl ?? '/quickstart/credits#no-return' ?>" />
<input type="hidden" name="formName" value="new_developer" />
<input type="hidden" name="access_token" value="<?php echo Session::get(Session::KEY_GITHUB_ACCESS_TOKEN) ?>" />
<input type="submit" value="Send" class="btn-primary" data-submit-label="Send" data-submitting-label="Sending credits..." />
</div>
<div class="meta">We require a GitHub account to prevent abuse. This will record your email (no spam) and mark you as interested in the lbry repo.
No GitHub account? No problem! Join our <a href="https://slack.lbry.io" class="link-primary">Slack channel</a> and post an introduction in #tech.</div>
</form>

View file

@ -0,0 +1,35 @@
<h3 id="api">The API</h3>
<p>
When running, the LBRY daemon provides a JSON-RPC server running at <code class="code-inline">https://localhost:5279/lbryapi</code>.
</p>
<p>
It can be accessed by any utility capable of making HTTPS GET and POST requests, such as cURL or possibly your toaster.
</p>
<p>
To verify the LBRY daemon is running correctly, let's try looking up a name:
</p>
<code class="code-bash"><span class="code-bash__prompt">$</span>curl 'http://localhost:5279/lbryapi' --data '{"method":"resolve_name","params":{"name":"what"}}'
<span class="code-bash__response">[
{
"ver": "0.0.3",
"description": "What is LBRY? An introduction with Alex Tabarrok",
"license": "LBRY inc",
"title": "What is LBRY?",
"author": "Samuel Bryan",
"language": "en",
"sources": {
"lbry_sd_hash": "d5169241150022f996fa7cd6a9a1c421937276a3275eb912790bd07ba7aec1fac5fd45431d226b8fb402691e79aeb24b"
},
"content_type": "video\/mp4",
"nsfw": false,
"thumbnail": "https:\/\/s3.amazonaws.com\/files.lbry.io\/logo.png"
}
]</span></code>
<p>Above, we called the method <code class="code-inline"><a href="<?php echo DeveloperActions::API_DOC_URL ?>#resolve_name" class="link-primary">resolve_name</a></code> for the URL <code class="code-inline">lbry://what</code>. This returned the metadata associated with the URL.</p>
<p>Now let's download it. This time we're going to call the method <code class="code-inline">get</code> with the same parameters.</p>
<code class="code-bash"><span class="code-bash__prompt">$</span>curl 'http://localhost:5279/lbryapi' --data '{"method":"get","params":{"name":"what"} }'
<span class="code-bash__response">["d5169241150022f996fa7cd6a9a1c421937276a3275eb912790bd07ba7aec1fac5fd45431d226b8fb402691e79aeb24b"]</span></code>
<p>The LBRY API consists about 50 calls, all related to discovering, distributing, and purchasing content. <a class="link-primary" href="/api">View the full API documentation</a>.</p>
<p>You can also list all of the commands available by calling the <span class="code-plan">help</span> command.</p>
<code class="code-bash"><span class="code-bash__prompt">$</span>curl 'http://localhost:5279/lbryapi' --data '{"method":"help"}'
</code>

View file

@ -0,0 +1,47 @@
<h3 id="credits">Credits</h3>
<p>So far, everything we've done with LBRY has been free. However, some actions, such as reserving a name or purchasing paid content, require credits.</p>
<p>To receive credits, first generate a wallet address:</p>
<code class="code-bash"><span class="code-bash__prompt">$</span>curl 'http://localhost:5279/lbryapi' --data '{"method":"wallet_new_address"}'
<span class="code-bash__response">["bbFxRyWCFRkA9YcuuZD8nE7XTLUxYnddTs"]</span></code>
<p>Enter this address in the form below and we'll send you 50 credits.</p>
<div class="quickstart__claim-form content-light content" id="new-developer">
<?php echo View::render('developer/_formNewDeveloperReward', [
'returnUrl' => Request::getRelativeUri() . '#new-developer'
]) ?>
</div>
<p>Next, confirm you've received your credits by calling <code class="code-inline">wallet_balance</code>:</p>
<code class="code-bash"><span class="code-bash__prompt">$</span>curl 'http://localhost:5279/lbryapi' --data '{"method":"wallet_balance"}'
<span class="code-bash__response">[50.00000000]</span></code>
<h3 id="publish">Publishing</h3>
<div class="notice notice-info spacer1">
The credit reward for this portion of the guide does not work yet. It will be added shortly. However, you can still follow this section to learn how to publish.
</div>
<p>Publishing to LBRY is just as easy as everything else! If you publish something, we'll send you an additional 200 LBC for further use.</p>
<p>Not sure what to publish? We recommend your favorite picture or home video. Or just grab something from <a class="link-primary" href="https://archive.org/details/movies">here</a>.</p>
<code class="code-bash"><span class="code-bash__prompt">$</span>curl 'http://localhost:5279/lbryapi' --data '{"method":"publish", "params": {
"name": "electricsheep",
"file_path": "\\home\kauffj\\Desktop\\electric-sheep.mp4",
"bid": 1,
"metadata": { } <span class="code-bash__comment">//this should match the metadata returned by resolve_name </span>
}}'
<span class="code-bash__response">[whatever this response looks like]</span></code>
<div class="quickstart__claim-form content-light content" id="new-publish">
<?php echo View::render('developer/_formCreditsPublish', [
'returnUrl' => Request::getRelativeUri() . '#new-developer'
]) ?>
</div>
<h3>Enjoy a Hollywood Film</h3>
<code class="code-bash"><span class="code-bash__prompt">$</span>curl 'http://localhost:5279/lbryapi' --data '{"method":"get","params":{"name":"itsadisaster"} }'
<span class="code-bash__response">["d5169241150022f996fa7cd6a9a1c421937276a3275eb912790bd07ba7aec1fac5fd45431d226b8fb402691e79aeb24b"]</span></code>
<h3>Try the UI</h3>
<p>LBRY comes with a UI so that normal people can use it too. You can download it <a href="https://lbry.io/get" class="link-primary">here</a>.</p>
<h3 id="community">You Did It! What's Next?</h3>
<p>
Start building something awesome! LBRY works as a discovery and distribution backend for everything from films to CAD files.
</p>
<p>
<a href="http://slack.lbry.io" class="link-primary">Join our Slack Channel</a> to interact with LBRY developers and other community members. Please visit the #dev room (note: this is not a default channel).
</p>
<p>
Visit our <a href="https://github.com/lbryio" class="link-primary">GitHub page</a> to view the source code or report issues.
</p>

View file

@ -0,0 +1,21 @@
<div class="meta">Quickstart Home</div>
<h2>
LBRY is an open-source "<a href="http://www.usv.com/blog/fat-protocols" class="link-primary">fat</a>" protocol, providing
decentralized content discovery and distribution.</h2>
<h2>
In just a few minutes, you will have:
</h2>
<ul>
<li><h3>Learned the basics of the LBRY API.</h3></li>
<li><h3>Earned $<?php echo money_format('%i', $usdValue) ?><sup>1</sup> for downloading a hilarious film starring David Cross.</h3></li>
<li><h3>Irrevocably inscribed a piece of knowledge. Possibly of a cat.</h3>
<div class="meta">
<sup>1</sup>USD price equivalent of 250 LBC as received from the <a href="https://poloniex.com/exchange#btc_lbc" class="link-primary">Poloneix</a> exchange.
LBC is a cryptographic blockchain token used to secure and administer LBRY's shared, distributed catalog. The future is weird.
</div>
</li>
</ul>
<p class="text-center">
<a href="/quickstart/<?php echo $firstStep ?>" class="btn-alt">Begin the Guide</a>
</p>
<div class="meta">Not a guide lover? <a href="/quickstart/all" class="link-primary"> Here it is all on one page</a>.</div>

View file

@ -0,0 +1,33 @@
<h3>Download</h3>
<table class="quickstart__table">
<thead>
<tr>
<th>macOS <span class="icon-apple"></span></th>
<th>Linux <span class="icon-linux"></span></th>
<th>Windows <span class="icon-windows"></span></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://lbry.io/get/lbry.dmg" class="link-primary">Download .dmg</a></td>
<td><a href="https://lbry.io/get/lbry.deb" class="link-primary">Download .deb</a></td>
<td><a href="https://lbry.io/get/lbry.msi" class="link-primary">Download .msi</a></td>
</tr>
</tbody>
</table>
<p>
If you prefer to compile from source or are not on one of the above operating systems, follow
<a class="link-primary" href="https://github.com/lbryio/lbry/blob/master/INSTALL.md">this guide</a>.
</p>
<h3>Run</h3>
<p>
Launch the deamon to run as a background process:
</p>
<p>
<code class="code-bash"><span class="code-bash__prompt">$</span>lbrynet-daemon</code>
</p>
<p>While running, the daemon will provide a JSON-RPC interface on localhost. We'll learn how to interact with that next.</p>
<?php /*
<div class="meta spacer1">macOS and Windows do not currently bundle the daemon separately. Just launch the full app and the API will still be available. This will be resolved in v0.9.</div>
<div class="meta">The first time you run the daemon, it must catch-up with most recent blockheaders. This can take a few minutes.</div>
*/ ?>

View file

@ -0,0 +1,53 @@
<?php NavActions::setNavUri('/learn') ?>
<?php Response::addJsAsset('/js/quickstart.js') ?>
<?php Response::setMetaDescription('Be up and running with the LBRY API in just a few minutes.') ?>
<?php Response::setMetaTitle('LBRY Quickstart') ?>
<?php echo View::render('nav/_header', ['isDark' => false, 'isAbsolute' => false]) ?>
<main class="cover-stretch-wrap">
<div class="cover cover-center cover-dark cover-dark-grad">
<div class="quickstart">
<?php if ($currentStep === 'all'): ?>
<div class="content content-dark">
<div class="meta"><a href="/quickstart" class="link-primary">Quickstart Home</a></div>
<h1>Quickstart</h1>
</div>
<?php foreach(array_filter(array_keys($stepLabels)) as $step): ?>
<section>
<div class="content content-dark">
<?php echo View::render('developer/_quickstart' . ucfirst($step)) ?>
</div>
</section>
<?php endforeach ?>
<?php elseif ($stepNum > 0): ?>
<div class="content content-dark">
<h1>Quickstart: <?php echo $stepLabels[$currentStep] ?></h1>
</div>
<ol class="quickstart__progress-bar">
<?php $stepCounter = 0 ?>
<?php foreach($stepLabels as $step => $stepLabel): ?>
<li class="<?php echo $currentStep == $step ? 'active' : '' ?> <?php echo ++$stepCounter <= $stepNum ? 'completed' : '' ?>">
<a href="/quickstart<?php echo $step ? '/' . $step : '' ?>"><?php echo $stepLabel ?></a>
</li>
<?php endforeach ?>
</ol>
<div class="content content-dark">
<div class="spacer2">
<?php echo View::render('developer/_quickstart' . ucfirst($currentStep)) ?>
</div>
<?php if ($nextStep): ?>
<div>
<a href="/quickstart/<?php echo $nextStep ?>" class="btn-alt">Next: <?php echo $stepLabels[$nextStep] ?> &raquo;</a>
</div>
<?php endif ?>
</div>
<?php else: ?>
<div class="content content-dark">
<?php echo View::render('developer/_quickstartHome', [
'firstStep' => array_keys($stepLabels)[1]
]) ?>
</div>
<?php endif ?>
</div>
</div>
</main>
<?php echo View::render('nav/_footer') ?>

View file

@ -12,7 +12,7 @@
'LBRY' ?>
<title><?php echo $title ?></title>
<link href='https://fonts.googleapis.com/css?family=Raleway:300,300italic,400,400italic,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:500,500italic,700' rel='stylesheet' type='text/css'>
<link href="/css/all.css" rel="stylesheet" type="text/css" />
<link rel="apple-touch-icon" sizes="60x60" href="/img/fav/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="114x114" href="/img/fav/apple-touch-icon-114x114.png">

View file

@ -1,135 +0,0 @@
<?php NavActions::setNavUri('/learn') ?>
<?php Response::setMetaDescription('Be up and running with the LBRY API in just a few minutes.') ?>
<?php Response::setMetaTitle('LBRY Quickstart') ?>
<?php echo View::render('nav/_header', ['isDark' => false, 'isAbsolute' => false]) ?>
<main class="content content-light markdown">
<h1>Quickstart</h1>
<p>This step-by-step guide will have you running LBRY and interacting with the API in just a few minutes.</p>
<p>This guide is for programmers and other technical users. For consumer usage of LBRY, please <a href="/get" class="link-primary">go here</a>.</p>
<h3>What's Covered</h3>
<ol class="table-of-contents">
<li><a href="#installation" class="link-primary">Installation</a></li>
<li><a href="#running-lbry" class="link-primary">Running LBRY</a></li>
<li><a href="#api" class="link-primary">The API</a></li>
<li><a href="#credits" class="link-primary">Credits</a></li>
<li><a href="#community" class="link-primary">Community & Issues</a></li>
</ol>
<section>
<h3 id="installation">1. Installation</h3>
<p>The easiest way to install LBRY is to use a pre-packaged binary. We provide binaries for Windows, macOS, and Debian-based Linux.</p>
<table class="content">
<thead>
<tr>
<th>macOS <span class="icon-apple"></span></th>
<th>Linux <span class="icon-linux"></span></th>
<th>Windows <span class="icon-windows"></span></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://lbry.io/get/lbry.dmg">Download DMG</a></td>
<td><a href="https://lbry.io/get/lbry.deb">Download DEB</a></td>
<td><a href="https://lbry.io/get/lbry.msi">Download MSI</a></td>
</tr>
</tbody>
</table>
<p>
If you prefer to compile from source or are not on one of the above operating systems, follow
<a class="link-primary" href="https://github.com/lbryio/lbry/blob/master/INSTALL.md">this guide</a>.
</p>
</section>
<section>
<h3 id="running-lbry">2. Running LBRY</h3>
<p>
Launch the deamon to run as a background process:
</p>
<p>
<code class="code-bash"><span class="code-bash__prompt">$</span>lbrynet-daemon</code>
</p>
<p>The first time you run the daemon, it must catch-up with most recent blockheaders. This can take several minutes.</p>
<div class="meta">macOS and Windows do not currently bundle the daemon separately. Just launch the full app and the API will still be available. This will be resolved in v0.9.</div>
</section>
<section>
<h3 id="api">3. The API</h3>
<p>
When running, the LBRY daemon provides a JSON-RPC server running at <code>https://localhost:5279/lbryapi</code>.
</p>
<p>
It can be accessed via cURL or any other utility capable of making HTTPS GET and POST requests.
</p>
<p>
To verify the LBRY daemon is running correctly and responding to requests, run:
</p>
<code class="code-bash"><span class="code-bash__prompt">$</span>curl 'http://localhost:5279/lbryapi' --data '{"method":"status","params":[]}'
[
{
"connection_status": {
"message": "No connection problems detected",
"code": "connected"
},
"is_first_run": false,
"is_running": true,
"blocks_behind": 0,
"startup_status": {
"message": "Started lbrynet",
"code": "started"
}
}
]</code>
<p>This makes it easy to interact with the LBRY API in the programming language of your choice. Here's another example:</p>
<code class="code-bash"><span class="code-bash__prompt">$</span>curl 'http://localhost:5279/lbryapi' --data '{"method":"resolve_name","params":[{"name":"what"}]}'
[
{
"ver": "0.0.3",
"description": "What is LBRY? An introduction with Alex Tabarrok",
"license": "LBRY inc",
"title": "What is LBRY?",
"author": "Samuel Bryan",
"language": "en",
"sources": {
"lbry_sd_hash": "d5169241150022f996fa7cd6a9a1c421937276a3275eb912790bd07ba7aec1fac5fd45431d226b8fb402691e79aeb24b"
},
"content_type": "video\/mp4",
"nsfw": false,
"thumbnail": "https:\/\/s3.amazonaws.com\/files.lbry.io\/logo.png"
}
]</code>
<p>LBRY can be used to build everything from a censorship-proof image host, to a store for 3D printing files, to distribute large files or datasets, or use cases even we can't imagine!</p>
<p><a class="btn-alt" href="http://lbryio.github.io/lbry/api/">View Full API Documentation</a></p>
</section>
<section>
<h3 id="credits">4. Getting Credits</h3>
<p>Many actions, such as reserving a name or purchasing paid content, require credits.</p>
<p>To receive credits, first generate a wallet address:</p>
<code class="code-bash"><span class="code-bash__prompt">$</span>curl 'http://localhost:5279/lbryapi' --data '{"method":"wallet_new_address","params":[]}'
["bbFxRyWCFRkA9YcuuZD8nE7XTLUxYnddTs"]</code>
<p>Use this address to get credits in one of two ways:</p>
<div class="row-fluid">
<div class="span6">
<h4>4a) Receive Free Credits</h4>
<p>
All developers with a valid GitHub account are eligible to receive <?php echo AcquisitionActions::DEVELOPER_REWARD ?> free credits.
</p>
<a href="/developer-program" class="btn-alt">Claim Your Free Credits</a>
</div>
<div class="span6">
<h4>4b) Purchase Credits</h4>
<p>
Credits can be bought on <a href="https://lbry.io/faq/exchanges" class="link-primary">a variety of exchanges</a>.
After purchasing, send them to the address generated above.
</p>
</div>
</div>
</section>
<section>
<h3 id="community">5. Community & Issues</h3>
<p>
<a href="http://slack.lbry.io" class="link-primary">Join our Slack Channel</a> to interact with LBRY developers and other community members. Please visit the #dev room (note: this is not a default channel).
</p>
<p>
Visit our <a href="https://github.com/lbryio" class="link-primary">GitHub page</a> to view the source code or report issues.
</p>
</section>
</div>
</main>
<?php echo View::render('nav/_footer') ?>

View file

@ -96,16 +96,17 @@
<p>Here is a sample key-value entry in the LBRY blockchain. Here, wonderfullife is the key, and the rest of the description is the value.</p>
<code class="code-bash"><span class="code-bash__prompt">$</span>lbrynet-cli resolve_name name=wonderfullife
<span class="code-bash__kw1">wonderfullife</span> : {
<span class="code-bash__kw2">title</span>: "Its a Wonderful Life",
<span class="code-bash__kw2">description</span>: "An angel helps a compassionate but despairingly frustrated businessman by showing what life would have been like if he never existed.",
<span class="code-bash__kw2">thumbnail</span>: "http://i.imgur.com/MW45x88.jpg",
<span class="code-bash__kw2">license</span>: "public domain",
<span class="code-bash__kw2">price</span>: 0, <span class="code-bash__comment">//free!</span>
<span class="code-bash__kw2">publisher</span>: "A Fan Of George Bailey", <span class="code-bash__comment">//simplification</span>
<span class="code-bash__kw2">sources</span>: { <span class="code-bash__comment">//extensible, variable list</span>
<span class="code-bash__kw2">lbry_hash</span> : &lt;unique id&gt;,
<span class="code-bash__kw2">url</span> : &lt;url&gt;
<span class="code-bash__kw">wonderfullife</span> : {
<span class="code-bash__kw">title</span>: "Its a Wonderful Life",
<span class="code-bash__kw">description</span>: "An angel helps a compassionate but despairingly frustrated businessman by showing what life would have been like if he never existed.",
<span class="code-bash__kw">thumbnail</span>: "http://i.imgur.com/MW45x88.jpg",
<span class="code-bash__kw">license</span>: "public domain",
<span class="code-bash__kw">price</span>: 0, <span class="code-bash__comment">//free!</span>
<span class="code-bash__kw">publisher</span>: "A Fan Of George Bailey", <span class="code-bash__comment">//simplification</span>
<span class="code-bash__kw">sources</span>: { <span class="code-bash__comment">//extensible, variable list</span>
<span class="code-bash__kw">lbry_hash</span> : &lt;unique id&gt;,
<span class="code-bash__kw">url</span> : &lt;url&gt;
}
}</code>
<div class="meta text-center content-inset"><p>A slightly simplified sample entry of metadata in the LBRY blockchain. Whichever party or parties bid the most in an ongoing auction control what a name returns.</p></div>
@ -244,16 +245,16 @@
<p>Here is a sample key-value entry in the LBRY blockchain. Here, wonderfullife is the key, and the rest of the description is the value.</p>
<div class="code-bash">
<code><pre style="white-space: pre-wrap;">
<span class="code-bash__kw1">wonderfullife</span> : {
<span class="code-bash__kw2">title</span>: "Its a Wonderful Life",
<span class="code-bash__kw2">description</span>: "An angel helps a compassionate but despairingly frustrated businessman by showing what life would have been like if he never existed.",
<span class="code-bash__kw2">thumbnail</span>: "http://i.imgur.com/MW45x88.jpg",
<span class="code-bash__kw2">license</span>: "public domain",
<span class="code-bash__kw2">price</span>: 0, <span class="code-bash__comment">//free!</span>
<span class="code-bash__kw2">publisher</span>: "A Fan Of George Bailey", <span class="code-bash__comment">//simplification</span>
<span class="code-bash__kw2">sources</span>: { <span class="code-bash__comment">//extensible, variable list</span>
<span class="code-bash__kw2">lbry_hash</span> : &lt;unique id&gt;,
<span class="code-bash__kw2">url</span> : &lt;url&gt;
<span class="code-bash__kw">wonderfullife</span> : {
<span class="code-bash__kw">title</span>: "Its a Wonderful Life",
<span class="code-bash__kw">description</span>: "An angel helps a compassionate but despairingly frustrated businessman by showing what life would have been like if he never existed.",
<span class="code-bash__kw">thumbnail</span>: "http://i.imgur.com/MW45x88.jpg",
<span class="code-bash__kw">license</span>: "public domain",
<span class="code-bash__kw">price</span>: 0, <span class="code-bash__comment">//free!</span>
<span class="code-bash__kw">publisher</span>: "A Fan Of George Bailey", <span class="code-bash__comment">//simplification</span>
<span class="code-bash__kw">sources</span>: { <span class="code-bash__comment">//extensible, variable list</span>
<span class="code-bash__kw">lbry_hash</span> : &lt;unique id&gt;,
<span class="code-bash__kw">url</span> : &lt;url&gt;
}
}</pre></code>
</div>

View file

@ -3,6 +3,9 @@
<a class="link-primary" href="/docs"><span class="icon-file-code-o icon-fw"></span><span class="btn-label">Documentation</span></a>
</div>
*/ ?>
<div class="spacer1">
<a href="/quickstart" class="link-primary"><span class="icon-code icon-fw"></span><span class="btn-label">Quickstart</span></a>
</div>
<div class="spacer1">
<a href="https://github.com/lbryio" class="link-primary"><span class="icon-github icon-fw"></span><span class="btn-label">{{social.github}}</span></a>
</div>

View file

@ -0,0 +1,79 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="80.207558mm"
height="58.081333mm"
viewBox="0 0 284.20001 205.8"
id="svg3479"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="lbry-white-logo-only.svg">
<defs
id="defs3481" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="-470.0429"
inkscape:cy="-5.6714247"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1056"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<metadata
id="metadata3484">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-363.61433,-320.89078)">
<g
id="g3396"
transform="translate(363.61433,320.89078)">
<g
id="g3398">
<polygon
style="fill:#ffffff"
points="138.8,155.2 271,74 271,68.2 146.2,8 7,94.1 7,132.6 138.8,197.8 276.4,113.4 280.3,119.4 139.2,205.8 0,137 0,90.2 145.8,0 278,63.8 278,77.9 139.2,163.2 34.6,111.9 34.8,104 "
id="polygon3400" />
</g>
<g
id="g3402">
<polygon
style="fill:#ffffff"
points="276.5,128.5 278.5,115.9 266.3,113.8 267.1,108.9 284.2,111.8 281.4,129.3 "
id="polygon3404" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

82
web/js/quickstart.js Normal file
View file

@ -0,0 +1,82 @@
lbry.quickstartForm = function (selector, apiUrl) {
var form = $(selector),
accessToken = form.find(':input[name="access_token"]').val(),
walletAddressInput = form.find(':input[name="wallet_address"]'),
transactionHashInput = form.find(':input[name="transaction_hash"]'),
storageKey = form.attr('id') + "SuccessHTML",
submitButton = form.find(':input[type="submit"]'),
isAutomaticSubmit = false,
isSubmitting = false;
function resetFormState() {
isSubmitting = false;
walletAddressInput.attr('readonly', null);
transactionHashInput.attr('readonly', null);
submitButton.val(submitButton.data('submitLabel')).attr('disabled', null);
}
if (window.localStorage.getItem(storageKey)) {
form.find('.notice-success').html(window.localStorage.getItem(storageKey)).show();
form.find('.form-row, .submit-row').hide();
} else if (accessToken) {
form.submit(function (event) {
if (isSubmitting) {
return false;
}
var postData = {
access_token: accessToken,
wallet_address: walletAddressInput.val()
};
form.find('.notice-success, .notice-error').hide();
if (!walletAddressInput.val()) {
resetFormState();
if (!isAutomaticSubmit) {
form.find('.notice-error').html("Please supply a wallet address.").show();
}
return false;
}
if (transactionHashInput.length) {
if (!transactionHashInput.val()) {
resetFormState();
if (!isAutomaticSubmit) {
form.find('.notice-error').html("Please supply a transaction ID.").show();
}
return false;
}
postData.transaction_hash = transactionHashInput.val();
}
event.preventDefault();
walletAddressInput.attr('readonly', 'readonly');
transactionHashInput.attr('readonly', 'readonly');
submitButton.val(submitButton.data('submittingLabel')).attr('disabled', 'disabled');
$.post(apiUrl, postData)
.done(function (responseData) {
var data = responseData.data;
var anchor = $('<a class="link-primary--break-word"></a>');
anchor.attr("href", "https://explorer.lbry.io/tx/" + data.TransactionHash);
anchor.html(data.TransactionHash)
form.find('.notice-success')
.html(data.RewardAmount + " credits sent in transaction ")
.append(anchor)
.show();
window.localStorage.setItem(storageKey, form.find('.notice-success').html());
})
.fail(function (xhr) {
var responseData = $.parseJSON(xhr.responseText);
form.find('.notice-error').html(responseData.error.length ? responseData.error : "Something went wrong. Please email grin@lbry.io").show();
})
.always(resetFormState);
})
isAutomaticSubmit = true;
form.submit();
isAutomaticSubmit = false;
}
}

View file

@ -82,6 +82,10 @@ section
{
@include anchor($color-primary);
}
.link-primary--break-word
{
word-break: break-all;
}
a:hover img
{
opacity: 0.75;

View file

@ -109,7 +109,7 @@
margin-top: $spacing-vertical;
}
}
.post-content table, table.content
.post-content table, table.post-content-table
{
margin-bottom: $spacing-vertical;
word-wrap: break-word;
@ -135,7 +135,6 @@
font-size: 0.9em;
padding: $spacing-vertical/4+1 8px $spacing-vertical/4-2;
text-align: left;
border-bottom: 1px solid #e2e2e2;
img
{
vertical-align: text-bottom;
@ -145,37 +144,11 @@
{
vertical-align: middle;
}
tr.thead:not(:first-child) th
{
border-top: 1px solid #e2e2e2;
}
tfoot td
{
padding: $spacing-vertical / 2 8px;
font-size: .85em;
}
tbody
{
tr
{
&:nth-child(even):not(.odd)
{
background-color: #f4f4f4;
}
&:nth-child(odd):not(.even)
{
background-color: white;
}
&.thead
{
background: none;
}
td
{
border: 0 none;
}
}
}
&:last-child
{
@ -187,6 +160,39 @@
width: 100%;
}
}
.post-content table
{
thead th, > tr:first-child th
{
border-bottom: 1px solid #e2e2e2;
}
tr.thead:not(:first-child) th
{
border-top: 1px solid #e2e2e2;
}
tbody
{
tr
{
&.thead
{
background: none;
}
td
{
border: 0 none;
}
&:nth-child(even):not(.odd)
{
background-color: #f4f4f4;
}
&:nth-child(odd):not(.even)
{
background-color: white;
}
}
}
}
.post-author-spotlight
{

View file

@ -7,8 +7,16 @@ pre, code
code
{
padding: 3px 5px;
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, monospace, serif;
font-family: $font-mono;
color: darken($color-primary, 10%);
&.code-inline {
padding: 0;
margin-left: 1px;
margin-right: 1px;
font-weight: bold;
color: inherit;
background-color: transparent;
}
}
pre
{
@ -30,7 +38,6 @@ pre
user-select: text;
margin-bottom: $spacing-vertical;
border-left: .3rem solid $color-primary;
padding: $spacing-vertical / 2 $spacing-vertical;
unicode-bidi: embed;
overflow-x: auto;
@ -38,10 +45,22 @@ pre
display: block;
word-wrap: break-word;
background: #222;
color: #fff;
font-size: 0.75em;
}
.code-bash__kw1 {color: #c20cb9; font-weight: bold;}
.code-bash__kw2 {color: #7a0874; font-weight: bold; }
.code-bash__response {
color: #ccc;
}
.code-bash__kw {color: #c20cb9; font-weight: bold;}
.code-bash__comment { color: #888; }
.code-bash__prompt { font-weight: bold; margin-right: 5px; }
.code-bash__prompt
{
font-weight: bold;
margin-right: 5px;
color: lighten($color-primary, 20%);
@include user-select(none);
}

View file

@ -128,11 +128,6 @@
&:last-child { margin-bottom: $spacing-vertical / 2; }
padding-left: 2em;
counter-reset: li-counter;
&.table-of-contents > li
{
line-height: 2em;
&:before { top: -0.1em; }
}
> li
{
position: relative;

View file

@ -81,11 +81,6 @@ input[type="date"] {
vertical-align: middle;
}
input.input-wallet
{
width: 400px;
}
textarea {
height: auto;
min-height: 60px;
@ -104,6 +99,9 @@ input[type="date"] {
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
transition: all 0.2s linear;
&[readonly] {
background-color: #bbb;
}
}
textarea:focus,
@ -126,6 +124,9 @@ input[type="checkbox"] {
width: auto;
}
input[type="submit"][disabled] {
cursor: auto;
}
.mail-submit, .invite-submit
{

View file

@ -20,6 +20,7 @@ $max-post-content-width: 800px;
$font-header: 'Raleway', sans-serif;
$font-body: 'Raleway', sans-serif;
$font-mono: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, monospace, serif;
$font-size-h1: 2.4em;
$font-size-h2: 2.0em;
@ -168,6 +169,13 @@ $info_text: #3a87ad;
}
@mixin user-select ($value) {
-webkit-user-select: $value;
-moz-user-select: $value;
-ms-user-select: $value;
user-select: $value;
}
@mixin transition($transition-property, $transition-time, $method) {
-webkit-transition: $transition-property $transition-time $method;
-moz-transition: $transition-property $transition-time $method;

107
web/scss/_quickstart.scss Normal file
View file

@ -0,0 +1,107 @@
@import "global";
.quickstart
{
max-width: 860px;
}
.quickstart .content-dark
{
ul, ol, li
{
list-style-position: outside !important; /*hack fix for CSS bug affecting headers inside LI tags, ask Grin*/
}
}
.quickstart__table
{
margin: 0 auto $spacing-vertical;
td, th
{
border-right: 1px dotted #eee;
padding: 4px 20px;
&:last-child
{
border-right: 0 none;
}
}
}
.quickstart__section
{
margin-bottom: $spacing-vertical * 3;
}
.quickstart__claim-form
{
margin: $spacing-vertical * 2 0;
input[type="text"] { width: 100%; }
}
.quickstart__progress-bar
{
margin: $spacing-vertical * 3 80px;
background: #ddd;
display: flex;
height: 16px;
list-style: none;
padding: 0;
position: relative;
> li {
flex: auto;
list-style: none;
position: relative;
&:first-child {
max-width: 0;
> a {
// arbitrary values
// since % won't work
right: -30px;
width: 60px;
}
}
&:before {
background: #ddd;
border-radius: 50%;
content: "";
display: block;
height: 24px;
right: -12px;
position: absolute;
top: -4px;
width: 24px;
}
}
a {
cursor: pointer;
color: #ccc;
padding: 4px 0;
position: absolute;
right: -25%;
text-align: center;
text-decoration: underline;
top: -36px;
width: 50%;
}
$color-indicator: #777;
.completed {
background: lighten($color-indicator, 10%);
&:before {
background: lighten($color-indicator, 10%);
}
}
.active {
a { font-weight: bold; }
background: lighten($color-indicator, 10%);
&:before {
background: lighten($color-indicator, 16%);
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
}
}

View file

@ -15,4 +15,5 @@
@import "blog";
@import "bounty";
@import "roadmap";
@import "quickstart";
@import "social";