Further Refactoring

views/pages/page.js

@@ -115,7 +115,7 @@ function createMetaTags(metaObject) {
     For Markdown files, the custom yaml should look like this:
 
     meta:
-      - description: Description goes here
+    - description: Description goes here
 
     This does not currently work with parameters like "og:image"
     // https://github.com/lbryio/lbry.tech/issues/30
@@ -143,9 +143,9 @@ function partialFinder(markdownBody) {
     if (fileExistsTest) {
       const partialFunction = local(`/views/partials/${filename}.js`);
 
-      if (filename === "ecosystem") {
+      if (filename === "ecosystem" || filename === "feature-links") {
-        const Ecosystem = new partialFunction;
+        const neatPartial = new partialFunction;
-        markdownBody = markdownBody.replace(partial, Ecosystem.render());
+        markdownBody = markdownBody.replace(partial, neatPartial.render());
       }
 
       else markdownBody = markdownBody.replace(partial, partialFunction);

views/partials/ecosystem.js

@@ -2,10 +2,9 @@
 
 
 
-//  P A C K A G E S
+//  P A C K A G E
 
 const Component = require("choo/component");
-const html = require("choo/html");
 
 //  V A R I A B L E S
 
@@ -19,12 +18,12 @@ const WALLET = require("./ecosystem/submodule-wallet");
 
 
 
-//  E X P O R T
+//  P R O G R A M
 
 Ecosystem.prototype = Object.create(Component.prototype);
 
 Ecosystem.prototype.createElement = () => {
-  return html`
+  return `
     <section class="ecosystem">
       <aside class="ecosystem__submodules">
         ${CHAINQUERY()}
@@ -45,29 +44,7 @@ Ecosystem.prototype.createElement = () => {
   `;
 };
 
-/*
+//  H E L P E R S
-module.exports = exports = (state, emit) => { // eslint-disable-line
-  return html`
-    <section class="ecosystem">
-      <aside class="ecosystem__submodules">
-        ${CHAINQUERY}
-        ${WALLET}
-      </aside>
-
-      <section class="ecosystem__modules">
-        ${LBRYCRD}
-        ${LBRY}
-        ${APPLICATIONS}
-      </section>
-
-      <aside class="ecosystem__submodules">
-        ${LIGHTHOUSE}
-        ${REFLECTOR}
-      </aside>
-    </section>
-  `;
-};
-*/
 
 function Ecosystem() {
   if (!(this instanceof Ecosystem)) return new Ecosystem();

views/partials/ecosystem/module-applications.js

@@ -2,15 +2,9 @@
 
 
 
-//  P A C K A G E
-
-const html = require("choo/html");
-
-
-
 //  E X P O R T
 
-module.exports = exports = () => html`
+module.exports = exports = () => `
   <div class="ecosystem__module applications">
     <span class="__close" data-action="close">&times;</span>
 

views/partials/ecosystem/module-lbry.js

@@ -2,15 +2,9 @@
 
 
 
-//  P A C K A G E
-
-const html = require("choo/html");
-
-
-
 //  E X P O R T
 
-module.exports = exports = () => html`
+module.exports = exports = () => `
   <div class="ecosystem__module lbry">
     <span class="__close" data-action="close">&times;</span>
 

views/partials/ecosystem/module-lbrycrd.js

@@ -2,15 +2,9 @@
 
 
 
-//  P A C K A G E
-
-const html = require("choo/html");
-
-
-
 //  E X P O R T
 
-module.exports = exports = () => html`
+module.exports = exports = () => `
   <div class="ecosystem__module lbrycrd">
     <span class="__close" data-action="close">&times;</span>
 

views/partials/ecosystem/submodule-chainquery.js

@@ -2,15 +2,9 @@
 
 
 
-//  P A C K A G E
-
-const html = require("choo/html");
-
-
-
 //  E X P O R T
 
-module.exports = exports = () => html`
+module.exports = exports = () => `
   <div class="ecosystem__submodule chainquery">
     <h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="chainquery">chainquery</h3>
 

views/partials/ecosystem/submodule-lighthouse.js

@@ -2,15 +2,9 @@
 
 
 
-//  P A C K A G E
-
-const html = require("choo/html");
-
-
-
 //  E X P O R T
 
-module.exports = exports = () => html`
+module.exports = exports = () => `
   <div class="ecosystem__submodule lighthouse">
     <h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="lighthouse">lighthouse</h3>
 

views/partials/ecosystem/submodule-reflector.js

@@ -2,15 +2,9 @@
 
 
 
-//  P A C K A G E
-
-const html = require("choo/html");
-
-
-
 //  E X P O R T
 
-module.exports = exports = () => html`
+module.exports = exports = () => `
   <div class="ecosystem__submodule reflector">
     <h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="reflector">reflector</h3>
 

views/partials/ecosystem/submodule-wallet.js

@@ -2,15 +2,9 @@
 
 
 
-//  P A C K A G E
-
-const html = require("choo/html");
-
-
-
 //  E X P O R T
 
-module.exports = exports = () => html`
+module.exports = exports = () => `
   <div class="ecosystem__submodule wallet">
     <h3 class="ecosystem__submodule__title" data-action="openSubmodule" data-target="wallet">wallet server</h3>
 

views/partials/feature-links.js

@@ -4,39 +4,39 @@
 
 //  P A C K A G E
 
-const dedent = require("dedent");
+const Component = require("choo/component");
 
 //  V A R I A B L E
 
 const links = [ // TODO: Update images
   {
     href: "https://discord.gg/YjYbwhS",
-    image: "http://static.simpledesktops.com/static/images/sd-bg.png",
+    image: "//static.simpledesktops.com/static/images/sd-bg.png",
     title: "Join us in chat"
   },
   {
     href: "https://lbry.io/developer",
-    image: "http://static.simpledesktops.com/uploads/desktops/2017/02/28/GeoShapes_2880x1800.png",
+    image: "//static.simpledesktops.com/uploads/desktops/2017/02/28/GeoShapes_2880x1800.png",
     title: "Join the developer email list"
   },
   {
     href: "https://lbry.io/meet",
-    image: "http://static.simpledesktops.com/uploads/desktops/2016/12/05/Untitled-1-03-01.png",
+    image: "//static.simpledesktops.com/uploads/desktops/2016/12/05/Untitled-1-03-01.png",
     title: "Host a meet-up"
   },
   {
     href: "https://www.reddit.com/r/lbry",
-    image: "http://static.simpledesktops.com/uploads/desktops/2016/08/28/Wind-Vector-resize.png",
+    image: "//static.simpledesktops.com/uploads/desktops/2016/08/28/Wind-Vector-resize.png",
     title: "Reddit"
   },
   {
     href: "https://lbry.fund",
-    image: "http://static.simpledesktops.com/uploads/desktops/2015/08/20/Sunset_by_Banned.png",
+    image: "//static.simpledesktops.com/uploads/desktops/2015/08/20/Sunset_by_Banned.png",
     title: "Get funding for a project"
   },
   {
     href: "https://lbry.io/join-us",
-    image: "http://static.simpledesktops.com/uploads/desktops/2015/09/25/Siri.png",
+    image: "//static.simpledesktops.com/uploads/desktops/2015/09/25/Siri.png",
     title: "Get a job"
   },
   {
@@ -47,31 +47,47 @@ const links = [ // TODO: Update images
 
 
 
-//  E X P O R T
+//  P R O G R A M
 
-module.exports = exports = () => {
+FeaturedLinks.prototype = Object.create(Component.prototype);
+
+FeaturedLinks.prototype.createElement = () => {
   const renderedLinks = [];
   let imageLink = "";
 
   for (const link of links) {
-    if (link.image) imageLink = `<img src="${link.image}" alt="${link.title}"/>`;
+    if (link.image) imageLink = `<img alt="${link.title}" src="${link.image}"/>`;
-
+    renderedLinks.push(returnLinkTemplate(link.href, link.title, imageLink));
-    renderedLinks.push(`
-      <li class="feature-link">
-        <div>
-          <a href="${link.href}" title="${link.title}" class="feature-link__title">${link.title}</a>
-        </div>
-
-        <figure class="feature-link__background">
-          ${imageLink}
-        </figure>
-      </li>
-    `);
   }
 
-  return dedent`
+  return `
-    <ul class="feature-links">
+    <ul class="feature-links">${renderedLinks.join("")}</ul>
-      ${renderedLinks.join("")}
-    </ul>
   `;
 };
+
+//  H E L P E R S
+
+function FeaturedLinks() {
+  if (!(this instanceof FeaturedLinks)) return new FeaturedLinks();
+  Component.call(this);
+}
+
+function returnLinkTemplate(url, title, image) {
+  return `
+    <li class="feature-link">
+      <div>
+        <a class="feature-link__title" href="${url}" title="${title}">${title}</a>
+      </div>
+
+      <figure class="feature-link__background">
+        ${image}
+      </figure>
+    </li>
+  `;
+}
+
+
+
+//  E X P O R T
+
+module.exports = exports = FeaturedLinks;