GitHub feed is working

.travis.yml

@@ -3,6 +3,3 @@ node_js:
   - "10.2"
 before_install:
   - npm i -g npm@latest
-  - curl -o- -L https://yarnpkg.com/install.sh | bash
-  - export PATH="$HOME/.yarn/bin:$PATH"
-  - yarn config set ignore-engines true

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).

helpers/github.js

@@ -0,0 +1,133 @@
+"use strict";
+
+
+
+//  P R O G R A M
+
+function generateEvent(event) {
+  switch (event.type) {
+    case "CommitCommentEvent":
+      return `
+        <strong>${event.actor.display_login}</strong> commented on
+        <a href="${generateUrl("comment", event)}" title="View this comment on GitHub">commit</a> in
+      `;
+
+    case "CreateEvent":
+      return `
+        <strong>${event.actor.display_login}</strong> created
+        ${event.payload.ref_type} <code>${event.payload.ref}</code> in
+      `;
+
+    case "DeleteEvent":
+      return `
+        <strong>${event.actor.display_login}</strong> deleted
+        ${event.payload.ref_type} <code>${event.payload.ref}</code> in
+      `;
+
+    case "ForkEvent":
+      return `
+        <strong>${event.actor.display_login}</strong> forked
+        <strong><a href="${generateUrl("repo", event)}" title="View this repo on GitHub" target="_blank" rel="noopener noreferrer">${event.repo.name}</a></strong> to
+        <strong><a href="${generateUrl("forkee", event)}" title="View this repo fork on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.forkee.name}</a></strong> in
+      `;
+
+    case "IssueCommentEvent":
+      if (event.payload.issue.pull_request) {
+        return `
+          <strong>${event.actor.display_login}</strong> commented on pull request
+          <em><a href="${generateUrl("issue", event)}" title="View this comment on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.issue.title}</a></em> in
+        `;
+      } else {
+        return `
+          <strong>${event.actor.display_login}</strong> commented on issue
+          <em><a href="${generateUrl("issue", event)}" title="View this comment on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.issue.title}</a></em> in
+        `;
+      }
+
+    case "IssuesEvent":
+      return `
+        <strong>${event.actor.display_login}</strong> ${event.payload.action} issue
+        <em><a href="${generateUrl("issue", event)}" title="View this issue on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.issue.title}</a></em> in
+      `;
+
+    case "PullRequestEvent":
+      return `
+        <strong>${event.actor.display_login}</strong> ${event.payload.action} pull request
+        <em><a href="${generateUrl("pull_request", event)}" title="View this pull request on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.pull_request.title}</a></em> in
+      `;
+
+    case "PullRequestReviewCommentEvent":
+      return `
+        <strong>${event.actor.display_login}</strong> commented on pull request
+        <em><a href="${generateUrl("pull_request", event)}" title="View this comment on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.pull_request.title}</a></em> in
+      `;
+
+    case "PushEvent":
+      return `
+        <strong>${event.actor.display_login}</strong> pushed to
+        <code><a href="${generateUrl("push", event)}" title="View this branch on GitHub" target="_blank" rel="noopener noreferrer">${refToBranch(event.payload.ref)}</a></code> in
+      `;
+
+    case "ReleaseEvent":
+      return `
+        <strong>${event.actor.display_login}</strong> released
+        <em><a href="${generateUrl("release", event)}" title="View this release on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.release.tag_name}</a></em> in
+      `;
+
+    case "WatchEvent":
+      return `
+        <strong>${event.actor.display_login}</strong> starred the repo
+      `;
+
+    default:
+      break;
+  }
+}
+
+function generateUrl(type, event) {
+  switch (type) {
+    case "actor":
+      return `https://github.com/${event.actor.display_login}`;
+
+    case "comment":
+      return event.payload.comment.html_url;
+
+    case "repo":
+      return `https://github.com/${event.repo.name}`;
+
+    case "forkee":
+      return `https://github.com/${event.payload.forkee.full_name}`;
+
+    case "issue":
+      return event.payload.issue.html_url;
+
+    case "pull_request":
+      return event.payload.pull_request.html_url;
+
+    case "release":
+      return event.payload.release.html_url;
+
+    case "push":
+      return `https://github.com/${event.repo.name}/tree/${event.payload.ref.replace("refs/heads/", "")}`;
+
+    default:
+      break;
+  }
+}
+
+
+
+//  H E L P E R
+
+function refToBranch(ref) {
+  return ref.replace("refs/heads/", "");
+}
+
+
+
+//  E X P O R T
+
+module.exports = exports = {
+  generateEvent,
+  generateUrl
+};

helpers/pa.js

@@ -1,30 +0,0 @@
-"use strict";
-
-
-
-//  P R O G R A M
-
-module.exports = exports = promises => { // via https://gist.github.com/peisenmann/41488a45364974705cd6
-  return new Promise(resolve => {
-    let retVals = Array(promises.length).fill();
-    let states = Array(promises.length).fill();
-
-    const f = i => res => {
-      retVals[i] = res;
-      states[i] = true;
-
-      if (states.every(s => s)) resolve(retVals);
-    };
-
-    promises.forEach((p, i) => {
-      Promise.resolve(p).then(f(i), f(i));
-    });
-  });
-};
-
-/***
-  // Usage
-  allComplete([p1, p2, p3, "not-a-promise"]).then(result => {
-    log(result);
-  });
-**/

package.json

@@ -8,9 +8,8 @@
     "@octokit/rest": "^15.9.4",
     "app-root-path": "^2.1.0",
     "async": "^2.6.1",
-    "async-redis": "^1.1.4",
     "chalk": "^2.4.1",
-    "choo": "^6.12.1",
+    "choo": "^6.13.0",
     "choo-async": "^0.1.1",
     "choo-bundles": "^0.2.4",
     "choo-data": "^0.1.1",
@@ -18,6 +17,7 @@
     "choo-websocket": "^2.0.0",
     "cors": "^2.8.4",
     "cron": "^1.3.0",
+    "date-format-lite": "^17.7.0",
     "decamelize": "^2.0.0",
     "dedent": "^0.7.0",
     "dotenv": "^6.0.0",
@@ -36,6 +36,7 @@
     "markdown-it-sup": "^1.0.0",
     "nanohtml": "^1.2.4",
     "redis": "^2.8.0",
+    "relative-date": "^1.1.3",
     "request-promise-native": "^1.0.5",
     "slack-node": "^0.2.0",
     "socket.io": "^2.1.1",
@@ -47,7 +48,7 @@
     "choo-devtools": "^2.5.1",
     "nodemon": "^1.18.1",
     "npm-run-all": "^4.1.3",
-    "sass": "^1.9.0",
+    "sass": "^1.9.1",
     "snazzy": "^7.1.1",
     "standardx": "^2.1.0",
     "updates": "^3.2.1"

public/scripts/sockets.js

@@ -0,0 +1,17 @@
+/* global ws, $ */ "use strict";
+
+
+
+ws.onmessage = socket => {
+  const data = JSON.parse(socket.data);
+
+  switch (true) {
+    case data.message === "updated html":
+      $(data.selector).html(data.html);
+      break;
+
+    default:
+      console.log(data);
+      break;
+  }
+};

sass/_layout.scss

@@ -15,23 +15,16 @@ body {
   overflow-x: hidden;
   position: relative;
   z-index: 0;
-}
-
-main {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  padding-top: 4rem;
 
   &:not(.home) {
-    > div:first-of-type {
+    main > div:first-of-type {
       flex: 1;
     }
   }
 
   &.home {
     @media (min-width: 1001px) {
-      > div:first-of-type {
+      main > div:first-of-type {
         display: grid;
         grid-gap: 0;
         grid-template-areas:
@@ -47,6 +40,13 @@ main {
   }
 }
 
+main {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  padding-top: 4rem;
+}
+
 .inner-wrap {
   margin-right: auto;
   margin-left: auto;

server.js

@@ -1,4 +1,4 @@
-"use strict"; require("dotenv").config();
+"use strict"; require("dotenv").config(); require("date-format-lite");
 
 
 
@@ -6,9 +6,7 @@
 
 const chalk = require("chalk");
 const cors = require("cors");
-// const local = require("app-root-path").require;
+const dedent = require("dedent");
-
-//  V A R I A B L E S
 
 const fastify = require("fastify")({
   logger: {
@@ -17,14 +15,42 @@ const fastify = require("fastify")({
   }
 });
 
+const octokit = require("@octokit/rest")();
+const redis = require("redis");
+const relativeDate = require("relative-date");
+const local = require("app-root-path").require;
+
+//  V A R I A B L E S
+
+const github = local("/helpers/github");
 const log = console.log; // eslint-disable-line
-// const logSlackError = local("/helpers/slack");
+const logSlackError = local("/helpers/slack");
+let client;
+
+if (typeof process.env.GITHUB_OAUTH_TOKEN !== "undefined") {
+  octokit.authenticate({
+    type: "oauth",
+    token: process.env.GITHUB_OAUTH_TOKEN
+  });
+}
+
+if (typeof process.env.REDISCLOUD_URL !== "undefined") {
+  client = redis.createClient(process.env.REDISCLOUD_URL);
+
+  client.on("error", redisError => {
+    process.env.NODE_ENV === "development" ?
+      log("Unable to connect to Redis client. You may be missing an .env file") :
+      logSlackError("An error occured with Redis", redisError)
+    ;
+  });
+}
 
 
 
 //  P R O G R A M
 
 fastify.use(cors());
+
 fastify.register(require("fastify-compress"));
 fastify.register(require("fastify-ws"));
 
@@ -44,47 +70,25 @@ fastify.register(require("choo-ssr/fastify"), {
   ]
 });
 
-/*
-fastify.decorate("io", new WebSocket.Server({ server: fastify.server }));
-
-fastify.io.on("connection", (socket, req) => {
-  console.log("connected");
-  socket.url = req.url;
-
-  socket.on("disconnect", () => {
-    console.log("someone left");
-  });
-
-  // On message broadcast to everyone
-  socket.on("message", data => {
-    // Broadcast to everyone else
-    fastify.io.clients.forEach(client => {
-      console.log(socket.url, client.url);
-
-      if (socket.url === client.url && client.readyState === WebSocket.OPEN) {
-        client.send(data);
-      }
-    });
-  });
-});
-*/
-
 fastify.ready(err => {
   if (err) throw err;
 
   fastify.ws.on("connection", socket => {
-    // console.log("Client connected.");
+    socket.send(JSON.stringify({ "message": "welcome" }));
-    socket.send("welcome");
 
     socket.on("message", msg => {
       if (msg === "landed on homepage") {
-        //
+        generateGitHubFeed(result => {
+          socket.send(JSON.stringify({
+            "message": "updated html",
+            "html": result,
+            "selector": "#github-feed"
+          }));
+        });
       }
-
-      socket.send(msg); // Creates an echo server
     });
 
-    socket.on("close", () => console.log("Client disconnected."));
+    socket.on("close", () => log("Client disconnected.")); // TODO: Close socket?
   });
 });
 
@@ -100,8 +104,52 @@ const start = async () => {
     process.exit(1);
   }
 
-  log(`\n— ${chalk.green("⚡")} ${fastify.server.address().port}\n`);
+  process.env.NODE_ENV === "development" ?
-  // logSlackError(`Server started at port \`${fastify.server.address().port}\``);
+    log(`\n— ${chalk.green("⚡")} ${fastify.server.address().port}\n`) :
+    logSlackError(`Server started at port \`${fastify.server.address().port}\``)
+  ;
 };
 
 start();
+
+
+
+//  H E L P E R S
+
+function generateGitHubFeed(displayGitHubFeed) {
+  if (typeof process.env.REDISCLOUD_URL !== "undefined") {
+    client.zrevrange("events", 0, 9, (err, reply) => {
+      if (err) return; // TODO: Render a div with nice error message
+
+      const events = [];
+      const renderedEvents = [];
+
+      reply.forEach(item => events.push(JSON.parse(item)));
+
+      for (const event of events) {
+        renderedEvents.push(`
+          <div class='github-feed__event'>
+            <a href="${github.generateUrl("actor", event)}" target="_blank" rel="noopener noreferrer">
+              <img src="${event.actor.avatar_url}" class="github-feed__event__avatar" alt=""/>
+            </a>
+
+            <p>
+              ${github.generateEvent(event)}
+              <a href="${github.generateUrl("repo", event)}" title="View this repo on GitHub" target="_blank" rel="noopener noreferrer"><strong>${event.repo.name}</strong></a>
+              <em class="github-feed__event__time">${relativeDate(new Date(event.created_at))}</em>
+            </p>
+          </div>
+        `);
+      }
+
+      // TODO: Update `.last-updated` every minute
+
+      displayGitHubFeed(dedent`
+        <h3>GitHub</h3>
+        <h5 class="last-updated">Last updated: ${new Date().format("YYYY-MM-DD at H:mm:ss A").toLowerCase().replace(/-/g, "&middot;")}</h5>
+
+        ${renderedEvents.join("")}
+      `);
+    });
+  }
+}

views/pages/github-feed.js

@@ -1,169 +0,0 @@
-"use strict"; require("dotenv").config();
-
-
-
-//  P A C K A G E S
-
-const async = require("async");
-const html = require("choo-async/html");
-const local = require("app-root-path").require;
-const octokit = require("@octokit/rest")();
-const redis = require("redis");
-
-//  V A R I A B L E S
-
-if (typeof process.env.GITHUB_OAUTH_TOKEN !== "undefined") {
-  octokit.authenticate({
-    type: "oauth",
-    token: process.env.GITHUB_OAUTH_TOKEN
-  });
-}
-
-const logSlackError = local("/helpers/slack");
-let redisClient;
-
-// process.env.NODE_ENV === "development" ? "" : redisClient = redis.createClient(process.env.REDISCLOUD_URL);
-redisClient = redis.createClient(process.env.REDISCLOUD_URL);
-
-
-
-//  P R O G R A M
-
-const githubFeed = () => async (state, emit) => { // eslint-disable-line
-  /* process.env.NODE_ENV === "development" ? "" : */ redisClient.zrevrange("events", 0, 9, (err, reply) => {
-    if (err) return;
-    const events = [];
-
-    reply.forEach(item => events.push(JSON.parse(item)));
-    console.log(events);
-    return events;
-    // res.json(events); // respond with JSON
-  });
-
-  /*
-  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">Resources</h1>
-          </div>
-        </div>
-      </header>
-
-      <section class="page__content" itemprop="articleBody">
-        <div class="inner-wrap">
-          <h2>Whitepaper</h2>
-          <h4>LBRY: A Decentralized Digital Content Marketplace</h4>
-          <p>Some info here about the whitepaper and <a href="/whitepaper.html">a link</a>.</p>
-
-          <h2>API Specification</h2>
-          <h4>All of our APIs, in one place</h4>
-
-          <h3>chainquery</h3>
-          <ul>
-            <li><a href="https://github.com/lbryio/chainquery">Codebase</a></li>
-            <li><a href="">OpenAPI signature</a></li>
-          </ul>
-
-          <h3>lbry</h3>
-          <ul>
-            <li><a href="https://lbry.io/api">Codebase</a></li>
-            <li><a href="/resources/lbry.html">OpenAPI signature</a></li>
-          </ul>
-
-          <h3>lbrycrd</h3>
-          <ul>
-            <li><a href="https://github.com/lbryio/lbrycrd">Codebase</a></li>
-            <li><a href="/resources/lbrycrd.html">OpenAPI signature</a></li>
-          </ul>
-
-          <h3>Lighthouse</h3>
-          <ul>
-            <li><a href="https://lbryio.github.io/lighthouse">Codebase</a></li>
-            <li><a href="">OpenAPI signature</a></li>
-          </ul>
-
-          <h2>The Front Desk</h2>
-          <h4>Latest news and musings from the LBRY team</h4>
-
-          <ul class="blog-posts">
-            <li class="blog-post">
-              <a class="blog-post__title" href="https://lbry.io/news/we-are-hiring-our-boss">We're Hiring Our Boss</a>
-              <div class="blog-post__meta">
-                <span class="blog-post__meta__date">2018/05/11</span>
-                <span class="blog-post__meta__author">Samuel Bryan</span>
-              </div>
-            </li>
-
-            <li class="blog-post">
-              <a class="blog-post__title" href="https://lbry.io/news/lbry-development-community-update-apr-2018">Development and Community Update April 2018</a>
-              <div class="blog-post__meta">
-                <span class="blog-post__meta__date">2018/05/04</span>
-                <span class="blog-post__meta__author">Samuel Bryan</span>
-              </div>
-            </li>
-
-            <li class="blog-post">
-              <a class="blog-post__title" href="https://lbry.io/news/imineblocks">Hey, mine your own business!</a>
-              <div class="blog-post__meta">
-                <span class="blog-post__meta__date">2018/04/05</span>
-                <span class="blog-post__meta__author">Reilly Smith</span>
-              </div>
-            </li>
-
-            <li class="blog-post">
-              <a class="blog-post__title" href="https://lbry.io/news/lbry-development-community-update-mar-2018">Development and Community Update March 2018</a>
-              <div class="blog-post__meta">
-                <span class="blog-post__meta__date">2018/04/03</span>
-                <span class="blog-post__meta__author">Tom Zarebczan</span>
-              </div>
-            </li>
-
-            <li class="blog-post">
-              <a class="blog-post__title" href="https://lbry.io/news/if-you-still-havent-found-what-youre-searching-for">If you still haven't found what you're searching for...</a>
-              <div class="blog-post__meta">
-                <span class="blog-post__meta__date">2018/03/22</span>
-                <span class="blog-post__meta__author">Brinck Slattery</span>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </section>
-    </article>
-
-    <script>
-      // TODO: make this happen in components/layout
-      document.getElementsByTagName("body")[0].classList.add("resources"); // documentation
-    </script>
-  `;
-  */
-};
-
-function updateGithubFeed() {
-  octokit.activity.getEventsForOrg({
-    org: "lbryio",
-    per_page: 20,
-    page: 1
-  }).then(({ data }) => {
-    async.eachSeries(data, (item, callback) => {
-      const eventString = JSON.stringify(item);
-
-      redisClient.zrank("events", eventString, (err, reply) => {
-        if (reply === null) redisClient.zadd("events", item.id, eventString, callback);
-        else callback();
-      });
-    }, () => {
-      // Keep the latest 50 events
-      redisClient.zremrangebyrank("events", 0, -51);
-    });
-  }).catch(err => {
-    logSlackError("ERROR: Unable to update Github feed:\n", "```" + JSON.stringify(err) + "```");
-  });
-}
-
-
-
-//  E X P O R T
-
-module.exports = exports = githubFeed;

views/pages/home.js

@@ -5,6 +5,12 @@
 //  P A C K A G E
 
 const html = require("choo-async/html");
+// const local = require("app-root-path").require;
+
+
+// const test = local("/views/partials/github-feed");
+// console.log(test());
+// test();
 
 
 
@@ -12,87 +18,90 @@ const html = require("choo-async/html");
 
 //  eslint-disable-next-line
 const home = () => async (state, emit) => html`
-  <section class="hero">
+  <div>
-    <div>
+    <section class="hero">
-      <h1>
+      <div>
-        LBRY is a free, open, and community-run digital marketplace.<br/>
+        <h1>
-        Build the future of content freedom.
+          LBRY is a free, open, and community-run digital marketplace.<br/>
-      </h1>
+          Build the future of content freedom.
-    </div>
+        </h1>
-  </section>
+      </div>
+    </section>
 
-  <section class="features">
+    <section class="features">
-    <ul class="home__features">
+      <ul class="home__features">
-      <li class="home__feature">
+        <li class="home__feature">
-        <p class="home__feature__title"><strong>New to LBRY?</strong></p>
+          <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>
+          <p class="home__feature__description">Learn how LBRY works in 3 easy steps</p>
-        <a class="home__feature__cta" href="/tour">Take the Tour</a>
+          <a class="home__feature__cta" href="/tour">Take the Tour</a>
-      </li>
+        </li>
 
-      <li class="home__feature">
+        <li class="home__feature">
-        <p class="home__feature__title"><strong>Want to contribute?</strong></p>
+          <p class="home__feature__title"><strong>Want to contribute?</strong></p>
-        <p class="home__feature__description">Help make LBRY better!</p>
+          <p class="home__feature__description">Help make LBRY better!</p>
-        <a class="home__feature__cta" href="/contribute">Explore our repos</a>
+          <a class="home__feature__cta" href="/contribute">Explore our repos</a>
-      </li>
+        </li>
-    </ul>
-  </section>
-
-  <section class="intro">
-    <div class="inner-wrap">
-      <h3>Intro/Overview</h3>
-      <p>What if anyone in the world could publish a piece of digital content, anyone else in the world could access it, for free or for payment, and that entire system worked end-to-end without any centralized authority or point of control?</p>
-
-      <p>That's the idea behind LBRY. To create a market for accessing and publishing information that is global, decentralized, robust, optimal and complete.</p>
-
-      <a class="cta" href="/overview">Learn more about our mission</a>
-    </div>
-  </section>
-
-  <section class="docs">
-    <div class="inner-wrap">
-      <h3>Documentation</h3>
-      <p>LBRY has enough moving parts to warrant comprehensive documentation. Whether you are interested in learning the technical details of our technology stack or you want to integrate LBRY into your life, you will find everything you need in our docs.</p>
-
-      <a class="cta" href="/resources">Explore our documentation</a>
-    </div>
-  </section>
-
-  <section class="contribute">
-    <div class="inner-wrap">
-      <h3>Contribute</h3>
-      <p>Interested in progressing content freedom? Awesome! No matter your experience or skill level, <strong>you</strong> can make a difference.</p>
-
-      <ul>
-        <li><a href="" title="">Raising Issues</a></li>
-        <li><a href="" title="">Coding</a></li>
-        <li><a href="" title="">Creative</a></li>
-        <li><a href="" title="">Translating</a></li>
-        <li><a href="" title="">Testing</a></li>
       </ul>
-    </div>
+    </section>
-  </section>
 
-  <section class="develop">
+    <section class="intro">
-    <div class="inner-wrap">
+      <div class="inner-wrap">
-      <h3>Development</h3>
+        <h3>Intro/Overview</h3>
-      <p>Like a bit of documentation but would prefer to jump in and make your mark on the blockchain? Perhaps add cats to it?</p>
+        <p>What if anyone in the world could publish a piece of digital content, anyone else in the world could access it, for free or for payment, and that entire system worked end-to-end without any centralized authority or point of control?</p>
 
-      <a class="cta" href="/api" title="">Learn the LBRY API</a>
+        <p>That's the idea behind LBRY. To create a market for accessing and publishing information that is global, decentralized, robust, optimal and complete.</p>
-    </div>
-  </section>
 
-  <section class="community">
+        <a class="cta" href="/overview">Learn more about our mission</a>
-    <div class="inner-wrap">
+      </div>
-      <h3>Community</h3>
+    </section>
-      <p>Hang out with us! We have a vibrant community of lbryians and would be <em>delighted</em> if you joined us.</p>
 
-      <ul>
+    <section class="docs">
-        <li><a href="//chat.lbry.io" title="">Discord</a></li>
+      <div class="inner-wrap">
-        <li><a href="//www.reddit.com/r/lbry" title="">Reddit</a></li>
+        <h3>Documentation</h3>
-        <!--/ <li><a href="//" title="">StackOverflow</a></li> /-->
+        <p>LBRY has enough moving parts to warrant comprehensive documentation. Whether you are interested in learning the technical details of our technology stack or you want to integrate LBRY into your life, you will find everything you need in our docs.</p>
-      </ul>
+
-    </div>
+        <a class="cta" href="/resources">Explore our documentation</a>
-  </section>
+      </div>
+    </section>
+
+    <div id="github-feed" class="github-feed"></div>
+
+    <section class="contribute">
+      <div class="inner-wrap">
+        <h3>Contribute</h3>
+        <p>Interested in progressing content freedom? Awesome! No matter your experience or skill level, <strong>you</strong> can make a difference.</p>
+
+        <ul>
+          <li><a href="" title="">Raising Issues</a></li>
+          <li><a href="" title="">Coding</a></li>
+          <li><a href="" title="">Creative</a></li>
+          <li><a href="" title="">Translating</a></li>
+          <li><a href="" title="">Testing</a></li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="develop">
+      <div class="inner-wrap">
+        <h3>Development</h3>
+        <p>Like a bit of documentation but would prefer to jump in and make your mark on the blockchain? Perhaps add cats to it?</p>
+
+        <a class="cta" href="/api" title="Learn the LBRY API">Learn the LBRY API</a>
+      </div>
+    </section>
+
+    <section class="community">
+      <div class="inner-wrap">
+        <h3>Community</h3>
+        <p>Hang out with us! We have a vibrant community of lbryians and would be <em>delighted</em> if you joined us.</p>
+
+        <ul>
+          <li><a href="//chat.lbry.io" title="LBRY on Discord">Discord</a></li>
+          <li><a href="//www.reddit.com/r/lbry" title="LBRY on Reddit">Reddit</a></li>
+        </ul>
+      </div>
+    </section>
+  </div>
 
   <script>
     $(function () {
@@ -110,7 +119,7 @@ const home = () => async (state, emit) => html`
           return;
         } else {
           console.log("Waiting for websocket connection to come online");
-          socketReady(socket,callback);
+          socketReady(socket, callback);
         }
       }, 5);
     };

views/partials/github-feed.js

@@ -1,197 +0,0 @@
-"use strict"; require("dotenv").config();
-
-
-
-//  P A C K A G E S
-
-const dedent = require("dedent");
-const html = require("choo-async/html");
-const local = require("app-root-path").require;
-const octokit = require("@octokit/rest")();
-const redis = require("redis");
-
-//  V A R I A B L E S
-
-if (typeof process.env.GITHUB_OAUTH_TOKEN !== "undefined") {
-  octokit.authenticate({
-    type: "oauth",
-    token: process.env.GITHUB_OAUTH_TOKEN
-  });
-}
-
-// const logSlackError = local("/helpers/slack");
-let client;
-
-// process.env.NODE_ENV === "development" ? "" : redisClient = redis.createClient(process.env.REDISCLOUD_URL);
-client = redis.createClient(process.env.REDISCLOUD_URL);
-
-client.on("error", err => { // eslint-disable-line
-  // console.log("Error", err); // logSlackError
-});
-
-
-
-//  P R O G R A M
-
-client.zrevrange("events", 0, 9, (err, reply) => {
-  if (err) return;
-
-  const events = [];
-  const renderedEvents = [];
-
-  reply.forEach(item => events.push(JSON.parse(item)));
-
-  for (const event of events) {
-    // console.log(event.type);
-
-    renderedEvents.push(`
-      <div class='github-feed__event'>
-        <a href="${generateGitHubUrl("actor", event)}" target="_blank" rel="noopener noreferrer">
-          <img src="${event.actor.avatar_url}" class="github-feed__event__avatar" alt=""/>
-        </a>
-
-        <p>
-          ${generateGitHubEvent(event)}
-          <a href="${generateGitHubUrl("repo", event)}" title="View this repo on GitHub" target="_blank" rel="noopener noreferrer"><strong>${event.repo.name}</strong></a>
-          <em class="github-feed__event__time">{{ event.created_at | moment('from') }}</em>
-        </p>
-      </div>
-    `);
-  }
-
-  resultIsAvailable(dedent`
-    <div id="github-feed" class="github-feed">
-      <h3>GitHub</h3>
-      <h5 class="last-updated" v-on:click="updateFeed">Last updated: {{ formatDate(lastUpdated) }}</h5>
-
-      ${renderedEvents.join("")}
-    </div>
-  `);
-});
-
-const gitHubFeed = function (err, stuff) {
-  return err;
-};
-
-
-
-function generateGitHubEvent(event) {
-  switch (event) {
-    case event.type === "CommitCommentEvent":
-      return `
-        <strong>${event.actor.display_login}</strong> commented on
-        <a href="${generateGitHubUrl("comment", event)}" title="View this comment on GitHub">commit</a> in
-      `;
-
-    case event.type === "CreateEvent":
-      return `
-        <strong>${event.actor.display_login}</strong> created
-        ${event.payload.ref_type} <code>${event.payload.ref}</code> in
-      `;
-
-    case event.type === "DeleteEvent":
-      return `
-        <strong>${event.actor.display_login}</strong> deleted
-        ${event.payload.ref_type} <code>${event.payload.ref}</code> in
-      `;
-
-    case event.type === "ForkEvent":
-      return `
-        <strong>${event.actor.display_login}</strong> forked
-        <strong><a href="${generateGitHubUrl("repo", event)}" title="View this repo on GitHub" target="_blank" rel="noopener noreferrer">${event.repo.name}</a></strong> to
-        <strong><a href="${generateGitHubUrl("forkee", event)}" title="View this repo fork on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.forkee.name}</a></strong> in
-      `;
-
-    case event.type === "IssueCommentEvent":
-      if (event.payload.issue.pull_request) {
-        return `
-          <strong>${event.actor.display_login}</strong> commented on pull request
-          <em><a href="${generateGitHubUrl("issue", event)}" title="View this comment on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.issue.title}</a></em> in
-        `;
-      } else {
-        return `
-          <strong>${event.actor.display_login}</strong> commented on issue
-          <em><a href="${generateGitHubUrl("issue", event)}" title="View this comment on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.issue.title}</a></em> in
-        `;
-      }
-
-    case event.type === "IssuesEvent":
-      return `
-        <strong>${event.actor.display_login}</strong> ${event.payload.action} issue
-        <em><a href="${generateGitHubUrl("issue", event)}" title="View this issue on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.issue.title}</a></em> in
-      `;
-
-    case event.type === "PullRequestEvent":
-      return `
-        <strong>${event.actor.display_login}</strong> ${event.payload.action} pull request
-        <em><a href="${generateGitHubUrl("pull_request", event)}" title="View this pull request on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.pull_request.title}</a></em> in
-      `;
-
-    case event.type === "PullRequestReviewCommentEvent":
-      return `
-        <strong>${event.actor.display_login}</strong> commented on pull request
-        <em><a href="${generateGitHubUrl("pull_request", event)}" title="View this comment on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.pull_request.title}</a></em> in
-      `;
-
-    case event.type === "PushEvent":
-      return `
-        <strong>${event.actor.display_login}</strong> pushed to
-        <code><a href="${generateGitHubUrl("push", event)}" title="View this branch on GitHub" target="_blank" rel="noopener noreferrer">${refToBranch(event.payload.ref)}</a></code> in
-      `;
-
-    case event.type === "ReleaseEvent":
-      return `
-        <strong>${event.actor.display_login}</strong> released
-        <em><a href="${generateGitHubUrl("release", event)}" title="View this release on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.release.tag_name}</a></em> in
-      `;
-
-    case event.type === "WatchEvent":
-      return `
-        <strong>${event.actor.display_login}</strong> starred the repo
-      `;
-
-    default:
-      break;
-  }
-}
-
-function generateGitHubUrl(type, event) {
-  switch (type) {
-    case "actor":
-      return `https://github.com/${event.actor.display_login}`;
-
-    case "comment":
-      return event.payload.comment.html_url;
-
-    case "repo":
-      return `https://github.com/${event.repo.name}`;
-
-    case "forkee":
-      return `https://github.com/${event.payload.forkee.full_name}`;
-
-    case "issue":
-      return event.payload.issue.html_url;
-
-    case "pull_request":
-      return event.payload.pull_request.html_url;
-
-    case "release":
-      return event.payload.release.html_url;
-
-    case "push":
-      return `https://github.com/${event.repo.name}/tree/${event.payload.ref.replace("refs/heads/", "")}`;
-
-    default:
-      break;
-  }
-}
-
-function refToBranch(ref) {
-  return ref.replace("refs/heads/", "");
-}
-
-
-
-//  E X P O R T
-
-module.exports = exports = gitHubFeed;

views/partials/head.js

@@ -43,13 +43,8 @@ function head () {
     html`<link rel="stylesheet" href="/assets/css/style.css"/>`,
 
     html`<script src="/assets/scripts/vendor/zepto.js"></script>`,
-    html`
+    html`<script>const ws = new WebSocket(location.origin.replace(/^http/, "ws"));</script>`,
-      <script>
+    html`<script src="/assets/scripts/sockets.js"></script>`
-        const host = location.origin.replace(/^http/, "ws");
-        const ws = new WebSocket(host);
-        ws.onmessage = msg => console.log(msg.data);
-      </script>
-    `
   ]}`;
 }