Merge branch 'edge'

FoxxMD · FoxxMD · commit dac6541e28e8 · 2021-11-01T16:12:43.000-04:00
diff --git a/Dockerfile b/Dockerfile
@@ -1,14 +1,10 @@
-FROM node:16-alpine3.12
+FROM node:16-alpine3.14
 
 ENV TZ=Etc/GMT
 
-RUN apk update
-
-# required dependencies in order to compile linux-musl (node-canvas) on alpine
-# https://github.com/node-gfx/node-canvas-prebuilt/issues/77#issuecomment-884365161
-RUN apk add --no-cache build-base g++ cairo-dev jpeg-dev pango-dev giflib-dev
-# required dependencies in order to compile linux-musl (node-canvas) on alpine
-RUN apk add --update --repository http://dl-3.alpinelinux.org/alpine/edge/testing libmount ttf-dejavu ttf-droid ttf-freefont ttf-liberation ttf-ubuntu-font-family fontconfig vips
+# vips required to run sharp library for image comparison
+RUN echo "http://dl-4.alpinelinux.org/alpine/v3.14/community" >> /etc/apk/repositories \
+    && apk --update add vips
 
 RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
 
@@ -17,9 +13,7 @@ WORKDIR /usr/app
 COPY package*.json ./
 COPY tsconfig.json .
 
-# no prebuild support for node-canvas on alpine so need to compile
-# https://github.com/Automattic/node-canvas#compiling
-RUN npm install --build-from-source
+RUN npm install
 
 ADD . /usr/app
 
diff --git a/src/Web/assets/public/app.css b/src/Web/assets/public/app.css
@@ -4,18 +4,14 @@ a {
 
 .loading {
     height: 35px;
-    fill: black;
+    fill: white;
     display: none;
 }
 
 .connected .loading {
     display: inline;
 }
 
-.dark .loading {
-    fill: white;
-}
-
 .sub {
     display: none;
 }
@@ -91,3 +87,19 @@ a {
     pointer-events: initial;
     text-decoration: initial;
 }
+
+.blue {
+    color: rgb(97, 175, 239)
+}
+.red {
+    color: rgb(255 123 133);
+}
+.green {
+    color: rgb(170 255 109);
+}
+.purple {
+    color: rgb(224 124 253);
+}
+.yellow {
+    color: rgb(253 198 94);
+}
diff --git a/src/Web/assets/public/questionsymbol.svg b/src/Web/assets/public/questionsymbol.svg
@@ -0,0 +1,10 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <symbol id="q" viewBox="0 0 24 24">
+            <path stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </symbol>
+    </defs>
+</svg>
diff --git a/src/Web/assets/public/tailwind.min.css b/src/Web/assets/public/tailwind.min.css
diff --git a/src/Web/assets/views/callback.ejs b/src/Web/assets/views/callback.ejs
@@ -1,12 +1,11 @@
-<html>
+<html lang="en">
 <%- include('partials/head', {title: 'CM OAuth Helper'}) %>
-<body class="">
-<script>localStorage.getItem('ms-dark') === 'no' ? document.body.classList.remove('dark') : document.body.classList.add('dark')</script>
-<div class="min-w-screen min-h-screen bg-gray-100 bg-gray-100 dark:bg-gray-800 font-sans">
+<body class="bg-gray-900 text-white font-sans">
+<div class="min-w-screen min-h-screen">
     <%- include('partials/title', {title: ' OAuth Helper'}) %>
     <div class="container mx-auto">
         <div class="grid">
-            <div class="bg-white dark:bg-gray-500 dark:text-white">
+            <div class="bg-gray-600">
                 <div class="p-6 md:px-10 md:py-6">
                     <div class="text-xl mb-4">Congrats! You did the thing.</div>
                     <div class="space-y-3">
diff --git a/src/Web/assets/views/config.ejs b/src/Web/assets/views/config.ejs
@@ -1,11 +1,6 @@
-<html>
+<html lang="en">
 <head>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css"
-          integrity="sha512-wl80ucxCRpLkfaCnbM88y4AxnutbGk327762eM9E/rRTvY/ZGAHWMZrYUq66VQBYMIYDFpDdJAOGSLyIPHZ2IQ=="
-          crossorigin="anonymous"/>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind-dark.min.css"
-          integrity="sha512-WvyKyiVHgInX5UQt67447ExtRRZG/8GUijaq1MpqTNYp8wY4/EJOG5bI80sRp/5crDy4Z6bBUydZI2OFV3Vbtg=="
-          crossorigin="anonymous"/>
+    <link rel="stylesheet" href="/public/tailwind.min.css"/>
     <script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>
     <link rel="stylesheet" href="/public/themeToggle.css">
     <link rel="stylesheet" href="/public/app.css">
@@ -15,13 +10,12 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <!--icons from https://heroicons.com -->
 </head>
-<body style="user-select: none;" class="">
-<script>localStorage.getItem('ms-dark') === 'no' ? document.body.classList.remove('dark') : document.body.classList.add('dark')</script>
-<div class="min-w-screen min-h-screen bg-gray-100 bg-gray-100 dark:bg-gray-800 font-sans">
+<body style="user-select: none;" class="bg-gray-900 text-white font-sans">
+<div class="min-w-screen min-h-screen bg-gray-800">
     <%- include('partials/title') %>
     <div class="container mx-auto">
         <div class="grid">
-            <div class="dark:text-white mb-3 pl-2">
+            <div class="my-3 pl-2">
                 Schema <a href="/config?schema=subreddit" id="subredditSchemaType">Subreddit</a> / <a href="/config?schema=operator" id="operatorSchemaType">Operator</a>  |
                 <span class="has-tooltip">
                     <span style="z-index:999; margin-top: 30px;" class='tooltip rounded shadow-lg p-3 bg-gray-100 text-black space-y-2'>
@@ -63,35 +57,6 @@
     </div>
     <%- include('partials/footer') %>
 </div>
-<script>
-    document.querySelectorAll('.theme').forEach(el => {
-        el.addEventListener('click', e => {
-            e.preventDefault();
-            if (e.target.id === 'dark') {
-                document.body.classList.add('dark');
-                localStorage.setItem('ms-dark', 'yes');
-            } else {
-                document.body.classList.remove('dark');
-                localStorage.setItem('ms-dark', 'no');
-            }
-            document.querySelectorAll('.theme').forEach(el => {
-                el.classList.remove('font-bold', 'no-underline', 'pointer-events-none');
-            });
-            e.target.classList.add('font-bold', 'no-underline', 'pointer-events-none');
-        })
-    })
-
-    document.querySelector("#themeToggle").checked = localStorage.getItem('ms-dark') !== 'no';
-    document.querySelector("#themeToggle").onchange = (e) => {
-        if (e.target.checked === true) {
-            document.body.classList.add('dark');
-            localStorage.setItem('ms-dark', 'yes');
-        } else {
-            document.body.classList.remove('dark');
-            localStorage.setItem('ms-dark', 'no');
-        }
-    }
-</script>
 <script src="/monaco/dev/vs/loader.js"></script>
 <script>
     require.config({ paths: { vs: 'monaco/dev/vs' } });
diff --git a/src/Web/assets/views/error.ejs b/src/Web/assets/views/error.ejs
@@ -1,12 +1,11 @@
-<html>
+<html lang="en">
 <%- include('partials/head', {title: 'CM'}) %>
-<body class="">
-<script>localStorage.getItem('ms-dark') === 'no' ? document.body.classList.remove('dark') : document.body.classList.add('dark')</script>
-<div class="min-w-screen min-h-screen bg-gray-100 bg-gray-100 dark:bg-gray-800 font-sans">
+<body class="bg-gray-900 text-white font-sans">
+<div class="min-w-screen min-h-screen">
     <%- include('partials/title', {title: 'Error'}) %>
     <div class="container mx-auto">
         <div class="grid">
-            <div class="bg-white dark:bg-gray-500 dark:text-white">
+            <div class="bg-gray-600">
                 <div class="p-6 md:px-10 md:py-6">
                     <div class="text-xl mb-4">Oops 😬</div>
                     <div class="space-y-3">
diff --git a/src/Web/assets/views/events.ejs b/src/Web/assets/views/events.ejs
@@ -1,11 +1,6 @@
-<html>
+<html lang="en">
 <head>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css"
-          integrity="sha512-wl80ucxCRpLkfaCnbM88y4AxnutbGk327762eM9E/rRTvY/ZGAHWMZrYUq66VQBYMIYDFpDdJAOGSLyIPHZ2IQ=="
-          crossorigin="anonymous"/>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind-dark.min.css"
-          integrity="sha512-WvyKyiVHgInX5UQt67447ExtRRZG/8GUijaq1MpqTNYp8wY4/EJOG5bI80sRp/5crDy4Z6bBUydZI2OFV3Vbtg=="
-          crossorigin="anonymous"/>
+    <link rel="stylesheet" href="/public/tailwind.min.css"/>
     <script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>
     <link rel="stylesheet" href="/public/themeToggle.css">
     <link rel="stylesheet" href="/public/app.css">
@@ -20,19 +15,19 @@
         }
     </style>
 </head>
-<body>
+<body class="bg-gray-900 text-white font-sans">
 <script>localStorage.getItem('ms-dark') === 'no' ? document.body.classList.remove('dark') : document.body.classList.add('dark')</script>
-<div class="min-w-screen min-h-screen bg-gray-100 bg-gray-100 dark:bg-gray-800 font-sans">
+<div class="min-w-screen min-h-screen">
     <%- include('partials/title') %>
     <div class="container mx-auto">
         <div class="grid">
-            <div class="bg-white dark:bg-gray-500 dark:text-white px-3 py-6 space-y-3">
+            <div class="px-3 py-6 space-y-3">
                 <% if(data.length === 0) { %>
                     No events have been actioned yet!
                 <% } %>
                 <% data.forEach(function (eRes){ %>
                     <div class="shadow-lg">
-                        <div class="space-x-4 px-4 p-2 leading-2 font-semibold bg-gray-300 dark:bg-gray-700 dark:text-white">
+                        <div class="space-x-4 px-4 p-2 leading-2 font-semibold bg-gray-700">
                             <div class="flex items-center justify-between">
                                 <div>
                                 <span class="peek"><%- eRes.activity.peek %></span><a target="_blank" href="https://reddit.com<%= eRes.activity.link%>">(Link)</a>
@@ -42,7 +37,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="p-4 pl-6 pt-3 space-y-2">
+                        <div class="p-4 pl-6 pt-3 space-y-2 bg-gray-500">
                             <div><span class="font-semibold">Check:</span> <%= eRes.check %><span class="px-3">&#10132;</span><%= eRes.ruleSummary %></div>
                             <div>
                                 <span class="font-semibold">Rules:</span>
@@ -67,34 +62,5 @@
     </div>
     <%- include('partials/footer') %>
 </div>
-<script>
-    document.querySelectorAll('.theme').forEach(el => {
-        el.addEventListener('click', e => {
-            e.preventDefault();
-            if (e.target.id === 'dark') {
-                document.body.classList.add('dark');
-                localStorage.setItem('ms-dark', 'yes');
-            } else {
-                document.body.classList.remove('dark');
-                localStorage.setItem('ms-dark', 'no');
-            }
-            document.querySelectorAll('.theme').forEach(el => {
-                el.classList.remove('font-bold', 'no-underline', 'pointer-events-none');
-            });
-            e.target.classList.add('font-bold', 'no-underline', 'pointer-events-none');
-        })
-    })
-
-    document.querySelector("#themeToggle").checked = localStorage.getItem('ms-dark') !== 'no';
-    document.querySelector("#themeToggle").onchange = (e) => {
-        if (e.target.checked === true) {
-            document.body.classList.add('dark');
-            localStorage.setItem('ms-dark', 'yes');
-        } else {
-            document.body.classList.remove('dark');
-            localStorage.setItem('ms-dark', 'no');
-        }
-    }
-</script>
 </body>
 </html>
diff --git a/src/Web/assets/views/helper.ejs b/src/Web/assets/views/helper.ejs
@@ -1,12 +1,11 @@
-<html>
+<html lang="en">
 <%- include('partials/head', {title: 'CM OAuth Helper'}) %>
-<body class="">
-<script>localStorage.getItem('ms-dark') === 'no' ? document.body.classList.remove('dark') : document.body.classList.add('dark')</script>
-<div class="min-w-screen min-h-screen bg-gray-100 bg-gray-100 dark:bg-gray-800 font-sans">
+<body class="bg-gray-900 text-white font-sans">
+<div class="min-w-screen min-h-screen">
     <%- include('partials/title', {title: ' OAuth Helper'}) %>
     <div class="container mx-auto">
         <div class="grid">
-            <div class="bg-white dark:bg-gray-500 dark:text-white">
+            <div class="bg-gray-600">
                 <div class="p-6 md:px-10 md:py-6">
                     <div class="text-xl mb-4">Hi! Looks like you're setting up your bot. To get running:</div>
                     <div class="text-lg text-semibold my-3">1. Set your redirect URL</div>
diff --git a/src/Web/assets/views/invite.ejs b/src/Web/assets/views/invite.ejs
@@ -1,12 +1,11 @@
-<html>
+<html lang="en">
 <%- include('partials/head', {title: 'CM OAuth Helper'}) %>
-<body class="">
-<script>localStorage.getItem('ms-dark') === 'no' ? document.body.classList.remove('dark') : document.body.classList.add('dark')</script>
-<div class="min-w-screen min-h-screen bg-gray-100 bg-gray-100 dark:bg-gray-800 font-sans">
+<body class="bg-gray-900 text-white">
+<div class="min-w-screen min-h-screen font-sans">
     <%- include('partials/title', {title: ' OAuth Helper'}) %>
     <div class="container mx-auto">
         <div class="grid">
-            <div class="bg-white dark:bg-gray-500 dark:text-white">
+            <div class="bg-gray-600">
                 <div class="p-6 md:px-10 md:py-6">
                     <div class="text-xl mb-4">Hi! Looks like you're accepting an invite to authorize an account to run on this ContextMod instance:</div>
                     <div class="text-lg text-semibold my-3">1. Review permissions</div>
diff --git a/src/Web/assets/views/noAccess.ejs b/src/Web/assets/views/noAccess.ejs
@@ -1,12 +1,11 @@
-<html>
+<html lang="en">
 <%- include('partials/head', {title: 'Access Denied'}) %>
-<body class="">
-<script>localStorage.getItem('ms-dark') === 'no' ? document.body.classList.remove('dark') : document.body.classList.add('dark')</script>
-<div class="min-w-screen min-h-screen bg-gray-100 bg-gray-100 dark:bg-gray-800 font-sans">
+<body class="bg-gray-900 text-white font-sans">
+<div class="min-w-screen min-h-screen">
     <%- include('partials/title', {title: ''}) %>
     <div class="container mx-auto">
         <div class="grid">
-            <div class="bg-white dark:bg-gray-500 dark:text-white">
+            <div class="bg-gray-600">
                 <div class="p-6 md:px-10 md:py-6">
                     <div class="text-xl mb-4">Sorry!</div>
                     <div class="space-y-3">
@@ -28,6 +27,5 @@
     </div>
 <%- include('partials/footer') %>
 </div>
-<%- include('partials/themeJs') %>
 </body>
 </html>
diff --git a/src/Web/assets/views/offline.ejs b/src/Web/assets/views/offline.ejs
@@ -1,14 +1,13 @@
-<html>
+<html lang="en">
 <%- include('partials/head', {title: undefined}) %>
-<body class="">
-<script>localStorage.getItem('ms-dark') === 'no' ? document.body.classList.remove('dark') : document.body.classList.add('dark')</script>
-<div class="min-w-screen min-h-screen bg-gray-100 bg-gray-100 dark:bg-gray-800 font-sans">
+<body class="bg-gray-900 text-white font-sans">
+<div class="min-w-screen min-h-screen">
     <%- include('partials/header') %>
     <%- include('partials/botsTab') %>
     <div class="container mx-auto">
         <%- include('partials/subredditsTab') %>
         <div class="grid">
-            <div class="bg-white dark:bg-gray-500 dark:text-white">
+            <div class="bg-gray-700">
                 <div class="pb-6 md:px-7">
                     <div class="sub active" data-subreddit="All" data-bot="All">
                         Instance is currently <b>OFFLINE</b>
@@ -31,7 +30,6 @@
 </div>
 <%- include('partials/footer') %>
 <%- include('partials/instanceTabJs') %>
-<%- include('partials/themeJs') %>
 <%- include('partials/logSettingsJs') %>
 <script src="https://cdn.socket.io/4.1.2/socket.io.min.js" integrity="sha384-toS6mmwu70G0fw54EGlWWeA4z3dyJ+dlXBtSURSKN4vyRFOcxd3Bzjj/AoOwY+Rg" crossorigin="anonymous"></script>
 <script>
diff --git a/src/Web/assets/views/partials/botsTab.ejs b/src/Web/assets/views/partials/botsTab.ejs
@@ -1,9 +1,9 @@
-<div class="space-x-4 py-1 md:px-10 leading-6 font-semibold bg-gray-500 dark:bg-gray-700 text-white">
+<div class="space-x-4 py-1 md:px-10 leading-6 font-semibold bg-gray-700">
     <div class="container mx-auto">
         <% if(locals.bots !== undefined) { %>
         <ul id="botTabs" class="inline-flex flex-wrap">
             <% bots.forEach(function (data){ %>
-                <li class="my-3 px-3 dark:text-white">
+                <li class="my-3 px-3">
                         <span data-bot="<%= data.system.name %>" class="rounded-md py-2 px-3 tabSelectWrapper">
                         <a class="tabSelect font-normal pointer hover:font-bold"
                            data-bot="<%= data.system.name %>">
@@ -16,7 +16,7 @@
                 </li>
             <% }) %>
             <% if(locals.isOperator === true && locals.instanceId !== undefined) { %>
-                    <li class="my-3 px-3 dark:text-white">
+                    <li class="my-3 px-3">
                         <span class="rounded-md py-2 px-3 border">
                         <a class="font-normal pointer hover:font-bold" href="/auth/helper">
                             Add Bot +
diff --git a/src/Web/assets/views/partials/footer.ejs b/src/Web/assets/views/partials/footer.ejs
@@ -1,4 +1,4 @@
-<div class="py-3 flex items-center justify-around font-semibold text-white">
+<div class="py-3 flex items-center justify-around font-semibold">
     <div>
         <a href="https://github.com/FoxxMD/context-mod">ContextMod Web</a> created by /u/FoxxMD
     </div>
diff --git a/src/Web/assets/views/partials/head.ejs b/src/Web/assets/views/partials/head.ejs
@@ -1,10 +1,5 @@
 <head>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css"
-          integrity="sha512-wl80ucxCRpLkfaCnbM88y4AxnutbGk327762eM9E/rRTvY/ZGAHWMZrYUq66VQBYMIYDFpDdJAOGSLyIPHZ2IQ=="
-          crossorigin="anonymous"/>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind-dark.min.css"
-          integrity="sha512-WvyKyiVHgInX5UQt67447ExtRRZG/8GUijaq1MpqTNYp8wY4/EJOG5bI80sRp/5crDy4Z6bBUydZI2OFV3Vbtg=="
-          crossorigin="anonymous"/>
+    <link rel="stylesheet" href="/public/tailwind.min.css"/>
     <script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>
     <link rel="stylesheet" href="/public/themeToggle.css">
     <link rel="stylesheet" href="/public/app.css">
diff --git a/src/Web/assets/views/partials/header.ejs b/src/Web/assets/views/partials/header.ejs
diff --git a/src/Web/assets/views/partials/subredditsTab.ejs b/src/Web/assets/views/partials/subredditsTab.ejs
diff --git a/src/Web/assets/views/partials/themeJs.ejs b/src/Web/assets/views/partials/themeJs.ejs
diff --git a/src/Web/assets/views/partials/title.ejs b/src/Web/assets/views/partials/title.ejs
diff --git a/src/Web/assets/views/status.ejs b/src/Web/assets/views/status.ejs
diff --git a/src/util.ts b/src/util.ts
