Replace bulma with tailwindcss because bulma is trash

bot/src/commands/forums_news_checker.ts

@@ -14,7 +14,7 @@ import { CommandSet, Command } from "src/model/command";
 const PREVIEW_CHAR_LIMIT = 300;
 const NEWS_POST_VERIFY_CHANNEL = "newsPostVerify";
 const NEWS_FEED_CHANNEL = "newsFeed";
-const RSS_UPDATE_INTERVAL_MIN = 5;
+const RSS_UPDATE_INTERVAL_MIN = process.env.NODE_ENV == "dev" ? 60 : 5;
 const NEWS_FORUM_ID = 49;
 
 @CommandSet

bot/src/commands/news_aggregator.ts

@@ -15,7 +15,7 @@ import { v3beta1 } from "@google-cloud/translate";
 import { CommandSet } from "src/model/command";
 const { TranslationServiceClient } = v3beta1;
 
-const UPDATE_INTERVAL = 5;
+const UPDATE_INTERVAL = process.env.NODE_ENV == "dev" ? 60 : 5;
 const MAX_PREVIEW_LENGTH = 300;
 const AGGREGATOR_MANAGER_CHANNEL = "aggregatorManager";
 const FORUMS_STAGING_ID = 54;

bot/src/rpc_service.ts

@@ -24,7 +24,7 @@ class BackendImpl implements Backend {
         }
 
         if(!member || !(await isAuthorisedAsync(member)))
-            return undefined;
+            throw new Error("User not authorised!");
 
         return <UserInfo>{
             userId: member.user.id,

web/package.json

@@ -29,9 +29,12 @@
     "node-fetch": "^2.6.0",
     "pg": "^7.11.0",
     "polka": "^0.5.0",
+    "postcss-import": "^12.0.1",
+    "postcss-nested": "^4.1.2",
     "request": "^2.88.0",
     "request-promise-native": "^1.0.7",
     "sirv": "^0.4.0",
+    "tailwindcss": "^1.1.2",
     "typeorm": "^0.2.18",
     "typescript-rest-rpc": "^1.0.10"
   },

web/rollup.config.js

@@ -18,15 +18,19 @@ const dedupe = importee => importee === 'svelte' || importee.startsWith('svelte/
 
 
 const preprocessOptions = {
+	scss: false,
 	transformers: {
-		scss: {
-			includePaths: [
-				'node_modules',
-				'src'
-			]
-		},
+		// scss: {
+		// 	includePaths: [
+		// 		'node_modules',
+		// 		'src'
+		// 	]
+		// },
 		postcss: {
 			plugins: [
+				require('postcss-import'),
+				require('tailwindcss'),
+				require('postcss-nested'),
 				require('autoprefixer'),
 			]
 		}

web/src/routes/_layout.svelte

@@ -1,14 +1,14 @@
 <script context="module">
 	export async function preload(page, session) {
 		const { user } = session;
-		if(!session.user && page.path != "/login")
+		if(!session.user && !page.path.startsWith("/login"))
 			return this.redirect(302, "login");
 		return { user };
 	}
 </script>
 
-<style global lang="scss">
-	@import "style/main.scss";
+<style global lang="css">
+	@import "../style/main.css";
 </style>
 
 <main>

web/src/routes/login/discord/callback.ts

@@ -37,15 +37,16 @@ export async function get(req : Request, res : Response, next: NextFunction) {
     });
 
     let discordUser : DiscordUser = JSON.parse(userInfoResponse.body);
-    let userInfo = await botService.getModeratorUserInfo({id: discordUser.id});
 
-    if(!userInfo){
+    try {
+        let userInfo = await botService.getModeratorUserInfo({id: discordUser.id});
+        req.session.user = userInfo;
+        res.redirect(`${process.env.ADMIN_URL}/`);
+    } catch(e) {
+        console.log(`Failed to authorise user because: ${e}`);
         res.redirect(`${process.env.ADMIN_URL}/login/?error=invalid_user`);
         return;
     }
-
-    req.session.user = userInfo;
-    res.redirect(`${process.env.ADMIN_URL}/`);
 };
 
 interface AuthResponse {

web/src/routes/login/index.svelte

@@ -1,31 +1,43 @@
 <script context="module">
-    export async function preload(page, session) {
-        const {host, path, params, query} = page;
-        const { user } = session;
-        if(user)
-            return this.redirect(300, "dashboard");
-        if(query.error) {
-            return {
-                errors: error.split(",")
-            }
-        }
-    }
+  export async function preload(page, session) {
+    const { host, path, params, query } = page;
+    const { user } = session;
+    if (user) return this.redirect(300, "dashboard");
+    if (query.error) return { errors: query.error.split(",") };
+  }
 </script>
 
-<style lang="scss">
-  #login-box {
-    height: 100vh;
-    align-items: center;
-  }
+<script>
+  const errorTexts = {
+    invalid_user: "The username is invalid!"
+  };
 
-  #login-form {
-    border-radius: 3px;
+  export let errors;
+</script>
+
+<style lang="css">
+  .shadow-big {
     box-shadow: 3px 3px 10px -1px rgba(0, 0, 0, 0.75);
   }
 
-  .discord-bg {
-    background-color: #7289da;
-    border: none;
+  .login-box {
+    @apply .flex .flex-col .w-screen .h-screen .justify-center .items-center;
+  }
+
+  .box-item {
+    @apply .w-1/4 .p-2 .rounded .shadow-big;
+  }
+
+  .login-button-list {
+    @apply .flex .justify-center .m-2;
+  }
+
+  .discord-button {
+    @apply .p-2 .bg-indigo-700 .rounded-sm;
+
+    &:hover {
+      @apply .bg-indigo-600;
+    }
   }
 </style>
 
@@ -33,20 +45,21 @@
   <title>Login</title>
 </svelte:head>
 
-<div class="content">
-  <div id="login-box" class="columns">
-    <div id="login-form" class="column is-offset-4 is-4 has-background-black">
-      <h1 class="has-text-centered">NoctBot panel</h1>
-      <div class="columns is-mobile is-centered">
-        <div class="column is-narrow">
-          <a class="button discord-bg" href="/login/discord/do">
-            <span class="icon">
-              <i class="fab fa-discord" />
-            </span>
-            <span>Login with Discord</span>
-          </a>
-        </div>
-      </div>
+<div class="login-box">
+  {#if errors}
+    {#each errors as errorId}
+      <div class="bg-red-800 box-item mb-2">{errorTexts[errorId]}</div>
+    {/each}
+  {/if}
+  <div class="bg-black box-item shadow-big text-center">
+    <h1 class="text-4xl">NoctBot Login</h1>
+    <div class="login-button-list">
+      <a class="discord-button" href="/login/discord/do">
+        <span class="icon">
+          <i class="fab fa-discord" />
+        </span>
+        <span>Login with Discord</span>
+      </a>
     </div>
   </div>
-</div>
+</div>

web/src/style/main.css

@@ -0,0 +1,7 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+body {
+    @apply .bg-gray-900 .text-white;
+}

web/src/style/main.scss

@@ -1,3 +0,0 @@
-@import "variables";
-@import "bulma/bulma.sass";
-@import "overrides";

web/src/style/overrides.scss

@@ -1,299 +0,0 @@
-@if $bulmaswatch-import-font {
-    @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic);
-}
-
-hr {
-  height: $border-width;
-}
-
-h6 {
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.hero {
-  background-color: $grey-dark;
-}
-
-a {
-  transition: all 200ms ease;
-}
-
-.button {
-  transition: all 200ms ease;
-  border-width: $border-width;
-  color: $white;
-
-  &.is-active,
-  &.is-focused,
-  &:active,
-  &:focus {
-    box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.5);
-  }
-  @each $name, $pair in $colors {
-    $color: nth($pair, 1);
-    $color-invert: nth($pair, 2);
-
-    &.is-#{$name} {
-      &.is-hovered,
-      &:hover {
-        background-color: lighten($color, 7.5%);
-      }
-
-      &.is-active,
-      &.is-focused,
-      &:active,
-      &:focus {
-        border-color: $color;
-        box-shadow: 0 0 0 2px rgba($color, 0.5);
-      }
-    }
-  }
-}
-
-.label {
-  color: $grey-lighter;
-}
-
-.button,
-.control.has-icons-left .icon,
-.control.has-icons-right .icon,
-.input,
-.pagination-ellipsis,
-.pagination-link,
-.pagination-next,
-.pagination-previous,
-.select,
-.select select,
-.textarea {
-  height: 2.5em;
-}
-
-.input,
-.textarea {
-  transition: all 200ms ease;
-  box-shadow: none;
-  border-width: $border-width;
-  padding-left: 1em;
-  padding-right: 1em;
-}
-
-.select {
-  &:after,
-  select {
-    border-width: $border-width;
-  }
-}
-
-.control {
-  &.has-addons {
-    .button,
-    .input,
-    .select {
-      margin-right: -$border-width;
-    }
-  }
-}
-
-.notification {
-  background-color: $grey-dark;
-}
-
-.card {
-  $card-border-color: lighten($grey-darker, 5);
-  box-shadow: none;
-  border: $border-width solid $card-border-color;
-  background-color: $grey-darker;
-  border-radius: $radius;
-
-  .card-image {
-    img {
-      border-radius: $radius $radius 0 0;
-    }
-  }
-
-  .card-header {
-    box-shadow: none;
-    background-color: rgba($black-bis, 0.2);
-    border-radius: $radius $radius 0 0;
-  }
-
-  .card-footer {
-    background-color: rgba($black-bis, 0.2);
-  }
-
-  .card-footer,
-  .card-footer-item {
-    border-width: $border-width;
-    border-color: $card-border-color;
-  }
-}
-
-.notification {
-  @each $name, $pair in $colors {
-    $color: nth($pair, 1);
-    $color-invert: nth($pair, 2);
-
-    &.is-#{$name} {
-      a:not(.button) {
-        color: $color-invert;
-        text-decoration: underline;
-      }
-    }
-  }
-}
-
-.tag {
-  border-radius: $radius;
-}
-
-.menu-list {
-  a {
-    transition: all 300ms ease;
-  }
-}
-
-.modal-card-body {
-  background-color: $grey-darker;
-}
-
-.modal-card-foot,
-.modal-card-head {
-  border-color: $grey-dark;
-}
-
-.message-header {
-  font-weight: $weight-bold;
-  background-color: $grey-dark;
-  color: $white;
-}
-
-.message-body {
-  border-width: $border-width;
-  border-color: $grey-dark;
-}
-
-.navbar {
-  border-radius: $radius;
-
-  &.is-transparent {
-    background: none;
-  }
-
-  &.is-primary {
-    .navbar-dropdown {
-      a.navbar-item.is-active {
-        background-color: $link;
-      }
-    }
-  }
-
-  @include touch {
-    .navbar-menu {
-      background-color: $navbar-background-color;
-      border-radius: 0 0 $radius $radius;
-    }
-  }
-}
-
-.hero .navbar,
-body > .navbar {
-  border-radius: 0;
-}
-
-.pagination-link,
-.pagination-next,
-.pagination-previous {
-  border-width: $border-width;
-}
-
-.panel-block,
-.panel-heading,
-.panel-tabs {
-  border-width: $border-width;
-
-  &:first-child {
-    border-top-width: $border-width;
-  }
-}
-
-.panel-heading {
-  font-weight: $weight-bold;
-}
-
-.panel-tabs {
-  a {
-    border-width: $border-width;
-    margin-bottom: -$border-width;
-
-    &.is-active {
-      border-bottom-color: $link-active;
-    }
-  }
-}
-
-.panel-block {
-  &:hover {
-    color: $link-hover;
-
-    .panel-icon {
-      color: $link-hover;
-    }
-  }
-
-  &.is-active {
-    .panel-icon {
-      color: $link-active;
-    }
-  }
-}
-
-.tabs {
-  a {
-    border-bottom-width: $border-width;
-    margin-bottom: -$border-width;
-  }
-
-  ul {
-    border-bottom-width: $border-width;
-  }
-
-  &.is-boxed {
-    a {
-      border-width: $border-width;
-    }
-
-    li.is-active a {
-      background-color: darken($grey-darker, 4);
-    }
-  }
-
-  &.is-toggle {
-    li a {
-      border-width: $border-width;
-      margin-bottom: 0;
-    }
-
-    li + li {
-      margin-left: -$border-width;
-    }
-  }
-}
-
-.hero {
-  // Colors
-  @each $name, $pair in $colors {
-    $color: nth($pair, 1);
-    $color-invert: nth($pair, 2);
-
-    &.is-#{$name} {
-      .navbar {
-        .navbar-dropdown {
-          .navbar-item:hover {
-            background-color: $navbar-dropdown-item-hover-background-color;
-          }
-        }
-      }
-    }
-  }
-}

web/src/style/variables.scss

@@ -1,105 +0,0 @@
-////////////////////////////////////////////////
-// DARKLY
-////////////////////////////////////////////////
-$grey-lighter: #dbdee0;
-$grey-light:   #8c9b9d;
-$grey:         darken($grey-light, 18);
-$grey-dark:    darken($grey, 18);
-$grey-darker:  darken($grey, 23);
-
-$orange: #e67e22;
-$yellow: #f1b70e;
-$green: #2ecc71;
-$turquoise: #1abc9c;
-$blue: #3498db;
-$purple: #8e44ad;
-$red: #e74c3c;
-$white-ter: #ecf0f1;
-$primary: #375a7f !default;
-$yellow-invert: #fff;
-
-$family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace;
-
-$radius-small: 3px;
-$radius: .4em;
-$radius-large: 8px;
-$size-6: 15px;
-$size-7: .85em;
-$title-weight: 500;
-$subtitle-weight: 400;
-$subtitle-color: $grey-dark;
-
-$border-width: 2px;
-$border: $grey;
-
-$body-background-color: darken($grey-darker, 4);
-$body-size: 15px;
-
-$background: $grey-darker;
-$footer-background-color: $background;
-$button-background-color: $background;
-$button-border-color: lighten($button-background-color, 15);
-
-$title-color: #fff;
-$subtitle-color: $grey-light;
-$subtitle-strong-color: $grey-light;
-
-$text: #fff;
-$text-light: lighten($text, 10);
-$text-strong: darken($text, 5);
-
-$box-color: $text;
-$box-background-color: $grey-dark;
-$box-shadow: none;
-
-$link: $turquoise;
-$link-hover: lighten($link, 5);
-$link-focus: darken($link, 5);
-$link-active: darken($link, 5);
-$link-focus-border: $grey-light;
-
-$button-color: $primary;
-$button-hover-color: darken($text, 5); // text-dark
-$button-focus: darken($text, 5); // text-dark
-$button-active-color: darken($text, 5); // text-dark
-$button-disabled-background-color: $grey-light;
-
-$input-hover-color: $grey-light;
-$input-disabled-background-color: $grey-light;
-$input-disabled-border: $grey-lighter;
-
-$table-color: $text;
-$table-head: $grey-lighter;
-$table-background-color: $grey-dark;
-$table-cell-border: 1px solid $grey;
-
-$table-row-hover-background-color: $grey-darker;
-$table-striped-row-even-background-color: $grey-darker;
-$table-striped-row-even-hover-background-color: lighten($grey-darker, 2);
-
-$pagination-color: $link;
-$pagination-border-color: $border;
-
-$navbar-height: 4rem;
-
-$navbar-background-color: $primary;
-$navbar-item-color: $text;
-$navbar-item-hover-color: $link;
-$navbar-item-hover-background-color: transparent;
-$navbar-item-active-color: $link;
-$navbar-dropdown-arrow: #fff;
-$navbar-divider-background-color: rgba(0, 0, 0, 0.2);
-$navbar-dropdown-border-top: 1px solid $navbar-divider-background-color;
-$navbar-dropdown-background-color: $primary;
-$navbar-dropdown-item-hover-color: $grey-lighter;
-$navbar-dropdown-item-hover-background-color: transparent;
-$navbar-dropdown-item-active-background-color: transparent;
-$navbar-dropdown-item-active-color: $link;
-
-$dropdown-content-background-color: $background;
-$dropdown-item-color: $text;
-
-$progress-value-background-color: $grey-lighter;
-
-$bulmaswatch-import-font: true !default;

web/tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  theme: {
+    extend: {}
+  },
+  variants: {},
+  plugins: []
+}