Merge branch 'master' of https://github.com/Miodec/monkeytype

frontend/src/styles/test.scss

@@ -485,9 +485,14 @@
   padding: 1rem;
   border-radius: var(--roundness);
   /* margin-top: 1rem; */
-  transition: 0.25s;
+  transition: 0.125s;
   z-index: 999;
   pointer-events: none;
+  top: -2.5rem;
+
+  &.focus {
+    top: 0rem;
+  }
 
   i {
     margin-right: 0.5rem;

frontend/src/ts/controllers/badge-controller.ts

@@ -39,6 +39,22 @@ const badges: Record<number, MonkeyTypes.UserBadge> = {
     color: "var(--bg-color)",
     background: "var(--main-color)",
   },
+  6: {
+    id: 6,
+    name: "Supporter",
+    description: "Donated money",
+    icon: "fa-heart",
+    color: "var(--bg-color)",
+    background: "var(--sub-color)",
+  },
+  7: {
+    id: 7,
+    name: "Sugar Daddy",
+    description: "Donated a lot of money",
+    icon: "fa-gem",
+    color: "var(--bg-color)",
+    background: "var(--main-color)",
+  },
 };
 
 export function getHTMLById(id: number): string {

frontend/src/ts/elements/notifications.ts

@@ -30,10 +30,11 @@ class Notification {
     customIcon?: string,
     closeCallback = (): void => {
       //
-    }
+    },
+    allowHTML?: boolean
   ) {
     this.type = type;
-    this.message = Misc.escapeHTML(message);
+    this.message = allowHTML ? message : Misc.escapeHTML(message);
     this.level = level;
     if (type === "banner") {
       this.duration = duration as number;
@@ -224,7 +225,8 @@ export function add(
   duration?: number,
   customTitle?: string,
   customIcon?: string,
-  closeCallback?: () => void
+  closeCallback?: () => void,
+  allowHTML?: boolean
 ): void {
   // notificationHistory.push(
   new Notification(
@@ -234,7 +236,8 @@ export function add(
     duration,
     customTitle,
     customIcon,
-    closeCallback
+    closeCallback,
+    allowHTML
   ).show();
   // );
 }
@@ -244,7 +247,8 @@ export function addBanner(
   level = -1,
   customIcon = "bullhorn",
   sticky = false,
-  closeCallback?: () => void
+  closeCallback?: () => void,
+  allowHTML?: boolean
 ): void {
   // notificationHistory.push(
   new Notification(
@@ -254,7 +258,8 @@ export function addBanner(
     sticky ? -1 : 0,
     undefined,
     customIcon,
-    closeCallback
+    closeCallback,
+    allowHTML
   ).show();
   // );
 }

frontend/src/ts/elements/psa.ts

@@ -24,6 +24,8 @@ async function getLatest(): Promise<MonkeyTypes.PSA[]> {
       "PSA request failed. If this issue persists the server might be experiencing unexpected down time. <a target= '_blank' href='https://monkeytype.instatus.com/'>Check the status page</a> or <a target= '_blank' href='https://twitter.com/monkeytypegame'>Twitter</a> for more information.",
       -1,
       "exclamation-triangle",
+      true,
+      undefined,
       true
     );
     return [];

frontend/src/ts/test/focus.ts

@@ -13,6 +13,7 @@ export function set(foc: boolean, withCursor = false): void {
     if (!withCursor) $("body").css("cursor", "none");
     $("#middle").addClass("focus");
     $("#bannerCenter").addClass("focus");
+    $("#capsWarning").addClass("focus");
   } else if (!foc && state) {
     state = false;
     Caret.startAnimation();
@@ -21,6 +22,7 @@ export function set(foc: boolean, withCursor = false): void {
     $("body").css("cursor", "default");
     $("#middle").removeClass("focus");
     $("#bannerCenter").removeClass("focus");
+    $("#capsWarning").removeClass("focus");
   }
 }
 

frontend/src/ts/utils/misc.ts

@@ -782,20 +782,15 @@ export function escapeRegExp(str: string): string {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
-const unescapedToEscapedHtml: Record<string, string> = {
-  "&": "&amp;",
-  "<": "&lt;",
-  ">": "&gt;",
-  '"': "&quot;",
-  "'": "&#x27;",
-  "/": "&#x2F;",
-};
-
 export function escapeHTML(str: string): string {
-  return Object.entries(unescapedToEscapedHtml).reduce(
-    (previous, [current, value]) => previous.replace(current, value),
-    str
-  );
+  str = str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+
+  return str;
 }
 
 export function cleanTypographySymbols(textToClean: string): string {

frontend/static/languages/kurdish_central.json

@@ -209,4 +209,4 @@
     "سەرکار",
     "محەمەد"
   ]
-}
+}

frontend/webpack/config.base.js

@@ -8,20 +8,6 @@ const ExtraWatchWebpackPlugin = require("extra-watch-webpack-plugin");
 
 let circularImports = 0;
 
-const htmlWebpackPlugins = [
-  "terms-of-service",
-  "security-policy",
-  "privacy-policy",
-  "email-handler",
-  "das",
-].map((name) => {
-  return new HtmlWebpackPlugin({
-    filename: `${name}.html`,
-    template: resolve(__dirname, `../static/${name}.html`),
-    inject: false,
-  });
-});
-
 /** @type { import('webpack').Configuration } */
 const BASE_CONFIG = {
   entry: {
@@ -110,7 +96,6 @@ const BASE_CONFIG = {
       template: resolve(__dirname, "../static/main.html"),
       inject: "body",
     }),
-    ...htmlWebpackPlugins,
     new MiniCssExtractPlugin({
       filename: "./css/style.[chunkhash:8].css",
     }),

frontend/webpack/config.dev.js

@@ -1,5 +1,22 @@
+const { resolve } = require("path");
 const { merge } = require("webpack-merge");
 const BASE_CONFIG = require("./config.base");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+const htmlWebpackPlugins = [
+  "terms-of-service",
+  "security-policy",
+  "privacy-policy",
+  "email-handler",
+  "das",
+].map((name) => {
+  return new HtmlWebpackPlugin({
+    filename: `${name}.html`,
+    template: resolve(__dirname, `../static/${name}.html`),
+    inject: "body",
+    cache: false,
+  });
+});
 
 /** @type { import('webpack').Configuration } */
 const DEV_CONFIG = {
@@ -9,11 +26,15 @@ const DEV_CONFIG = {
     compress: true,
     port: 3000,
     open: true,
+    hot: false,
+    liveReload: true,
     historyApiFallback: true,
     client: {
       overlay: false,
     },
   },
+
+  plugins: htmlWebpackPlugins,
 };
 
 module.exports = merge(BASE_CONFIG, DEV_CONFIG);

frontend/webpack/config.prod.js

@@ -1,10 +1,26 @@
+const { resolve } = require("path");
 const { merge } = require("webpack-merge");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
 const JsonMinimizerPlugin = require("json-minimizer-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 const BASE_CONFIG = require("./config.base");
 
+const htmlWebpackPlugins = [
+  "terms-of-service",
+  "security-policy",
+  "privacy-policy",
+  "email-handler",
+  "das",
+].map((name) => {
+  return new HtmlWebpackPlugin({
+    filename: `${name}.html`,
+    template: resolve(__dirname, `../static/${name}.html`),
+    inject: false,
+  });
+});
+
 function pad(numbers, maxLength, fillString) {
   return numbers.map((number) =>
     number.toString().padStart(maxLength, fillString)
@@ -63,6 +79,7 @@ const PRODUCTION_CONFIG = {
       new CssMinimizerPlugin(),
     ],
   },
+  plugins: htmlWebpackPlugins,
 };
 
 module.exports = merge(BASE_CONFIG, PRODUCTION_CONFIG);