app/client.js

@@ -8,12 +8,13 @@ import async from "choo-async";
 import asyncHtml from "choo-async/html";
 import choo from "choo";
 import devtools from "choo-devtools";
+import { require as local } from "app-root-path";
 import ssr from "choo-ssr";
 
 //  V A R I A B L E S
 
-import head from "./components/head";
-import wrapper from "./components/wrapper";
+const head = local("app/components/head");
+const wrapper = local("app/components/wrapper");
 
 
 
@@ -57,7 +58,7 @@ module.exports = exports = main;
 
 //  H E L P E R
 
-function shell (head, body) {
+function shell(head, body) {
   return (state, emit) => {
     const bodyPromise = Promise.resolve(body(state, emit));
     const headPromise = bodyPromise.then(() => head(state, emit)); // resolve `head` once `body` is resolved

app/components/link-grid.js

@@ -11,7 +11,9 @@ import html from "choo/html";
 //  E X P O R T
 
 export default (links) => {
-  const renderedLinks = links.map((link) => returnLinkTemplate(link.title, link.description, link.destination, link.label));
+  const renderedLinks = links.map((link) =>
+    returnLinkTemplate(link.title, link.description, link.destination, link.label));
+
   return html`
     <ul class="link-grid">
       ${renderedLinks}

app/data/redirects.json

@@ -1,9 +1,9 @@
 {
-  "/tour" : "/playground",
-  "/play" : "/playground",
-  "/api" :  "/resources",
-  "/api/protocol" : "/api/sdk",
-  "/api/lbry" : "/api/sdk",
-  "/api/lbrycrd" : "/api/blockchain",
+  "/api": "/resources",
+  "/api/lbry": "/api/sdk",
+  "/api/lbrycrd": "/api/blockchain",
+  "/api/protocol": "/api/sdk",
+  "/play": "/playground",
+  "/tour": "/playground",
   "/whitepaper": "https://whitepaper.lbry.tech"
 }

app/modules/redirect-404.js

@@ -0,0 +1,49 @@
+"use strict";
+
+
+
+//  P A C K A G E
+
+import html from "choo/html";
+import { require as local } from "app-root-path";
+
+//  V A R I A B L E S
+
+const page404 = local("app/views/404.js");
+const redirects = local("app/data/redirects.json");
+
+
+
+//  E X P O R T
+
+module.exports = exports = state => {
+  const redirectUrl = redirects[state.href];
+
+  if (redirectUrl) {
+    return html`
+      <article class="page" itemtype="http://schema.org/BlogPosting">
+        <header class="page__header">
+          <div class="page__header-wrap">
+            <div class="inner-wrap">
+              <h1 class="page__header__title" itemprop="name headline">404</h1>
+            </div>
+          </div>
+        </header>
+
+        <section class="page__content page__markup" itemprop="articleBody">
+          <div class="inner-wrap">
+            <p>Redirecting you to <strong>${redirectUrl}</strong></p>
+          </div>
+        </section>
+      </article>
+
+      <script>
+        setTimeout(() => {
+          window.location.href = "${redirectUrl}";
+        }, 2000);
+      </script>
+    `;
+  } else {
+    return page404();
+  }
+};

app/modules/redirectOr404.js

@@ -1,15 +0,0 @@
-/*
-this is fucking awful
- */
-
-import Page404 from "../views/404.js";
-import redirects from "../data/redirects.json";
-
-export default (path) => {
-  const redirectUrl = redirects[path];
-  if (redirectUrl) {
-    throw "fix this please, needs to redirect to:" + redirectUrl;
-  } else {
-    return Page404();
-  }
-};

app/sass/pages/_tour.scss

@@ -193,7 +193,6 @@
 
   canvas {
     width: 100%; height: 100%;
-    // width: 400px; height: 300px;
 
     background-color: rgba($teal, 0.3);
     margin-bottom: 1rem;

app/views/404.js

@@ -1,9 +1,16 @@
 "use strict";
 
+
+
+//  P A C K A G E
+
 import html from "choo/html";
 
-export default () => {
-  return html`
+
+
+//  E X P O R T
+
+module.exports = exports = () => html`
   <article class="page" itemtype="http://schema.org/BlogPosting">
     <header class="page__header">
       <div class="page__header-wrap">
@@ -15,12 +22,10 @@ export default () => {
 
     <section class="page__content page__markup" itemprop="articleBody">
       <div class="inner-wrap">
-          <p>The requested page could not be found. Here is the image located at <a href="https://lbry.tech/playground">lbry://404</a> to console you.</p>
-          <img src="https://spee.ch/404.png" title="lbry://404" />
-          <p>Think something should be here? Let us know by <a href="/contribute#raising-issues">raising an issue</a>.</p>
+        <p>The requested page could not be found. Here is the image located at <a href="https://lbry.tech/playground" title="Check out the meme creator at the Playground">lbry://404</a> to console you.</p>
+        <img alt="lbry://404" src="https://spee.ch/404.png"/>
+        <p>Think something should be here? Let us know by <a href="/contribute#raising-issues" title="Check out our documentation to learn how to raise issues">raising an issue</a>.</p>
       </div>
     </section>
   </article>
-  `;
-};
-
+`;

app/views/api.js

@@ -1,12 +1,23 @@
 "use strict";
 
+
+
+//  P A C K A G E S
+
 import asyncHtml from "choo-async/html";
 import dedent from "dedent";
-import redirectOr404 from "../modules/redirectOr404";
-import headerBlockchain from "../components/api/header-blockchain";
-import headerSdk from "../components/api/header-sdk";
+import { require as local } from "app-root-path";
+
+//  V A R I A B L E S
 
 const fetch = require("make-fetch-happen").defaults({ cacheManager: "./cache" });
+const headerBlockchain = local("app/components/api/header-blockchain").default;
+const headerSdk = local("app/components/api/header-sdk").default;
+const redirects = local("app/data/redirects.json");
+
+
+
+//  E X P O R T
 
 module.exports = exports = state => parseApiFile(state.params.wildcard).then(response => {
   /*
@@ -41,23 +52,37 @@ module.exports = exports = state => parseApiFile(state.params.wildcard).then(res
     <script src="/assets/scripts/api.js"></script>
   `;
 }).catch(() => {
-  redirectOr404(state.href);
+  const redirectUrl = redirects[state.href];
+
+  return asyncHtml`
+    <article class="page" itemtype="http://schema.org/BlogPosting">
+      <header class="page__header">
+        <div class="page__header-wrap">
+          <div class="inner-wrap">
+            <h1 class="page__header__title" itemprop="name headline">404</h1>
+          </div>
+        </div>
+      </header>
+
+      <section class="page__content page__markup" itemprop="articleBody">
+        <div class="inner-wrap">
+          <p>Redirecting you to <strong>${redirectUrl}</strong></p>
+        </div>
+      </section>
+    </article>
+
+    <script>
+      setTimeout(() => {
+        window.location.href = "${redirectUrl}";
+      }, 2000);
+    </script>
+  `;
 });
 
 
 
-
 //  H E L P E R S
 
-function createApiHeader(slug) {
-  switch (slug) {
-    case "sdk":
-      return headerSdk();
-    case "blockchain":
-      return headerBlockchain();
-  }
-}
-
 function createApiContent(apiDetails) {
   const apiContent = [];
 
@@ -85,6 +110,19 @@ function createApiContent(apiDetails) {
   return apiContent;
 }
 
+function createApiHeader(slug) {
+  switch(slug) {
+    case "blockchain":
+      return headerBlockchain();
+
+    case "sdk":
+      return headerSdk();
+
+    default:
+      break;
+  }
+}
+
 function createApiSidebar(apiDetails) {
   const apiSidebar = [];
 
@@ -104,18 +142,26 @@ function createApiSidebar(apiDetails) {
 function parseApiFile(urlSlug) {
   let apiFileLink;
 
-  //checks below are related to rate limits, both URLs should return the same content
-  if (urlSlug === "sdk") apiFileLink = process.env.NODE_ENV === "development" ?
-    "https://rawgit.com/lbryio/lbry/master/docs/api.json" :
-    "https://cdn.rawgit.com/lbryio/lbry/master/docs/api.json"
-  ;
+  // checks below are related to rate limits, both URLs should return the same content
 
-  if (urlSlug === "blockchain") apiFileLink = process.env.NODE_ENV === "development" ?
+  switch(true) {
+    case (urlSlug === "blockchain"):
+      apiFileLink = process.env.NODE_ENV === "development" ?
         "https://rawgit.com/lbryio/lbrycrd/add_api_docs_scripts/contrib/devtools/generated/api_v1.json" :
-    "https://cdn.rawgit.com/lbryio/lbrycrd/add_api_docs_scripts/contrib/devtools/generated/api_v1.json"
-  ;
+        "https://cdn.rawgit.com/lbryio/lbrycrd/add_api_docs_scripts/contrib/devtools/generated/api_v1.json";
+      break;
 
-  if (!apiFileLink) return Promise.reject(new Error("Failed to fetch API docs")); // TODO: Error handling
+    case (urlSlug === "sdk"):
+      apiFileLink = process.env.NODE_ENV === "development" ?
+        "https://rawgit.com/lbryio/lbry/master/docs/api.json" :
+        "https://cdn.rawgit.com/lbryio/lbry/master/docs/api.json";
+      break;
+
+    default:
+      break;
+  }
+
+  if (!apiFileLink) return Promise.reject(new Error("Failed to fetch API docs"));
 
   return fetch(apiFileLink).then(() => fetch(apiFileLink, {
     cache: "no-cache" // forces a conditional request

app/views/home.js

@@ -1,7 +1,19 @@
 "use strict";
 
+
+
+//  P A C K A G E S
+
 import html from "choo/html";
-import linkGrid from "../components/link-grid";
+import { require as local } from "app-root-path";
+
+//  V A R I A B L E
+
+const linkGrid = local("app/components/link-grid").default;
+
+
+
+//  E X P O R T
 
 module.exports = exports = () => html`
   <div>

app/views/redirect.js

@@ -11,12 +11,12 @@ import fs from "graceful-fs";
 import html from "choo/html";
 import path from "path";
 import { require as local } from "app-root-path";
-import redirectOr404 from "../modules/redirectOr404";
 import raw from "choo/html/raw";
 
 //  V A R I A B L E S
 
 const numberRegex = /^[0-9]/g;
+const redirect404 = local("app/modules/redirect-404");
 
 const md = require("markdown-it")({
   html: true,
@@ -38,6 +38,8 @@ const md = require("markdown-it")({
     }
   });
 
+
+
 //  E X P O R T
 
 module.exports = exports = (state, emit) => { // eslint-disable-line
@@ -45,9 +47,8 @@ module.exports = exports = (state, emit) => { // eslint-disable-line
   if (state.route === "resources/*") path = `resources/${state.params.wildcard}`;
   else path = state.params.wildcard;
 
-  if (!fs.existsSync(`./documents/${path}.md`)) {
-    return redirectOr404(state.href);
-  }
+  if (!fs.existsSync(`./documents/${path}.md`))
+    return redirect404(state);
 
   const markdownFile = fs.readFileSync(`./documents/${path}.md`, "utf-8");
   const markdownFileDetails = fm(markdownFile);
@@ -106,9 +107,10 @@ function partialFinder(markdownBody) {
     const filename = decamelize(partial, "-").replace("<", "").replace("/>", "").trim();
     const fileExistsTest = exists(`./app/components/${filename}.js`); // `local` results in error if used here and file !exist
 
-    if (!fileExistsTest) {
+    if (!fileExistsTest)
       markdownBody = markdownBody.replace(partial, "");
-    } else {
+
+    else {
       const partialFunction = require(path.join(__dirname, "..", `./components/${filename}.js`));
 
       if (filename === "glossary-toc") markdownBody = markdownBody.replace(partial, partialFunction);
@@ -119,15 +121,13 @@ function partialFinder(markdownBody) {
   return markdownBody;
 }
 
-
 function wikiFinder(markdownBody) {
   return markdownBody.replace(/\[\[([\w\s/-]+)\]\]/g, (match, p1) => {
-    const label = p1.trim(),
-      href = encodeURI("/glossary#" + label.replace(/\s+/g, "-"));
+    const label = p1.trim();
+    const url = encodeURI("/glossary#" + label.replace(/\s+/g, "-"));
 
     return label ?
-      `<a href="${href}" class="link--glossary">${label}</a>` :
+      `<a href="${url}" class="link--glossary">${label}</a>` :
       match.input;
-  }
-  );
+  });
 }