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

Live content is now on Tour page, with basic styling

Browse source
This commit is contained in:
ポール ウェッブ 2018-08-07 18:15:34 -05:00
parent c7f7783d84
commit 85f59134ef
11 changed files with 297 additions and 165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
documents/tour.md
View file

@ -4,6 +4,6 @@ title: Tour
LBRY (pronounced "library") is an application layer protocol, similar to HTTP. However, while HTTP links can direct you to decentralized content, the LBRY protocol *itself* is decentralized.
Check out any of the examples to get a feel for the LBRY protocol!
Check out any of the interactive examples to get a feel for the LBRY protocol!
<Tour/>

161
helpers/fetch-metadata.js Normal file
View file

@ -0,0 +1,161 @@
"use strict";
// P A C K A G E S
const html = require("choo-async/html");
const local = require("app-root-path").require;
const request = require("request-promise-native");
const stringifyObject = require("stringify-object");
// V A R I A B L E S
const logSlackError = local("/helpers/slack");
const uploadImage = local("/helpers/upload-image");
// E X P O R T
module.exports = exports = (data, socket) => {
let dataDetails = "";
if (data.step === 1 && !data.claim || !data.method) return;
if (data.step === 2 && !data.data) return;
if (data.step === 2) dataDetails = data.data; // file upload
const claimAddress = data.claim;
const resolveMethod = data.method;
/*
const allowedClaims = [
"fortnite-top-stream-moments-nickatnyte",
"hellolbry",
"itsadisaster",
"six",
"unbubbled1-1"
];
*/
const allowedMethods = [
"publish",
"resolve",
"wallet_send"
];
if (allowedMethods.indexOf(resolveMethod) < 0) return socket.send(JSON.stringify({
"details": "Unallowed resolve method for tutorial",
"message": "notification",
"type": "error"
}));
/*
if (data.step === 1 && allowedClaims.indexOf(claimAddress) < 0) return socket.send(JSON.stringify({
"details": "Invalid claim ID for tutorial",
"message": "notification",
"type": "error"
}));
*/
const body = {};
body.access_token = process.env.LBRY_DAEMON_ACCESS_TOKEN;
body.method = resolveMethod;
if (data.step === 1) body.uri = claimAddress;
if (resolveMethod === "publish") {
body.bid = 0.001; // Hardcoded publish amount
body.description = dataDetails.description;
body.file_path = process.env.LBRY_DAEMON_IMAGES_PATH + dataDetails.file_path; // TODO: Fix the internal image path in daemon (original comment, check to see if still true)
body.language = dataDetails.language;
body.license = dataDetails.license;
body.name = dataDetails.name;
body.nsfw = dataDetails.nsfw;
body.title = dataDetails.title;
return uploadImage(body.file_path).then(uploadResponse => {
if (uploadResponse.status !== "ok") return;
body.file_path = uploadResponse.filename;
body.method = resolveMethod;
// Reference:
// https://github.com/lbryio/lbry.tech/blob/legacy/content/.vuepress/components/Tour/Step2.vue
// https://github.com/lbryio/lbry.tech/blob/legacy/server.js
return new Promise((resolve, reject) => {
request({
qs: body,
url: "http://daemon.lbry.tech/images.php"
}, (error, response, body) => {
if (error) reject(error);
body = JSON.parse(body);
// console.log(body);
resolve(body);
});
});
}).catch(uploadError => {
// component.isLoading = false;
// component.jsonData = JSON.stringify(uploadError, null, " ");
socket.send(JSON.stringify({
"details": "Image upload failed",
"message": "notification",
"type": "error"
}));
logSlackError(
"\n" +
"> *DAEMON ERROR:* ```" + JSON.parse(JSON.stringify(uploadError)) + "```" + "\n" +
"> _Cause: Someone attempted to publish a meme via the Tour_\n"
);
return;
});
}
return new Promise((resolve, reject) => { // eslint-disable-line
request({
url: "http://daemon.lbry.tech",
qs: body
}, (error, response, body) => {
if (error) {
logSlackError(
"\n" +
"> *DAEMON ERROR:* ```" + JSON.parse(JSON.stringify(error)) + "```" + "\n" +
"> _Cause: Someone is going through the Tour_\n"
);
return resolve(error);
}
body = JSON.parse(body);
if (body.error && typeof body.error !== "undefined") {
logSlackError(
"\n" +
"> *DAEMON ERROR:* ```" + JSON.parse(JSON.stringify(body.error)) + "```" + "\n" +
"> _Cause: Someone is going through the Tour_\n"
);
return resolve(body.error);
}
if (socket) {
return socket.send(JSON.stringify({
"html": html`
<p style="text-align: center;">Success! Here is the response for <strong>lbry://${claimAddress}</strong>:</p>
<pre><code class="json">${stringifyObject(body, { indent: " ", singleQuotes: false })}</code></pre>
<button class="__button-black" data-action="tour, step 2" type="button">Go to next step</button>
<script>$('#temp-loader').remove();</script>
`,
"message": "updated html",
"selector": "#step1-result"
}));
}
return resolve(body.result[Object.keys(body.result)[0]].claim);
});
});
};

29
helpers/upload-image.js Normal file
View file

@ -0,0 +1,29 @@
"use strict";
// P A C K A G E
const request = require("request-promise-native");
// E X P O R T
module.exports = exports = imageSource => new Promise((resolve, reject) => {
request({
body: imageSource,
headers: {
"Content-Type": "text/plain"
},
method: "PUT",
qs: {
access_token: process.env.LBRY_DAEMON_ACCESS_TOKEN
},
url: "http://daemon.lbry.tech/images.php"
}, (error, response, body) => {
if (error) reject(error);
body = JSON.parse(body);
resolve(body);
});
});

1
package.json
View file

@ -16,6 +16,7 @@
"choo-websocket": "^2.0.0",
"cors": "^2.8.4",
"cron": "^1.3.0",
"curl": "^0.1.4",
"date-format-lite": "^17.7.0",
"decamelize": "^2.0.0",
"dedent": "^0.7.0",

2
public/css/style.css
View file

File diff suppressed because one or more lines are too long

2
public/css/style.css.map
View file

File diff suppressed because one or more lines are too long

35
sass/pages/_tour.scss
View file

@ -71,3 +71,38 @@
float: right;
vertical-align: top;
}
.tour__content__trends {
&::after {
@include clearfix;
}
}
.tour__content__trend {
width: calc(33.333333% - (2rem / 3)); // height: 175px;
float: left;
margin-bottom: 1rem;
&:not(:first-of-type) {
margin-left: 1rem;
}
img {
width: 100%; height: 175px;
margin-bottom: 0.5rem;
object-fit: cover;
object-position: center;
}
figcaption {
font-size: 1rem;
line-height: 1.33;
span {
color: rgba($black, 0.3);
display: block;
}
}
}

202
server.js
View file

@ -16,15 +16,14 @@ const fastify = require("fastify")({
}
});
const html = require("choo-async/html");
const local = require("app-root-path").require;
const octokit = require("@octokit/rest")();
const redis = require("redis");
const request = require("request-promise-native");
const stringifyObject = require("stringify-object");
// V A R I A B L E S
const fetchMetadata = local("/helpers/fetch-metadata");
const github = local("/helpers/github");
const log = console.log; // eslint-disable-line
const logSlackError = local("/helpers/slack");
@ -101,6 +100,17 @@ fastify.ready(err => {
break;
case "landed on tour":
generateStep1OfTour(result => {
socket.send(JSON.stringify({
"html": result,
"message": "updated html",
"selector": "#tour-loader"
}));
});
break;
case "subscribe":
newsletterSubscribe(data, socket);
break;
@ -139,140 +149,6 @@ start();
// H E L P E R S
function fetchMetadata(data, socket) {
let dataDetails = "";
if (data.step === 1 && !data.claim || !data.method) return;
if (data.step === 2 && !data.data) return;
if (data.step === 2) dataDetails = data.data;
const claimAddress = data.claim;
const resolveMethod = data.method;
const allowedClaims = [
"fortnite-top-stream-moments-nickatnyte",
"hellolbry",
"itsadisaster",
"six",
"unbubbled1-1"
];
const allowedMethods = [
"publish",
"resolve",
"wallet_send"
];
if (allowedMethods.indexOf(resolveMethod) < 0) return socket.send(JSON.stringify({
"details": "Unallowed resolve method for tutorial",
"message": "notification",
"type": "error"
}));
if (data.step === 1 && allowedClaims.indexOf(claimAddress) < 0) return socket.send(JSON.stringify({
"details": "Invalid claim ID for tutorial",
"message": "notification",
"type": "error"
}));
const body = {};
body.access_token = process.env.LBRY_DAEMON_ACCESS_TOKEN;
body.method = resolveMethod;
if (data.step === 1) body.uri = claimAddress;
if (resolveMethod === "publish") {
body.bid = 0.001; // Hardcoded publish amount
body.description = dataDetails.description;
body.file_path = process.env.LBRY_DAEMON_IMAGES_PATH + dataDetails.file_path; // TODO: Fix the internal image path in daemon (original comment, check to see if still true)
body.language = dataDetails.language;
body.license = dataDetails.license;
body.name = dataDetails.name;
body.nsfw = dataDetails.nsfw;
body.title = dataDetails.title;
return uploadImage(body.file_path).then(uploadResponse => {
if (uploadResponse.status !== "ok") return;
body.file_path = uploadResponse.filename;
body.method = resolveMethod;
// Reference:
// https://github.com/lbryio/lbry.tech/blob/master/content/.vuepress/components/Tour/Step2.vue
// https://github.com/lbryio/lbry.tech/blob/master/server.js
return new Promise((resolve, reject) => {
request({
qs: body,
url: "http://daemon.lbry.tech/images.php"
}, (error, response, body) => {
if (error) reject(error);
body = JSON.parse(body);
// console.log(body);
resolve(body);
});
});
}).catch(uploadError => {
// component.isLoading = false;
// component.jsonData = JSON.stringify(uploadError, null, " ");
socket.send(JSON.stringify({
"details": "Image upload failed",
"message": "notification",
"type": "error"
}));
logSlackError(
"\n" +
"> *DAEMON ERROR:* ```" + JSON.parse(JSON.stringify(uploadError)) + "```" + "\n" +
"> _Cause: Someone attempted to publish a meme via the Tour_\n"
);
return;
});
}
return new Promise((resolve, reject) => { // eslint-disable-line
request({
url: "http://daemon.lbry.tech",
qs: body
}, (error, response, body) => {
if (error) {
logSlackError(
"\n" +
"> *DAEMON ERROR:* ```" + JSON.parse(JSON.stringify(error)) + "```" + "\n" +
"> _Cause: Someone is going through the Tour_\n"
);
return resolve(error);
}
body = JSON.parse(body);
if (typeof body.error !== "undefined") {
logSlackError(
"\n" +
"> *DAEMON ERROR:* ```" + JSON.parse(JSON.stringify(body.error)) + "```" + "\n" +
"> _Cause: Someone is going through the Tour_\n"
);
return resolve(body.error);
}
socket.send(JSON.stringify({
"html": html`
<p style="text-align: center;">Success! Here is the response for <strong>lbry://${claimAddress}</strong>:</p>
<pre><code class="json">${stringifyObject(body, { indent: " ", singleQuotes: false })}</code></pre>
<button class="__button-black" data-action="tour, step 2" type="button">Go to next step</button>
<script>$('#temp-loader').remove();</script>
`,
"message": "updated html",
"selector": "#step1-result"
}));
});
});
}
function generateGitHubFeed(displayGitHubFeed) {
if (typeof process.env.REDISCLOUD_URL !== "undefined") {
client.zrevrange("events", 0, 9, (err, reply) => {
@ -401,18 +277,47 @@ function updateGithubFeed() {
});
}
function uploadImage(imageSource) {
function validateEmail(email) {
const re = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\\.,;:\s@"]{2,})$/i;
return re.test(String(email));
}
function generateStep1OfTour(displayTrendingContent) {
return getTrendingContent().then(response => {
if (!response || !response.success || response.success !== true || !response.data) return "";
const trendingContentData = response.data;
const rawContentCollection = [];
const renderedContentCollection = [];
for (const data of trendingContentData) rawContentCollection.push(fetchMetadata({ claim: data.url, method: "resolve", step: 1 }));
Promise.all(rawContentCollection).then(collection => {
for (const part of collection) {
renderedContentCollection.push(`
<figure class="tour__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}
<span>${part.channel_name}</span>
</figcaption>
</figure>
`);
}
displayTrendingContent(renderedContentCollection.join(""));
});
});
}
function getTrendingContent() {
return new Promise((resolve, reject) => {
request({
body: imageSource,
headers: {
"Content-Type": "text/plain"
},
method: "PUT",
qs: {
access_token: process.env.LBRY_DAEMON_ACCESS_TOKEN
},
url: "http://daemon.lbry.tech/images.php"
method: "GET",
url: "https://api.lbry.io/file/list_trending"
}, (error, response, body) => {
if (error) reject(error);
body = JSON.parse(body);
@ -420,8 +325,3 @@ function uploadImage(imageSource) {
});
});
}
function validateEmail(email) {
const re = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\\.,;:\s@"]{2,})$/i;
return re.test(String(email));
}

3
views/pages/page.js
View file

@ -80,8 +80,9 @@ module.exports = exports = () => async state => {
if (markdownFileDetails.attributes.meta) newMetadata = markdownFileDetails.attributes.meta;
let pageScript = "";
if (path === "overview") pageScript = "<script>" + fs.readFileSync("./views/partials/ecosystem-scripts.js", "utf-8") + "</script>";
if (path === "glossary") pageScript = "<script>" + fs.readFileSync("./views/partials/glossary-scripts.js", "utf-8") + "</script>";
if (path === "overview") pageScript = "<script>" + fs.readFileSync("./views/partials/ecosystem-scripts.js", "utf-8") + "</script>";
if (path === "tour") pageScript = "<script>" + fs.readFileSync("./views/partials/tour-scripts.js", "utf-8") + "</script>";
return html`
<article class="page" itemtype="http://schema.org/BlogPosting">

4
views/partials/tour-scripts.js
View file

@ -100,6 +100,10 @@ function initializeTour() {
$("#fetch-claim-uri").val(""); // reset
$(".hook__navigation__step:nth-child(1)").addClass("active");
send(JSON.stringify({
"message": "landed on tour"
}));
detectLanguageAndUpdate();
initCanvas();
}

21
views/partials/tour.js
View file

@ -1,6 +1,3 @@
// https://api.lbry.io/file/list_homepage
// https://api.lbry.io/file/list_trending
"use strict";
@ -15,15 +12,12 @@ const raw = require("nanohtml/raw");
// E X P O R T
module.exports = exports = () => html`
module.exports = exports = () => dedent`
<section class="tour">
<ul class="tour__sidebar">
${raw(sidebar())}
</ul>
<section class="tour__content">
${raw(content())}
</section>
<section class="tour__content">${raw(step1())}</section>
</section>
`;
@ -48,8 +42,15 @@ function sidebar() { // TODO: Save tutorial position to localStorage // "active"
`;
}
function content() {
function step1() {
return html`
<p>Some content here</p>
<div class="tour__content__urlbar">
<span>lbry://</span><input id="fetch-claim-uri" placeholder="&thinsp;Claim URI goes here" type="text"/>
<button class="button" data-action="execute claim" type="button">Execute</button>
</div>
<div class="tour__content__trends" id="tour-loader"></div>
`;
}