Fixes and refactoring
This commit is contained in:
ポール ウェッブ
parent
baf4b42d81
commit
34a26c8051
20 changed files with 248 additions and 225 deletions
|
|
@ -1,15 +1,18 @@
|
|||
"use strict";
|
||||
|
||||
|
||||
|
||||
// P A C K A G E
|
||||
|
||||
import html from "choo/html";
|
||||
|
||||
export default () => {
|
||||
return html`
|
||||
|
||||
|
||||
// E X P O R T
|
||||
|
||||
export default () => html`
|
||||
<div class="api__header page__markup">
|
||||
<h1>lbrycrd APIs</h1>
|
||||
<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>
|
||||
<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>
|
||||
`;
|
||||
};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,18 @@
|
|||
"use strict";
|
||||
|
||||
|
||||
|
||||
// P A C K A G E
|
||||
|
||||
import html from "choo/html";
|
||||
|
||||
export default () => {
|
||||
return html`
|
||||
|
||||
|
||||
// E X P O R T
|
||||
|
||||
export default () => html`
|
||||
<div class="api__header page__markup">
|
||||
<h1>lbry-sdk APIs</h1>
|
||||
<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>
|
||||
<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>
|
||||
`;
|
||||
};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
if (event.target.dataset.action) {
|
||||
event.preventDefault();
|
||||
document.querySelector(".tour").classList.add("waiting");
|
||||
document.querySelector(".playground").classList.add("waiting");
|
||||
handleExamples(event.target);
|
||||
}
|
||||
|
||||
if (
|
||||
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");
|
||||
|
||||
event.explicitOriginalTarget.classList.add("selected");
|
||||
|
|
@ -119,18 +119,18 @@ function debounce(func, wait, immediate) {
|
|||
};
|
||||
}
|
||||
|
||||
function initializeTour() {
|
||||
document.querySelector(".tour").classList.add("waiting");
|
||||
function initializePlayground() {
|
||||
document.querySelector(".playground").classList.add("waiting");
|
||||
document.querySelector("#fetch-claim-uri").value = "";
|
||||
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({
|
||||
"message": "landed on tour"
|
||||
"message": "landed on playground"
|
||||
}));
|
||||
|
||||
setTimeout(() => {
|
||||
document.querySelector(".tour__navigation__example:nth-child(1)").click();
|
||||
document.querySelector(".playground__navigation__example:nth-child(1)").click();
|
||||
}, 300);
|
||||
}
|
||||
|
||||
|
|
@ -150,7 +150,7 @@ function fetchMetadata(exampleNumber, data) {
|
|||
|
||||
document.getElementById("fetch-claim-uri").value = data;
|
||||
|
||||
document.getElementById("tour-results").innerHTML = `
|
||||
document.getElementById("playground-results").innerHTML = `
|
||||
<pre><code class="language-bash">
|
||||
<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>
|
||||
|
|
@ -160,7 +160,7 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
|
|||
<div id="example1-result"></div>
|
||||
`;
|
||||
|
||||
document.getElementById("tour-loader").style.display = "none";
|
||||
document.getElementById("playground-loader").style.display = "none";
|
||||
break;
|
||||
|
||||
case 2:
|
||||
|
|
@ -171,7 +171,7 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
|
|||
"example": exampleNumber
|
||||
}));
|
||||
|
||||
document.getElementById("tour-results").innerHTML = `
|
||||
document.getElementById("playground-results").innerHTML = `
|
||||
<pre><code class="language-bash">
|
||||
<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>
|
||||
|
|
@ -181,7 +181,7 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
|
|||
<div id="example2-result"></div>
|
||||
`;
|
||||
|
||||
document.getElementById("tour-loader").style.display = "none";
|
||||
document.getElementById("playground-loader").style.display = "none";
|
||||
break;
|
||||
|
||||
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("tour-results").innerHTML = `
|
||||
document.getElementById("playground-results").innerHTML = `
|
||||
<pre><code class="language-bash">
|
||||
<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>
|
||||
|
|
@ -204,7 +204,7 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
|
|||
<div id="example3-result"></div>
|
||||
`;
|
||||
|
||||
document.getElementById("tour-loader").style.display = "none";
|
||||
document.getElementById("playground-loader").style.display = "none";
|
||||
break;
|
||||
|
||||
default:
|
||||
|
|
@ -228,14 +228,14 @@ const handleExamples = debounce(event => {
|
|||
let exampleNumber;
|
||||
const data = event.dataset;
|
||||
|
||||
if (!parseInt(document.querySelector(".tour__navigation__example.active").dataset.example)) return;
|
||||
exampleNumber = parseInt(document.querySelector(".tour__navigation__example.active").dataset.example);
|
||||
if (!parseInt(document.querySelector(".playground__navigation__example.active").dataset.example)) return;
|
||||
exampleNumber = parseInt(document.querySelector(".playground__navigation__example.active").dataset.example);
|
||||
|
||||
switch(data.action) {
|
||||
case "choose claim":
|
||||
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;
|
||||
|
||||
break;
|
||||
|
|
@ -245,28 +245,28 @@ const handleExamples = debounce(event => {
|
|||
fetchMetadata(exampleNumber, document.getElementById("fetch-claim-uri").value);
|
||||
break;
|
||||
|
||||
case "tour, example 1":
|
||||
if (document.getElementById("tour-loader").classList.contains("tour__content__meme")) {
|
||||
document.getElementById("tour-loader").classList.remove("tour__content__meme");
|
||||
document.getElementById("tour-loader").classList.add("tour__content__trends");
|
||||
case "playground, example 1":
|
||||
if (document.getElementById("playground-loader").classList.contains("playground__content__meme")) {
|
||||
document.getElementById("playground-loader").classList.remove("playground__content__meme");
|
||||
document.getElementById("playground-loader").classList.add("playground__content__trends");
|
||||
}
|
||||
|
||||
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")
|
||||
document.getElementById("tour-url").removeAttribute("style");
|
||||
if (document.getElementById("playground-url").style.display === "none")
|
||||
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");
|
||||
|
||||
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("tour-results").innerHTML = "";
|
||||
document.getElementById("playground-loader").innerHTML = "";
|
||||
document.getElementById("playground-results").innerHTML = "";
|
||||
|
||||
document.getElementById("tour-loader").removeAttribute("style");
|
||||
document.getElementById("tour-results").removeAttribute("style");
|
||||
document.getElementById("playground-loader").removeAttribute("style");
|
||||
document.getElementById("playground-results").removeAttribute("style");
|
||||
|
||||
send(JSON.stringify({
|
||||
"message": `request for ${data.action}`
|
||||
|
|
@ -274,25 +274,25 @@ const handleExamples = debounce(event => {
|
|||
|
||||
break;
|
||||
|
||||
case "tour, example 2":
|
||||
if (document.getElementById("tour-loader").classList.contains("tour__content__trends")) {
|
||||
document.getElementById("tour-loader").classList.remove("tour__content__trends");
|
||||
document.getElementById("tour-loader").classList.add("tour__content__meme");
|
||||
case "playground, example 2":
|
||||
if (document.getElementById("playground-loader").classList.contains("playground__content__trends")) {
|
||||
document.getElementById("playground-loader").classList.remove("playground__content__trends");
|
||||
document.getElementById("playground-loader").classList.add("playground__content__meme");
|
||||
}
|
||||
|
||||
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");
|
||||
|
||||
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("tour-results").innerHTML = "";
|
||||
document.getElementById("playground-loader").innerHTML = "";
|
||||
document.getElementById("playground-results").innerHTML = "";
|
||||
|
||||
document.getElementById("tour-loader").removeAttribute("style");
|
||||
document.getElementById("tour-results").removeAttribute("style");
|
||||
document.getElementById("playground-loader").removeAttribute("style");
|
||||
document.getElementById("playground-results").removeAttribute("style");
|
||||
|
||||
send(JSON.stringify({
|
||||
"message": `request for ${data.action}`
|
||||
|
|
@ -300,28 +300,28 @@ const handleExamples = debounce(event => {
|
|||
|
||||
break;
|
||||
|
||||
case "tour, example 3":
|
||||
if (document.getElementById("tour-loader").classList.contains("tour__content__meme")) {
|
||||
document.getElementById("tour-loader").classList.remove("tour__content__meme");
|
||||
document.getElementById("tour-loader").classList.add("tour__content__trends");
|
||||
case "playground, example 3":
|
||||
if (document.getElementById("playground-loader").classList.contains("playground__content__meme")) {
|
||||
document.getElementById("playground-loader").classList.remove("playground__content__meme");
|
||||
document.getElementById("playground-loader").classList.add("playground__content__trends");
|
||||
}
|
||||
|
||||
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")
|
||||
document.getElementById("tour-url").removeAttribute("style");
|
||||
if (document.getElementById("playground-url").style.display === "none")
|
||||
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");
|
||||
|
||||
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("tour-results").innerHTML = "";
|
||||
document.getElementById("playground-loader").innerHTML = "";
|
||||
document.getElementById("playground-results").innerHTML = "";
|
||||
|
||||
document.getElementById("tour-loader").removeAttribute("style");
|
||||
document.getElementById("tour-results").removeAttribute("style");
|
||||
document.getElementById("playground-loader").removeAttribute("style");
|
||||
document.getElementById("playground-results").removeAttribute("style");
|
||||
|
||||
send(JSON.stringify({
|
||||
"message": `request for ${data.action}`
|
||||
|
|
@ -16,7 +16,7 @@ const WALLET = require("./ecosystem/submodule-wallet");
|
|||
|
||||
// E X P O R T
|
||||
|
||||
export default function () {
|
||||
export default () => {
|
||||
return `
|
||||
<section class="ecosystem">
|
||||
<aside class="ecosystem__submodules">
|
||||
|
|
@ -36,4 +36,4 @@ export default function () {
|
|||
</aside>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>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>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const config = local("/config");
|
|||
|
||||
// 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}`;
|
||||
|
||||
switch(pagePath) {
|
||||
|
|
@ -23,12 +23,16 @@ export default function (pagePath) {
|
|||
githubUrl = `${githubUrl}/app/views/home.js`;
|
||||
break;
|
||||
|
||||
case "/resources":
|
||||
githubUrl = `${githubUrl}/views/pages/resources.js`;
|
||||
case "/api":
|
||||
githubUrl = `${githubUrl}/app/views/api.js`;
|
||||
break;
|
||||
|
||||
case "/tour":
|
||||
githubUrl = `${githubUrl}/app/components/tour.js`;
|
||||
case "/api/blockchain":
|
||||
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;
|
||||
|
||||
default:
|
||||
|
|
@ -39,9 +43,9 @@ export default function (pagePath) {
|
|||
return html`
|
||||
<a
|
||||
href="${githubUrl}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="${config.github.linkText}"
|
||||
>${config.github.linkText}</a>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@ import html from "choo/html";
|
|||
|
||||
// E X P O R T
|
||||
|
||||
export default function () {
|
||||
return html`
|
||||
export default () => html`
|
||||
<div id="emailSubscribe" class="newsletter-cta">
|
||||
<h3 class="newsletter-cta__title">Don't miss a bit - Subscribe for LBRY technical updates</h3>
|
||||
|
||||
|
|
@ -22,5 +21,4 @@ export default function () {
|
|||
|
||||
<p class="newsletter-cta__message" id="emailMessage"></p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ const links = [ // TODO: Update images
|
|||
|
||||
// E X P O R T
|
||||
|
||||
export default function () {
|
||||
export default () => {
|
||||
const renderedLinks = [];
|
||||
let imageLink = "";
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ export default function () {
|
|||
return `
|
||||
<div class="feature-links">${renderedLinks.join("")}</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import html from "choo/html";
|
|||
|
||||
// E X P O R T
|
||||
|
||||
export default (links) => {
|
||||
export default links => {
|
||||
const renderedLinks = links.map((link) =>
|
||||
returnLinkTemplate(link.title, link.description, link.destination, link.label));
|
||||
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@ import html from "choo/html";
|
|||
|
||||
// E X P O R T
|
||||
|
||||
export default function () {
|
||||
return html`
|
||||
export default () => html`
|
||||
<div class="component--mission-statement">
|
||||
<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>
|
||||
|
|
@ -21,5 +20,4 @@ export default function () {
|
|||
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>.
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -12,17 +12,15 @@ import raw from "choo/html/raw";
|
|||
|
||||
// E X P O R T
|
||||
|
||||
export default () => {
|
||||
return dedent`
|
||||
<section class="tour">
|
||||
<ul class="tour__navigation">
|
||||
export default () => dedent`
|
||||
<section class="playground">
|
||||
<ul class="playground__navigation">
|
||||
${raw(navigation())}
|
||||
</ul>
|
||||
<p class="tour__description" id="tour-example-description"></p>
|
||||
<section class="tour__content">${raw(example1())}</section>
|
||||
<p class="playground__description" id="playground-example-description"></p>
|
||||
<section class="playground__content">${raw(example1())}</section>
|
||||
</section>
|
||||
`;
|
||||
};
|
||||
`;
|
||||
|
||||
|
||||
|
||||
|
|
@ -30,16 +28,16 @@ export default () => {
|
|||
|
||||
function example1() {
|
||||
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=" Enter a LBRY address or select a video below" type="text"/>
|
||||
<button class="button" data-action="execute claim" type="button">Resolve</button>
|
||||
</div>
|
||||
|
||||
<div class="tour__content__trends" id="tour-loader"></div>
|
||||
<div id="tour-results"></div>
|
||||
<div class="playground__content__trends" id="playground-loader"></div>
|
||||
<div id="playground-results"></div>
|
||||
|
||||
<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>
|
||||
`;
|
||||
}
|
||||
|
|
@ -47,8 +45,8 @@ function example1() {
|
|||
function navigation() { // TODO: Save tutorial position to localStorage
|
||||
return dedent`
|
||||
<li
|
||||
class="tour__navigation__example"
|
||||
data-action="tour, example 1"
|
||||
class="playground__navigation__example"
|
||||
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-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)."
|
||||
|
|
@ -58,8 +56,8 @@ function navigation() { // TODO: Save tutorial position to localStorage
|
|||
</li>
|
||||
|
||||
<li
|
||||
class="tour__navigation__example"
|
||||
data-action="tour, example 2"
|
||||
class="playground__navigation__example"
|
||||
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-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!"
|
||||
|
|
@ -69,8 +67,8 @@ function navigation() { // TODO: Save tutorial position to localStorage
|
|||
</li>
|
||||
|
||||
<li
|
||||
class="tour__navigation__example"
|
||||
data-action="tour, example 3"
|
||||
class="playground__navigation__example"
|
||||
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-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."
|
||||
|
|
|
|||
|
|
@ -1,27 +1,37 @@
|
|||
"use strict";
|
||||
|
||||
import linkGrid from "./link-grid";
|
||||
|
||||
export default () => {
|
||||
return linkGrid([{
|
||||
title: "Whitepaper",
|
||||
|
||||
// P A C K A G E
|
||||
|
||||
import { require as local } from "app-root-path";
|
||||
|
||||
// V A R I A B L E
|
||||
|
||||
const linkGrid = local("app/components/link-grid").default;
|
||||
|
||||
|
||||
|
||||
// E X P O R T
|
||||
|
||||
export default () => linkGrid([{
|
||||
description: "Read the formal specification for LBRY.",
|
||||
destination: "/whitepaper",
|
||||
label: "Study the Paper"
|
||||
}, {
|
||||
title: "Contributor's Guide",
|
||||
label: "Study the Paper",
|
||||
title: "Whitepaper"
|
||||
}, {
|
||||
description: "Can you code, design, write or test? Join us!",
|
||||
destination: "/contribute",
|
||||
label: "Read the Guide"
|
||||
}, {
|
||||
title: "SDK APIs",
|
||||
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: "Blockchain APIs",
|
||||
label: "SDK APIs",
|
||||
title: "SDK APIs"
|
||||
}, {
|
||||
description: "Method signatures and examples for lbrycrd, the LBRY blockchain.",
|
||||
destination: "/api/blockchain",
|
||||
label: "Blockchain APIs"
|
||||
}]);
|
||||
};
|
||||
label: "Blockchain APIs",
|
||||
title: "Blockchain APIs"
|
||||
}]);
|
||||
|
|
|
|||
24
app/dist/scripts/sockets.js
vendored
24
app/dist/scripts/sockets.js
vendored
|
|
@ -32,19 +32,19 @@ function initializeWebSocketConnection() {
|
|||
document.querySelector(data.selector).innerHTML = data.html;
|
||||
|
||||
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.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;
|
||||
|
||||
if (document.getElementById("temp-loader"))
|
||||
document.getElementById("temp-loader").style.display = "none";
|
||||
|
||||
if (document.querySelector(".tour"))
|
||||
document.querySelector(".tour").classList.remove("waiting");
|
||||
if (document.querySelector(".playground"))
|
||||
document.querySelector(".playground").classList.remove("waiting");
|
||||
|
||||
break;
|
||||
|
||||
|
|
@ -58,22 +58,22 @@ function initializeWebSocketConnection() {
|
|||
initCanvas(); // eslint-disable-line
|
||||
|
||||
setTimeout(() => {
|
||||
document.querySelector(".tour__content__meme__canvas__thumbnail").click();
|
||||
document.querySelector(".playground__content__meme__canvas__thumbnail").click();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
if (document.getElementById("tour-example-description")) {
|
||||
document.getElementById("tour-example-description").classList.remove("success");
|
||||
if (document.getElementById("playground-example-description")) {
|
||||
document.getElementById("playground-example-description").classList.remove("success");
|
||||
|
||||
document.getElementById("tour-example-description").innerHTML =
|
||||
document.querySelector(".tour__navigation__example.active").dataset.description;
|
||||
document.getElementById("playground-example-description").innerHTML =
|
||||
document.querySelector(".playground__navigation__example.active").dataset.description;
|
||||
}
|
||||
|
||||
if (document.getElementById("temp-loader"))
|
||||
document.getElementById("temp-loader").style.display = "none";
|
||||
|
||||
if (document.querySelector(".tour"))
|
||||
document.querySelector(".tour").classList.remove("waiting");
|
||||
if (document.querySelector(".playground"))
|
||||
document.querySelector(".playground").classList.remove("waiting");
|
||||
|
||||
break;
|
||||
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ module.exports = exports = (data, socket) => {
|
|||
logSlackError(
|
||||
"\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.claim_address
|
||||
) 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({
|
||||
|
|
@ -190,7 +190,7 @@ module.exports = exports = (data, socket) => {
|
|||
logSlackError(
|
||||
"\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(
|
||||
"\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.txid
|
||||
) 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) {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
"pages/documentation",
|
||||
"pages/home",
|
||||
"pages/page",
|
||||
"pages/tour",
|
||||
"pages/playground",
|
||||
|
||||
"plugins/prism"
|
||||
;
|
||||
|
|
|
|||
|
|
@ -15,9 +15,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
.api__header
|
||||
{
|
||||
.api__header {
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
width: 100%; height: 1px;
|
||||
bottom: -1px; left: 0;
|
||||
|
||||
background-color: rgba($gray, 0.3);
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
/**
|
||||
* Tour | Wrapper
|
||||
* Playground | Wrapper
|
||||
*
|
||||
* @class .tour
|
||||
* @class .playground
|
||||
* @selector {::before}
|
||||
* @selector {::after}
|
||||
* @state {.waiting}
|
||||
*/
|
||||
|
||||
.tour {
|
||||
.playground {
|
||||
border-top: 1px solid rgba($black, 0.05);
|
||||
position: relative;
|
||||
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 {:last-of-type}
|
||||
* @state {.active}
|
||||
* @state {:hover}
|
||||
*/
|
||||
|
||||
.tour__navigation {
|
||||
.playground__navigation {
|
||||
width: 100%;
|
||||
|
||||
list-style-type: none;
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tour__navigation__example {
|
||||
.playground__navigation__example {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
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}
|
||||
*
|
||||
* @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}
|
||||
* @state {.selected}
|
||||
*
|
||||
* @class .tour__content__meme__editor
|
||||
* @class .playground__content__meme__editor
|
||||
*
|
||||
* @class .tour__content__trends
|
||||
* @class .playground__content__trends
|
||||
* @selector {::after}
|
||||
* @state {:empty}
|
||||
*
|
||||
* @class .tour__content__trend
|
||||
* @class .tour__content__urlbar
|
||||
* @class .playground__content__trend
|
||||
* @class .playground__content__urlbar
|
||||
*/
|
||||
|
||||
.tour__content {
|
||||
.playground__content {
|
||||
border-top: 1px solid rgba($black, 0.05);
|
||||
overflow-y: visible;
|
||||
padding-bottom: 1rem;
|
||||
|
|
@ -176,7 +176,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tour__content__meme {
|
||||
.playground__content__meme {
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tour__content__meme__canvas {
|
||||
.playground__content__meme__canvas {
|
||||
float: left;
|
||||
margin-right: 2%;
|
||||
position: relative;
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tour__content__meme__canvas__thumbnail {
|
||||
.playground__content__meme__canvas__thumbnail {
|
||||
width: 5rem; height: 5rem;
|
||||
|
||||
border-style: solid;
|
||||
|
|
@ -222,7 +222,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tour__content__meme__editor {
|
||||
.playground__content__meme__editor {
|
||||
float: right;
|
||||
width: 50%;
|
||||
|
||||
|
|
@ -336,7 +336,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tour__content__trends {
|
||||
.playground__content__trends {
|
||||
min-width: 0; min-height: 0;
|
||||
|
||||
display: grid;
|
||||
|
|
@ -353,7 +353,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tour__content__trend {
|
||||
.playground__content__trend {
|
||||
img {
|
||||
width: 100%; height: 213px;
|
||||
|
||||
|
|
@ -379,7 +379,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tour__content__urlbar {
|
||||
.playground__content__urlbar {
|
||||
border: 1px solid rgba($black, 0.05);
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -455,12 +455,12 @@
|
|||
|
||||
|
||||
/**
|
||||
* Tour | Description
|
||||
* Playground | Description
|
||||
*
|
||||
* @class .tour__description
|
||||
* @class .playground__description
|
||||
*/
|
||||
|
||||
.tour__description {
|
||||
.playground__description {
|
||||
cursor: default;
|
||||
font-size: 1rem;
|
||||
line-height: 1.33;
|
||||
|
|
@ -36,36 +36,36 @@ module.exports = exports = (socket, action) => {
|
|||
});
|
||||
break;
|
||||
|
||||
case (action.message === "landed on tour"):
|
||||
case (action.message === "landed on playground"):
|
||||
generateContent(1, result => {
|
||||
socket.send(JSON.stringify({
|
||||
"html": result,
|
||||
"message": "updated html",
|
||||
"selector": "#tour-loader"
|
||||
"selector": "#playground-loader"
|
||||
}));
|
||||
});
|
||||
break;
|
||||
|
||||
case (action.message === "request for tour, example 1"):
|
||||
case (action.message === "request for playground, example 1"):
|
||||
generateContent(1, result => {
|
||||
socket.send(JSON.stringify({
|
||||
"html": result,
|
||||
"message": "updated html",
|
||||
"selector": "#tour-loader"
|
||||
"selector": "#playground-loader"
|
||||
}));
|
||||
});
|
||||
break;
|
||||
|
||||
case (action.message === "request for tour, example 2"):
|
||||
case (action.message === "request for playground, example 2"):
|
||||
generateMemeCreator(socket);
|
||||
break;
|
||||
|
||||
case (action.message === "request for tour, example 3"):
|
||||
case (action.message === "request for playground, example 3"):
|
||||
generateContent(3, result => {
|
||||
socket.send(JSON.stringify({
|
||||
"html": result,
|
||||
"message": "updated html",
|
||||
"selector": "#tour-loader"
|
||||
"selector": "#playground-loader"
|
||||
}));
|
||||
});
|
||||
break;
|
||||
|
|
@ -101,7 +101,7 @@ function generateContent(exampleNumber, displayTrendingContent) {
|
|||
for (const part of collection) {
|
||||
try {
|
||||
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}"/>
|
||||
|
||||
<figcaption data-action="choose claim" data-claim-id="${part.name}">
|
||||
|
|
@ -117,7 +117,7 @@ function generateContent(exampleNumber, displayTrendingContent) {
|
|||
|
||||
renderedContentCollection.push(`
|
||||
<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>
|
||||
`);
|
||||
|
||||
|
|
@ -155,7 +155,7 @@ function generateContent(exampleNumber, displayTrendingContent) {
|
|||
part.channel_name
|
||||
) {
|
||||
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}"/>
|
||||
<figcaption data-action="choose claim" data-claim-id="${part.claim_id}">
|
||||
${part.value.stream.metadata.title}
|
||||
|
|
@ -168,7 +168,7 @@ function generateContent(exampleNumber, displayTrendingContent) {
|
|||
|
||||
renderedContentCollection.push(`
|
||||
<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>
|
||||
`);
|
||||
|
||||
|
|
@ -215,17 +215,17 @@ function generateMemeCreator(socket) {
|
|||
const renderedImages = [];
|
||||
|
||||
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`
|
||||
<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;"/>
|
||||
<canvas id="meme-canvas" height="600" width="800">Unfortunately, it looks like canvas is <strong>not supported</strong> in your browser</canvas>
|
||||
|
||||
${renderedImages}
|
||||
</div>
|
||||
|
||||
<form class="tour__content__meme__editor">
|
||||
<form class="playground__content__meme__editor">
|
||||
<h2>Image Text</h2>
|
||||
|
||||
<fieldset>
|
||||
|
|
@ -294,7 +294,7 @@ function generateMemeCreator(socket) {
|
|||
"example": 2,
|
||||
"html": memeCreator,
|
||||
"message": "updated html",
|
||||
"selector": "#tour-loader"
|
||||
"selector": "#playground-loader"
|
||||
}));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ module.exports = exports = (state, emit) => { // eslint-disable-line
|
|||
let pageScript = "";
|
||||
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 === "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`
|
||||
<article class="page" itemtype="http://schema.org/BlogPosting">
|
||||
|
|
|
|||
|
|
@ -32,6 +32,6 @@ Learn more about how LBRY works from this ecosystem overview.
|
|||
|
||||
## 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).
|
||||
- Learn how to [contribute to LBRY](/contribute) or [build your own application](/build).
|
||||
|
|
|
|||
Loading…
Reference in a new issue