LBRY Developer Program #255
|
@ -1,11 +1,37 @@
|
||||||
"use strict"; /* global document, send */
|
"use strict"; /* global document, history, send, window */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
document.getElementById("get-started").addEventListener("click", event => {
|
document.getElementById("get-started").onclick = event => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
send({
|
send({
|
||||||
message: "auth me with github"
|
message: "auth me with github"
|
||||||
});
|
});
|
||||||
});
|
};
|
||||||
|
|
||||||
|
if (window.location.search.includes("?code=")) {
|
||||||
|
document.querySelector("developer-program").innerHTML = `
|
||||||
|
<form>
|
||||||
|
<input-submit>
|
||||||
|
|||||||
|
<input id="walletAddress" placeholder="Your LBRY wallet address" type="text"/>
|
||||||
Can this look stylistically similar or identical (and use the same classes/elements) to the input + button on the playground? Can this look stylistically similar or identical (and use the same classes/elements) to the input + button on the playground?
Do you mean having Do you mean having `lbry` inside the input? Otherwise, the input/button on Playground is going to match what's on this page (not the other way around). It's the new component.
OK, if they're the same, consider this resolved. I thought they looked different when I checked, will confirm when PR is ready for review again. OK, if they're the same, consider this resolved. I thought they looked different when I checked, will confirm when PR is ready for review again.
|
|||||||
|
<input id="oauthCode" type="hidden" value="${window.location.search.split("?code=").pop()}"/>
|
||||||
|
<button id="creditsAcquire" title="Get LBRY credits" type="button">Get credits</button>
|
||||||
|
</input-submit>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|
||||||
|
history.replaceState({}, "", window.location.pathname); // clean up URL bar
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementById("creditsAcquire")) {
|
||||||
|
document.getElementById("creditsAcquire").onclick = () => {
|
||||||
|
send({
|
||||||
|
address: document.getElementById("walletAddress").value,
|
||||||
|
code: document.getElementById("oauthCode").value,
|
||||||
|
message: "verify github auth"
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector("developer-program").innerHTML = "<p><em>Awaiting response from internal LBRY API</em></p>";
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
17
app/components/developer-program.js
Normal file
|
@ -0,0 +1,17 @@
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
"use strict";
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
// I M P O R T
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
import html from "choo/html";
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
// E X P O R T
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
export default () => html`
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
<developer-program>
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
<p>If this sounds like you, <a href="#" class="no-smooth" id="get-started">get started here</a>!</p>
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
</developer-program>
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
|||||||
|
`;
|
||||||
Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY". Can this be a single centered button labeled "Claim Developer LBC" with smaller/meta text below it that says "This will authenticate you with GitHub to prove eligibility as well as mark you as a follower of LBRY".
I was going to change this myself, but we don't have a button style?! I was going to change this myself, but we don't have a button style?!
This component should error cleanly if the relevant GitHub values aren't set. This component should error cleanly if the relevant GitHub values aren't set.
|
3
app/dist/scripts/app.js
vendored
|
@ -90,6 +90,5 @@ function scrollToElementOnLoad() {
|
||||||
|
|
||||||
function validateEmail(email) {
|
function validateEmail(email) {
|
||||||
const emailRegex = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\\.,;:\s@"]{2,})$/i;
|
const emailRegex = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\\.,;:\s@"]{2,})$/i;
|
||||||
|
return emailRegex.test(String(email)); // eslint-disable-line padding-line-between-statements
|
||||||
return emailRegex.test(String(email));
|
|
||||||
}
|
}
|
||||||
|
|
26
app/dist/scripts/sockets.js
vendored
|
@ -1,4 +1,4 @@
|
||||||
"use strict"; /* global document, location, WebSocket */
|
"use strict"; /* global document, location, WebSocket, window */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -25,6 +25,20 @@ function initializeWebSocketConnection() {
|
||||||
const data = JSON.parse(socket.data);
|
const data = JSON.parse(socket.data);
|
||||||
|
|
||||||
switch(true) {
|
switch(true) {
|
||||||
|
case data.message === "notification": // TODO: Make work with appending so multiple notifications can be sent
|
||||||
|
document.getElementById("flash-container").innerHTML =
|
||||||
|
`<div class="flash active${data.type ? " " + data.type : ""}">${data.details}</div>`;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
document.getElementById("flash-container").innerHTML = "";
|
||||||
|
}, 2100);
|
||||||
|
|
||||||
|
break;
|
||||||
|
|
||||||
|
case data.message === "redirect":
|
||||||
|
window.location.href = data.url;
|
||||||
|
break;
|
||||||
|
|
||||||
case data.message === "show result":
|
case data.message === "show result":
|
||||||
if (!data.example)
|
if (!data.example)
|
||||||
return;
|
return;
|
||||||
|
@ -83,16 +97,6 @@ function initializeWebSocketConnection() {
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case data.message === "notification": // TODO: Make work with appending so multiple notifications can be sent
|
|
||||||
document.getElementById("flash-container").innerHTML =
|
|
||||||
`<div class="flash active${data.type ? " " + data.type : ""}">${data.details}</div>`;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
document.getElementById("flash-container").innerHTML = "";
|
|
||||||
}, 2100);
|
|
||||||
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
default:
|
||||||
console.log(data); // eslint-disable-line no-console
|
console.log(data); // eslint-disable-line no-console
|
||||||
break;
|
break;
|
||||||
|
|
|
@ -336,24 +336,6 @@ function generateUrl(type, event) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getGitHubUserToken() {
|
|
||||||
// const clientWithAuth = new Octokit({
|
|
||||||
// auth: `token ${process.env.GITHUB_APP_TOKEN}`
|
|
||||||
// });
|
|
||||||
|
|
||||||
const result = await octokit.oauthAuthorizations.createAuthorization({ // eslint-disable-line no-unused-vars
|
|
||||||
client_id: process.env.GITHUB_APP_ID,
|
|
||||||
client_secret: process.env.GITHUB_APP_TOKEN,
|
|
||||||
note: "LBRY Developer Auth",
|
|
||||||
scopes: [
|
|
||||||
"public_repo"
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
// console.log(result);
|
|
||||||
// console.log("—————");
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateGithubFeed() {
|
function updateGithubFeed() {
|
||||||
octokit.activity.listPublicEventsForOrg({
|
octokit.activity.listPublicEventsForOrg({
|
||||||
org: "lbryio",
|
org: "lbryio",
|
||||||
|
@ -397,6 +379,5 @@ export {
|
||||||
generateEvent,
|
generateEvent,
|
||||||
generateGitHubFeed,
|
generateGitHubFeed,
|
||||||
generateUrl,
|
generateUrl,
|
||||||
getGitHubUserToken,
|
|
||||||
updateGithubFeed
|
updateGithubFeed
|
||||||
};
|
};
|
||||||
|
|
|
@ -22,6 +22,7 @@
|
||||||
|
|
||||||
@import "pages/api";
|
@import "pages/api";
|
||||||
@import "pages/contributing";
|
@import "pages/contributing";
|
||||||
|
@import "pages/developer";
|
||||||
@import "pages/documentation";
|
@import "pages/documentation";
|
||||||
@import "pages/home";
|
@import "pages/home";
|
||||||
@import "pages/page";
|
@import "pages/page";
|
||||||
|
|
3
app/sass/pages/_developer.scss
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
developer-program {
|
||||||
|
@extend %markdown;
|
||||||
|
}
|
|
@ -10,7 +10,7 @@ import html from "choo/html";
|
||||||
// U T I L S
|
// U T I L S
|
||||||
|
|
||||||
import fetchMetadata from "@helper/fetch-metadata";
|
import fetchMetadata from "@helper/fetch-metadata";
|
||||||
import { generateGitHubFeed, getGitHubUserToken } from "@helper/github";
|
import { generateGitHubFeed } from "@helper/github";
|
||||||
import messageSlack from "@helper/slack";
|
import messageSlack from "@helper/slack";
|
||||||
|
|
||||||
|
|
||||||
|
@ -23,7 +23,7 @@ export default (socket, action) => {
|
||||||
|
|
||||||
switch(true) {
|
switch(true) {
|
||||||
case action.message === "auth me with github":
|
case action.message === "auth me with github":
|
||||||
getGitHubUserToken();
|
getGitHubUserToken(socket);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case action.message === "fetch metadata":
|
case action.message === "fetch metadata":
|
||||||
|
@ -332,6 +332,13 @@ function generateMemeCreator(socket) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getGitHubUserToken(socket) {
|
||||||
|
send(socket, {
|
||||||
|
message: "redirect",
|
||||||
|
url: `https://github.com/login/oauth/authorize?client_id=${process.env.GITHUB_APP_ID}`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
async function getTrendingContent() {
|
async function getTrendingContent() {
|
||||||
try {
|
try {
|
||||||
const response = await got("https://api.lbry.io/file/list_trending");
|
const response = await got("https://api.lbry.io/file/list_trending");
|
||||||
|
|
|
@ -9,6 +9,6 @@ To qualify for free LBC you must:
|
||||||
More copy you may want to change. More copy you may want to change.
^ what this says ^ what this says
More copy you may want to change. More copy you may want to change.
^ what this says ^ what this says
|
|||||||
- have a GitHub account, and
|
- have a GitHub account, and
|
||||||
- have a public PR (pull request) in the past year
|
- have a public PR (pull request) in the past year
|
||||||
|
|
||||||
If this sounds like you, <a href="#" class="no-smooth" id="get-started">get started here</a>!
|
<DeveloperProgram/>
|
||||||
More copy you may want to change. More copy you may want to change.
^ what this says ^ what this says
More copy you may want to change. More copy you may want to change.
^ what this says ^ what this says
|
|||||||
|
|
||||||
If you have not downloaded our SDK yet, [you should]() and generate a wallet address so we know where to send your LBC!
|
If you have not downloaded our SDK yet, [you should]() and generate a wallet address so we know where to send your LBC!
|
||||||
|
|
||||||
More copy you may want to change. More copy you may want to change.
^ what this says ^ what this says
More copy you may want to change. More copy you may want to change.
^ what this says ^ what this says
|
This is still not styled correctly for me. Sending you a screenshot on Slack.