LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Fixes and refactoring

Browse source
This commit is contained in:
ポール ウェッブ 2018-10-03 15:27:13 -05:00
parent baf4b42d81
commit 34a26c8051
20 changed files with 248 additions and 225 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
app/components/api/header-blockchain.js
View file

@ -1,15 +1,18 @@
"use strict"; "use strict";
// P A C K A G E
import html from "choo/html"; import html from "choo/html";
export default () => {
return html`
<div class="api__header page__markup"> // E X P O R T
<h1>lbrycrd APIs</h1>
<p> export default () => html`
Methods and signatures provided by the <a href="/glossary#lbrycrd">lbrycrd</a> blockchain daemon are documented below. <div class="api__header page__markup">
To build, download, or run lbrycrd, see the project <a href="https://github.com/lbryio/lbrycrd/blob/master/README.md">README</a>. <h1>lbrycrd APIs</h1>
</p> <p>Methods and signatures provided by the <a href="/glossary#lbrycrd">lbrycrd</a> blockchain daemon are documented below. To build, download, or run lbrycrd, see the project <a href="https://github.com/lbryio/lbrycrd/blob/master/README.md">README</a>.</p>
</div> </div>
`; `;
};

25
app/components/api/header-sdk.js
View file

@ -1,15 +1,18 @@
"use strict"; "use strict";
// P A C K A G E
import html from "choo/html"; import html from "choo/html";
export default () => {
return html`
<div class="api__header page__markup"> // E X P O R T
<h1>lbry-sdk APIs</h1>
<p> export default () => html`
Methods and signatures provided by the <a href="/glossary#lbry-sdk">lbry-sdk</a> daemon are documented below. <div class="api__header page__markup">
To build, download, or run the daemon, see the project <a href="https://github.com/lbryio/lbry/blob/master/README.md">README</a>. <h1>lbry-sdk APIs</h1>
</p> <p>Methods and signatures provided by the <a href="/glossary#lbry-sdk">lbry-sdk</a> daemon are documented below. To build, download, or run the daemon, see the project <a href="https://github.com/lbryio/lbry/blob/master/README.md">README</a>.</p>
</div> </div>
`; `;
};

110
app/components/client/tour-scripts.js → app/components/client/playground-scripts.js
View file

@ -2,7 +2,7 @@
initializeTour(); initializePlayground();
@ -16,15 +16,15 @@ if (window.location.href.search && window.location.href.split("?url=")[1]) { //
document.querySelector("body").addEventListener("click", event => { document.querySelector("body").addEventListener("click", event => {
if (event.target.dataset.action) { if (event.target.dataset.action) {
event.preventDefault(); event.preventDefault();
document.querySelector(".tour").classList.add("waiting"); document.querySelector(".playground").classList.add("waiting");
handleExamples(event.target); handleExamples(event.target);
} }
if ( if (
event.explicitOriginalTarget.classList && event.explicitOriginalTarget.classList &&
event.explicitOriginalTarget.classList[0] === "tour__content__meme__canvas__thumbnail" event.explicitOriginalTarget.classList[0] === "playground__content__meme__canvas__thumbnail"
) { ) {
for (const thumbnail of document.querySelectorAll(".tour__content__meme__canvas__thumbnail")) for (const thumbnail of document.querySelectorAll(".playground__content__meme__canvas__thumbnail"))
thumbnail.classList.remove("selected"); thumbnail.classList.remove("selected");
event.explicitOriginalTarget.classList.add("selected"); event.explicitOriginalTarget.classList.add("selected");
@ -119,18 +119,18 @@ function debounce(func, wait, immediate) {
}; };
} }
function initializeTour() { function initializePlayground() {
document.querySelector(".tour").classList.add("waiting"); document.querySelector(".playground").classList.add("waiting");
document.querySelector("#fetch-claim-uri").value = ""; document.querySelector("#fetch-claim-uri").value = "";
document.querySelector("#fetch-claim-uri").focus(); document.querySelector("#fetch-claim-uri").focus();
document.querySelector(".tour__navigation__example:nth-child(1)").classList.add("active"); document.querySelector(".playground__navigation__example:nth-child(1)").classList.add("active");
send(JSON.stringify({ send(JSON.stringify({
"message": "landed on tour" "message": "landed on playground"
})); }));
setTimeout(() => { setTimeout(() => {
document.querySelector(".tour__navigation__example:nth-child(1)").click(); document.querySelector(".playground__navigation__example:nth-child(1)").click();
}, 300); }, 300);
} }
@ -150,7 +150,7 @@ function fetchMetadata(exampleNumber, data) {
document.getElementById("fetch-claim-uri").value = data; document.getElementById("fetch-claim-uri").value = data;
document.getElementById("tour-results").innerHTML = ` document.getElementById("playground-results").innerHTML = `
<pre><code class="language-bash"> <pre><code class="language-bash">
<span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span> <span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "resolve", "params": { "uri": "${data}" }}'</span> <span class="token url">http://localhost:5279 </span> curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "resolve", "params": { "uri": "${data}" }}'</span> <span class="token url">http://localhost:5279 </span>
@ -160,7 +160,7 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
<div id="example1-result"></div> <div id="example1-result"></div>
`; `;
document.getElementById("tour-loader").style.display = "none"; document.getElementById("playground-loader").style.display = "none";
break; break;
case 2: case 2:
@ -171,7 +171,7 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
"example": exampleNumber "example": exampleNumber
})); }));
document.getElementById("tour-results").innerHTML = ` document.getElementById("playground-results").innerHTML = `
<pre><code class="language-bash"> <pre><code class="language-bash">
<span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span> <span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "publish", "params": { "name": "TITLE_OF_YOUR_CONTENT", "file_path": "ABSOLUTE_PATH_TO_MEDIA_ON_YOUR_COMPUTER", "bid": "0.001", "metadata": { "description": "DESCRIPTION_OF_YOUR_CONTENT", "title": "TITLE_OF_YOUR_CONTENT", "language": "en", "license": "", "nsfw": false }}}'</span> <span class="token url">http://localhost:5279 </span> curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "publish", "params": { "name": "TITLE_OF_YOUR_CONTENT", "file_path": "ABSOLUTE_PATH_TO_MEDIA_ON_YOUR_COMPUTER", "bid": "0.001", "metadata": { "description": "DESCRIPTION_OF_YOUR_CONTENT", "title": "TITLE_OF_YOUR_CONTENT", "language": "en", "license": "", "nsfw": false }}}'</span> <span class="token url">http://localhost:5279 </span>
@ -181,7 +181,7 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
<div id="example2-result"></div> <div id="example2-result"></div>
`; `;
document.getElementById("tour-loader").style.display = "none"; document.getElementById("playground-loader").style.display = "none";
break; break;
case 3: case 3:
@ -194,7 +194,7 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
document.getElementById("fetch-claim-uri").value = data; document.getElementById("fetch-claim-uri").value = data;
document.getElementById("tour-results").innerHTML = ` document.getElementById("playground-results").innerHTML = `
<pre><code class="language-bash"> <pre><code class="language-bash">
<span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span> <span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "wallet_send", "params": { "amount": "0.01", "claim_id": "${data}" }}'</span> <span class="token url">http://localhost:5279 </span> curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "wallet_send", "params": { "amount": "0.01", "claim_id": "${data}" }}'</span> <span class="token url">http://localhost:5279 </span>
@ -204,7 +204,7 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
<div id="example3-result"></div> <div id="example3-result"></div>
`; `;
document.getElementById("tour-loader").style.display = "none"; document.getElementById("playground-loader").style.display = "none";
break; break;
default: default:
@ -228,14 +228,14 @@ const handleExamples = debounce(event => {
let exampleNumber; let exampleNumber;
const data = event.dataset; const data = event.dataset;
if (!parseInt(document.querySelector(".tour__navigation__example.active").dataset.example)) return; if (!parseInt(document.querySelector(".playground__navigation__example.active").dataset.example)) return;
exampleNumber = parseInt(document.querySelector(".tour__navigation__example.active").dataset.example); exampleNumber = parseInt(document.querySelector(".playground__navigation__example.active").dataset.example);
switch(data.action) { switch(data.action) {
case "choose claim": case "choose claim":
fetchMetadata(exampleNumber, data.claimId); fetchMetadata(exampleNumber, data.claimId);
if (document.querySelector(".tour__navigation__example:nth-child(3)").classList.contains("active")) if (document.querySelector(".playground__navigation__example:nth-child(3)").classList.contains("active"))
document.getElementById("fetch-claim-uri").value = event.alt + "#" + event.dataset.claimId; document.getElementById("fetch-claim-uri").value = event.alt + "#" + event.dataset.claimId;
break; break;
@ -245,28 +245,28 @@ const handleExamples = debounce(event => {
fetchMetadata(exampleNumber, document.getElementById("fetch-claim-uri").value); fetchMetadata(exampleNumber, document.getElementById("fetch-claim-uri").value);
break; break;
case "tour, example 1": case "playground, example 1":
if (document.getElementById("tour-loader").classList.contains("tour__content__meme")) { if (document.getElementById("playground-loader").classList.contains("playground__content__meme")) {
document.getElementById("tour-loader").classList.remove("tour__content__meme"); document.getElementById("playground-loader").classList.remove("playground__content__meme");
document.getElementById("tour-loader").classList.add("tour__content__trends"); document.getElementById("playground-loader").classList.add("playground__content__trends");
} }
document.getElementById("fetch-claim-uri").value = ""; // reset URL bar document.getElementById("fetch-claim-uri").value = ""; // reset URL bar
document.querySelector("#tour-url button").textContent = "Resolve"; document.querySelector("#playground-url button").textContent = "Resolve";
if (document.getElementById("tour-url").style.display === "none") if (document.getElementById("playground-url").style.display === "none")
document.getElementById("tour-url").removeAttribute("style"); document.getElementById("playground-url").removeAttribute("style");
for (const example of document.querySelectorAll(".tour__navigation__example")) for (const example of document.querySelectorAll(".playground__navigation__example"))
example.classList.remove("active"); example.classList.remove("active");
document.querySelector(".tour__navigation__example:nth-child(1)").classList.add("active"); document.querySelector(".playground__navigation__example:nth-child(1)").classList.add("active");
document.getElementById("tour-loader").innerHTML = ""; document.getElementById("playground-loader").innerHTML = "";
document.getElementById("tour-results").innerHTML = ""; document.getElementById("playground-results").innerHTML = "";
document.getElementById("tour-loader").removeAttribute("style"); document.getElementById("playground-loader").removeAttribute("style");
document.getElementById("tour-results").removeAttribute("style"); document.getElementById("playground-results").removeAttribute("style");
send(JSON.stringify({ send(JSON.stringify({
"message": `request for ${data.action}` "message": `request for ${data.action}`
@ -274,25 +274,25 @@ const handleExamples = debounce(event => {
break; break;
case "tour, example 2": case "playground, example 2":
if (document.getElementById("tour-loader").classList.contains("tour__content__trends")) { if (document.getElementById("playground-loader").classList.contains("playground__content__trends")) {
document.getElementById("tour-loader").classList.remove("tour__content__trends"); document.getElementById("playground-loader").classList.remove("playground__content__trends");
document.getElementById("tour-loader").classList.add("tour__content__meme"); document.getElementById("playground-loader").classList.add("playground__content__meme");
} }
document.getElementById("fetch-claim-uri").value = ""; // reset URL bar document.getElementById("fetch-claim-uri").value = ""; // reset URL bar
document.getElementById("tour-url").style.display = "none"; document.getElementById("playground-url").style.display = "none";
for (const example of document.querySelectorAll(".tour__navigation__example")) for (const example of document.querySelectorAll(".playground__navigation__example"))
example.classList.remove("active"); example.classList.remove("active");
document.querySelector(".tour__navigation__example:nth-child(2)").classList.add("active"); document.querySelector(".playground__navigation__example:nth-child(2)").classList.add("active");
document.getElementById("tour-loader").innerHTML = ""; document.getElementById("playground-loader").innerHTML = "";
document.getElementById("tour-results").innerHTML = ""; document.getElementById("playground-results").innerHTML = "";
document.getElementById("tour-loader").removeAttribute("style"); document.getElementById("playground-loader").removeAttribute("style");
document.getElementById("tour-results").removeAttribute("style"); document.getElementById("playground-results").removeAttribute("style");
send(JSON.stringify({ send(JSON.stringify({
"message": `request for ${data.action}` "message": `request for ${data.action}`
@ -300,28 +300,28 @@ const handleExamples = debounce(event => {
break; break;
case "tour, example 3": case "playground, example 3":
if (document.getElementById("tour-loader").classList.contains("tour__content__meme")) { if (document.getElementById("playground-loader").classList.contains("playground__content__meme")) {
document.getElementById("tour-loader").classList.remove("tour__content__meme"); document.getElementById("playground-loader").classList.remove("playground__content__meme");
document.getElementById("tour-loader").classList.add("tour__content__trends"); document.getElementById("playground-loader").classList.add("playground__content__trends");
} }
document.getElementById("fetch-claim-uri").value = ""; // reset URL bar document.getElementById("fetch-claim-uri").value = ""; // reset URL bar
document.querySelector("#tour-url button").textContent = "Tip"; document.querySelector("#playground-url button").textContent = "Tip";
if (document.getElementById("tour-url").style.display === "none") if (document.getElementById("playground-url").style.display === "none")
document.getElementById("tour-url").removeAttribute("style"); document.getElementById("playground-url").removeAttribute("style");
for (const example of document.querySelectorAll(".tour__navigation__example")) for (const example of document.querySelectorAll(".playground__navigation__example"))
example.classList.remove("active"); example.classList.remove("active");
document.querySelector(".tour__navigation__example:nth-child(3)").classList.add("active"); document.querySelector(".playground__navigation__example:nth-child(3)").classList.add("active");
document.getElementById("tour-loader").innerHTML = ""; document.getElementById("playground-loader").innerHTML = "";
document.getElementById("tour-results").innerHTML = ""; document.getElementById("playground-results").innerHTML = "";
document.getElementById("tour-loader").removeAttribute("style"); document.getElementById("playground-loader").removeAttribute("style");
document.getElementById("tour-results").removeAttribute("style"); document.getElementById("playground-results").removeAttribute("style");
send(JSON.stringify({ send(JSON.stringify({
"message": `request for ${data.action}` "message": `request for ${data.action}`

4
app/components/ecosystem.js
View file

@ -16,7 +16,7 @@ const WALLET = require("./ecosystem/submodule-wallet");
// E X P O R T // E X P O R T
export default function () { export default () => {
return ` return `
<section class="ecosystem"> <section class="ecosystem">
<aside class="ecosystem__submodules"> <aside class="ecosystem__submodules">
@ -36,4 +36,4 @@ export default function () {
</aside> </aside>
</section> </section>
`; `;
} };

2
app/components/ecosystem/module-lbrycrd.js
View file

@ -24,7 +24,7 @@ module.exports = exports = () => `
<p>LBRY uses a public, proof-of-work blockchain that is very similar to Bitcoin. The blockchain is the foundation of the protocol stack.</p> <p>LBRY uses a public, proof-of-work blockchain that is very similar to Bitcoin. The blockchain is the foundation of the protocol stack.</p>
<p>The most salient feature of the LBRY blockchain is the association of a string of characters (a "name") with a structured set of metadata. This name can be accessed as a LBRY URL, e.g. <a class="__plain" href="/tour?url=hellolbry"><code>lbry://hellolbry</code></a></p> <p>The most salient feature of the LBRY blockchain is the association of a string of characters (a "name") with a structured set of metadata. This name can be accessed as a LBRY URL, e.g. <a class="__plain" href="/playground?url=hellolbry"><code>lbry://hellolbry</code></a></p>
<p>The LBRY blockchain stores names and metadata in a Merkle tree. This allows LBRY URLs to be trustfully resolved even without a full copy of the blockchain.</p> <p>The LBRY blockchain stores names and metadata in a Merkle tree. This allows LBRY URLs to be trustfully resolved even without a full copy of the blockchain.</p>

18
app/components/edit-link.js
View file

@ -15,7 +15,7 @@ const config = local("/config");
// E X P O R T // E X P O R T
export default function (pagePath) { export default pagePath => {
let githubUrl = `https://github.com/${config.github.repo}/edit/${config.github.branch}`; let githubUrl = `https://github.com/${config.github.repo}/edit/${config.github.branch}`;
switch(pagePath) { switch(pagePath) {
@ -23,12 +23,16 @@ export default function (pagePath) {
githubUrl = `${githubUrl}/app/views/home.js`; githubUrl = `${githubUrl}/app/views/home.js`;
break; break;
case "/resources": case "/api":
githubUrl = `${githubUrl}/views/pages/resources.js`; githubUrl = `${githubUrl}/app/views/api.js`;
break; break;
case "/tour": case "/api/blockchain":
githubUrl = `${githubUrl}/app/components/tour.js`; githubUrl = "https://github.com/lbryio/lbrycrd/blob/add_api_docs_scripts/contrib/devtools/generated/api_v1.json";
break;
case "/api/sdk":
githubUrl = "https://github.com/lbryio/lbry/blob/master/docs/api.json";
break; break;
default: default:
@ -39,9 +43,9 @@ export default function (pagePath) {
return html` return html`
<a <a
href="${githubUrl}" href="${githubUrl}"
target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank"
title="${config.github.linkText}" title="${config.github.linkText}"
>${config.github.linkText}</a> >${config.github.linkText}</a>
`; `;
} };

22
app/components/email-subscribe.js
View file

@ -10,17 +10,15 @@ import html from "choo/html";
// E X P O R T // E X P O R T
export default function () { export default () => html`
return html` <div id="emailSubscribe" class="newsletter-cta">
<div id="emailSubscribe" class="newsletter-cta"> <h3 class="newsletter-cta__title">Don't miss a bit - Subscribe for LBRY technical updates</h3>
<h3 class="newsletter-cta__title">Don't miss a bit - Subscribe for LBRY technical updates</h3>
<div> <div>
<input class="newsletter-cta__input" id="emailAddress" placeholder="you@domain.tld" type="text"/> <input class="newsletter-cta__input" id="emailAddress" placeholder="you@domain.tld" type="text"/>
<button class="newsletter-cta__submit" data-action="subscribe to newsletter" title="Subscribe to our technical newsletter" type="button">Subscribe</a> <button class="newsletter-cta__submit" data-action="subscribe to newsletter" title="Subscribe to our technical newsletter" type="button">Subscribe</a>
</div>
<p class="newsletter-cta__message" id="emailMessage"></p>
</div> </div>
`;
} <p class="newsletter-cta__message" id="emailMessage"></p>
</div>
`;

4
app/components/feature-links.js
View file

@ -41,7 +41,7 @@ const links = [ // TODO: Update images
// E X P O R T // E X P O R T
export default function () { export default () => {
const renderedLinks = []; const renderedLinks = [];
let imageLink = ""; let imageLink = "";
@ -53,7 +53,7 @@ export default function () {
return ` return `
<div class="feature-links">${renderedLinks.join("")}</div> <div class="feature-links">${renderedLinks.join("")}</div>
`; `;
} };

2
app/components/link-grid.js
View file

@ -10,7 +10,7 @@ import html from "choo/html";
// E X P O R T // E X P O R T
export default (links) => { export default links => {
const renderedLinks = links.map((link) => const renderedLinks = links.map((link) =>
returnLinkTemplate(link.title, link.description, link.destination, link.label)); returnLinkTemplate(link.title, link.description, link.destination, link.label));

24
app/components/mission-statement.js
View file

@ -10,16 +10,14 @@ import html from "choo/html";
// E X P O R T // E X P O R T
export default function () { export default () => html`
return html` <div class="component--mission-statement">
<div class="component--mission-statement"> <strong class="component--mission-statement__title">Mission Statement</strong>
<strong class="component--mission-statement__title">Mission Statement</strong> To create a market for accessing and publishing information<sup><a class="__plain" href="#footnote-1" title="First footnote of our mission statement">1</a></sup>
To create a market for accessing and publishing information<sup><a class="__plain" href="#footnote-1" title="First footnote of our mission statement">1</a></sup> that is global<sup><a class="__plain" href="#footnote-2" title="Second footnote of our mission statement">2</a></sup>,
that is global<sup><a class="__plain" href="#footnote-2" title="Second footnote of our mission statement">2</a></sup>, decentralized<sup><a class="__plain" href="#footnote-3" title="Third footnote of our mission statement">3</a></sup>,
decentralized<sup><a class="__plain" href="#footnote-3" title="Third footnote of our mission statement">3</a></sup>, robust<sup><a class="__plain" href="#footnote-4" title="Fourth footnote of our mission statement">4</a></sup>,
robust<sup><a class="__plain" href="#footnote-4" title="Fourth footnote of our mission statement">4</a></sup>, optimal<sup><a class="__plain" href="#footnote-5" title="Fifth footnote of our mission statement">5</a></sup>
optimal<sup><a class="__plain" href="#footnote-5" title="Fifth footnote of our mission statement">5</a></sup> and complete<sup><a class="__plain" href="#footnote-6" title="Sixth footnote of our mission statement">6</a></sup>.
and complete<sup><a class="__plain" href="#footnote-6" title="Sixth footnote of our mission statement">6</a></sup>. </div>
</div> `;
`;
}

40
app/components/playground.js
View file

@ -12,17 +12,15 @@ import raw from "choo/html/raw";
// E X P O R T // E X P O R T
export default () => { export default () => dedent`
return dedent` <section class="playground">
<section class="tour"> <ul class="playground__navigation">
<ul class="tour__navigation"> ${raw(navigation())}
${raw(navigation())} </ul>
</ul> <p class="playground__description" id="playground-example-description"></p>
<p class="tour__description" id="tour-example-description"></p> <section class="playground__content">${raw(example1())}</section>
<section class="tour__content">${raw(example1())}</section> </section>
</section> `;
`;
};
@ -30,16 +28,16 @@ export default () => {
function example1() { function example1() {
return html` return html`
<div class="tour__content__urlbar" id="tour-url"> <div class="playground__content__urlbar" id="playground-url">
<span>lbry://</span><input id="fetch-claim-uri" placeholder="&thinsp;Enter a LBRY address or select a video below" type="text"/> <span>lbry://</span><input id="fetch-claim-uri" placeholder="&thinsp;Enter a LBRY address or select a video below" type="text"/>
<button class="button" data-action="execute claim" type="button">Resolve</button> <button class="button" data-action="execute claim" type="button">Resolve</button>
</div> </div>
<div class="tour__content__trends" id="tour-loader"></div> <div class="playground__content__trends" id="playground-loader"></div>
<div id="tour-results"></div> <div id="playground-results"></div>
<script> <script>
document.getElementById("tour-example-description").textContent = document.querySelector("[data-action='tour, example 1']").dataset.description document.getElementById("playground-example-description").textContent = document.querySelector("[data-action='playground, example 1']").dataset.description
</script> </script>
`; `;
} }
@ -47,8 +45,8 @@ function example1() {
function navigation() { // TODO: Save tutorial position to localStorage function navigation() { // TODO: Save tutorial position to localStorage
return dedent` return dedent`
<li <li
class="tour__navigation__example" class="playground__navigation__example"
data-action="tour, example 1" data-action="playground, example 1"
data-description="In this example, you can see what runs under the hood when selecting content to view in the LBRY app." data-description="In this example, you can see what runs under the hood when selecting content to view in the LBRY app."
data-example="1" data-example="1"
data-success="<strong>Success</strong> You resolved a claim, which is a <em>fancy</em> way of saying you searched for a piece of content and got back all the metadata associated with it (if it exists)." data-success="<strong>Success</strong> You resolved a claim, which is a <em>fancy</em> way of saying you searched for a piece of content and got back all the metadata associated with it (if it exists)."
@ -58,8 +56,8 @@ function navigation() { // TODO: Save tutorial position to localStorage
</li> </li>
<li <li
class="tour__navigation__example" class="playground__navigation__example"
data-action="tour, example 2" data-action="playground, example 2"
data-description="Sometimes you want to create content, not just consume it. In this example, you can create a meme and upload it to LBRY!" data-description="Sometimes you want to create content, not just consume it. In this example, you can create a meme and upload it to LBRY!"
data-example="2" data-example="2"
data-success="<strong>Meme-a-riffic</strong> You've just contributed to the growing expanse that is the meme industry. Where will your meme go next? YOU DECIDE!" data-success="<strong>Meme-a-riffic</strong> You've just contributed to the growing expanse that is the meme industry. Where will your meme go next? YOU DECIDE!"
@ -69,8 +67,8 @@ function navigation() { // TODO: Save tutorial position to localStorage
</li> </li>
<li <li
class="tour__navigation__example" class="playground__navigation__example"
data-action="tour, example 3" data-action="playground, example 3"
data-description="In the LBRY app, you can financially support your favorite creators by donating LBRY Coin (LBC). In this example, we are donating LBC in your stead." data-description="In the LBRY app, you can financially support your favorite creators by donating LBRY Coin (LBC). In this example, we are donating LBC in your stead."
data-example="3" data-example="3"
data-success="<strong>Kudos</strong> You've just supported a creator with LBC (or, LBRY credits) with our own stash of LBC (you'd use your own IRL). You're basically saying, 'thanks for this great content, please continue!' and that's awesome. You're awesome." data-success="<strong>Kudos</strong> You've just supported a creator with LBC (or, LBRY credits) with our own stash of LBC (you'd use your own IRL). You're basically saying, 'thanks for this great content, please continue!' and that's awesome. You're awesome."

58
app/components/resources-link-grid.js
View file

@ -1,27 +1,37 @@
"use strict"; "use strict";
import linkGrid from "./link-grid";
export default () => {
return linkGrid([{ // P A C K A G E
title: "Whitepaper",
description: "Read the formal specification for LBRY.", import { require as local } from "app-root-path";
destination: "/whitepaper",
label: "Study the Paper" // V A R I A B L E
}, {
title: "Contributor's Guide", const linkGrid = local("app/components/link-grid").default;
description: "Can you code, design, write or test? Join us!",
destination: "/contribute",
label: "Read the Guide"
}, { // E X P O R T
title: "SDK APIs",
description: "Method signatures and examples for lbry-sdk, the most common way to build on LBRY.", export default () => linkGrid([{
destination: "/api/sdk", description: "Read the formal specification for LBRY.",
label: "SDK APIs" destination: "/whitepaper",
}, { label: "Study the Paper",
title: "Blockchain APIs", title: "Whitepaper"
description: "Method signatures and examples for lbrycrd, the LBRY blockchain.", }, {
destination: "/api/blockchain", description: "Can you code, design, write or test? Join us!",
label: "Blockchain APIs" destination: "/contribute",
}]); label: "Read the Guide",
}; title: "Contributor's Guide"
}, {
description: "Method signatures and examples for lbry-sdk, the most common way to build on LBRY.",
destination: "/api/sdk",
label: "SDK APIs",
title: "SDK APIs"
}, {
description: "Method signatures and examples for lbrycrd, the LBRY blockchain.",
destination: "/api/blockchain",
label: "Blockchain APIs",
title: "Blockchain APIs"
}]);

24
app/dist/scripts/sockets.js vendored
View file

@ -32,19 +32,19 @@ function initializeWebSocketConnection() {
document.querySelector(data.selector).innerHTML = data.html; document.querySelector(data.selector).innerHTML = data.html;
if (!document.querySelector(`[data-example="${data.example}"`).classList.contains("completed")) if (!document.querySelector(`[data-example="${data.example}"`).classList.contains("completed"))
document.getElementById("tour-example-description").classList.remove("success"); document.getElementById("playground-example-description").classList.remove("success");
document.querySelector(`[data-example="${data.example}"`).classList.add("completed"); document.querySelector(`[data-example="${data.example}"`).classList.add("completed");
document.getElementById("tour-example-description").classList.add("success"); document.getElementById("playground-example-description").classList.add("success");
document.getElementById("tour-example-description").innerHTML = document.getElementById("playground-example-description").innerHTML =
document.querySelector(`[data-example="${data.example}"`).dataset.success; document.querySelector(`[data-example="${data.example}"`).dataset.success;
if (document.getElementById("temp-loader")) if (document.getElementById("temp-loader"))
document.getElementById("temp-loader").style.display = "none"; document.getElementById("temp-loader").style.display = "none";
if (document.querySelector(".tour")) if (document.querySelector(".playground"))
document.querySelector(".tour").classList.remove("waiting"); document.querySelector(".playground").classList.remove("waiting");
break; break;
@ -58,22 +58,22 @@ function initializeWebSocketConnection() {
initCanvas(); // eslint-disable-line initCanvas(); // eslint-disable-line
setTimeout(() => { setTimeout(() => {
document.querySelector(".tour__content__meme__canvas__thumbnail").click(); document.querySelector(".playground__content__meme__canvas__thumbnail").click();
}, 500); }, 500);
} }
if (document.getElementById("tour-example-description")) { if (document.getElementById("playground-example-description")) {
document.getElementById("tour-example-description").classList.remove("success"); document.getElementById("playground-example-description").classList.remove("success");
document.getElementById("tour-example-description").innerHTML = document.getElementById("playground-example-description").innerHTML =
document.querySelector(".tour__navigation__example.active").dataset.description; document.querySelector(".playground__navigation__example.active").dataset.description;
} }
if (document.getElementById("temp-loader")) if (document.getElementById("temp-loader"))
document.getElementById("temp-loader").style.display = "none"; document.getElementById("temp-loader").style.display = "none";
if (document.querySelector(".tour")) if (document.querySelector(".playground"))
document.querySelector(".tour").classList.remove("waiting"); document.querySelector(".playground").classList.remove("waiting");
break; break;

10
app/helpers/fetch-metadata.js
View file

@ -103,7 +103,7 @@ module.exports = exports = (data, socket) => {
logSlackError( logSlackError(
"\n" + "\n" +
"> *DAEMON ERROR:* ```" + JSON.parse(JSON.stringify(publishResponse.error)) + "```" + "\n" + "> *DAEMON ERROR:* ```" + JSON.parse(JSON.stringify(publishResponse.error)) + "```" + "\n" +
"> _Cause: Someone is going through the Tour after a response has been parsed_\n" "> _Cause: Someone is going through the Playground after a response has been parsed_\n"
); );
} }
@ -122,7 +122,7 @@ module.exports = exports = (data, socket) => {
publishResponse.result && publishResponse.result &&
publishResponse.result.claim_address publishResponse.result.claim_address
) explorerNotice = ` ) explorerNotice = `
<p class="tour__description success">To see Proof of Work (lol) that your meme is on the LBRY blockchain, <a href="https://explorer.lbry.io/address/${publishResponse.result.claim_address}" rel="noopener noreferrer" target="_blank" title="Your meme, on our blockchain explorer">check it out</a> on our blockchain explorer! Please note that it may take a couple minutes for the transaction to be confirmed.</p><br/> <p class="playground__description success">To see Proof of Work (lol) that your meme is on the LBRY blockchain, <a href="https://explorer.lbry.io/address/${publishResponse.result.claim_address}" rel="noopener noreferrer" target="_blank" title="Your meme, on our blockchain explorer">check it out</a> on our blockchain explorer! Please note that it may take a couple minutes for the transaction to be confirmed.</p><br/>
`; `;
return socket.send(JSON.stringify({ return socket.send(JSON.stringify({
@ -190,7 +190,7 @@ module.exports = exports = (data, socket) => {
logSlackError( logSlackError(
"\n" + "\n" +
"> *DAEMON ERROR:* ```" + JSON.parse(JSON.stringify(error)) + "```" + "\n" + "> *DAEMON ERROR:* ```" + JSON.parse(JSON.stringify(error)) + "```" + "\n" +
"> _Cause: Someone is going through the Tour_\n" "> _Cause: Someone is going through the Playground_\n"
); );
} }
@ -202,7 +202,7 @@ module.exports = exports = (data, socket) => {
logSlackError( logSlackError(
"\n" + "\n" +
"> *DAEMON ERROR:* ```" + JSON.parse(JSON.stringify(body.error.message)) + "```" + "\n" + "> *DAEMON ERROR:* ```" + JSON.parse(JSON.stringify(body.error.message)) + "```" + "\n" +
"> _Cause: Someone is going through the Tour after a response has been parsed_\n" "> _Cause: Someone is going through the Playground after a response has been parsed_\n"
); );
} }
@ -216,7 +216,7 @@ module.exports = exports = (data, socket) => {
body.result && body.result &&
body.result.txid body.result.txid
) explorerNotice = ` ) explorerNotice = `
<p class="tour__description success">If you want proof of the tip you just gave on behalf of LBRY, <a href="https://explorer.lbry.io/tx/${body.result.txid}" rel="noopener noreferrer" target="_blank" title="Your tip, on our blockchain explorer">check it out</a> on our blockchain explorer! Please note that it may take a couple minutes for the transaction to be confirmed.</p><br/> <p class="playground__description success">If you want proof of the tip you just gave on behalf of LBRY, <a href="https://explorer.lbry.io/tx/${body.result.txid}" rel="noopener noreferrer" target="_blank" title="Your tip, on our blockchain explorer">check it out</a> on our blockchain explorer! Please note that it may take a couple minutes for the transaction to be confirmed.</p><br/>
`; `;
if (socket) { if (socket) {

2
app/sass/bundle.scss
View file

@ -30,7 +30,7 @@
"pages/documentation", "pages/documentation",
"pages/home", "pages/home",
"pages/page", "pages/page",
"pages/tour", "pages/playground",
"plugins/prism" "plugins/prism"
; ;

13
app/sass/pages/_api.scss
View file

@ -15,9 +15,18 @@
} }
} }
.api__header .api__header {
{
padding: 2rem; padding: 2rem;
position: relative;
&::after {
width: 100%; height: 1px;
bottom: -1px; left: 0;
background-color: rgba($gray, 0.3);
content: "";
position: absolute;
}
} }

56
app/sass/pages/_tour.scss → app/sass/pages/_playground.scss
View file

@ -1,13 +1,13 @@
/** /**
* Tour | Wrapper * Playground | Wrapper
* *
* @class .tour * @class .playground
* @selector {::before} * @selector {::before}
* @selector {::after} * @selector {::after}
* @state {.waiting} * @state {.waiting}
*/ */
.tour { .playground {
border-top: 1px solid rgba($black, 0.05); border-top: 1px solid rgba($black, 0.05);
position: relative; position: relative;
top: 1rem; top: 1rem;
@ -31,18 +31,18 @@
/** /**
* Tour | Navigation * Playground | Navigation
* *
* @class .tour__navigation * @class .playground__navigation
* *
* @class .tour__navigation__example * @class .playground__navigation__example
* @selector {::before} * @selector {::before}
* @selector {:last-of-type} * @selector {:last-of-type}
* @state {.active} * @state {.active}
* @state {:hover} * @state {:hover}
*/ */
.tour__navigation { .playground__navigation {
width: 100%; width: 100%;
list-style-type: none; list-style-type: none;
@ -54,7 +54,7 @@
} }
} }
.tour__navigation__example { .playground__navigation__example {
cursor: pointer; cursor: pointer;
float: left; float: left;
position: relative; position: relative;
@ -129,30 +129,30 @@
/** /**
* Tour | Content * Playground | Content
* *
* @class .tour__content * @class .playground__content
* *
* @class .tour__content__meme * @class .playground__content__meme
* @selector {::after} * @selector {::after}
* *
* @class .tour__content__meme__canvas * @class .playground__content__meme__canvas
* *
* @class .tour__content__meme__canvas__thumbnail * @class .playground__content__meme__canvas__thumbnail
* @selector {:last-of-type} * @selector {:last-of-type}
* @state {.selected} * @state {.selected}
* *
* @class .tour__content__meme__editor * @class .playground__content__meme__editor
* *
* @class .tour__content__trends * @class .playground__content__trends
* @selector {::after} * @selector {::after}
* @state {:empty} * @state {:empty}
* *
* @class .tour__content__trend * @class .playground__content__trend
* @class .tour__content__urlbar * @class .playground__content__urlbar
*/ */
.tour__content { .playground__content {
border-top: 1px solid rgba($black, 0.05); border-top: 1px solid rgba($black, 0.05);
overflow-y: visible; overflow-y: visible;
padding-bottom: 1rem; padding-bottom: 1rem;
@ -176,7 +176,7 @@
} }
} }
.tour__content__meme { .playground__content__meme {
overflow-y: auto; overflow-y: auto;
position: relative; position: relative;
@ -185,7 +185,7 @@
} }
} }
.tour__content__meme__canvas { .playground__content__meme__canvas {
float: left; float: left;
margin-right: 2%; margin-right: 2%;
position: relative; position: relative;
@ -199,7 +199,7 @@
} }
} }
.tour__content__meme__canvas__thumbnail { .playground__content__meme__canvas__thumbnail {
width: 5rem; height: 5rem; width: 5rem; height: 5rem;
border-style: solid; border-style: solid;
@ -222,7 +222,7 @@
} }
} }
.tour__content__meme__editor { .playground__content__meme__editor {
float: right; float: right;
width: 50%; width: 50%;
@ -336,7 +336,7 @@
} }
} }
.tour__content__trends { .playground__content__trends {
min-width: 0; min-height: 0; min-width: 0; min-height: 0;
display: grid; display: grid;
@ -353,7 +353,7 @@
} }
} }
.tour__content__trend { .playground__content__trend {
img { img {
width: 100%; height: 213px; width: 100%; height: 213px;
@ -379,7 +379,7 @@
} }
} }
.tour__content__urlbar { .playground__content__urlbar {
border: 1px solid rgba($black, 0.05); border: 1px solid rgba($black, 0.05);
display: flex; display: flex;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -455,12 +455,12 @@
/** /**
* Tour | Description * Playground | Description
* *
* @class .tour__description * @class .playground__description
*/ */
.tour__description { .playground__description {
cursor: default; cursor: default;
font-size: 1rem; font-size: 1rem;
line-height: 1.33; line-height: 1.33;

30
app/sockets.js
View file

@ -36,36 +36,36 @@ module.exports = exports = (socket, action) => {
}); });
break; break;
case (action.message === "landed on tour"): case (action.message === "landed on playground"):
generateContent(1, result => { generateContent(1, result => {
socket.send(JSON.stringify({ socket.send(JSON.stringify({
"html": result, "html": result,
"message": "updated html", "message": "updated html",
"selector": "#tour-loader" "selector": "#playground-loader"
})); }));
}); });
break; break;
case (action.message === "request for tour, example 1"): case (action.message === "request for playground, example 1"):
generateContent(1, result => { generateContent(1, result => {
socket.send(JSON.stringify({ socket.send(JSON.stringify({
"html": result, "html": result,
"message": "updated html", "message": "updated html",
"selector": "#tour-loader" "selector": "#playground-loader"
})); }));
}); });
break; break;
case (action.message === "request for tour, example 2"): case (action.message === "request for playground, example 2"):
generateMemeCreator(socket); generateMemeCreator(socket);
break; break;
case (action.message === "request for tour, example 3"): case (action.message === "request for playground, example 3"):
generateContent(3, result => { generateContent(3, result => {
socket.send(JSON.stringify({ socket.send(JSON.stringify({
"html": result, "html": result,
"message": "updated html", "message": "updated html",
"selector": "#tour-loader" "selector": "#playground-loader"
})); }));
}); });
break; break;
@ -101,7 +101,7 @@ function generateContent(exampleNumber, displayTrendingContent) {
for (const part of collection) { for (const part of collection) {
try { try {
renderedContentCollection.push(` renderedContentCollection.push(`
<figure class="tour__content__trend"> <figure class="playground__content__trend">
<img alt="${part.name}" data-action="choose claim" data-claim-id="${part.name}" src="${part.value.stream.metadata.thumbnail}"/> <img alt="${part.name}" data-action="choose claim" data-claim-id="${part.name}" src="${part.value.stream.metadata.thumbnail}"/>
<figcaption data-action="choose claim" data-claim-id="${part.name}"> <figcaption data-action="choose claim" data-claim-id="${part.name}">
@ -117,7 +117,7 @@ function generateContent(exampleNumber, displayTrendingContent) {
renderedContentCollection.push(` renderedContentCollection.push(`
<script> <script>
document.getElementById("tour-example-description").innerHTML = document.querySelector("[data-action='tour, example 1']").dataset.description document.getElementById("playground-example-description").innerHTML = document.querySelector("[data-action='playground, example 1']").dataset.description
</script> </script>
`); `);
@ -155,7 +155,7 @@ function generateContent(exampleNumber, displayTrendingContent) {
part.channel_name part.channel_name
) { ) {
renderedContentCollection.push(` renderedContentCollection.push(`
<figure class="tour__content__trend"> <figure class="playground__content__trend">
<img alt="${part.name}" data-action="choose claim" data-claim-id="${part.claim_id}" src="${part.value.stream.metadata.thumbnail}"/> <img alt="${part.name}" data-action="choose claim" data-claim-id="${part.claim_id}" src="${part.value.stream.metadata.thumbnail}"/>
<figcaption data-action="choose claim" data-claim-id="${part.claim_id}"> <figcaption data-action="choose claim" data-claim-id="${part.claim_id}">
${part.value.stream.metadata.title} ${part.value.stream.metadata.title}
@ -168,7 +168,7 @@ function generateContent(exampleNumber, displayTrendingContent) {
renderedContentCollection.push(` renderedContentCollection.push(`
<script> <script>
document.getElementById("tour-example-description").innerHTML = document.querySelector("[data-action='tour, example 3']").dataset.description document.getElementById("playground-example-description").innerHTML = document.querySelector("[data-action='playground, example 3']").dataset.description
</script> </script>
`); `);
@ -215,17 +215,17 @@ function generateMemeCreator(socket) {
const renderedImages = []; const renderedImages = [];
for (const image of images) for (const image of images)
renderedImages.push(`<img alt="${image.alt}" class="tour__content__meme__canvas__thumbnail" src="${image.src}"/>`); renderedImages.push(`<img alt="${image.alt}" class="playground__content__meme__canvas__thumbnail" src="${image.src}"/>`);
const memeCreator = html` const memeCreator = html`
<div class="tour__content__meme__canvas"> <div class="playground__content__meme__canvas">
<img alt="Base image for LBRY meme creator" id="base-image" style="height: 0; position: absolute; visibility: hidden;"/> <img alt="Base image for LBRY meme creator" id="base-image" style="height: 0; position: absolute; visibility: hidden;"/>
<canvas id="meme-canvas" height="600" width="800">Unfortunately, it looks like canvas is <strong>not supported</strong> in your browser</canvas> <canvas id="meme-canvas" height="600" width="800">Unfortunately, it looks like canvas is <strong>not supported</strong> in your browser</canvas>
${renderedImages} ${renderedImages}
</div> </div>
<form class="tour__content__meme__editor"> <form class="playground__content__meme__editor">
<h2>Image Text</h2> <h2>Image Text</h2>
<fieldset> <fieldset>
@ -294,7 +294,7 @@ function generateMemeCreator(socket) {
"example": 2, "example": 2,
"html": memeCreator, "html": memeCreator,
"message": "updated html", "message": "updated html",
"selector": "#tour-loader" "selector": "#playground-loader"
})); }));
} }

2
app/views/redirect.js
View file

@ -71,7 +71,7 @@ module.exports = exports = (state, emit) => { // eslint-disable-line
let pageScript = ""; let pageScript = "";
if (path === "glossary") pageScript = "<script>" + fs.readFileSync("./app/components/client/glossary-scripts.js", "utf-8") + "</script>"; if (path === "glossary") pageScript = "<script>" + fs.readFileSync("./app/components/client/glossary-scripts.js", "utf-8") + "</script>";
if (path === "overview") pageScript = "<script>" + fs.readFileSync("./app/components/client/ecosystem-scripts.js", "utf-8") + "</script>"; if (path === "overview") pageScript = "<script>" + fs.readFileSync("./app/components/client/ecosystem-scripts.js", "utf-8") + "</script>";
if (path === "playground") pageScript = "<script>" + fs.readFileSync("./app/components/client/tour-scripts.js", "utf-8") + "</script>"; if (path === "playground") pageScript = "<script>" + fs.readFileSync("./app/components/client/playground-scripts.js", "utf-8") + "</script>";
return html` return html`
<article class="page" itemtype="http://schema.org/BlogPosting"> <article class="page" itemtype="http://schema.org/BlogPosting">

2
documents/overview.md
View file

@ -32,6 +32,6 @@ Learn more about how LBRY works from this ecosystem overview.
## Keep Diving ## Keep Diving
- Explore live metadata and add your own blockchain entry on [the Tour](/tour). - Explore live metadata and add your own blockchain entry on [the Playground](/playground).
- Read the whitepaper, the API specification and other documentation in [Resources](/resources). - Read the whitepaper, the API specification and other documentation in [Resources](/resources).
- Learn how to [contribute to LBRY](/contribute) or [build your own application](/build). - Learn how to [contribute to LBRY](/contribute) or [build your own application](/build).