Closes #133

app/components/client/tour-scripts.js

@@ -21,7 +21,7 @@ $("body").on("click", "[data-action]", event => {
   setTimeout(() => {
     handleExamples(event);
     $(".tour").removeClass("waiting");
-  }, 1500); // "rate-limit" to allow example divs time to populate
+  }, 2500); // "rate-limit" to allow example divs time to populate
 });
 
 $("body").on("click", ".tour__content__meme__canvas__thumbnail", event => {
@@ -104,7 +104,7 @@ function initializeTour() {
 
   setTimeout(() => {
     $(".tour").removeClass("waiting");
-  }, 2000);
+  }, 2500);
 }
 
 
@@ -221,6 +221,7 @@ const handleExamples = debounce(event => {
       }
 
       $("#fetch-claim-uri").val(""); // reset URL bar
+      $("#tour-url button").text("Resolve");
       if ($("#tour-url")[0].style.display === "none") $("#tour-url").show();
 
       $(".tour__sidebar__example").removeClass("active");
@@ -261,6 +262,8 @@ const handleExamples = debounce(event => {
       }
 
       $("#fetch-claim-uri").val(""); // reset URL bar
+      $("#tour-url button").text("Tip");
+      // $("#tour-url").after("<p>In the LBRY app, you can financially support your favorite creators by donating LBRY Coin (LBC). In this example, we are donating LBC in your stead.</p>");
       if ($("#tour-url")[0].style.display === "none") $("#tour-url").show();
 
       $(".tour__sidebar__example").removeClass("active");

app/components/ecosystem.js

@@ -4,7 +4,7 @@
 
 //  P A C K A G E
 
-const Component = require("choo/component");
+import Component from "choo/component";
 
 //  V A R I A B L E S
 
@@ -44,15 +44,17 @@ Ecosystem.prototype.createElement = () => {
   `;
 };
 
+
+
+//  E X P O R T
+
+module.exports = exports = Ecosystem;
+
+
+
 //  H E L P E R S
 
 function Ecosystem() {
   if (!(this instanceof Ecosystem)) return new Ecosystem();
   Component.call(this);
 }
-
-
-
-//  E X P O R T
-
-module.exports = exports = Ecosystem;

app/components/feature-links.js

@@ -4,7 +4,7 @@
 
 //  P A C K A G E
 
-const Component = require("choo/component");
+import Component from "choo/component";
 
 //  V A R I A B L E
 
@@ -65,6 +65,14 @@ FeaturedLinks.prototype.createElement = () => {
   `;
 };
 
+
+
+//  E X P O R T
+
+module.exports = exports = FeaturedLinks;
+
+
+
 //  H E L P E R S
 
 function FeaturedLinks() {
@@ -85,9 +93,3 @@ function returnLinkTemplate(url, title, image) {
     </li>
   `;
 }
-
-
-
-//  E X P O R T
-
-module.exports = exports = FeaturedLinks;

app/components/glossary-toc.js

@@ -4,8 +4,10 @@
 
 //  V A R I A B L E S
 
-const headerRegex = /###.+/g;
+const idRegex = /(".*")/g;
 const numberRegex = /^[0-9]/g;
+const renderedHeaderRegex = /(<h\d\sid.*h\d>)/g;
+const titleRegex = /(>.*<)/g;
 
 
 
@@ -13,11 +15,16 @@ const numberRegex = /^[0-9]/g;
 
 module.exports = exports = (state, emit, markdown) => {
   const collectionOfTocElements = [];
-  const tocElements = markdown.match(headerRegex);
+  const tocElements = markdown.match(renderedHeaderRegex);
 
-  for (const item of tocElements) collectionOfTocElements.push(`
-    <li><a href="${slugify(item)}" title="Go to '${item.replace(/### /g, "")}'">${item.replace(/### /g, "")}</a></li>
-  `);
+  for (const item of tocElements) {
+    const id = item.match(idRegex)[0].replace(/"/g, "");
+    const title = item.match(titleRegex)[0].replace(">", "").replace("<", "");
+
+    collectionOfTocElements.push(`
+      <li><a href="${slugify(id)}" title="Go to '${title}'">${title}</a></li>
+    `);
+  }
 
   return `
     <ul class="component--glossary-toc">

app/components/mission-statement.js

@@ -0,0 +1,25 @@
+"use strict";
+
+
+
+//  P A C K A G E
+
+import html from "choo/html";
+
+
+
+//  E X P O R T
+
+export default function () {
+  return html`
+    <div class="component--mission-statement">
+      <strong class="component--mission-statement__title">Mission Statement</strong>
+      To create a market for accessing and publishing information<sup><a class="__plain" href="#footnote-1" title="First footnote of our mission statement">1</a></sup>
+      that is global<sup><a class="__plain" href="#footnote-2" title="Second footnote of our mission statement">2</a></sup>,
+      decentralized<sup><a class="__plain" href="#footnote-3" title="Third footnote of our mission statement">3</a></sup>,
+      robust<sup><a class="__plain" href="#footnote-4" title="Fourth footnote of our mission statement">4</a></sup>,
+      optimal<sup><a class="__plain" href="#footnote-5" title="Fifth footnote of our mission statement">5</a></sup>
+      and complete<sup><a class="__plain" href="#footnote-6" title="Sixth footnote of our mission statement">6</a></sup>.
+    </div>
+  `;
+}

app/components/tour.js

@@ -4,46 +4,29 @@
 
 //  P A C K A G E S
 
-const dedent = require("dedent");
-const html = require("choo/html");
-const raw = require("choo/html/raw");
+import dedent from "dedent";
+import html from "choo/html";
+import raw from "choo/html/raw";
 
 
 
 //  E X P O R T
 
-module.exports = exports = () => dedent`
-  <section class="tour">
-    <ul class="tour__sidebar">
-      ${raw(sidebar())}
-    </ul>
-    <section class="tour__content">${raw(example1())}</section>
-  </section>
-`;
-
-
-
-function sidebar() { // TODO: Save tutorial position to localStorage
+export default function () {
   return dedent`
-    <li class="tour__sidebar__example" data-action="tour, example 1" data-example="1">
-      <button type="button">Resolve a claim</button>
-      <span>Get details of media (aka, "claim" metadata)</span>
-    </li>
-
-    <li class="tour__sidebar__example" data-action="tour, example 2" data-example="2">
-      <button type="button">Publish content</button>
-      <span>Create a meme and upload it to the LBRY blockchain</span>
-    </li>
-
-    <li class="tour__sidebar__example" data-action="tour, example 3" data-example="3">
-      <button type="button">Support with LBC</button>
-      <span>Support creators on LBRY with a tip, on us!</span>
-    </li>
+    <section class="tour">
+      <ul class="tour__sidebar">
+        ${raw(sidebar())}
+      </ul>
+      <section class="tour__content">${raw(example1())}</section>
+    </section>
   `;
 }
 
 
 
+//  H E L P E R S
+
 function example1() {
   return html`
     <div class="tour__content__urlbar" id="tour-url">
@@ -55,3 +38,25 @@ function example1() {
     <div id="tour-results"></div>
   `;
 }
+
+function sidebar() { // TODO: Save tutorial position to localStorage
+  return dedent`
+    <li class="tour__sidebar__example" data-action="tour, example 1" data-example="1">
+      <button type="button">Resolve a claim</button>
+      <span>Get details of media (aka, "claim" metadata)</span><br/>
+      <span>In this example, you can see what runs under the hood when selecting content to view in the LBRY app.</span>
+    </li>
+
+    <li class="tour__sidebar__example" data-action="tour, example 2" data-example="2">
+      <button type="button">Publish content</button>
+      <span>Create a meme and upload it to the LBRY blockchain</span><br/>
+      <span>Sometimes you want to create content, not just consume it. In this example, you can create a meme and upload it to LBRY!</span>
+    </li>
+
+    <li class="tour__sidebar__example" data-action="tour, example 3" data-example="3">
+      <button type="button">Support with LBC</button>
+      <span>Support creators on LBRY with a tip, on us!</span><br/>
+      <span>In the LBRY app, you can financially support your favorite creators by donating LBRY Coin (LBC). In this example, we are donating LBC in your stead.</span>
+    </li>
+  `;
+}

app/helpers/fetch-metadata.js

@@ -184,7 +184,7 @@ module.exports = exports = (data, socket) => {
         body.result &&
         body.result.txid
       ) explorerNotice = `
-        <p>If you want proof of the tip you just gave, <a href="https://explorer.lbry.io/tx/${body.result.txid}" target="_blank" title="Your tip, on our blockchain explorer" rel="noopener noreferrer">check it out</a> on our blockchain explorer!</p>
+        <p>If you want proof of the tip you just gave on behalf of LBRY, <a href="https://explorer.lbry.io/tx/${body.result.txid}" target="_blank" title="Your tip, on our blockchain explorer" rel="noopener noreferrer">check it out</a> on our blockchain explorer!</p>
       `;
 
       if (socket) {

app/sass/pages/_tour.scss

@@ -324,7 +324,7 @@
     @extend .__loading;
 
     &::after {
-      content: "Fetching trending content from LBRY";
+      content: "Fetching content from LBRY";
     }
   }
 }

app/views/api.js

@@ -13,8 +13,7 @@ const fetch = require("make-fetch-happen").defaults({ cacheManager: "./cache" })
 
 //  V A R I A B L E
 
-// state.route === "api" || state.route === "api/*" ? <script src="/assets/scripts/plugins/jets.js"></script> : ""
-const apiScripts = "<script>" + fs.readFileSync("./app/views/partials/api-scripts.js", "utf-8") + "</script>";
+const apiScripts = "<script>" + fs.readFileSync("./app/components/client/api-scripts.js", "utf-8") + "</script>";
 
 
 

app/views/partials/mission-statement.js

@@ -1,23 +0,0 @@
-"use strict";
-
-
-
-//  P A C K A G E
-
-const html = require("choo/html");
-
-
-
-//  E X P O R T
-
-module.exports = exports = () => html`
-  <div class="component--mission-statement">
-    <strong class="component--mission-statement__title">Mission Statement</strong>
-    To create a market for accessing and publishing information<sup><a class="__plain" href="#footnote-1" title="First footnote of our mission statement">1</a></sup>
-    that is global<sup><a class="__plain" href="#footnote-2" title="Second footnote of our mission statement">2</a></sup>,
-    decentralized<sup><a class="__plain" href="#footnote-3" title="Third footnote of our mission statement">3</a></sup>,
-    robust<sup><a class="__plain" href="#footnote-4" title="Fourth footnote of our mission statement">4</a></sup>,
-    optimal<sup><a class="__plain" href="#footnote-5" title="Fifth footnote of our mission statement">5</a></sup>
-    and complete<sup><a class="__plain" href="#footnote-6" title="Sixth footnote of our mission statement">6</a></sup>.
-  </div>
-`;

app/views/redirect.js

@@ -9,6 +9,7 @@ import exists from "fs-exists-sync";
 import fm from "front-matter";
 import fs from "graceful-fs";
 import html from "choo/html";
+import path from "path";
 import { require as local } from "app-root-path";
 import raw from "choo/html/raw";
 
@@ -82,9 +83,9 @@ module.exports = exports = (state, emit) => { // eslint-disable-line
   if (markdownFileDetails.attributes.meta) newMetadata = markdownFileDetails.attributes.meta;
 
   let pageScript = "";
-  if (path === "glossary") pageScript = "<script>" + fs.readFileSync("./app/views/partials/glossary-scripts.js", "utf-8") + "</script>";
-  if (path === "overview") pageScript = "<script>" + fs.readFileSync("./app/views/partials/ecosystem-scripts.js", "utf-8") + "</script>";
-  if (path === "tour") pageScript = "<script>" + fs.readFileSync("./app/views/partials/tour-scripts.js", "utf-8") + "</script>";
+  if (path === "glossary") pageScript = "<script>" + fs.readFileSync("./app/components/client/glossary-scripts.js", "utf-8") + "</script>";
+  if (path === "overview") pageScript = "<script>" + fs.readFileSync("./app/components/client/ecosystem-scripts.js", "utf-8") + "</script>";
+  if (path === "tour") pageScript = "<script>" + fs.readFileSync("./app/components/client/tour-scripts.js", "utf-8") + "</script>";
 
   return html`
     <article class="page" itemtype="http://schema.org/BlogPosting">
@@ -140,17 +141,19 @@ function partialFinder(markdownBody) {
 
   for (const partial of partials) {
     const filename = decamelize(partial, "-").replace("<", "").replace("/>", "");
-    const fileExistsTest = exists(`./app/views/partials/${filename}.js`); // `local` results in error if used here and file !exist
+    const fileExistsTest = exists(`./app/components/${filename}.js`); // `local` results in error if used here and file !exist
 
     if (fileExistsTest) {
-      const partialFunction = local(`/app/views/partials/${filename}.js`);
+      const partialFunction = require(path.join(__dirname, "..", `./components/${filename}.js`));
 
       if (filename === "ecosystem" || filename === "feature-links") {
         const neatPartial = new partialFunction;
         markdownBody = markdownBody.replace(partial, neatPartial.render());
       }
 
-      else markdownBody = markdownBody.replace(partial, partialFunction);
+      else if (filename === "glossary-toc") markdownBody = markdownBody.replace(partial, partialFunction);
+
+      else markdownBody = markdownBody.replace(partial, partialFunction.default());
     }
   }
 

documents/guides/css.md

@@ -1,3 +1,5 @@
 ---
 title: CSS Quality Guide
 ---
+
+Coming soon