First example on Tour page works and response is syntaxically colored
This commit is contained in:
ポール ウェッブ
parent
85f59134ef
commit
fadbe03e83
11 changed files with 201 additions and 64 deletions
|
|
@ -4,16 +4,20 @@
|
|||
|
||||
// P A C K A G E S
|
||||
|
||||
const html = require("choo-async/html");
|
||||
const local = require("app-root-path").require;
|
||||
const prism = require("prismjs");
|
||||
const raw = require("nanohtml/raw");
|
||||
const request = require("request-promise-native");
|
||||
const stringifyObject = require("stringify-object");
|
||||
|
||||
// V A R I A B L E S
|
||||
|
||||
const loadLanguages = require("prismjs/components/");
|
||||
const logSlackError = local("/helpers/slack");
|
||||
const uploadImage = local("/helpers/upload-image");
|
||||
|
||||
loadLanguages(["json"]);
|
||||
|
||||
|
||||
|
||||
// E X P O R T
|
||||
|
|
@ -143,13 +147,13 @@ module.exports = exports = (data, socket) => {
|
|||
}
|
||||
|
||||
if (socket) {
|
||||
const renderedCode = prism.highlight(stringifyObject(body, { indent: " ", singleQuotes: false }), prism.languages.json, "json");
|
||||
|
||||
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>
|
||||
`,
|
||||
"html": raw(`
|
||||
<h3>Response</h3>
|
||||
<pre><code class="language-json">${renderedCode}</code></pre>
|
||||
`),
|
||||
"message": "updated html",
|
||||
"selector": "#step1-result"
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
"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",
|
||||
|
|
@ -37,6 +36,7 @@
|
|||
"markdown-it-anchor": "^5.0.2",
|
||||
"markdown-it-wikilinks": "^1.0.1",
|
||||
"nanohtml": "^1.2.4",
|
||||
"prismjs": "^1.15.0",
|
||||
"redis": "^2.8.0",
|
||||
"request-promise-native": "^1.0.5",
|
||||
"slack-node": "^0.1.8",
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -240,7 +240,7 @@
|
|||
|
||||
&:not([class]),
|
||||
&.language-text {
|
||||
background-color: $black;
|
||||
background-color: #27283e;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -69,40 +69,140 @@
|
|||
|
||||
border-left: 1px solid rgba($black, 0.05);
|
||||
float: right;
|
||||
padding: 1rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.tour__content__trends {
|
||||
.tour__content__urlbar {
|
||||
border: 1px solid rgba($black, 0.05);
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
button,
|
||||
input,
|
||||
span {
|
||||
float: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button,
|
||||
span {
|
||||
height: 100%;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
button {
|
||||
color: $white;
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
text-transform: lowercase;
|
||||
transition: background-color 0.2s;
|
||||
width: 6rem;
|
||||
|
||||
&::after {
|
||||
@include clearfix;
|
||||
width: calc(100% + 2px); height: calc(100% + 2px);
|
||||
top: -1px; left: -1px;
|
||||
|
||||
content: "";
|
||||
position: absolute;
|
||||
transition: background-color 0.2s;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: $black;
|
||||
|
||||
&::after {
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $teal;
|
||||
|
||||
&::after {
|
||||
background-color: $teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 1rem;
|
||||
width: calc(100% - 9.5rem);
|
||||
|
||||
&::placeholder {
|
||||
color: rgba($black, 0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@include no-user-select;
|
||||
color: rgba($black, 0.5);
|
||||
cursor: default;
|
||||
font-size: 1rem;
|
||||
text-align: right;
|
||||
width: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tour__content__trends {
|
||||
display: grid;
|
||||
grid-gap: 2%;
|
||||
grid-template-columns: 32% 32% 32%;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
&:empty {
|
||||
width: 100%; height: 10rem;;
|
||||
|
||||
&::before {
|
||||
width: 4rem; height: 4rem;
|
||||
top: 2rem; left: calc(50% - 2rem);
|
||||
|
||||
animation: spin 2s linear infinite;
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-top-color: $teal;
|
||||
border-width: 6px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 7rem; left: 0;
|
||||
|
||||
content: "Fetching trending content from LBRY";
|
||||
font-size: 1rem;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1.33;
|
||||
|
||||
span {
|
||||
color: rgba($black, 0.3);
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.025rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
20
sass/plugins/_prism.scss
Normal file
20
sass/plugins/_prism.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
.token {
|
||||
&.comment,
|
||||
&.operator,
|
||||
&.punctuation {
|
||||
color: #6c6c87;
|
||||
}
|
||||
|
||||
&.boolean,
|
||||
&.null {
|
||||
color: #86c2f7;
|
||||
}
|
||||
|
||||
&.number {
|
||||
color: #f2ac5f;
|
||||
}
|
||||
|
||||
&.string {
|
||||
color: #fae079;
|
||||
}
|
||||
}
|
||||
|
|
@ -27,5 +27,7 @@
|
|||
"pages/documentation",
|
||||
"pages/home",
|
||||
"pages/page",
|
||||
"pages/tour"
|
||||
"pages/tour",
|
||||
|
||||
"plugins/prism"
|
||||
;
|
||||
|
|
|
|||
|
|
@ -284,7 +284,6 @@ function validateEmail(email) {
|
|||
|
||||
|
||||
|
||||
|
||||
function generateStep1OfTour(displayTrendingContent) {
|
||||
return getTrendingContent().then(response => {
|
||||
if (!response || !response.success || response.success !== true || !response.data) return "";
|
||||
|
|
@ -296,17 +295,19 @@ function generateStep1OfTour(displayTrendingContent) {
|
|||
|
||||
Promise.all(rawContentCollection).then(collection => {
|
||||
for (const part of collection) {
|
||||
if (part.value.stream.metadata.thumbnail) {
|
||||
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}"/>
|
||||
<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.claim_id}">
|
||||
<figcaption data-action="choose claim" data-claim-id="${part.name}">
|
||||
${part.value.stream.metadata.title}
|
||||
<span>${part.channel_name}</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
displayTrendingContent(renderedContentCollection.join(""));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -28,31 +28,40 @@ $("body").on("click", "[data-action]", event => {
|
|||
break;
|
||||
|
||||
case "tour, step 1":
|
||||
$(".hook__navigation__step").removeClass("active");
|
||||
$(".hook__navigation__step:nth-child(1)").addClass("active");
|
||||
$(".tour__sidebar__step").removeClass("active");
|
||||
$(".tour__sidebar__step:nth-child(1)").addClass("active");
|
||||
|
||||
$("#tour-loader").show();
|
||||
$("#tour-results").hide();
|
||||
|
||||
/*
|
||||
$("#step1-page").show();
|
||||
$("#step2-page").hide();
|
||||
$("#step3-page").hide();
|
||||
*/
|
||||
break;
|
||||
|
||||
case "tour, step 2":
|
||||
$(".hook__navigation__step").removeClass("active");
|
||||
$(".hook__navigation__step:nth-child(2)").addClass("active");
|
||||
$(".tour__sidebar__step").removeClass("active");
|
||||
$(".tour__sidebar__step:nth-child(2)").addClass("active");
|
||||
|
||||
/*
|
||||
$("#step1-page").hide();
|
||||
$("#step2-page").show();
|
||||
$(".hook__page__content__meme__thumbnail").click(); // preload canvas
|
||||
$("#step3-page").hide();
|
||||
*/
|
||||
break;
|
||||
|
||||
case "tour, step 3":
|
||||
$(".hook__navigation__step").removeClass("active");
|
||||
$(".hook__navigation__step:nth-child(3)").addClass("active");
|
||||
$(".tour__sidebar__step").removeClass("active");
|
||||
$(".tour__sidebar__step:nth-child(3)").addClass("active");
|
||||
|
||||
/*
|
||||
$("#step1-page").hide();
|
||||
$("#step2-page").hide();
|
||||
$("#step3-page").show();
|
||||
*/
|
||||
break;
|
||||
|
||||
case "upload image":
|
||||
|
|
@ -98,24 +107,24 @@ function detectLanguageAndUpdate() {
|
|||
|
||||
function initializeTour() {
|
||||
$("#fetch-claim-uri").val(""); // reset
|
||||
$(".hook__navigation__step:nth-child(1)").addClass("active");
|
||||
$(".tour__sidebar__step:nth-child(1)").addClass("active");
|
||||
|
||||
send(JSON.stringify({
|
||||
"message": "landed on tour"
|
||||
}));
|
||||
|
||||
detectLanguageAndUpdate();
|
||||
initCanvas();
|
||||
/*
|
||||
TODO:
|
||||
- Account for someone wanting to make multiple resolves
|
||||
*/
|
||||
|
||||
// detectLanguageAndUpdate();
|
||||
// initCanvas();
|
||||
}
|
||||
|
||||
|
||||
|
||||
function fetchMetadata(stepNumber, data) {
|
||||
/**
|
||||
TODO:
|
||||
- Style code with highlightjs
|
||||
*/
|
||||
|
||||
if (!stepNumber) return;
|
||||
|
||||
switch(stepNumber) {
|
||||
|
|
@ -129,9 +138,9 @@ function fetchMetadata(stepNumber, data) {
|
|||
|
||||
if (!$("#fetch-claim-uri").val()) $("#fetch-claim-uri").val(data);
|
||||
|
||||
$("#step1-placeholder").html(`
|
||||
<pre><code class="bash">
|
||||
# The LBRY app must be running on your computer for this example to work
|
||||
$("#tour-results").html(`
|
||||
<pre><code class="language-bash">
|
||||
<span class="token comment"># If you have the LBRY desktop app, you can run this in your Terminal</span>
|
||||
curl "http://localhost:5279" --data "{ 'method': 'resolve', 'params': { 'uri': '${data}' } }"
|
||||
</code></pre>
|
||||
|
||||
|
|
@ -139,7 +148,7 @@ function fetchMetadata(stepNumber, data) {
|
|||
<div id="step1-result"></div>
|
||||
`);
|
||||
|
||||
$("#step1-selections").hide();
|
||||
$("#tour-loader").hide();
|
||||
break;
|
||||
|
||||
case 2:
|
||||
|
|
|
|||
|
|
@ -23,20 +23,20 @@ module.exports = exports = () => dedent`
|
|||
|
||||
|
||||
|
||||
function sidebar() { // TODO: Save tutorial position to localStorage // "active" class is added dynamically
|
||||
function sidebar() { // TODO: Save tutorial position to localStorage
|
||||
return dedent`
|
||||
<li class="tour__sidebar__step active">
|
||||
<button data-action="tour, step 1" data-step="1" type="button">Resolve a claim</button>
|
||||
<li class="tour__sidebar__step" data-action="tour, step 1" data-step="1">
|
||||
<button type="button">Resolve a claim</button>
|
||||
<span>Get details of media (aka, "claim" metadata)</span>
|
||||
</li>
|
||||
|
||||
<li class="tour__sidebar__step">
|
||||
<button data-action="tour, step 2" data-step="2" type="button">Publish content</button>
|
||||
<li class="tour__sidebar__step" data-action="tour, step 2" data-step="2">
|
||||
<button type="button">Publish content</button>
|
||||
<span>Create a meme and upload it to the LBRY blockchain</span>
|
||||
</li>
|
||||
|
||||
<li class="tour__sidebar__step">
|
||||
<button data-action="tour, step 3" data-step="3" type="button">Support with LBC</button>
|
||||
<li class="tour__sidebar__step" data-action="tour, step 3" data-step="3">
|
||||
<button type="button">Support with LBC</button>
|
||||
<span>Support creators on LBRY with a tip, on us!</span>
|
||||
</li>
|
||||
`;
|
||||
|
|
@ -47,10 +47,11 @@ function sidebar() { // TODO: Save tutorial position to localStorage // "active"
|
|||
function step1() {
|
||||
return html`
|
||||
<div class="tour__content__urlbar">
|
||||
<span>lbry://</span><input id="fetch-claim-uri" placeholder=" Claim URI goes here" type="text"/>
|
||||
<button class="button" data-action="execute claim" type="button">Execute</button>
|
||||
<span>lbry://</span><input id="fetch-claim-uri" placeholder=" Enter a LBRY address or select an example 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>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue