feat(web): add nice-looking landing page with bot stats

Made with <3 & Bulma for Discord
YappyBots · Apr 17, 2017 · 8534bab · 8534bab
1 parent 7dd535a
commit 8534bab
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 1 deletion.
diff --git a/lib/Discord/index.js b/lib/Discord/index.js
@@ -46,7 +46,7 @@ bot.on('ready', () => {
   Log.info('Bot | Logged In');
   ChannelConfig.init(bot);
 });
-bot.on('disconnect', () => Log.warn('Bot | Disconnected. Reconnecting...'));
+bot.on('disconnect', code => Log.warn(`Bot | Disconnected (${code}).`));
 bot.on('error', Log.error);
 bot.on('warn', Log.warn);
 

diff --git a/lib/Web.js b/lib/Web.js
@@ -7,11 +7,27 @@ const bot = require('./Discord');
 const app = express();
 const port = process.env.YAPPY_GITLAB_PORT || process.env.OPENSHIFT_NODEJS_PORT || process.env.PORT || 8080;
 const ip = process.env.YAPPY_GITLAB_IP || process.env.OPENSHIFT_NODEJS_IP || process.env.IP || null;
+const Views = {
+  '/': 'index',
+};
+const statuses = ['Online', 'Connecting', 'Reconnecting', 'Idle', 'Nearly', 'Offline'];
+
+app.set('view engine', 'hbs');
 
 app.use(bodyParser.json({
   limit: '250kb',
 }));
 
+app.get('/*', (req, res, next) => {
+  if (Views[req.path]) {
+    const repos = new Set(ChannelConfig._data.reduce((a, b) => a.concat(b.repos), []));
+    const status = statuses[bot.status];
+    return res.render(Views[req.path], { bot, repos, status });
+  }
+
+  next();
+});
+
 app.post(['/', '/gitlab'], (req, res) => {
   const event = req.headers['x-gitlab-event'];
   const eventName = event.replace(` Hook`, '').replace(/ /g, '_').toLowerCase();

diff --git a/views/index.hbs b/views/index.hbs
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Yappy, the GitLab Monitor</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.min.css">
+  <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/dansup/bulma-templates/master/css/landing.css">
+  <style>
+  html {
+    overflow-y: auto !important;
+  }
+  .hero.is-dark {
+    background: linear-gradient(rgba(25, 181, 254, 0.6),rgba(246, 36, 89, 0.6)),linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6));
+  }
+  .nav-left.title {
+    font-size: 30px;
+    padding-top: 15px;
+    margin-bottom: 0;
+  }
+  .description {
+    width: 96%;
+  }
+  </style>
+</head>
+<body>
+  <section class="hero is-fullheight is-dark">
+    <div class="hero-head">
+      <div class="container">
+        <nav class="nav">
+          <div class="container">
+            <div class="nav-left title">
+              Yappy, the Gitlab Monitor
+            </div>
+            <div class="nav-right nav-menu">
+              <span class="nav-item">
+                {{status}}
+              </span>
+              <span class="nav-item"></span>
+              <span class="nav-item">
+                <a class="button is-default" href="https://discordapp.com/oauth2/authorize?permissions=67193856&scope=bot&client_id=303661490114789391">
+                  Invite
+                </a>
+              </span>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </div>
+
+    <div class="hero-body">
+      <div class="container has-text-centered">
+        <div class="columns is-vcentered">
+          <div class="column is-5">
+            <figure class="image is-4by3">
+              <img src="http://placehold.it/375x300" class="promo-img" alt="Yappy Gitlab Screenshot">
+            </figure>
+          </div>
+          <div class="column is-6 is-offset-1">
+            <h1 class="title is-2">
+              Introducing Yappy, the GitLab Monitor
+            </h1>
+            <br>
+            <h2 class="subtitle is-4 description">
+              It's time to say hello to Gitlab repo events right in your Discord server. <br>
+              Simply set up webhooks to a server, init repo in channel, and you're good-to-go!
+            </h2>
+            <br>
+            <div class="columns stats">
+              <div class="column">
+                <p>
+                  <strong>Guilds</strong><br>
+                  {{bot.guilds.size}}
+                </p>
+              </div>
+              <div class="column">
+                <p>
+                  <strong>Channels</strong><br>
+                  {{bot.channels.size}}
+                </p>
+              </div>
+              <div class="column">
+                <p>
+                  <strong>Users</strong><br>
+                  {{bot.users.size}}
+                </p>
+              </div>
+              <div class="column">
+                <p>
+                  <strong>Repos</strong><br>
+                  {{repos.size}}
+                </p>
+              </div>
+            </div>
+            <br>
+            <a class="button is-large is-success is-outlined" href="https://discordapp.com/oauth2/authorize?permissions=67193856&scope=bot&client_id=303661490114789391">
+              Add Yappy GitLab
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="hero-foot">
+      <div class="container">
+        <div class="tabs is-centered">
+          <ul>
+            <li><a>Copyright 2017 Yappy</a></li>
+            <li><a href="http://bulma.io">Made with Bulma</a></li>
+            <li><a href="http://discordapp.com">Made for Discord</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+</body>
+</html>