miku now has her own website! OwO

shidoitsuka · Dec 1, 2019 · 59da46c · 59da46c
1 parent 2863288
commit 59da46c
Show file tree

Hide file tree

Showing 7 changed files with 400 additions and 31 deletions.
diff --git a/index.js b/index.js
@@ -1,30 +1,2 @@
-const Discord = require("discord.js");
-const bot = new Discord.Client({
-  partials: ["MESSAGE", "CHANNEL", "REACTION"]
-});
-const fs = require("fs");
-const Enmap = require("enmap");
-const chalk = require("chalk");
-const walker = require("walker");
-require("./util/eventLoader.js")(bot);
-require("./modules/function.js")(bot);
-bot.config = require("./config.js").config;
-bot.commands = new Enmap();
-bot.aliases = new Enmap();
-bot.cdTime = new Enmap();
-bot.commandsConf = new Enmap();
-
-// INITIALIZATION
-const init = async () => {
-  const folder = walker(`./commands/`).on("file", file => {
-    if (!file.endsWith(".js")) return;
-    let response = bot.loadCommand(file);
-    if (response) console.log(response);
-  });
-};
-
-// CLEAN USER COOLDOWNS
-const talkedRecently = {};
-writeFile("./assets/cooldowns", talkedRecently);
-init();
-bot.login(bot.config.token);
+require("./miku.js")();
+require("./site.js")();
diff --git a/miku.js b/miku.js
@@ -0,0 +1,32 @@
+module.exports = () => {
+  const Discord = require("discord.js");
+  const bot = new Discord.Client({
+    partials: ["MESSAGE", "CHANNEL", "REACTION"]
+  });
+  const fs = require("fs");
+  const Enmap = require("enmap");
+  const chalk = require("chalk");
+  const walker = require("walker");
+  require("./util/eventLoader.js")(bot);
+  require("./modules/function.js")(bot);
+  bot.config = require("./config.js").config;
+  bot.commands = new Enmap();
+  bot.aliases = new Enmap();
+  bot.cdTime = new Enmap();
+  bot.commandsConf = new Enmap();
+
+  // INITIALIZATION
+  const init = async () => {
+    const folder = walker(`./commands/`).on("file", file => {
+      if (!file.endsWith(".js")) return;
+      let response = bot.loadCommand(file);
+      if (response) console.log(response);
+    });
+  };
+
+  // CLEAN USER COOLDOWNS
+  const talkedRecently = {};
+  writeFile("./assets/cooldowns", talkedRecently);
+  init();
+  bot.login(bot.config.token);
+};
diff --git a/package.json b/package.json
@@ -17,10 +17,12 @@
     "discord.js": "discordjs/discord.js",
     "dog-names": "^2.0.0",
     "enmap": "^5.2.1",
+    "express": "^4.17.1",
     "fs-nextra": "^0.4.5",
     "gfycat-sdk": "^1.4.18",
     "google-images": "^2.1.0",
     "google-spreadsheet": "^2.0.8",
+    "hbs": "^4.0.6",
     "mathjs": "^6.2.3",
     "mongodb": "^3.3.4",
     "nekos.life": "^2.0.4",
@@ -38,4 +40,4 @@
     "url": "https://github.com/shidoitsuka/another-miku-bot/issues"
   },
   "homepage": "https://github.com/shidoitsuka/another-miku-bot#readme"
-}
+}
diff --git a/site.js b/site.js
@@ -0,0 +1,26 @@
+module.exports = () => {
+  const express = require("express");
+  const app = express();
+  const path = require("path");
+  const hbs = require("hbs");
+  const { readdirSync } = require("fs");
+
+  app.use(express.static(path.join(__dirname, "views")));
+  app.set("view engine", "hbs");
+  app.get("/", (request, response) => {
+    let command = {};
+    readdirSync("./commands")
+      .filter(folders => folders !== "Owner")
+      .map(folders => {
+        command[folders] = {};
+        readdirSync(`./commands/${folders}`).map(files => {
+          command[folders][
+            files.replace(".js", "")
+          ] = require(`./commands/${folders}/${files}`);
+        });
+      });
+    response.render("index", { data: { command } });
+  });
+
+  app.listen(3000, console.log("site is ready"));
+};
diff --git a/views/css/user.css b/views/css/user.css
@@ -0,0 +1,117 @@
+.hidden {
+  display: none;
+}
+
+.tooltip {
+  position: relative;
+  padding-right: 1rem;
+}
+
+.tooltip i.fa {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 1rem;
+  filter: #d8eef0;
+}
+
+.tooltipped {
+  cursor: help;
+  border-bottom: 2px solid #a14858;
+}
+
+.ohidden {
+  opacity: 0;
+}
+
+nav {
+  position: fixed;
+  display: none;
+  background-color: #f5f5f5;
+  z-index: 1;
+}
+
+nav a {
+  color: #707070 !important;
+}
+
+.canvas-header h1 {
+  text-align: center;
+  font-size: 5rem;
+  position: relative;
+  top: 40%;
+  font-family: "Indie Flower";
+  font-size: 15vh;
+}
+
+.canvas-header img {
+  filter: brightness(30%);
+  height: 250%;
+}
+
+.header {
+  border-bottom: 2px solid;
+}
+
+h2.header {
+  font-family: "Caveat";
+}
+
+.commands table tr td,
+.commands table tr th {
+  color: #236870;
+}
+
+.commands table {
+  margin-bottom: 2vh;
+}
+
+.more-feature tr td {
+  color: #424242;
+}
+
+.more h1 {
+  text-align: center;
+  position: relative;
+  top: 30%;
+}
+
+.required {
+  background-color: #2c656b;
+  color: #59d1de;
+  border-radius: 3px;
+  margin: 2px;
+}
+
+.optional {
+  background-color: #59d1de;
+  color: #2c656b;
+  border-radius: 3px;
+  margin: 2px;
+}
+
+.more img {
+  height: 150%;
+  width: 50%;
+  filter: brightness(50%);
+}
+
+* {
+  color: #1a9ca8;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: "Patrick Hand";
+  font-size: 1.3rem !important;
+}
+
+html {
+  font-size: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.page-footer {
+  background-color: #e6e6e6;
+}
diff --git a/views/index.hbs b/views/index.hbs
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="HandheldFriendly" content="true" />
+  <!-- fonts -->
+  <link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Caveat&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Patrick+Hand&display=swap" rel="stylesheet" />
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
+  <!-- !fonts -->
+  <title>Miku Bot</title>
+  <!-- libs -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/typeit.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+
+  <!-- !libs -->
+  <!-- user-defined -->
+  <script src="js/user.js" charset="utf-8"></script>
+  <link rel="stylesheet" href="css/user.css" />
+  <!-- !user-defined -->
+</head>
+
+<body>
+  <!-- header -->
+  <div class="canvas-header">
+    <nav>
+      <div class="nav-wrapper">
+        <a href="#" class="brand-logo center">Miku</a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down">
+          <li><a href="#about">About</a></li>
+          <li><a href="#commands">Commands</a></li>
+          <li><a href="#more">Additional Features!</a></li>
+          <li><a href="#">Invite!</a></li>
+        </ul>
+      </div>
+    </nav>
+    <!-- header image -->
+    <div class="parallax-container header-image">
+      <h1 id="typewriting"></h1>
+      <div class="parallax"><img src="https://cdn.glitch.com/66028ce3-d8f3-4656-aee3-c294c177ba0c%2F1.png?v=1574709973716" /></div>
+    </div>
+    <!-- !header image -->
+  </div>
+  <!-- !header -->
+
+  <div class="body">
+    <!-- about -->
+    <div class="section white" id="about">
+      <div class="row container">
+        <h2 class="header ohidden">About</h2>
+        <p class="grey-text text-darken-3 lighten-3 ohidden">
+          Miku is a <i>just4fun</i> bot made by <i>12042#5754</i> with all
+          of his <b>♡</b>!
+        </p>
+      </div>
+    </div>
+    <!-- !about -->
+
+    <!-- 2nd image -->
+    <div class="parallax-container">
+      <div class="parallax"><img src="https://cdn.glitch.com/66028ce3-d8f3-4656-aee3-c294c177ba0c%2F3.png?v=1574710050745" /></div>
+    </div>
+    <!-- !2nd image -->
+    <!-- commands -->
+    <div class="section white" id="commands">
+      <div class="row container">
+        <h2 class="header ohidden">Available Commands</h2>
+        <ul class="collapsible ohidden">
+          {{#each data.command}}
+            <li>
+              <div class="collapsible-header">{{@key}}</div>
+              <div class="collapsible-body commands">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Name</th>
+                      <th>Description</th>
+                      <th>Usage</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {{#each this}}
+                      <tr>
+                        <td>{{this.help.name}}</td>
+                        <td>{{this.help.description}}</td>
+                        <td>{{this.help.usage}}</td>
+                      </tr>
+                    {{/each}}
+                  </tbody>
+                </table>
+              </div>
+            </li>
+          {{/each}}
+        </ul>
+      </div>
+    </div>
+    <!-- !commands -->
+
+    <!-- 3rd image -->
+    <div class="parallax-container more">
+      <h1>🌟🌟🌟</h1>
+      <div class="parallax"><img src="https://cdn.glitch.com/66028ce3-d8f3-4656-aee3-c294c177ba0c%2F4.png?v=1574710040425" /></div>
+    </div>
+    <!-- !3rd image -->
+
+    <!-- more features -->
+    <div class="section white" id="more">
+      <div class="row container">
+        <h2 class="header ohidden">More Features!</h2>
+        <p class="grey-text text-darken-3 lighten-3 ohidden">
+          Miku also comes with few more feature includings :
+        </p>
+        <table class="more-feature ohidden">
+          <tr>
+            <td>Greeting system</td>
+            <td>:</td>
+            <td>Miku will greet new members</td>
+          </tr>
+          <tr>
+            <td>Custom prefix system</td>
+            <td>:</td>
+            <td>Tired of using default prefix? Change it!</td>
+          </tr>
+          <tr>
+            <td>Starboard system</td>
+            <td>:</td>
+            <td>
+              Everytime a message has more than 3 stars, Miku will send it
+              to your server's starboard channel! ⭐⭐⭐
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
+    <!-- !more features -->
+
+    <footer class="page-footer">
+      <div class="container">
+        <div class="row">
+          <div class="col l6 s12">
+            <h5 class="grey-text text-darken-4">Lorem Ipsum</h5>
+            <hr>
+            <p class="grey-text text-darken-2">Lorem ipsum dolor sit amet, what should I type here?</p>
+          </div>
+          <div class="col l4 offset-l2 s12">
+            <h5 class="grey-text text-darken-4">Useful Links</h5>
+            <hr>
+            <p class="grey-text text-darken-2">No links yet!</p>
+          </div>
+        </div>
+      </div>
+      <div class="footer-copyright">
+        <div class="container center">
+          <span class="grey-text text-darken-1">standinshd</span>
+        </div>
+      </div>
+    </footer>
+  </div>
+</body>
+
+</html>