Moved "Tour" and components to its own folder, plus fixes

.editorconfig

@@ -2,8 +2,8 @@ root = true
 
 [*]
 charset = utf-8
-indent_style = space
-indent_size = 2
 end_of_line = lf
+indent_size = 2
+indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:vue/strongly-recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2017,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "rules": {
+    "indent": ["error", 2, { "SwitchCase": 1 }],
+    "linebreak-style": ["error", "unix"],
+    "quotes": ["error", "double"],
+    "semi": ["error", "always"]
+  }
+}

content/.vuepress/components/GithubFeed.vue

@@ -141,6 +141,9 @@
           case "push":
             return `https://github.com/${event.repo.name}/tree/${event.payload.ref.replace("refs/heads/", "")}`;
             break;
+
+          default:
+            break;
         }
       }
     },

content/.vuepress/components/Tour/Hook.vue

@@ -2,33 +2,32 @@
   <div class="hook" id="hook">
     <nav class="hook__navigation" id="hook-navigation">
       <div class="inner-wrap">
-        <a href="#" v-on:click.prevent="activeStep = 1" class="hook__navigation__step" v-bind:class="{active: (activeStep==1)}">
+        <a href="#" v-on:click.prevent="activeStep = 1" class="hook__navigation__step" v-bind:class="{ active: (activeStep === 1) }">
           <span class="number">1</span>
           Resolve a claim
         </a>
 
-        <a href="#" v-on:click.prevent="activeStep = 2" class="hook__navigation__step" v-bind:class="{active: (activeStep==2)}">
+        <a href="#" v-on:click.prevent="activeStep = 2" class="hook__navigation__step" v-bind:class="{ active: (activeStep === 2) }">
           <span class="number">2</span>
           Publish content
         </a>
 
-        <a href="#" v-on:click.prevent="activeStep = 3" class="hook__navigation__step" v-bind:class="{active: (activeStep==3)}">
+        <a href="#" v-on:click.prevent="activeStep = 3" class="hook__navigation__step" v-bind:class="{ active: (activeStep === 3) }">
           <span class="number">3</span>
           Support with LBC
         </a>
       </div>
     </nav>
 
-    <Step1 v-if="activeStep == 1"></Step1>
-    <Step2 v-if="activeStep == 2"></Step2>
-    <Step3 v-if="activeStep == 3"></Step3>
-
+    <Tour-Step1 v-if="activeStep === 1"/>
+    <Tour-Step2 v-if="activeStep === 2"/>
+    <Tour-Step3 v-if="activeStep === 3"/>
   </div>
 </template>
 
 <script>
+  import EventBus from "../../event-bus";
   import Vue from "vue";
-  import EventBus from "../event-bus";
 
   export default {
     data () {
@@ -39,10 +38,7 @@
 
     created () {
       const component = this;
-
-      EventBus.$on("HookStepUpdate", step => {
-        component.activeStep = step;
-      });
+      EventBus.$on("HookStepUpdate", step => component.activeStep = step);
     },
 
     name: "Hook"
@@ -50,13 +46,13 @@
 </script>
 
 <style lang="scss">
-  @import "../../../node_modules/highlight.js/styles/monokai-sublime";
-  @import "../scss/init/colors";
-  @import "../scss/init/extends";
-  @import "../scss/init/mixins";
-  @import "../scss/partials/animation";
-  @import "../scss/partials/modal";
-  @import "../scss/pages/page";
+  @import "../../../../node_modules/highlight.js/styles/monokai-sublime";
+  @import "../../scss/init/colors";
+  @import "../../scss/init/extends";
+  @import "../../scss/init/mixins";
+  @import "../../scss/partials/animation";
+  @import "../../scss/partials/modal";
+  @import "../../scss/pages/page";
 
   .hook {
     .loader {
@@ -391,7 +387,7 @@
     }
 
     select {
-      background-image: url("../media/svg/down.svg");
+      background-image: url("../../media/svg/down.svg");
       background-position: 99% center;
       background-repeat: no-repeat;
       background-size: 1rem;

content/.vuepress/components/Tour/Step1.vue

@@ -71,7 +71,7 @@
 </template>
 
 <script>
-  import EventBus from "../event-bus";
+  import EventBus from "../../event-bus";
   import hljs from "highlight.js";
 
   export default {

content/.vuepress/components/Tour/Step2.vue

@@ -110,15 +110,15 @@
     data () {
       const images = [
         {
-          src: "./carlsagan2.jpg",
+          src: "../carlsagan2.jpg",
           alt: "Carl Sagan"
         },
         {
-          src: "./doge-meme.jpg",
+          src: "../doge-meme.jpg",
           alt: "Doge"
         },
         {
-          src: "lbry-green.png",
+          src: "../lbry-green.png",
           alt: "LBRY Logo With Green Background"
         }
       ];

content/.vuepress/components/Tour/Step3.vue

@@ -74,7 +74,7 @@
 </template>
 
 <script>
-  import EventBus from "../event-bus";
+  import EventBus from "../../event-bus";
   import hljs from "highlight.js";
 
   export default {

content/.vuepress/scss/pages/_page.scss

@@ -12,7 +12,6 @@
 
 .page__header {
   @include center;
-  background-image: url("../media/images/background-a.jpg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -43,7 +42,6 @@
 
 
 .page__content {
-  background-image: url("../media/images/grid.png");
   background-repeat: repeat;
   background-size: 32px;
   flex: 1;

content/.vuepress/theme/Layout.vue

@@ -33,7 +33,7 @@
             <li class="home__feature">
               <p class="home__feature__title"><strong>New to LBRY?</strong></p>
               <p class="home__feature__description">Learn how LBRY works in 3 easy steps</p>
-              <router-link class="home__feature__cta" to="tour.html">Take the Tour</router-link>
+              <router-link class="home__feature__cta" to="/tour/">Take the Tour</router-link>
             </li>
 
             <li class="home__feature">
@@ -64,7 +64,7 @@
           </div>
         </section>
 
-        <GithubFeed></GithubFeed>
+        <GithubFeed/>
 
         <section class="contribute">
           <div class="inner-wrap">
@@ -203,7 +203,7 @@
       <Content></Content>
     </template>
 
-    <template v-else-if="$page.path === '/tour.html'">
+    <template v-else-if="$page.frontmatter.tour">
       <Content></Content>
     </template>
 
@@ -273,11 +273,11 @@
 
 <script>
   import Vue from "vue";
-  import VueResource from "vue-resource";
   import VueMoment from "vue-moment";
+  import VueResource from "vue-resource";
 
-  Vue.use(VueResource);
   Vue.use(VueMoment);
+  Vue.use(VueResource);
 
   export default {
     data () {
@@ -393,4 +393,18 @@
   @import "../scss/pages/documentation";
   @import "../scss/partials/navigation";
   @import "../scss/partials/footer";
+
+  /**
+    Relative links wreak havoc with nested components extending entire CSS
+    files. In this case, `content/.vuepress/components/Tour/Hook.vue`
+    needs the below style rules removed in order to work.
+  */
+
+  .page__header {
+    background-image: url("../media/images/background-a.jpg");
+  }
+
+  .page__content {
+    background-image: url("../media/images/grid.png");
+  }
 </style>

content/tour.md

@@ -1,5 +0,0 @@
----
-title: Tour
----
-
-<Hook/>

content/tour/index.md

@@ -0,0 +1,6 @@
+---
+tour: true
+title: Tour
+---
+
+<Tour-Hook/>

package.json

@@ -1,8 +1,8 @@
 {
   "name": "lbry.tech",
   "version": "1.0.0",
-  "description": "A Vue.js project",
-  "author": "",
+  "description": "Documentation for the LBRY protocol and associated projects",
+  "author": "LBRY Team",
   "private": true,
   "scripts": {
     "dev": "./node_modules/vuepress/bin/vuepress.js dev content",
@@ -47,6 +47,8 @@
     "chai-cheerio": "^1.0.0",
     "chai-http": "^4.0.0",
     "cheerio": "^1.0.0-rc.2",
+    "eslint": "^5.0.1",
+    "eslint-plugin-vue": "^4.5.0",
     "mocha": "^5.2.0"
   }
 }

test/api.js

@@ -1,58 +1,76 @@
-var cheerio = require('cheerio');
-var chai = require('chai');
-var chaiHttp = require('chai-http');
-var chaiCheerio = require('chai-cheerio');
-var server = require('../server');
-var should = chai.should();
+"use strict"; /* global describe, it */
+
+
+
+//  P A C K A G E S
+
+const cheerio = require("cheerio");
+const chai = require("chai");
+const chaiHttp = require("chai-http");
+const chaiCheerio = require("chai-cheerio");
+
+//  V A R I A B L E
+
+const server = require("../server");
+const should = chai.should(); // eslint-disable-line
+
+
+
+//  P R O G R A M
 
 chai.use(chaiHttp);
 chai.use(chaiCheerio);
 
-describe('Api', () => {
 
-  describe('/GET home', () => {
-    it('it should GET the homepage', (done) => {
+
+describe("API", () => {
+  describe("/GET home", () => {
+    it("it should GET the homepage", done => {
       chai.request(server)
-      .get('/')
-      .end((err, res) => {
-        res.should.have.status(200);
-        res.should.be.html;
-        var $ = cheerio.load(res.text);
-        $("#app").should.exist;
-        $("main").should.have.class('home');
-        $("nav.navigation").should.exist;
-        done();
-      });
+        .get("/")
+        .end((err, res) => {
+          res.should.have.status(200);
+          res.should.be.html;
+
+          const $ = cheerio.load(res.text);
+          $("#app").should.exist;
+          $("main").should.have.class("home");
+          $("nav.navigation").should.exist;
+
+          done();
+        });
     });
   });
 
-  describe('/GET github-feed', () => {
-    it('it should GET the github-feed', (done) => {
+  describe("/GET github-feed", () => {
+    it("it should GET the github-feed", done => {
       chai.request(server)
-      .get('/github-feed')
-      .end((err, res) => {
-        res.should.have.status(200);
-        res.body.should.be.a('array');
-        res.body.length.should.be.eql(10);
-        done();
-      });
+        .get("/github-feed")
+        .end((err, res) => {
+          res.should.have.status(200);
+          res.body.should.be.a("array");
+          res.body.length.should.be.eql(10);
+
+          done();
+        });
     });
   });
 
-  describe('/GET sitemap', () => {
-    it('it should GET the sitemap', (done) => {
+  describe("/GET sitemap", () => {
+    it("it should GET the sitemap", done => {
       chai.request(server)
-      .get('/sitemap.html')
-      .end((err, res) => {
-        res.should.have.status(200);
-        res.should.be.html;
-        var $ = cheerio.load(res.text);
-        $("#app").should.exist;
-        $("#sitemap").should.exist;
-        $("#sitemap").should.have.descendants("li");
-        done();
-      });
+        .get("/sitemap.html")
+        .end((err, res) => {
+          res.should.have.status(200);
+          res.should.be.html;
+
+          const $ = cheerio.load(res.text);
+          $("#app").should.exist;
+          $("#sitemap").should.exist;
+          $("#sitemap").should.have.descendants("li");
+
+          done();
+        });
     });
   });
-
-});
+});