Started work on new Tour page

README.md

@@ -53,4 +53,4 @@ We take security seriously. Please contact [security@lbry.io](mailto:security@lb
 
 ## Contact
 
-The primary contact for this project is [@netoperatorwibby](https://github.com/netoperatorwibby).
+The primary contact for this project is [@netoperatorwibby](https://github.com/netoperatorwibby)(paul@lbry.io).

client.js

@@ -48,7 +48,6 @@ function main() {
   app.route("/api", page(require("./views/pages/api")(app)));
   app.route("/resources", page(require("./views/pages/resources")(app)));
   app.route("/resources/*", page(require("./views/pages/page")(app)));
-  app.route("/tour", page(require("./views/pages/tour")(app)));
   app.route("/*", page(require("./views/pages/page")(app)));
 
   return app;

documents/styleguide.md

@@ -0,0 +1,18 @@
+---
+title: Styleguide
+---
+
+### CSS
+- Styles should never override
+- IDs do not belong in stylesheets
+- Nesting is should be a maximum of three levels deep
+- BEM is your friend
+- Nested includes should be at the top of rules
+- CSS parameters in alphabetical order, except for presentation styles
+
+
+
+### JS
+- No trailing commas
+- Semicolons are there to protect you from yourself
+- Use strict comparing (`!==` / `===`), as false-y values are evil

documents/tour.md

@@ -0,0 +1,9 @@
+---
+title: Tour
+---
+
+LBRY (pronounced "library") is an application layer protocol, similar to HTTP. However, while HTTP links can direct you to decentralized content, the LBRY protocol *itself* is decentralized.
+
+Check out any of the examples to get a feel for the LBRY protocol!
+
+<Tour/>

package.json

@@ -5,7 +5,7 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "@octokit/rest": "^15.9.4",
+    "@octokit/rest": "^15.9.5",
     "app-root-path": "^2.1.0",
     "async": "^2.6.1",
     "choo": "^6.13.0",
@@ -41,7 +41,7 @@
     "slack-node": "^0.1.8",
     "socket.io": "^2.1.1",
     "stringify-object": "^3.2.2",
-    "turbocolor": "^2.4.1",
+    "turbocolor": "^2.4.3",
     "ws": "^6.0.0"
   },
   "devDependencies": {
@@ -50,7 +50,7 @@
     "choo-devtools": "^2.5.1",
     "nodemon": "^1.18.3",
     "npm-run-all": "^4.1.3",
-    "sass": "^1.10.1",
+    "sass": "^1.10.3",
     "snazzy": "^7.1.1",
     "standardx": "^2.1.0",
     "updates": "^4.1.2"

sass/init/_base.scss

@@ -17,14 +17,13 @@ html {
 
 a,
 area,
-button,
+button, [role="button"],
-[role="button"],
 input,
 label,
 select,
 summary,
-textarea { // Remove touch delay on supported devices
+textarea {
-  touch-action: manipulation;
+  touch-action: manipulation; // Remove touch delay on supported devices
 }
 
 a {
@@ -50,10 +49,6 @@ button {
   &:not(:disabled) {
     cursor: pointer;
   }
-
-  &:active {
-    // top: 2px;
-  }
 }
 
 button,
@@ -79,7 +74,8 @@ textarea {
   background-color: transparent;
 }
 
-input[type=submit] {
+[type=button],
+[type=submit] {
   cursor: pointer;
 }
 

sass/pages/_--tour.scss

@@ -0,0 +1,395 @@
+.hook {
+  .loader {
+    animation: spin 2s linear infinite;
+    border-radius: 50%;
+    border-style: solid;
+    border-top-color: $teal;
+
+    &:not(.small):not(.tiny) {
+      width: 4rem; height: 4rem;
+
+      border-width: 6px;
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    &.small {
+      width: 2rem; height: 2rem;
+      border-width: 3px;
+    }
+
+    &.tiny {
+      width: 1rem; height: 1rem;
+      border-width: 2px;
+    }
+  }
+}
+
+
+
+.hook__navigation {
+  background-color: $black;
+  color: $white;
+  font-size: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-align: center;
+}
+
+.hook__navigation__step {
+  background-color: transparent;
+
+  @media (min-width: 501px) {
+    display: inline-block;
+
+    &:not(:last-of-type) {
+      margin-right: 1rem;
+    }
+
+    span {
+      width: 3rem; height: 3rem;
+
+      display: block;
+      font-size: 1.25rem;
+      line-height: 3rem;
+    }
+  }
+
+  @media (max-width: 500px) {
+    display: block;
+
+    span {
+      width: 1rem; height: 1rem;
+
+      display: inline-block;
+      font-size: 0.7rem;
+      line-height: 0.9rem;
+      position: relative;
+      top: 2px;
+      vertical-align: top;
+    }
+  }
+
+  &:not(.active) {
+    color: $white;
+
+    span {
+      border-color: rgba($white, 0.1);
+    }
+  }
+
+  &.active {
+    color: $teal;
+
+    span {
+      border-color: rgba($teal, 0.3);
+    }
+  }
+
+  span {
+    border: 1px solid;
+    border-radius: 50%;
+    margin: 0 auto 0.5rem;
+  }
+}
+
+
+
+.hook__page {
+  @extend .page__content;
+}
+
+.hook__page__hero {
+  margin-bottom: 2rem;
+  border-bottom: 1px solid rgba($black, 0.05);
+
+  h1, p {
+    text-align: center;
+  }
+}
+
+.hook__page__hero__claim,
+.hook__page__hero__support {
+  margin-bottom: 3rem; padding-left: 1rem;
+
+  background-color: $white;
+  border: 1px solid rgba($gray, 0.7);
+  font-size: 1rem;
+
+  @media (min-width: 501px) {
+    margin-right: auto;
+    margin-left: auto;
+    width: 80%;
+  }
+
+  &::after {
+    @include clearfix;
+  }
+
+  button, input {
+    line-height: 3rem;
+  }
+
+  span {
+    color: rgba($black, 0.3);
+  }
+
+  button {
+    border-left: 1px solid rgba($gray, 0.7);
+    color: $white;
+    float: right;
+    position: relative;
+    text-align: center;
+    transition: all 0.2s;
+    width: 6rem;
+
+    &::after {
+      width: calc(100% + 2px); height: calc(100% + 2px);
+      top: -1px; left: -1px;
+
+      border: 1px solid;
+      content: "";
+      position: absolute;
+      transition: inherit;
+    }
+
+    &:not(:hover) {
+      background-color: $black;
+
+      &::after {
+        border-color: $black;
+      }
+    }
+
+    &:hover {
+      background-color: $teal;
+
+      &::after {
+        border-color: $teal;
+      }
+    }
+  }
+}
+
+.hook__page__hero__claim input {
+  width: calc(100% - 10rem);
+}
+
+.hook__page__hero__support {
+  input[type=number] {
+    width: 3rem;
+  }
+
+  input[type=text] {
+    width: calc(100% - 11.5rem);
+  }
+
+  span {
+    line-height: 3rem;
+  }
+
+  a {
+    margin-left: 0.5rem;
+  }
+}
+
+
+
+.hook__page__content::after {
+  @include clearfix;
+}
+
+.hook__page__content__card {
+  margin-bottom: 1rem; padding: 1rem;
+  cursor: pointer;
+
+  img {
+    margin-bottom: 0.5rem;
+  }
+
+  @media (min-width: 501px) {
+    float: left;
+    vertical-align: top;
+    width: 50%;
+  }
+
+  @media (max-width: 500px) {
+    width: 100%;
+  }
+}
+
+.hook__page__content__meme {
+  margin-bottom: 2rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+
+  @media (min-width: 701px) {
+    width: 50%;
+  }
+
+  @media (max-width: 700px) {
+    width: 100%;
+  }
+
+  canvas {
+    width: 100%; height: 100%;
+
+    background-color: rgba($teal, 0.3);
+    margin-bottom: 1rem;
+  }
+
+  h2.__metadata {
+    margin-top: 3rem;
+  }
+
+  fieldset {
+    border: none;
+
+    &:not(:last-of-type) {
+      margin-bottom: 1rem;
+    }
+  }
+
+  label {
+    color: rgba($black, 0.3);
+    display: block;
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.05rem;
+    margin-bottom: 0.025rem;
+    text-transform: uppercase;
+    width: 100%;
+  }
+
+  input:not([type="checkbox"]):not([type="submit"]),
+  select,
+  textarea {
+    @media (min-width: 901px) {
+      font-size: 1.25rem;
+    }
+
+    @media (max-width: 900px) {
+      font-size: 1.05rem;
+    }
+  }
+
+  input {
+    &:not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
+      border-bottom: 2px solid;
+      padding-bottom: 0.15rem;
+      transition: all 0.2s;
+      width: 100%;
+    }
+
+    &:not([type="file"]):not([type="submit"]) {
+      &:not(:hover):not(:active) {
+        border-color: $black;
+      }
+
+      &:hover,
+      &:active {
+        border-color: $teal;
+      }
+    }
+
+    &[type="checkbox"] {
+      width: 1.25rem; height: 1.25rem;
+
+      border: 2px solid;
+      margin-right: 0.5rem;
+      position: relative;
+      top: 0.35rem;
+
+      &::after {
+        width: 100%; height: 100%;
+
+        content: "✓";
+        font-size: 1.5rem;
+        line-height: 1rem;
+        position: absolute;
+      }
+
+      &:not(:checked)::after {
+        color: transparent;
+      }
+
+      &:checked::after {
+        color: $teal;
+      }
+    }
+  }
+
+  select,
+  textarea {
+    border-bottom: 2px solid;
+    width: 100%;
+
+    &:not(:hover):not(:active) {
+      border-color: $black;
+    }
+
+    &:hover,
+    &:active {
+      border-color: $teal;
+    }
+  }
+
+  select {
+    background-image: url("/assets/media/svg/down.svg");
+    background-position: 99% center;
+    background-repeat: no-repeat;
+    background-size: 1rem;
+    padding-right: 2rem;
+  }
+
+  textarea {
+    min-height: 100px;
+    resize: vertical;
+  }
+}
+
+.hook__page__content__meme__thumbnail {
+  width: 5rem; height: 5rem;
+
+  border-style: solid;
+  border-width: 2px;
+  margin-bottom: 1rem;
+  object-fit: contain;
+  object-position: center;
+
+  &:not(:last-of-type) {
+    margin-right: 1rem;
+  }
+
+  &:not(.selected) {
+    border-color: transparent;
+  }
+
+  &.selected {
+    border-color: $black;
+  }
+}
+
+.hook__page__content__meme__uploader {
+  @extend .__button-black;
+  text-align: center;
+  width: 11rem;
+
+  > div:first-of-type {
+    width: 100%; height: 100%;
+    top: 0; left: 0;
+
+    position: absolute;
+  }
+
+  input {
+    top: 0; left: 0;
+    bottom: 0; right: 0;
+
+    cursor: pointer;
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    z-index: 10;
+  }
+}

sass/pages/_page.scss

@@ -195,7 +195,7 @@
   }
 
   ol,
-  ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents) {
+  ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents):not(.tour__sidebar) {
     padding-top: 0.5rem;
 
     li {
@@ -214,7 +214,7 @@
     padding-left: 1.6rem;
   }
 
-  ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents) {
+  ul:not(.feature-links):not(.overview__ecosystem__module):not(.__parents):not(.tour__sidebar) {
     padding-left: 1.25rem;
   }
 

sass/pages/_tour.scss

@@ -1,395 +1,73 @@
-.hook {
+.tour {
-  .loader {
+  border-top: 1px solid rgba($black, 0.05);
-    animation: spin 2s linear infinite;
+  position: relative;
-    border-radius: 50%;
+  top: 1rem;
-    border-style: solid;
-    border-top-color: $teal;
-
-    &:not(.small):not(.tiny) {
-      width: 4rem; height: 4rem;
-
-      border-width: 6px;
-      margin-right: auto;
-      margin-left: auto;
-    }
-
-    &.small {
-      width: 2rem; height: 2rem;
-      border-width: 3px;
-    }
-
-    &.tiny {
-      width: 1rem; height: 1rem;
-      border-width: 2px;
-    }
-  }
-}
-
-
-
-.hook__navigation {
-  background-color: $black;
-  color: $white;
-  font-size: 1rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  text-align: center;
-}
-
-.hook__navigation__step {
-  background-color: transparent;
-
-  @media (min-width: 501px) {
-    display: inline-block;
-
-    &:not(:last-of-type) {
-      margin-right: 1rem;
-    }
-
-    span {
-      width: 3rem; height: 3rem;
-
-      display: block;
-      font-size: 1.25rem;
-      line-height: 3rem;
-    }
-  }
-
-  @media (max-width: 500px) {
-    display: block;
-
-    span {
-      width: 1rem; height: 1rem;
-
-      display: inline-block;
-      font-size: 0.7rem;
-      line-height: 0.9rem;
-      position: relative;
-      top: 2px;
-      vertical-align: top;
-    }
-  }
-
-  &:not(.active) {
-    color: $white;
-
-    span {
-      border-color: rgba($white, 0.1);
-    }
-  }
-
-  &.active {
-    color: $teal;
-
-    span {
-      border-color: rgba($teal, 0.3);
-    }
-  }
-
-  span {
-    border: 1px solid;
-    border-radius: 50%;
-    margin: 0 auto 0.5rem;
-  }
-}
-
-
-
-.hook__page {
-  @extend .page__content;
-}
-
-.hook__page__hero {
-  margin-bottom: 2rem;
-  border-bottom: 1px solid rgba($black, 0.05);
-
-  h1, p {
-    text-align: center;
-  }
-}
-
-.hook__page__hero__claim,
-.hook__page__hero__support {
-  margin-bottom: 3rem; padding-left: 1rem;
-
-  background-color: $white;
-  border: 1px solid rgba($gray, 0.7);
-  font-size: 1rem;
-
-  @media (min-width: 501px) {
-    margin-right: auto;
-    margin-left: auto;
-    width: 80%;
-  }
 
   &::after {
     @include clearfix;
   }
+}
 
-  button, input {
+
-    line-height: 3rem;
+
+.tour__sidebar {
+  width: 250px; height: 100%;
+
+  float: left;
+  list-style-type: none;
+  padding-top: 1rem;
+  padding-right: 1rem;
+  vertical-align: top;
+}
+
+.tour__sidebar__step {
+  cursor: pointer;
+
+  &:not(:last-of-type) {
+    margin-bottom: 1.5rem;
   }
 
+  &:not(.active) {
+    button,
+    span {
+      color: rgba($black, 0.3);
+    }
+  }
+
+  &.active,
+  &:hover {
+    button {
+      color: $teal;
+    }
+
+    span {
+      color: $black;
+    }
+  }
+
+  button,
   span {
-    color: rgba($black, 0.3);
+    transition: color 0.2s;
   }
 
   button {
-    border-left: 1px solid rgba($gray, 0.7);
+    background-color: transparent;
-    color: $white;
+    font-size: 1.25rem;
-    float: right;
+    font-weight: 600;
-    position: relative;
-    text-align: center;
-    transition: all 0.2s;
-    width: 6rem;
-
-    &::after {
-      width: calc(100% + 2px); height: calc(100% + 2px);
-      top: -1px; left: -1px;
-
-      border: 1px solid;
-      content: "";
-      position: absolute;
-      transition: inherit;
-    }
-
-    &:not(:hover) {
-      background-color: $black;
-
-      &::after {
-        border-color: $black;
-      }
-    }
-
-    &:hover {
-      background-color: $teal;
-
-      &::after {
-        border-color: $teal;
-      }
-    }
-  }
-}
-
-.hook__page__hero__claim input {
-  width: calc(100% - 10rem);
-}
-
-.hook__page__hero__support {
-  input[type=number] {
-    width: 3rem;
-  }
-
-  input[type=text] {
-    width: calc(100% - 11.5rem);
   }
 
   span {
-    line-height: 3rem;
-  }
-
-  a {
-    margin-left: 0.5rem;
-  }
-}
-
-
-
-.hook__page__content::after {
-  @include clearfix;
-}
-
-.hook__page__content__card {
-  margin-bottom: 1rem; padding: 1rem;
-  cursor: pointer;
-
-  img {
-    margin-bottom: 0.5rem;
-  }
-
-  @media (min-width: 501px) {
-    float: left;
-    vertical-align: top;
-    width: 50%;
-  }
-
-  @media (max-width: 500px) {
-    width: 100%;
-  }
-}
-
-.hook__page__content__meme {
-  margin-bottom: 2rem;
-  padding-right: 1rem;
-  padding-left: 1rem;
-
-  @media (min-width: 701px) {
-    width: 50%;
-  }
-
-  @media (max-width: 700px) {
-    width: 100%;
-  }
-
-  canvas {
-    width: 100%; height: 100%;
-
-    background-color: rgba($teal, 0.3);
-    margin-bottom: 1rem;
-  }
-
-  h2.__metadata {
-    margin-top: 3rem;
-  }
-
-  fieldset {
-    border: none;
-
-    &:not(:last-of-type) {
-      margin-bottom: 1rem;
-    }
-  }
-
-  label {
-    color: rgba($black, 0.3);
     display: block;
-    font-size: 0.8rem;
+    font-size: 1rem;
-    font-weight: 600;
-    letter-spacing: 0.05rem;
-    margin-bottom: 0.025rem;
-    text-transform: uppercase;
-    width: 100%;
-  }
-
-  input:not([type="checkbox"]):not([type="submit"]),
-  select,
-  textarea {
-    @media (min-width: 901px) {
-      font-size: 1.25rem;
-    }
-
-    @media (max-width: 900px) {
-      font-size: 1.05rem;
-    }
-  }
-
-  input {
-    &:not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
-      border-bottom: 2px solid;
-      padding-bottom: 0.15rem;
-      transition: all 0.2s;
-      width: 100%;
-    }
-
-    &:not([type="file"]):not([type="submit"]) {
-      &:not(:hover):not(:active) {
-        border-color: $black;
-      }
-
-      &:hover,
-      &:active {
-        border-color: $teal;
-      }
-    }
-
-    &[type="checkbox"] {
-      width: 1.25rem; height: 1.25rem;
-
-      border: 2px solid;
-      margin-right: 0.5rem;
-      position: relative;
-      top: 0.35rem;
-
-      &::after {
-        width: 100%; height: 100%;
-
-        content: "✓";
-        font-size: 1.5rem;
-        line-height: 1rem;
-        position: absolute;
-      }
-
-      &:not(:checked)::after {
-        color: transparent;
-      }
-
-      &:checked::after {
-        color: $teal;
-      }
-    }
-  }
-
-  select,
-  textarea {
-    border-bottom: 2px solid;
-    width: 100%;
-
-    &:not(:hover):not(:active) {
-      border-color: $black;
-    }
-
-    &:hover,
-    &:active {
-      border-color: $teal;
-    }
-  }
-
-  select {
-    background-image: url("/assets/media/svg/down.svg");
-    background-position: 99% center;
-    background-repeat: no-repeat;
-    background-size: 1rem;
-    padding-right: 2rem;
-  }
-
-  textarea {
-    min-height: 100px;
-    resize: vertical;
   }
 }
 
-.hook__page__content__meme__thumbnail {
-  width: 5rem; height: 5rem;
 
-  border-style: solid;
-  border-width: 2px;
-  margin-bottom: 1rem;
-  object-fit: contain;
-  object-position: center;
 
-  &:not(:last-of-type) {
+.tour__content {
-    margin-right: 1rem;
+  width: calc(100% - 250px); height: 100%; min-height: 500px;
-  }
 
-  &:not(.selected) {
+  border-left: 1px solid rgba($black, 0.05);
-    border-color: transparent;
+  float: right;
-  }
+  vertical-align: top;
-
-  &.selected {
-    border-color: $black;
-  }
-}
-
-.hook__page__content__meme__uploader {
-  @extend .__button-black;
-  text-align: center;
-  width: 11rem;
-
-  > div:first-of-type {
-    width: 100%; height: 100%;
-    top: 0; left: 0;
-
-    position: absolute;
-  }
-
-  input {
-    top: 0; left: 0;
-    bottom: 0; right: 0;
-
-    cursor: pointer;
-    opacity: 0;
-    position: absolute;
-    width: 100%;
-    z-index: 10;
-  }
 }

views/partials/tour.js

@@ -0,0 +1,55 @@
+// https://api.lbry.io/file/list_homepage
+// https://api.lbry.io/file/list_trending
+
+"use strict";
+
+
+
+//  P A C K A G E S
+
+const dedent = require("dedent");
+const html = require("choo-async/html");
+const raw = require("nanohtml/raw");
+
+
+
+//  E X P O R T
+
+module.exports = exports = () => html`
+  <section class="tour">
+    <ul class="tour__sidebar">
+      ${raw(sidebar())}
+    </ul>
+
+    <section class="tour__content">
+      ${raw(content())}
+    </section>
+  </section>
+`;
+
+
+
+function sidebar() { // TODO: Save tutorial position to localStorage // "active" class is added dynamically
+  return dedent`
+    <li class="tour__sidebar__step active">
+      <button data-action="tour, step 1" data-step="1" 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>
+      <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>
+      <span>Support creators on LBRY with a tip, on us!</span>
+    </li>
+  `;
+}
+
+function content() {
+  return html`
+    <p>Some content here</p>
+  `;
+}