From 2777e681346c3a96fe2b34163e32d51ddc3d6129 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?= =?UTF-8?q?=E3=83=96?= Date: Mon, 4 Feb 2019 17:42:52 -0600 Subject: [PATCH] Optimizations --- app/components/client/devprogram-scripts.js | 11 ++++ app/components/client/playground-scripts.js | 9 ++- app/dist/scripts/app.js | 3 + app/dist/scripts/plugins/jets.js | 2 +- app/dist/scripts/sockets.js | 28 ++++---- app/helpers/fetch-metadata.js | 32 ++++----- app/helpers/github.js | 10 +++ app/helpers/publish-meme.js | 2 +- app/helpers/upload-image.js | 2 +- app/sockets.js | 73 ++++++++++++--------- app/views/dev.js | 25 ++++--- app/views/home.js | 4 +- app/views/redirect.js | 32 +++++---- documents/developer-program.md | 14 ++++ package.json | 1 + 15 files changed, 155 insertions(+), 93 deletions(-) create mode 100644 app/components/client/devprogram-scripts.js create mode 100644 documents/developer-program.md diff --git a/app/components/client/devprogram-scripts.js b/app/components/client/devprogram-scripts.js new file mode 100644 index 0000000..e58bdc7 --- /dev/null +++ b/app/components/client/devprogram-scripts.js @@ -0,0 +1,11 @@ +"use strict"; /* global document, send */ + + + +document.getElementById("get-started").addEventListener("click", event => { + event.preventDefault(); + + send({ + message: "auth me with github" + }); +}); diff --git a/app/components/client/playground-scripts.js b/app/components/client/playground-scripts.js index 6173481..8b82406 100644 --- a/app/components/client/playground-scripts.js +++ b/app/components/client/playground-scripts.js @@ -111,7 +111,8 @@ function debounce(func, wait, immediate) { const later = () => { timeout = null; - if (!immediate) func.apply(context, args); + if (!immediate) + func.apply(context, args); }; const callNow = immediate && !timeout; @@ -119,7 +120,8 @@ function debounce(func, wait, immediate) { clearTimeout(timeout); timeout = setTimeout(later, wait); - if (callNow) func.apply(context, args); + if (callNow) + func.apply(context, args); }; } @@ -139,7 +141,8 @@ function initializePlayground() { } function fetchMetadata(exampleNumber, data) { - if (!exampleNumber) return; + if (!exampleNumber) + return; switch(exampleNumber) { case 1: diff --git a/app/dist/scripts/app.js b/app/dist/scripts/app.js index 3528f98..3dc9a18 100755 --- a/app/dist/scripts/app.js +++ b/app/dist/scripts/app.js @@ -26,6 +26,9 @@ if ( // Smooth scroll document.querySelectorAll("a[href^='#']").forEach(anchor => { + if (anchor.classList.contains("no-smooth")) // Ignore smooth scroll functionality + return; + anchor.addEventListener("click", event => { event.preventDefault(); diff --git a/app/dist/scripts/plugins/jets.js b/app/dist/scripts/plugins/jets.js index 0b1a750..23eca43 100644 --- a/app/dist/scripts/plugins/jets.js +++ b/app/dist/scripts/plugins/jets.js @@ -224,7 +224,7 @@ ;(function(doc, proto) { try { doc.querySelector(":scope body"); - } catch (err) { + } catch(err) { ["querySelector", "querySelectorAll"].forEach(method => { const nativ = proto[method]; diff --git a/app/dist/scripts/sockets.js b/app/dist/scripts/sockets.js index 409bca8..1b7d302 100644 --- a/app/dist/scripts/sockets.js +++ b/app/dist/scripts/sockets.js @@ -12,22 +12,22 @@ document.addEventListener("DOMContentLoaded", () => { let ws = null; function checkWebSocketConnection() { - if (!ws || ws.readyState === 3) initializeWebSocketConnection(); + if (!ws || ws.readyState === 3) + initializeWebSocketConnection(); } function initializeWebSocketConnection() { ws = new WebSocket(location.origin.replace(/^http/, "ws")); - ws.onopen = () => { - console.log("WebSocket connection established"); // eslint-disable-line - }; + ws.onopen = () => console.log("WebSocket connection established"); // eslint-disable-line ws.onmessage = socket => { const data = JSON.parse(socket.data); switch(true) { case data.message === "show result": - if (!data.example) return; + if (!data.example) + return; document.querySelector(data.selector).innerHTML = data.html; @@ -60,8 +60,8 @@ function initializeWebSocketConnection() { } if (data.example === 2) { - detectLanguageAndUpdate(); // eslint-disable-line - initCanvas(); // eslint-disable-line + detectLanguageAndUpdate(); // eslint-disable-line no-undef + initCanvas(); // eslint-disable-line no-undef setTimeout(() => { document.querySelector(".playground-content__meme__canvas__thumbnail").click(); @@ -94,25 +94,23 @@ function initializeWebSocketConnection() { break; default: - console.log(data); // eslint-disable-line + console.log(data); // eslint-disable-line no-console break; } }; - ws.onclose = () => { - console.log("WebSocket connection lost"); // eslint-disable-line - checkWebSocketConnection(); // reconnect now - }; + ws.onclose = () => checkWebSocketConnection(); // reconnect now } -function send(msg) { // eslint-disable-line - socketReady(ws, () => ws.send(msg)); +function send(msg) { // eslint-disable-line no-unused-vars + socketReady(ws, () => ws.send(JSON.stringify(msg))); } function socketReady(socket, callback) { setTimeout(() => { if (socket && socket.readyState === 1) { - if (callback !== undefined) callback(); + if (callback !== undefined) + callback(); return; } diff --git a/app/helpers/fetch-metadata.js b/app/helpers/fetch-metadata.js index 0ca2f34..0a885eb 100644 --- a/app/helpers/fetch-metadata.js +++ b/app/helpers/fetch-metadata.js @@ -11,16 +11,16 @@ import stringifyObject from "stringify-object"; // U T I L S -import randomString from "./random-string"; import messageSlack from "./slack"; - import publishMeme from "./publish-meme"; +import randomString from "./random-string"; +import { send } from "@socket"; import uploadImage from "./upload-image"; const allowedQueryMethods = [ + "claim_tip", "publish", - "resolve", - "claim_tip" + "resolve" ]; const approvedContentIdsForTipping = [ @@ -60,11 +60,11 @@ export default async(data, socket) => { const resolveMethod = data.method; if (allowedQueryMethods.indexOf(resolveMethod) < 0) { - return socket.send(JSON.stringify({ + return send(socket, { details: "Unallowed resolve method for tutorial", message: "notification", type: "error" - })); + }); } body.authorization = process.env.LBRY_DAEMON_ACCESS_TOKEN; @@ -77,7 +77,7 @@ export default async(data, socket) => { // E X A M P L E case resolveMethod === "claim_tip": if (!approvedContentIdsForTipping.includes(claimAddress)) { - return socket.send(JSON.stringify({ + return send(socket, { example: data.example, html: raw(`

Response

@@ -85,7 +85,7 @@ export default async(data, socket) => { `), message: "show result", selector: `#example${data.example}-result` - })); + }); } apiRequestMethod = "POST"; @@ -140,7 +140,7 @@ export default async(data, socket) => { "json" ); - return socket.send(JSON.stringify({ + return send(socket, { example: data.example, html: raw(`

Response

@@ -149,15 +149,15 @@ export default async(data, socket) => { `), message: "show result", selector: `#example${data.example}-result` - })); + }); } catch(memePublishError) { - socket.send(JSON.stringify({ + send(socket, { details: "Meme publish failed", message: "notification", type: "error" - })); + }); if (process.env.NODE_ENV !== "development") { messageSlack({ @@ -172,11 +172,11 @@ export default async(data, socket) => { } catch(imageUploadError) { - socket.send(JSON.stringify({ + send(socket, { details: "Image upload failed", message: "notification", type: "error" - })); + }); if (process.env.NODE_ENV !== "development") { messageSlack({ @@ -241,7 +241,7 @@ export default async(data, socket) => { "json" ); - return socket.send(JSON.stringify({ + return send(socket, { example: data.example, html: raw(`

Response

@@ -250,7 +250,7 @@ export default async(data, socket) => { `), message: "show result", selector: `#example${data.example}-result` - })); + }); } return response.body.result[Object.keys(response.body.result)[0]].claim; diff --git a/app/helpers/github.js b/app/helpers/github.js index 2beaf95..7e6ec59 100644 --- a/app/helpers/github.js +++ b/app/helpers/github.js @@ -336,6 +336,15 @@ function generateUrl(type, event) { } } +function getGitHubUserToken() { + // const clientWithAuth = new Octokit({ + // auth: `token ${GITHUB_APP_TOKEN}` + // }); + + // console.log(clientWithAuth); + // console.log("—————"); +} + function updateGithubFeed() { octokit.activity.listPublicEventsForOrg({ org: "lbryio", @@ -377,5 +386,6 @@ export { generateEvent, generateGitHubFeed, generateUrl, + getGitHubUserToken, updateGithubFeed }; diff --git a/app/helpers/publish-meme.js b/app/helpers/publish-meme.js index 358273d..57ab4c0 100644 --- a/app/helpers/publish-meme.js +++ b/app/helpers/publish-meme.js @@ -28,7 +28,7 @@ export default async(publishMetadata) => { try { const response = await got.put(queryUrl, options); return response.body; // eslint-disable-line padding-line-between-statements - } catch (error) { + } catch(error) { return error; } }; diff --git a/app/helpers/upload-image.js b/app/helpers/upload-image.js index 5239fe1..ccebd3a 100644 --- a/app/helpers/upload-image.js +++ b/app/helpers/upload-image.js @@ -28,7 +28,7 @@ export default async(imageSource) => { try { const response = await got.post(queryUrl, options); return response.body; // eslint-disable-line padding-line-between-statements - } catch (error) { + } catch(error) { return error; } }; diff --git a/app/sockets.js b/app/sockets.js index 6654f2a..f34c855 100644 --- a/app/sockets.js +++ b/app/sockets.js @@ -18,7 +18,10 @@ import messageSlack from "@helper/slack"; // P R O G R A M export default (socket, action) => { - if (typeof socket !== "object" && typeof action !== "object") return; + if (typeof socket !== "object" && typeof action !== "object") + return; + + action = JSON.parse(action); switch(true) { case action.message === "fetch metadata": @@ -27,31 +30,31 @@ export default (socket, action) => { case action.message === "landed on homepage": generateGitHubFeed(result => { - socket.send(JSON.stringify({ + send(socket, { html: result, message: "updated html", selector: "#github-feed" - })); + }); }); break; case action.message === "landed on playground": generateContent(1, result => { - socket.send(JSON.stringify({ + send(socket, { html: result, message: "updated html", selector: "#playground-loader" - })); + }); }); break; case action.message === "request for playground, example 1": generateContent(1, result => { - socket.send(JSON.stringify({ + send(socket, { html: result, message: "updated html", selector: "#playground-loader" - })); + }); }); break; @@ -61,11 +64,11 @@ export default (socket, action) => { case action.message === "request for playground, example 3": generateContent(3, result => { - socket.send(JSON.stringify({ + send(socket, { html: result, message: "updated html", selector: "#playground-loader" - })); + }); }); break; @@ -85,15 +88,19 @@ export default (socket, action) => { function generateContent(exampleNumber, displayTrendingContent) { if (exampleNumber === 1) { return getTrendingContent().then(response => { - if (!response || !response.success || response.success !== true || !response.data) return ""; + if (!response || !response.success || response.success !== true || !response.data) + return ""; const rawContentCollection = []; const renderedContentCollection = []; const trendingContentData = response.data; - for (const data of trendingContentData) { - rawContentCollection.push(fetchMetadata({ claim: data.url, method: "resolve", example: exampleNumber })); - } + for (const data of trendingContentData) + rawContentCollection.push(fetchMetadata({ + claim: data.url, + example: exampleNumber, + method: "resolve" + })); Promise.all(rawContentCollection).then(collection => { for (const part of collection) { @@ -116,7 +123,7 @@ function generateContent(exampleNumber, displayTrendingContent) { `); - } catch (err) { + } catch(err) { return; // TODO: Return nice error message } } @@ -315,19 +322,19 @@ function generateMemeCreator(socket) { `; - return socket.send(JSON.stringify({ + return send(socket, { example: 2, html: memeCreator, message: "updated html", selector: "#playground-loader" - })); + }); } async function getTrendingContent() { try { const response = await got("https://api.lbry.io/file/list_trending"); return JSON.parse(response.body); // eslint-disable-line padding-line-between-statements - } catch (error) { + } catch(error) { return error; } } @@ -344,22 +351,24 @@ function makeImageSourceSecure(url) { async function newsletterSubscribe(data, socket) { const email = data.email; - if (!validateEmail(email)) return socket.send(JSON.stringify({ - class: "error", - html: "Your email address is invalid", - message: "updated html", - selector: "#emailMessage" - })); + if (!validateEmail(email)) { + send(socket, { + class: "error", + html: "Your email address is invalid", + message: "updated html", + selector: "#emailMessage" + }); + } try { await got.post(`https://api.lbry.io/list/subscribe?email=${encodeURIComponent(email)}&tag=developer`); - return socket.send(JSON.stringify({ + return send(socket, { html: "Thank you! Please confirm subscription in your inbox.", message: "updated html", selector: "#emailMessage" - })); - } catch (error) { + }); + } catch(error) { const response = JSON.parse(error.body); if (!response.success) { @@ -369,12 +378,12 @@ async function newsletterSubscribe(data, socket) { `> _Cause: ${email} interacted with the form_\n` ); - return socket.send(JSON.stringify({ + return send(socket, { class: "error", html: response.error, message: "updated html", selector: "#emailMessage" - })); + }); } messageSlack( @@ -383,15 +392,19 @@ async function newsletterSubscribe(data, socket) { `> _Cause: ${email} interacted with the form_\n` ); - return socket.send(JSON.stringify({ + return send(socket, { class: "error", html: "Something is terribly wrong", message: "updated html", selector: "#emailMessage" - })); + }); } } +export function send(transport, data) { + return transport.send(JSON.stringify(data)); +} + function validateEmail(email) { const emailRegex = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\\.,;:\s@"]{2,})$/i; return emailRegex.test(String(email)); // eslint-disable-line padding-line-between-statements diff --git a/app/views/dev.js b/app/views/dev.js index ce0c3cf..d41a15f 100644 --- a/app/views/dev.js +++ b/app/views/dev.js @@ -15,22 +15,27 @@ export default () => html`
-

Dev Program

+

Developer Program

-
+
-

...

+

When developing for LBRY, having LBC (LBRY credits) makes it easier to develop applications and interface with our APIs.

+

To qualify for free LBC you must:

+ +
    +
  • have a GitHub account, and
    • +
  • have a public PR (pull request) in the past year
    • +
+ +

If this sounds like you, get started here!

+ +

+ If you have not downloaded our SDK yet, you should and generate a wallet address so we know where to send your LBC! +

`; - -// TODO: -// Provide flow where user logs in with GitHub: -// - get access token -// - show field for user to enter their wallet address -// - send access token and wallet address to API -// - parse response diff --git a/app/views/home.js b/app/views/home.js index 62899e4..fb8af66 100644 --- a/app/views/home.js +++ b/app/views/home.js @@ -96,9 +96,7 @@ export default () => html` "; + pageScript = renderClientScript("glossary-scripts"); break; case partialPath === "overview": - pageScript = - ""; + pageScript = renderClientScript("ecosystem-scripts"); break; case partialPath === "playground": - pageScript = - ""; + pageScript = renderClientScript("playground-scripts"); break; default: @@ -93,3 +87,15 @@ export default (state, emit) => { // eslint-disable-line `; }; + + + +// H E L P E R + +function renderClientScript(clientScriptFileName) { + return ` + + `; +} diff --git a/documents/developer-program.md b/documents/developer-program.md new file mode 100644 index 0000000..a19b1e8 --- /dev/null +++ b/documents/developer-program.md @@ -0,0 +1,14 @@ +--- +title: Developer Program +--- + +When developing for LBRY, having LBC (LBRY credits) makes it easier to develop applications and interface with our APIs. + +To qualify for free LBC you must: + +- have a GitHub account, and +- have a public PR (pull request) in the past year + +If this sounds like you, get started here! + +If you have not downloaded our SDK yet, [you should]() and generate a wallet address so we know where to send your LBC! diff --git a/package.json b/package.json index dd6e952..2c5c00b 100755 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "@helper": "app/helpers", "@module": "app/modules", "@root": ".", + "@socket": "app/sockets.js", "@view": "app/views" }, "author": "LBRY Team",