First example on Tour page works and response is syntaxically colored

helpers/fetch-metadata.js

@@ -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`
+          "html": raw(`
-            <p style="text-align: center;">Success! Here is the response for <strong>lbry://${claimAddress}</strong>:</p>
+            <h3>Response</h3>
-            <pre><code class="json">${stringifyObject(body, { indent: "  ", singleQuotes: false })}</code></pre>
+            <pre><code class="language-json">${renderedCode}</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"
         }));

package.json

@@ -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",

sass/pages/_page.scss

@@ -240,7 +240,7 @@
 
     &:not([class]),
     &.language-text {
-      background-color: $black;
+      background-color: #27283e;
       color: $white;
     }
 

sass/pages/_tour.scss

@@ -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;
     }
   }
 }

sass/plugins/_prism.scss

@@ -0,0 +1,20 @@
+.token {
+  &.comment,
+  &.operator,
+  &.punctuation {
+    color: #6c6c87;
+  }
+
+  &.boolean,
+  &.null {
+    color: #86c2f7;
+  }
+
+  &.number {
+    color: #f2ac5f;
+  }
+
+  &.string {
+    color: #fae079;
+  }
+}

sass/style.scss

@@ -27,5 +27,7 @@
   "pages/documentation",
   "pages/home",
   "pages/page",
-  "pages/tour"
+  "pages/tour",
+
+  "plugins/prism"
 ;

server.js

@@ -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(""));
     });

views/partials/tour-scripts.js

@@ -28,31 +28,40 @@ $("body").on("click", "[data-action]", event => {
       break;
 
     case "tour, step 1":
-      $(".hook__navigation__step").removeClass("active");
+      $(".tour__sidebar__step").removeClass("active");
-      $(".hook__navigation__step:nth-child(1)").addClass("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");
+      $(".tour__sidebar__step").removeClass("active");
-      $(".hook__navigation__step:nth-child(2)").addClass("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");
+      $(".tour__sidebar__step").removeClass("active");
-      $(".hook__navigation__step:nth-child(3)").addClass("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,17 +138,17 @@ function fetchMetadata(stepNumber, data) {
 
       if (!$("#fetch-claim-uri").val()) $("#fetch-claim-uri").val(data);
 
-      $("#step1-placeholder").html(`
+      $("#tour-results").html(`
-<pre><code class="bash">
+        <pre><code class="language-bash">
-  # The LBRY app must be running on your computer for this example to work
+<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}' } }"
+curl "http://localhost:5279" --data "{ 'method': 'resolve', 'params': { 'uri': '${data}' } }"
-</code></pre>
+        </code></pre>
 
-<div class="loader" id="temp-loader"></div>
+        <div class="loader" id="temp-loader"></div>
-<div id="step1-result"></div>
+        <div id="step1-result"></div>
       `);
 
-      $("#step1-selections").hide();
+      $("#tour-loader").hide();
       break;
 
     case 2:

views/partials/tour.js

@@ -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">
+    <li class="tour__sidebar__step" data-action="tour, step 1" data-step="1">
-      <button data-action="tour, step 1" data-step="1" type="button">Resolve a claim</button>
+      <button type="button">Resolve a claim</button>
       <span>Get details of media (aka, "claim" metadata)</span>
     </li>
 
-    <li class="tour__sidebar__step">
+    <li class="tour__sidebar__step" data-action="tour, step 2" data-step="2">
-      <button data-action="tour, step 2" data-step="2" type="button">Publish content</button>
+      <button type="button">Publish content</button>
       <span>Create a meme and upload it to the LBRY blockchain</span>
     </li>
 
-    <li class="tour__sidebar__step">
+    <li class="tour__sidebar__step" data-action="tour, step 3" data-step="3">
-      <button data-action="tour, step 3" data-step="3" type="button">Support with LBC</button>
+      <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="&thinsp;Claim URI goes here" type="text"/>
+      <span>lbry://</span><input id="fetch-claim-uri" placeholder="&thinsp;Enter a LBRY address or select an example below" type="text"/>
-      <button class="button" data-action="execute claim" type="button">Execute</button>
+      <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>
   `;
 }