attempt implementing prerendering

tell vite to ignore browser-script url
fix setupNconf imports
2026-05-20 19:48:38 -05:00 · 2025-02-04 17:43:30 +01:00 · 2025-02-04 17:42:55 +01:00 · 2025-02-04 12:29:33 +01:00 · 2025-02-04 11:21:08 +01:00 · 2025-02-03 18:22:17 +01:00
314 changed files with 8673 additions and 9942 deletions
@@ -1,12 +1,12 @@
 {
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "node": true
+    "presets": [
+      [
+        "@babel/preset-env",
+        {
+          "targets": {
+            "node": true
+          }
        }
-      }
+      ]
    ]
-  ]
-}
+  }
@@ -1,11 +0,0 @@
-import gulp from 'gulp';
-import nodemon from 'gulp-nodemon';
-
-import pkg from '../package.json';
-
-gulp.task('nodemon', done => {
-  nodemon({
-    script: pkg.main,
-  });
-  done();
-});
@@ -49,12 +49,6 @@ function integrationTestCommand (testDir) {
 }

 /* Test task definitions */
-gulp.task('test:nodemon', gulp.series(done => {
-  process.env.PORT = TEST_SERVER_PORT; // eslint-disable-line no-process-env
-  process.env.NODE_DB_URI = TEST_DB_URI; // eslint-disable-line no-process-env
-  done();
-}, 'nodemon'));
-
 gulp.task('test:prepare:mongo', cb => {
  const mongooseOptions = getDefaultConnectionOptions();
  const connectionUrl = getDevelopmentConnectionUrl(TEST_DB_URI);
@@ -21,7 +21,6 @@ if (process.env.NODE_ENV === 'production') { // eslint-disable-line no-process-e
  require('./gulp/gulp-build'); // eslint-disable-line global-require
  require('./gulp/gulp-console'); // eslint-disable-line global-require
  require('./gulp/gulp-sprites'); // eslint-disable-line global-require
-  require('./gulp/gulp-start'); // eslint-disable-line global-require
  require('./gulp/gulp-tests'); // eslint-disable-line global-require
  require('./gulp/gulp-transifex-test'); // eslint-disable-line global-require
  require('gulp').task('default', gulp.series('test')); // eslint-disable-line global-require
@@ -37,7 +37,7 @@ let consoleStamp = require('console-stamp');
 consoleStamp(console);

 // Initialize configuration
-require('../../website/server/libs/api-v3/setupNconf')();
+require('../../website/server/libs/api-v3/setupNconf').default();

 let MONGODB_OLD = nconf.get('MONGODB_OLD');
 let MONGODB_NEW = nconf.get('MONGODB_NEW');
@@ -32,7 +32,7 @@ let moment = require('moment');
 consoleStamp(console);

 // Initialize configuration
-require('../../website/server/libs/api-v3/setupNconf')();
+require('../../website/server/libs/api-v3/setupNconf').default();

 let MONGODB_OLD = nconf.get('MONGODB_OLD');
 let MONGODB_NEW = nconf.get('MONGODB_NEW');
@@ -6,7 +6,7 @@ require('@babel/register'); // eslint-disable-line import/no-extraneous-dependen
 function setUpServer () {
  const nconf = require('nconf'); // eslint-disable-line global-require, no-unused-vars
  const mongoose = require('mongoose'); // eslint-disable-line global-require, no-unused-vars
-  const setupNconf = require('../website/server/libs/setupNconf'); // eslint-disable-line global-require
+  const setupNconf = require('../website/server/libs/setupNconf').default; // eslint-disable-line global-require

  setupNconf();

@@ -43,7 +43,6 @@
        "gulp-babel": "^8.0.0",
        "gulp-filter": "^7.0.0",
        "gulp-imagemin": "^7.1.0",
-        "gulp-nodemon": "^2.5.0",
        "gulp.spritesmith": "^6.13.0",
        "habitica-markdown": "^3.0.0",
        "helmet": "^4.6.0",
@@ -55,12 +54,12 @@
        "merge-stream": "^2.0.0",
        "method-override": "^3.0.0",
        "moment": "^2.29.4",
-        "moment-recur": "^1.0.7",
+        "moment-recur": "git://github.com/HabitRPG/moment-recur.git#d3e8e6da0806f13b74dd2e4d7d9053e6a63db119",
        "mongoose": "^7.8.3",
        "morgan": "^1.10.0",
        "nconf": "^0.12.1",
        "node-gcm": "^1.0.5",
-        "nodemon": "^2.0.20",
+        "nodemon": "^3.1.9",
        "on-headers": "^1.0.2",
        "passport": "^0.5.3",
        "passport-facebook": "^3.0.0",
@@ -151,14 +150,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/@babel/code-frame/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/@babel/code-frame/node_modules/supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -542,14 +533,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/@babel/highlight/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/@babel/highlight/node_modules/supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -4169,6 +4152,14 @@
        "node": ">=6"
      }
    },
+    "node_modules/apidoc/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
    "node_modules/apidoc/node_modules/glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -4199,6 +4190,41 @@
        "node": ">=10"
      }
    },
+    "node_modules/apidoc/node_modules/nodemon": {
+      "version": "2.0.22",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.22.tgz",
+      "integrity": "sha512-B8YqaKMmyuCO7BowF1Z1/mkPqLk6cs/l63Ojtd6otKjMx47Dq1utxfRxcavH1I7VSaL8n5BUaoutadnsX3AAVQ==",
+      "dependencies": {
+        "chokidar": "^3.5.2",
+        "debug": "^3.2.7",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^3.1.2",
+        "pstree.remy": "^1.1.8",
+        "semver": "^5.7.1",
+        "simple-update-notifier": "^1.0.7",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/apidoc/node_modules/nodemon/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
    "node_modules/apidoc/node_modules/semver": {
      "version": "7.6.0",
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
@@ -4213,6 +4239,36 @@
        "node": ">=10"
      }
    },
+    "node_modules/apidoc/node_modules/simple-update-notifier": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz",
+      "integrity": "sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==",
+      "dependencies": {
+        "semver": "~7.0.0"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/apidoc/node_modules/simple-update-notifier/node_modules/semver": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+      "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/apidoc/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/apidoc/node_modules/yallist": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -7012,15 +7068,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/coa/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "optional": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/coa/node_modules/supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -7114,6 +7161,7 @@
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
+      "dev": true,
      "engines": {
        "node": ">=0.1.90"
      }
@@ -8992,14 +9040,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/eslint-config-habitrpg/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/eslint-config-habitrpg/node_modules/ignore": {
      "version": "4.0.6",
      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -12299,16 +12339,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/gulp-nodemon": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/gulp-nodemon/-/gulp-nodemon-2.5.0.tgz",
-      "integrity": "sha512-vXfaP72xo2C6XOaXrNcLEM3QqDJ1x21S3x97U4YtzN2Rl2kH57++aFkAVxe6BafGRSTxs/xVfE/jNNlCv5Ym2Q==",
-      "dependencies": {
-        "colors": "^1.2.1",
-        "gulp": "^4.0.0",
-        "nodemon": "^2.0.2"
-      }
-    },
    "node_modules/gulp.spritesmith": {
      "version": "6.13.0",
      "resolved": "https://registry.npmjs.org/gulp.spritesmith/-/gulp.spritesmith-6.13.0.tgz",
@@ -12541,6 +12571,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/has-property-descriptors": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
@@ -15356,15 +15394,6 @@
        "node": "*"
      }
    },
-    "node_modules/mocha/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/mocha/node_modules/minimatch": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -15428,9 +15457,10 @@
      }
    },
    "node_modules/moment-recur": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/moment-recur/-/moment-recur-1.0.7.tgz",
-      "integrity": "sha512-jpBQn6H62gCnEYjtYdLfK/VdPZHEXo1t8RrVItHVVS67SRvByyJBNBa3WQSGTe+8H0smcYO/79FYTA9LGMVdQw==",
+      "version": "1.0.8",
+      "resolved": "git+ssh://git@github.com/HabitRPG/moment-recur.git#d3e8e6da0806f13b74dd2e4d7d9053e6a63db119",
+      "integrity": "sha512-LaqXV3izeVQjG0EKAEQQWdneMiff5JR6oBKcfgl0uFOTeaFzLKG62psk7r2VE7RTBdhYigt6KNaLZR7GdWPEIA==",
+      "license": "Unlicense",
      "dependencies": {
        "moment": "<3.0.0"
      }
@@ -16216,17 +16246,17 @@
      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
    },
    "node_modules/nodemon": {
-      "version": "2.0.22",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.22.tgz",
-      "integrity": "sha512-B8YqaKMmyuCO7BowF1Z1/mkPqLk6cs/l63Ojtd6otKjMx47Dq1utxfRxcavH1I7VSaL8n5BUaoutadnsX3AAVQ==",
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.9.tgz",
+      "integrity": "sha512-hdr1oIb2p6ZSxu3PB2JWWYS7ZQ0qvaZsc3hK8DR8f02kRzc8rjYmxAIvdz+aYC+8F2IjNaB7HMcSDg8nQpJxyg==",
      "dependencies": {
        "chokidar": "^3.5.2",
-        "debug": "^3.2.7",
+        "debug": "^4",
        "ignore-by-default": "^1.0.1",
        "minimatch": "^3.1.2",
        "pstree.remy": "^1.1.8",
-        "semver": "^5.7.1",
-        "simple-update-notifier": "^1.0.7",
+        "semver": "^7.5.3",
+        "simple-update-notifier": "^2.0.0",
        "supports-color": "^5.5.0",
        "touch": "^3.1.0",
        "undefsafe": "^2.0.5"
@@ -16235,35 +16265,22 @@
        "nodemon": "bin/nodemon.js"
      },
      "engines": {
-        "node": ">=8.10.0"
+        "node": ">=10"
      },
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/nodemon"
      }
    },
-    "node_modules/nodemon/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/nodemon/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/nodemon/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
+      "integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
      "bin": {
-        "semver": "bin/semver"
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
      }
    },
    "node_modules/nodemon/node_modules/supports-color": {
@@ -19116,15 +19133,6 @@
      "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==",
      "dev": true
    },
-    "node_modules/run-rs/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/run-rs/node_modules/mongodb": {
      "version": "3.6.12",
      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.6.12.tgz",
@@ -19648,22 +19656,25 @@
      }
    },
    "node_modules/simple-update-notifier": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz",
-      "integrity": "sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
      "dependencies": {
-        "semver": "~7.0.0"
+        "semver": "^7.5.3"
      },
      "engines": {
-        "node": ">=8.10.0"
+        "node": ">=10"
      }
    },
    "node_modules/simple-update-notifier/node_modules/semver": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
-      "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
+      "integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
      "bin": {
        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
      }
    },
    "node_modules/sinon": {
@@ -20715,15 +20726,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/svgo/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "optional": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/svgo/node_modules/sax": {
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -38,7 +38,6 @@
    "gulp-babel": "^8.0.0",
    "gulp-filter": "^7.0.0",
    "gulp-imagemin": "^7.1.0",
-    "gulp-nodemon": "^2.5.0",
    "gulp.spritesmith": "^6.13.0",
    "habitica-markdown": "^3.0.0",
    "helmet": "^4.6.0",
@@ -50,12 +49,12 @@
    "merge-stream": "^2.0.0",
    "method-override": "^3.0.0",
    "moment": "^2.29.4",
-    "moment-recur": "^1.0.7",
+    "moment-recur": "git://github.com/HabitRPG/moment-recur.git#d3e8e6da0806f13b74dd2e4d7d9053e6a63db119",
    "mongoose": "^7.8.3",
    "morgan": "^1.10.0",
    "nconf": "^0.12.1",
    "node-gcm": "^1.0.5",
-    "nodemon": "^2.0.20",
+    "nodemon": "^3.1.9",
    "on-headers": "^1.0.2",
    "passport": "^0.5.3",
    "passport-facebook": "^3.0.0",
@@ -100,15 +99,14 @@
    "test:sanity": "nyc --silent --no-clean mocha test/sanity --recursive",
    "test:common": "nyc --silent --no-clean mocha test/common --recursive",
    "test:content": "nyc --silent --no-clean mocha test/content --recursive",
-    "test:nodemon": "gulp test:nodemon",
    "coverage": "nyc report --reporter=html --report-dir coverage/results; open coverage/results/index.html",
    "sprites": "gulp sprites:compile",
    "client:dev": "cd website/client && npm run serve",
    "client:build": "cd website/client && npm run build",
    "client:unit": "cd website/client && npm run test:unit",
-    "start": "gulp nodemon",
+    "start": "node --watch ./website/server/index.js",
    "start:simple": "node ./website/server/index.js",
-    "debug": "gulp nodemon --inspect",
+    "debug": "node --watch --inspect ./website/server/index.js",
    "mongo:dev": "run-rs -v 5.0.23 -l ubuntu1804 --keep --dbpath mongodb-data --number 1 --quiet",
    "mongo:test": "run-rs -v 5.0.23 -l ubuntu1804 --keep --dbpath mongodb-data-testing --number 1 --quiet",
    "postinstall": "git config --global url.\"https://\".insteadOf git:// && gulp build && cd website/client && npm install",
@@ -19,6 +19,6 @@ const sinonStubPromise = require('sinon-stub-promise');
 sinonStubPromise(global.sinon);
 global.sandbox = sinon.createSandbox();

-const setupNconf = require('../../website/server/libs/setupNconf');
+const setupNconf = require('../../website/server/libs/setupNconf').default;

 setupNconf('./config.json.example');
@@ -3,7 +3,7 @@

 const nconf = require('nconf');
 const mongoose = require('mongoose');
-const setupNconf = require('../../website/server/libs/setupNconf');
+const setupNconf = require('../../website/server/libs/setupNconf').default;

 // fix further imports of require/import syntaxes
 require('@babel/register');
@@ -3,6 +3,7 @@ module.exports = {
  root: true,
  env: {
    node: true,
+    es2021: true,
  },
  extends: [
    'habitrpg/lib/vue',
@@ -39,7 +40,4 @@ module.exports = {
      order: ['template', 'style', 'script'],
    }],
  },
-  parserOptions: {
-    parser: 'babel-eslint',
-  },
 };
@@ -1,9 +0,0 @@
-/* eslint-disable import/no-commonjs */
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset',
-  ],
-  plugins: [
-    '@babel/plugin-proposal-optional-chaining',
-  ],
-};
@@ -0,0 +1,36 @@
+<!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>Habitica - Gamify Your Life</title>
+    <meta name="description" content="Habitica is a free habit and productivity app that treats your real life like a game. Habitica can help you achieve your goals to become healthy and happy.">
+    <meta name="keywords" content="Habits,Goals,Todo,Gamification,Health,Fitness,School,Work">
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i|Roboto:400,400i,700,700i" rel="stylesheet">
+    <link rel="shortcut icon" sizes="48x48" href="/static/icons/favicon.ico">
+    <link rel="shortcut icon" sizes="192x192" href="/static/icons/favicon_192x192.png">
+    <link rel="mask-icon" href="/static/icons/favicon.ico">
+    <meta property="og:image" content="/static/emails/images/meta-image.png" />
+    <script type="module" src="/src/main-static.js"></script>
+  </head>
+  <body>
+    <div id="loading-screen">
+      <svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
+        <path
+        xmlns="http://www.w3.org/2000/svg"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M79.05 72.15c-.8-1.766-2.643-2.62-3.845-1.766-1.201.855-2.867.985-4.448.602-1.584-.385-1.885-4.01-1.543-8.195.342-4.184.909-5.795 1.267-7.314.404-1.524 2.191-1.404 2.405-.209.215 1.196 1.454 1.196 3.266-.979 1.811-2.175 1.543-8.52-.546-13.684-2.088-5.163.817-4.661 1.66-4.149.844.513 1.362-.255 1.156-3.2-.204-2.945-2.916-5.247-5.096-6.657-2.184-1.41-4.842-2.967-4.78-6.745.063-3.777 5.2-3.658 5.897-3.596.697.063 2.037-.233 1.264-4.157-.773-3.924-3.575-4.673-5.332-4.567-1.758.106-2.943 1.071-5.427.133-2.484-.938-4.136-.572-6.45-.057-2.313.515-5.343 1.94-9.112 2.959-1.989.545-2.661.683-4.828.718-1.33.02-1.885 1.633-.106 3.61 1.408 1.608 4.597 2.036 6.515 1.768 1.236-.174 1.521.645 1.407 1.85a20.023 20.023 0 0 0-.024 4.488c.198 1.5.45 4.051-.258 5.713-.35.817-1.361 1.693-2.449 1.633-1.413-.084-2.555-1.75-3.537-3.726-2.06-4.152-4.48-5.033-13.509-8.835-8.12-3.417-12.516-8.749-15.24-12.185-2.421-3.042-4.846-1.89-4.626.855.179 2.128 1.48 9.008 4.781 13.141 4.058 6.314 10.32 9.177 17.534 9.739 1.885.149 3.065.52 3.225 1.383.236 1.835-1.557 3.11-4.898 2.722-3.341-.39-4.768.22-4.103 2.121 2.123 4.477 7.021 4.672 9.058 4.857.686.122 3.114 0 4.41.355 1.51.418 1.836 2.514-.353 3.648-3.892 1.903-5.59 3.479-7.561 7.075-1.486 2.826-2.77 7.555-1.435 14.365 1.283 6.62-8.342 6.83-12.497 5.89-1.793-.377-3.675-3.778.716-6.625 3.553-2.305 4.269-3.724 4.111-6.642-.184-3.4-2.058-3.644-2.053-6.598v-7.05c0-.602-.488-1.088-1.087-1.088h-3.334a1.087 1.087 0 0 1-1.087-1.087v-4.25c0-.602-.488-1.087-1.088-1.087h-3.317a1.087 1.087 0 0 1-1.087-1.088v-3.81c0-.602-.489-1.087-1.088-1.087h-4.04a1.087 1.087 0 0 1-1.089-1.088V26.25c0-.602-.488-1.088-1.087-1.088H1.088C.485 25.161 0 25.65 0 26.25v4.26c0 .602.488 1.087 1.088 1.087h4.049c.602 0 1.087.489 1.087 1.088v15.192c0 .602.489 1.087 1.088 1.087h4.277c.602 0 1.088.489 1.088 1.088v4.968c0 .602.488 1.087 1.087 1.087h6.005c1.836-.13 2.156 2.335 2.137 3.214-.04 2.007-2.308 2.652-3.382 3.487-2.861 2.21-5.077 4.459-3.78 8.781l.032.09c2.362 5.017 8.855 4.499 12.956 4.499h25.817c1.459 0 2.959.339 2.614-1.362-.342-1.7-1.063-4.024-3.162-4.024-2.1 0-1.758 1.166-3.81.57-2.054-.597-2.057-3.371 1.027-8.198 3.19-4.122 8.652-3.81 11.952-.895 3.301 2.915 2.325 7.978 1.633 10.885-.396 2.048.545 3.06 1.67 3.032H78.58c2.015-.035 1.62-1.391.464-4.035h.008z"
+        fill="#fff"
+      >
+      </path>
+    </svg>
+    </div>
+
+    <div id="app"></div>
+
+    <script type="text/javascript" src="//cloudfront.loggly.com/js/loggly.tracker-latest.min.js" async></script>
+    <!-- Translations -->
+  </body>
+</html>
@@ -12,6 +12,7 @@
    <link rel="shortcut icon" sizes="192x192" href="/static/icons/favicon_192x192.png">
    <link rel="mask-icon" href="/static/icons/favicon.ico">
    <meta property="og:image" content="/static/emails/images/meta-image.png" />
+    <script type="module" src="/src/main.js"></script>
  </head>
  <body>
    <div id="loading-screen">
@@ -28,10 +29,9 @@
    </div>

    <div id="app"></div>
-    <!-- built files will be auto injected -->

    <script type="text/javascript" src="//cloudfront.loggly.com/js/loggly.tracker-latest.min.js" async></script>
    <!-- Translations -->
-    <script type='text/javascript' src='/api/v4/i18n/browser-script'></script>
+    <script type='text/javascript' src='/api/v4/i18n/browser-script' vite-ignore></script>
  </body>
 </html>
@@ -0,0 +1,64 @@
+import fs from 'fs';
+import path from 'path';
+
+import { approvedLanguages } from '../common/script/libs/i18n';
+
+const localePath = path.join(__dirname, '../common/locales/');
+
+const translations = {};
+const momentLangs = {};
+
+function loadFile (file) {
+  const contents = fs.readFileSync(file);
+  return JSON.parse(contents); 
+}
+
+function _loadTranslations (locale) {
+  const files = fs.readdirSync(path.join(localePath, locale));
+
+  translations[locale] = {};
+
+  files.forEach(file => {
+    if (path.extname(file) !== '.json') return;
+
+    const t = loadFile(path.join(localePath, locale, file))
+    translations[locale] = {
+      ...translations[locale],
+      ...t,
+    }
+  });
+}
+
+// First fetch English strings so we can merge them with missing strings in other languages
+_loadTranslations('en');
+
+// Then load all other languages
+approvedLanguages.forEach(file => {
+  if (file === 'en' || fs.statSync(path.join(localePath, file)).isDirectory() === false) return;
+  _loadTranslations(file);
+
+  // Strip empty strings, then merge missing strings from english
+  translations[file] = {
+    ...translations.en,
+    ...translations[file],
+  }
+});
+
+export default function localePlugin() {
+  const virtualModuleId = 'virtual:translations'
+  const resolvedVirtualModuleId = '\0' + virtualModuleId
+
+  return {
+    name: 'locale', // required, will show up in warnings and errors
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        return `export default ${JSON.stringify(translations)}`;
+      }
+    },
+  }
+}
@@ -3,28 +3,25 @@
  "version": "1.0.0",
  "private": true,
  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js",
-    "lint": "vue-cli-service lint .",
-    "lint-no-fix": "vue-cli-service lint --no-fix .",
+    "serve": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest watch",
+    "lint": "eslint --ext .js,.vue --ignore-path ../../.gitignore --fix .",
+    "lint-no-fix": "eslint --ext .js,.vue --no-fix src",
    "postinstall": "node ./scripts/npm-postinstall.js"
  },
  "dependencies": {
-    "@vue/cli-plugin-babel": "^5.0.8",
-    "@vue/cli-plugin-eslint": "^5.0.8",
-    "@vue/cli-plugin-router": "^5.0.8",
-    "@vue/cli-plugin-unit-mocha": "^5.0.8",
-    "@vue/cli-service": "^5.0.8",
+    "@vitejs/plugin-vue2": "^2.3.3",
    "@vue/test-utils": "1.0.0-beta.29",
    "amplitude-js": "^8.21.3",
    "assert": "^2.1.0",
+    "autoprefixer": "^10.4.20",
    "axios": "^0.28.0",
    "axios-progress-bar": "^1.2.0",
-    "babel-eslint": "^10.1.0",
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.23.1",
-    "core-js": "^3.33.1",
    "eslint": "7.32.0",
    "eslint-config-habitrpg": "6.2.0",
    "eslint-plugin-mocha": "5.3.0",
@@ -35,30 +32,34 @@
    "jquery": "^3.7.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
-    "moment-locales-webpack-plugin": "^1.2.0",
    "nconf": "^0.12.1",
    "sass": "^1.63.4",
-    "sass-loader": "^14.1.1",
    "sinon": "^17.0.1",
    "stopword": "^2.0.8",
    "timers-browserify": "^2.0.12",
    "uuid": "^9.0.1",
    "validator": "^13.9.0",
+    "vite": "^6.0.0",
+    "vite-plugin-prerender": "^1.0.8",
    "vue": "^2.7.10",
    "vue-fragment": "^1.6.0",
    "vue-mugen-scroll": "^0.2.6",
    "vue-router": "^3.6.5",
-    "vue-template-babel-compiler": "^2.0.0",
-    "vue-template-compiler": "^2.7.10",
    "vuedraggable": "^2.24.3",
    "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker.git#153d339e4dbebb73733658aeda1d5b7fcc55b0a0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@prerenderer/renderer-puppeteer": "^1.2.4",
+    "@prerenderer/rollup-plugin": "^0.3.12",
+    "@vitest/browser": "^3.0.5",
    "babel-plugin-lodash": "^3.3.4",
-    "chai": "^5.1.0",
    "inspectpack": "^4.7.1",
+    "jsdom": "^26.0.0",
+    "mocha": "^11.1.0",
+    "playwright": "^1.50.1",
    "terser-webpack-plugin": "^5.3.10",
+    "vitest": "^3.0.5",
    "webpack": "^5.94.0"
  }
 }
@@ -34,7 +34,7 @@
 </template>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  #loading-screen-inapp {
    #melior {
@@ -90,7 +90,7 @@
 </style>

 <style lang='scss'>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .modal-backdrop {
    opacity: .9 !important;
@@ -111,7 +111,7 @@ import { mapState } from '@/libs/store';
 import userMain from '@/pages/user-main';
 import snackbars from '@/components/snackbars/notifications';

-const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
+const COMMUNITY_MANAGER_EMAIL = import.meta.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line

 export default {
  name: 'App',
@@ -1730,6 +1730,11 @@
  width: 141px;
  height: 147px;
 }
+.background_old_fashioned_tea_shop {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_old_fashioned_tea_shop.png');
+  width: 141px;
+  height: 147px;
+}
 .background_old_photo {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_old_photo.png');
  width: 141px;
@@ -30214,6 +30219,11 @@
  width: 90px;
  height: 90px;
 }
+.head_armoire_fancyFloralHat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_fancyFloralHat.png');
+  width: 114px;
+  height: 90px;
+}
 .head_armoire_fancyPirateHat {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_fancyPirateHat.png');
  width: 114px;
@@ -30644,6 +30654,11 @@
  width: 114px;
  height: 90px;
 }
+.shield_armoire_fancyFloralFan {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_fancyFloralFan.png');
+  width: 114px;
+  height: 90px;
+}
 .shield_armoire_fancyShoe {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_fancyShoe.png');
  width: 90px;
@@ -33719,16 +33734,6 @@
  width: 90px;
  height: 90px;
 }
-.head_mystery_202501 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202501.png');
-  width: 114px;
-  height: 90px;
-}
-.shield_mystery_202501 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_mystery_202501.png');
-  width: 114px;
-  height: 90px;
-}
 .back_mystery_201402 {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/back_mystery_201402.png');
  width: 90px;
@@ -35404,6 +35409,36 @@
  width: 114px;
  height: 90px;
 }
+.head_mystery_202501 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202501.png');
+  width: 114px;
+  height: 90px;
+}
+.shield_mystery_202501 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_mystery_202501.png');
+  width: 114px;
+  height: 90px;
+}
+.broad_armor_mystery_202502 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_202502.png');
+  width: 114px;
+  height: 90px;
+}
+.head_mystery_202502 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202502.png');
+  width: 114px;
+  height: 90px;
+}
+.shield_mystery_202502 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_mystery_202502.png');
+  width: 114px;
+  height: 90px;
+}
+.slim_armor_mystery_202502 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_mystery_202502.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_mystery_301404 {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_301404.png');
  width: 90px;
@@ -40107,51 +40142,111 @@
  width: 28px;
  height: 28px;
 }
+.notif_2014robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2014robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2015hat_nye {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2015hat_nye.png');
  width: 28px;
  height: 28px;
 }
+.notif_2015robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2015robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2016hat_nye {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2016hat_nye.png');
  width: 28px;
  height: 28px;
 }
+.notif_2016robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2016robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2017hat_nye {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2017hat_nye.png');
  width: 28px;
  height: 28px;
 }
+.notif_2017robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2017robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2018hat_nye {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2018hat_nye.png');
  width: 28px;
  height: 28px;
 }
+.notif_2018robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2018robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2019hat_nye {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2019hat_nye.png');
  width: 28px;
  height: 28px;
 }
+.notif_2019robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2019robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2020hat_nye {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2020hat_nye.png');
  width: 28px;
  height: 28px;
 }
+.notif_2020robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2020robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2021hat_nye {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2021hat_nye.png');
  width: 28px;
  height: 28px;
 }
+.notif_2021robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2021robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2022hat_nye {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2022hat_nye.png');
  width: 28px;
  height: 28px;
 }
+.notif_2022robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2022robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2023hat_nye {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2023hat_nye.png');
  width: 28px;
  height: 28px;
 }
+.notif_2023robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2023robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
+.notif_2024robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2024robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
+.notif_cake_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_cake_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_candy_nye {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_candy_nye.png');
  width: 28px;
@@ -40557,6 +40652,11 @@
  width: 219px;
  height: 219px;
 }
+.quest_cat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/quest_cat.png');
+  width: 219px;
+  height: 219px;
+}
 .quest_chameleon {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/quest_chameleon.png');
  width: 216px;
@@ -41292,6 +41392,11 @@
  width: 68px;
  height: 68px;
 }
+.inventory_quest_scroll_cat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/inventory_quest_scroll_cat.png');
+  width: 68px;
+  height: 68px;
+}
 .inventory_quest_scroll_chameleon {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/inventory_quest_scroll_chameleon.png');
  width: 68px;
@@ -42897,6 +43002,56 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Body_Cat-Base {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Base.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-CottonCandyBlue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-CottonCandyBlue.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-CottonCandyPink {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-CottonCandyPink.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-Desert {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Desert.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-Golden {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Golden.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-Red {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Red.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-Shade {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Shade.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-Skeleton {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Skeleton.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-White {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-White.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-Zombie {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Zombie.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Body_Chameleon-Base {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Chameleon-Base.png');
  width: 105px;
@@ -48437,6 +48592,56 @@
  width: 105px;
  height: 105px;
 }
+.Mount_Head_Cat-Base {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Base.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-CottonCandyBlue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-CottonCandyBlue.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-CottonCandyPink {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-CottonCandyPink.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-Desert {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Desert.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-Golden {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Golden.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-Red {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Red.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-Shade {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Shade.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-Skeleton {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Skeleton.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-White {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-White.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-Zombie {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Zombie.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Head_Chameleon-Base {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Chameleon-Base.png');
  width: 105px;
@@ -54037,6 +54242,56 @@
  width: 81px;
  height: 99px;
 }
+.Pet-Cat-Base {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Base.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-CottonCandyBlue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-CottonCandyBlue.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-CottonCandyPink {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-CottonCandyPink.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-Desert {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Desert.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-Golden {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Golden.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-Red {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Red.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-Shade {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Shade.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-Skeleton {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Skeleton.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-White {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-White.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-Zombie {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Zombie.png');
+  width: 81px;
+  height: 99px;
+}
 .Pet-Chameleon-Base {
  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Chameleon-Base.png');
  width: 81px;
@@ -1,5 +1,5 @@

-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .featured-label {
  width: auto;
@@ -2,7 +2,7 @@
 $grid-gutter-width: 24px;

 // Bootstrap and its default variables
-@import 'node_modules/bootstrap/scss/bootstrap';
+@import '~/bootstrap/scss/bootstrap';

 // Bootstrap Vue styles
-@import 'node_modules/bootstrap-vue/dist/bootstrap-vue';
+@import '~/bootstrap-vue/dist/bootstrap-vue';
@@ -1,4 +1,4 @@
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 h1 {
  margin-top: 0px;
@@ -61,13 +61,13 @@ input, textarea, input.form-control, textarea.form-control {

  &.input-valid {
    padding-right: 27px;
-    background-image: url(~@/assets/svg/for-css/check.svg);
+    background-image: url(@/assets/svg/for-css/check.svg);
    background-size: 1rem;
  }

  &.input-invalid {
    padding-right: 40px;
-    background-image: url(~@/assets/svg/for-css/alert.svg);
+    background-image: url(@/assets/svg/for-css/alert.svg);
    background-size: 16px 16px;
    border-color: $red-100 !important;
  }
@@ -239,7 +239,7 @@ $bg-disabled-control: $gray-10;
    &:checked~.custom-control-label::after {
      width: 18px;
      height: 18px;
-      background-image: url(~@/assets/svg/for-css/checkbox-white.svg);
+      background-image: url(@/assets/svg/for-css/checkbox-white.svg);
      background-size: 13px 10px;
    }

@@ -29,13 +29,13 @@
 }

 .iconalert-success::before {
-  background-image: url(~@/assets/svg/for-css/checkbox-white.svg);
+  background-image: url(@/assets/svg/for-css/checkbox-white.svg);
  background-size: 13px 10px;
  background-color: #1ca372;
 }

 .iconalert-warning::before, .iconalert-error::before {
-  background-image: url(~@/assets/svg/for-css/alert-white.svg);
+  background-image: url(@/assets/svg/for-css/alert-white.svg);
  background-size: 16px 16px;
 }

@@ -1,4 +1,4 @@
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .modal {
  z-index: 1350;
@@ -1,4 +1,4 @@
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .container-fluid.static-view {
  margin: 5em 2em 0 2em;
@@ -4,7 +4,7 @@
      <!-- @TODO i18n. How to setup the strings with the router-link inside?-->
      <img
        :class="retiredChatPage ? 'mt-5' : 'image-404'"
-        src="~@/assets/images/404.png"
+        src="@/assets/images/404.png"
      >
      <div v-if="retiredChatPage">
        <h1>
@@ -54,7 +54,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 h1, .static-wrapper h1 {
  color: $purple-200;
@@ -103,7 +103,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .btn-primary:active {
      border: 2px solid $purple-400 !important;
@@ -189,10 +189,10 @@
 import Avatar from '../avatar';
 import { mapState } from '@/libs/store';
 import markdownDirective from '@/directives/markdown';
-import warriorIcon from '@/assets/svg/warrior.svg';
-import rogueIcon from '@/assets/svg/rogue.svg';
-import healerIcon from '@/assets/svg/healer.svg';
-import wizardIcon from '@/assets/svg/wizard.svg';
+import warriorIcon from '@/assets/svg/warrior.svg?raw';
+import rogueIcon from '@/assets/svg/rogue.svg?raw';
+import healerIcon from '@/assets/svg/healer.svg?raw';
+import wizardIcon from '@/assets/svg/wizard.svg?raw';

 export default {
  components: {
@@ -70,7 +70,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  h2 {
    color: $purple-200;
@@ -100,7 +100,7 @@
 </style>

 <script>
-import closeIcon from '@/assets/svg/close.svg';
+import closeIcon from '@/assets/svg/close.svg?raw';
 import Sprite from '@/components/ui/sprite.vue';

 export default {
@@ -45,7 +45,7 @@
 </template>

 <style lang="scss">
-  @import '~@/assets/scss/mixins.scss';
+  @import '@/assets/scss/mixins.scss';

  #generic-achievement {
    @include centeredModal();
@@ -61,7 +61,7 @@
 </style>

 <style scoped lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .content {
    text-align: center;
@@ -98,7 +98,7 @@
 <script>
 import achievements from '@/../../common/script/content/achievements';
 import { mapState } from '@/libs/store';
-import svgClose from '@/assets/svg/close.svg';
+import svgClose from '@/assets/svg/close.svg?raw';
 import Sprite from '@/components/ui/sprite.vue';

 export default {
@@ -58,7 +58,7 @@ label(style='display:inline-block') {{ $t('dontShowAgain') }}
 </template>

 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  #level-up {
    .modal-content {
@@ -160,8 +160,8 @@ label(style='display:inline-block') {{ $t('dontShowAgain') }}
 <script>
 import Avatar from '../avatar';
 import { mapState } from '@/libs/store';
-import starGroup from '@/assets/svg/star-group.svg';
-import sparkles from '@/assets/svg/sparkles-left.svg';
+import starGroup from '@/assets/svg/star-group.svg?raw';
+import sparkles from '@/assets/svg/sparkles-left.svg?raw';

 const levelQuests = {
  15: 'atom1',
@@ -17,7 +17,7 @@
      </h2>
      <img
        class="onboarding-complete-banner d-block"
-        src="~@/assets/images/onboarding-complete-banner@2x.png"
+        src="@/assets/images/onboarding-complete-banner@2x.png"
      >
      <p
        v-once
@@ -59,7 +59,7 @@
 </style>

 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 h2 {
  color: $purple-200;
@@ -100,7 +100,7 @@ button {
 </style>

 <script>
-import svgClose from '@/assets/svg/close.svg';
+import svgClose from '@/assets/svg/close.svg?raw';

 export default {
  data () {
@@ -73,7 +73,7 @@
 </template>

 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  #won-challenge {
    .modal-body {
@@ -96,7 +96,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .purple {
    color: $purple-300;
@@ -146,9 +146,9 @@
 <script>
 import habiticaMarkdown from 'habitica-markdown';
 import closeIcon from '@/components/shared/closeIcon';
-import sparkles from '@/assets/svg/star-group.svg';
-import gem from '@/assets/svg/gem.svg';
-import stars from '@/assets/svg/sparkles-left.svg';
+import sparkles from '@/assets/svg/star-group.svg?raw';
+import gem from '@/assets/svg/gem.svg?raw';
+import stars from '@/assets/svg/sparkles-left.svg?raw';
 import { mapState } from '@/libs/store';

 export default {
@@ -7,7 +7,11 @@
    >
      Could not find any matching users.
    </div>
-    <loading-spinner class="mx-auto mb-2" dark-color="true" v-if="isSearching" />
+    <loading-spinner
+      v-if="isSearching"
+      class="mx-auto mb-2"
+      dark-color="true"
+    />
    <div
      v-if="users.length > 0"
      class="list-group"
@@ -38,7 +38,10 @@
            <strong v-else>No</strong>
          </div>
        </div>
-        <div v-if="cronError" class="form-group row">
+        <div
+          v-if="cronError"
+          class="form-group row"
+        >
          <label class="col-sm-3 col-form-label">lastCron value:</label>
          <strong>{{ hero.lastCron | formatDate }}</strong>
          <br>
@@ -215,7 +215,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

 .input-group-append {
  width: auto;
@@ -283,9 +283,9 @@
      </div>

      <div
-        class="time-travel"
        v-if="TIME_TRAVEL_ENABLED && user?.permissions?.fullAccess"
        :key="lastTimeJump"
+        class="time-travel"
      >
        <a
          class="btn btn-secondary mr-1"
@@ -306,7 +306,7 @@
            @click="resetTime()"
          >
            Reset
-        </a>
+          </a>
        </div>
        <a
          class="btn btn-secondary mr-1"
@@ -410,7 +410,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 .footer-row {
  margin: 0;
  flex: 0 1 auto;
@@ -845,12 +845,12 @@ import moment from 'moment';
 import Vue from 'vue';

 // images
-import melior from '@/assets/svg/melior.svg';
-import twitter from '@/assets/svg/twitter.svg';
-import facebook from '@/assets/svg/facebook.svg';
-import instagram from '@/assets/svg/instagram.svg';
-import tumblr from '@/assets/svg/tumblr.svg';
-import heart from '@/assets/svg/heart.svg';
+import melior from '@/assets/svg/melior.svg?raw';
+import twitter from '@/assets/svg/twitter.svg?raw';
+import facebook from '@/assets/svg/facebook.svg?raw';
+import instagram from '@/assets/svg/instagram.svg?raw';
+import tumblr from '@/assets/svg/tumblr.svg?raw';
+import heart from '@/assets/svg/heart.svg?raw';

 // components & modals
 import { mapState } from '@/libs/store';
@@ -858,13 +858,13 @@ import buyGemsModal from './payments/buyGemsModal.vue';
 import reportBug from '@/mixins/reportBug.js';
 import { worldStateMixin } from '@/mixins/worldState';

-const DEBUG_ENABLED = process.env.DEBUG_ENABLED === 'true'; // eslint-disable-line no-process-env
-const TIME_TRAVEL_ENABLED = process.env.TIME_TRAVEL_ENABLED === 'true'; // eslint-disable-line no-process-env
+const DEBUG_ENABLED = import.meta.env.DEBUG_ENABLED === 'true'; // eslint-disable-line no-process-env
+const TIME_TRAVEL_ENABLED = import.meta.env.TIME_TRAVEL_ENABLED === 'true'; // eslint-disable-line no-process-env
 let sinon;
-if (TIME_TRAVEL_ENABLED) {
+/* if (TIME_TRAVEL_ENABLED) {
  // eslint-disable-next-line global-require
  sinon = await import('sinon');
-}
+} */

 export default {
  components: {
@@ -168,7 +168,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .form {
    margin: 0 auto;
@@ -227,8 +227,8 @@ import debounce from 'lodash/debounce';
 import isEmail from 'validator/es/lib/isEmail';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { setUpAxios, buildAppleAuthUrl } from '@/libs/auth';
-import googleIcon from '@/assets/svg/google.svg';
-import appleIcon from '@/assets/svg/apple_black.svg';
+import googleIcon from '@/assets/svg/google.svg?raw';
+import appleIcon from '@/assets/svg/apple_black.svg?raw';

 export default {
  name: 'AuthForm',
@@ -290,7 +290,7 @@ export default {
  },
  mounted () {
    hello.init({
-      google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line
+      google: import.meta.env.GOOGLE_CLIENT_ID, // eslint-disable-line
    });
  },
  methods: {
@@ -355,7 +355,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  @media only screen  and (min-height: 1080px) {
    .bottom-wrap-register {
@@ -491,7 +491,7 @@

  #top-background {
    .seamless_stars_varied_opacity_repeat {
-      background-image: url('~@/assets/images/auth/seamless_stars_varied_opacity.png');
+      background-image: url('@/assets/images/auth/seamless_stars_varied_opacity.png');
      background-repeat: repeat-x;
      position: absolute;
      height: 500px;
@@ -510,7 +510,7 @@
    position: relative;

    .seamless_mountains_demo_repeat {
-      background-image: url('~@/assets/images/auth/seamless_mountains_demo.png');
+      background-image: url('@/assets/images/auth/seamless_mountains_demo.png');
      background-repeat: repeat-x;
      width: 100%;
      height: 300px;
@@ -520,7 +520,7 @@
    }

    .midground_foreground_extended2 {
-      background-image: url('~@/assets/images/auth/midground_foreground_extended2.png');
+      background-image: url('@/assets/images/auth/midground_foreground_extended2.png');
      position: relative;
      width: 1500px;
      max-width: 100%;
@@ -611,11 +611,11 @@ import isEmail from 'validator/es/lib/isEmail';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { buildAppleAuthUrl } from '../../libs/auth';
 import sanitizeRedirect from '@/mixins/sanitizeRedirect';
-import exclamation from '@/assets/svg/exclamation.svg';
-import gryphon from '@/assets/svg/gryphon.svg';
-import habiticaIcon from '@/assets/svg/logo-horizontal.svg';
-import googleIcon from '@/assets/svg/google.svg';
-import appleIcon from '@/assets/svg/apple_black.svg';
+import exclamation from '@/assets/svg/exclamation.svg?raw';
+import gryphon from '@/assets/svg/gryphon.svg?raw';
+import habiticaIcon from '@/assets/svg/logo-horizontal.svg?raw';
+import googleIcon from '@/assets/svg/google.svg?raw';
+import appleIcon from '@/assets/svg/apple_black.svg?raw';

 export default {
  mixins: [sanitizeRedirect],
@@ -728,7 +728,7 @@ export default {
    this.forgotPassword = this.$route.path.startsWith('/forgot-password');

    hello.init({
-      google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line
+      google: import.meta.env.GOOGLE_CLIENT_ID, // eslint-disable-line
    });
  },
  methods: {
@@ -99,7 +99,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .avatar {
    width: 141px;
@@ -27,7 +27,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .bottom-banner {
    background: linear-gradient(114.26deg, $purple-300 0%, $purple-200 100%);
@@ -55,7 +55,7 @@
 </style>

 <script>
-import sparkles from '@/assets/svg/sparkles-left.svg';
+import sparkles from '@/assets/svg/sparkles-left.svg?raw';

 export default {
  data () {
@@ -5,8 +5,8 @@
  >
    <div
      v-for="option in items"
-      :key="option.key"
      :id="option.imageName"
+      :key="option.key"
      class="outer-option-background"
      :class="{
        premium: Boolean(option.gem),
@@ -28,23 +28,22 @@
          v-if="!option.none"
          class="sprite"
          :prefix="option.isGear ? 'shop' : 'icon'"
-          :imageName="option.imageName"
          :image-name="option.imageName"
        />
-          <div
-            v-else
-            class="redline-outer"
-          >
-            <div class="redline"></div>
-          </div>
+        <div
+          v-else
+          class="redline-outer"
+        >
+          <div class="redline"></div>
+        </div>
      </div>
    </div>
  </div>
 </template>

 <script>
-import gem from '@/assets/svg/gem.svg';
-import gold from '@/assets/svg/gold.svg';
+import gem from '@/assets/svg/gem.svg?raw';
+import gold from '@/assets/svg/gold.svg?raw';
 import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 import Sprite from '@/components/ui/sprite.vue';

@@ -73,7 +72,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .customize-options {
    width: 100%;
@@ -19,7 +19,7 @@ export default {
 </script>

 <style scoped lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .sub-menu {
    display: flex;
@@ -31,7 +31,7 @@
 <script>
 import markdownDirective from '@/directives/markdown';

-const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
+const COMMUNITY_MANAGER_EMAIL = import.meta.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line

 export default {
  directives: {
@@ -118,7 +118,7 @@
 </style>

 <style scoped lang="scss">
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 h2 {
  color: $white;
@@ -70,7 +70,7 @@
 </style>

 <style scoped lang="scss">
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 h2 {
  color: $white;
@@ -134,7 +134,7 @@ label {

 <script>
 import closeIcon from '@/components/shared/closeIcon';
-import checkCircleIcon from '@/assets/svg/check_circle.svg';
+import checkCircleIcon from '@/assets/svg/check_circle.svg?raw';
 import { MODALS } from '@/libs/consts';

 export default {
@@ -259,7 +259,7 @@
 </template>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  h1 {
    color: $purple-200;
@@ -380,9 +380,9 @@ import sidebarSection from '../sidebarSection';
 import userLink from '../userLink';
 import groupLink from '../groupLink';

-import gemIcon from '@/assets/svg/gem.svg';
-import memberIcon from '@/assets/svg/member-icon.svg';
-import calendarIcon from '@/assets/svg/calendar.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import memberIcon from '@/assets/svg/member-icon.svg?raw';
+import calendarIcon from '@/assets/svg/calendar.svg?raw';

 const TASK_KEYS_TO_REMOVE = ['_id', 'completed', 'date', 'dateCompleted', 'history', 'id', 'streak', 'createdAt', 'challenge'];

@@ -106,7 +106,7 @@
 </template>

 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
  // Have to use this, because v-markdown creates p element in h3. Scoping doesn't work with it.
  .challenge-title > p {
    display: -webkit-box;
@@ -127,7 +127,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .challenge {
    background-color: $white;
@@ -377,14 +377,14 @@ import categoryTags from '../categories/categoryTags';
 import markdownDirective from '@/directives/markdown';
 import { mapState } from '@/libs/store';

-import gemIcon from '@/assets/svg/gem.svg';
-import memberIcon from '@/assets/svg/member-icon.svg';
-import calendarIcon from '@/assets/svg/calendar.svg';
-import habitIcon from '@/assets/svg/habit.svg';
-import todoIcon from '@/assets/svg/todo.svg';
-import dailyIcon from '@/assets/svg/daily.svg';
-import rewardIcon from '@/assets/svg/reward.svg';
-import officialIcon from '@/assets/svg/official.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import memberIcon from '@/assets/svg/member-icon.svg?raw';
+import calendarIcon from '@/assets/svg/calendar.svg?raw';
+import habitIcon from '@/assets/svg/habit.svg?raw';
+import todoIcon from '@/assets/svg/todo.svg?raw';
+import dailyIcon from '@/assets/svg/daily.svg?raw';
+import rewardIcon from '@/assets/svg/reward.svg?raw';
+import officialIcon from '@/assets/svg/official.svg?raw';

 export default {
  components: {
@@ -207,7 +207,7 @@
 </template>

 <style lang='scss'>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  #challenge-modal {
    h5 {
@@ -81,7 +81,7 @@
 </template>

 <style lang='scss'>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  #close-challenge-modal {
    h2 {
@@ -98,7 +98,7 @@
    }

    .support-habitica {
-      background-image: url('~@/assets/svg/for-css/support-habitica-gems.svg');
+      background-image: url('@/assets/svg/for-css/support-habitica-gems.svg?raw');
      width: 325px;
      height: 89px;
      margin: 0 auto;
@@ -63,7 +63,7 @@
 </template>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  @media only screen and (max-width: 768px) {
    .header-row {
@@ -122,7 +122,7 @@ import challengeModal from './challengeModal';
 import externalLinks from '@/mixins/externalLinks';
 import challengeUtilities from '@/mixins/challengeUtilities';

-import positiveIcon from '@/assets/svg/positive.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';

 export default {
  components: {
@@ -49,7 +49,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .no-challenge-section {
    padding: 2em;
@@ -84,7 +84,7 @@ import markdownDirective from '@/directives/markdown';
 import externalLinks from '../../mixins/externalLinks';

 import challengeItem from './challengeItem';
-import challengeIcon from '@/assets/svg/challenge.svg';
+import challengeIcon from '@/assets/svg/challenge.svg?raw';

 export default {
  components: {
@@ -86,7 +86,7 @@
 </template>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  @media only screen and (max-width: 768px) {
    .header-row {
@@ -150,8 +150,8 @@ import challengeModal from './challengeModal';
 import challengeUtilities from '@/mixins/challengeUtilities';
 import externalLinks from '@/mixins/externalLinks';

-import challengeIcon from '@/assets/svg/challenge.svg';
-import positiveIcon from '@/assets/svg/positive.svg';
+import challengeIcon from '@/assets/svg/challenge.svg?raw';
+import positiveIcon from '@/assets/svg/positive.svg?raw';

 export default {
  components: {
@@ -102,7 +102,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .modal-body {
    padding: 0px 8px 0px 8px;
@@ -207,8 +207,8 @@ import { mapState } from '@/libs/store';
 import notifications from '@/mixins/notifications';
 import { userStateMixin } from '../../mixins/userState';
 import markdownDirective from '@/directives/markdown';
-import svgClose from '@/assets/svg/close.svg';
-import svgReport from '@/assets/svg/report.svg';
+import svgClose from '@/assets/svg/close.svg?raw';
+import svgReport from '@/assets/svg/report.svg?raw';

 export default {
  directives: {
@@ -34,8 +34,8 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/tiers.scss';
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/tiers.scss';
+  @import '@/assets/scss/colors.scss';

  .autocomplete-results {
    padding: .5em;
@@ -74,16 +74,16 @@
 <script>
 import groupBy from 'lodash/groupBy';
 import styleHelper from '@/mixins/styleHelper';
-import tier1 from '@/assets/svg/tier-1.svg';
-import tier2 from '@/assets/svg/tier-2.svg';
-import tier3 from '@/assets/svg/tier-3.svg';
-import tier4 from '@/assets/svg/tier-4.svg';
-import tier5 from '@/assets/svg/tier-5.svg';
-import tier6 from '@/assets/svg/tier-6.svg';
-import tier7 from '@/assets/svg/tier-7.svg';
-import tier8 from '@/assets/svg/tier-mod.svg';
-import tier9 from '@/assets/svg/tier-staff.svg';
-import tierNPC from '@/assets/svg/tier-npc.svg';
+import tier1 from '@/assets/svg/tier-1.svg?raw';
+import tier2 from '@/assets/svg/tier-2.svg?raw';
+import tier3 from '@/assets/svg/tier-3.svg?raw';
+import tier4 from '@/assets/svg/tier-4.svg?raw';
+import tier5 from '@/assets/svg/tier-5.svg?raw';
+import tier6 from '@/assets/svg/tier-6.svg?raw';
+import tier7 from '@/assets/svg/tier-7.svg?raw';
+import tier8 from '@/assets/svg/tier-mod.svg?raw';
+import tier9 from '@/assets/svg/tier-staff.svg?raw';
+import tierNPC from '@/assets/svg/tier-npc.svg?raw';

 export default {
  mixins: [styleHelper],
@@ -61,7 +61,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .avatar {
    width: 10%;
@@ -95,7 +95,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

   .modal-body {
     padding: 0px 8px 0px 8px;
@@ -199,7 +199,7 @@
 import notifications from '@/mixins/notifications';
 import markdownDirective from '@/directives/markdown';
 import { userStateMixin } from '../../mixins/userState';
-import svgClose from '@/assets/svg/close.svg';
+import svgClose from '@/assets/svg/close.svg?raw';

 export default {
  directives: {
@@ -572,7 +572,7 @@
 </template>

 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  $dialogMarginTop: 56px;
  $userCreationBgHeight:  105px;
@@ -671,7 +671,7 @@
    }

    .user-creation-bg {
-      background-image: url('~@/assets/creator/creator-hills-bg.png');
+      background-image: url('@/assets/creator/creator-hills-bg.png');
      height: $userCreationBgHeight;
      width: 219px;
      margin: 0 auto;
@@ -1001,18 +1001,18 @@ import hairSettings from './avatarModal/hair-settings';
 import extraSettings from './avatarModal/extra-settings';
 import closeX from './ui/closeX';

-import logoPurple from '@/assets/svg/logo-purple.svg';
-import bodyIcon from '@/assets/svg/body.svg';
-import accessoriesIcon from '@/assets/svg/accessories.svg';
-import skinIcon from '@/assets/svg/skin.svg';
-import hairIcon from '@/assets/svg/hair.svg';
-import backgroundsIcon from '@/assets/svg/backgrounds.svg';
-import gem from '@/assets/svg/gem.svg';
-import hourglass from '@/assets/svg/hourglass.svg';
-import gold from '@/assets/svg/gold.svg';
-import arrowRight from '@/assets/svg/arrow_right.svg';
-import arrowLeft from '@/assets/svg/arrow_left.svg';
-import svgClose from '@/assets/svg/close.svg';
+import logoPurple from '@/assets/svg/logo-purple.svg?raw';
+import bodyIcon from '@/assets/svg/body.svg?raw';
+import accessoriesIcon from '@/assets/svg/accessories.svg?raw';
+import skinIcon from '@/assets/svg/skin.svg?raw';
+import hairIcon from '@/assets/svg/hair.svg?raw';
+import backgroundsIcon from '@/assets/svg/backgrounds.svg?raw';
+import gem from '@/assets/svg/gem.svg?raw';
+import hourglass from '@/assets/svg/hourglass.svg?raw';
+import gold from '@/assets/svg/gold.svg?raw';
+import arrowRight from '@/assets/svg/arrow_right.svg?raw';
+import arrowLeft from '@/assets/svg/arrow_left.svg?raw';
+import svgClose from '@/assets/svg/close.svg?raw';
 import { avatarEditorUtilities } from '../mixins/avatarEditUtilities';
 import Sprite from './ui/sprite';

@@ -60,7 +60,7 @@
 </template>

 <style lang="scss">
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 #external-link-modal {
  &.modal {
@@ -174,8 +174,8 @@
 </style>

 <script>
-import exclamationIcon from '@/assets/svg/exclamation.svg';
-import closeIcon from '@/assets/svg/new-close.svg';
+import exclamationIcon from '@/assets/svg/exclamation.svg?raw';
+import closeIcon from '@/assets/svg/new-close.svg?raw';

 export default {
  data () {
@@ -39,7 +39,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .face-avatar {
    width: 36px;
@@ -108,7 +108,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  h2 {
    color: $purple-300;
@@ -201,7 +201,7 @@

 </style>
 <style lang="scss">
-  @import '~@/assets/scss/mixins.scss';
+  @import '@/assets/scss/mixins.scss';
  #create-group {
    .modal-dialog {
      max-width: 448px;
@@ -28,9 +28,9 @@
      ></div>
      <img
        class="task-columns"
-        src="~@/assets/images/group-plans/task-columns.png"
-        srcset="~@/assets/images/group-plans/task-columns@2x.png 2x,
-          ~@/assets/images/group-plans/task-columns@3x.png 3x"
+        src="@/assets/images/group-plans/task-columns.png"
+        srcset="@/assets/images/group-plans/task-columns@2x.png 2x,
+          @/assets/images/group-plans/task-columns@3x.png 3x"
      >
    </div>
    <div
@@ -96,7 +96,7 @@
 </template>

 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
  #group-plans-update {
    .modal-content {
      border-top-left-radius: 10px;
@@ -125,7 +125,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
  h2 {
    color: $white;
    line-height: 28px;
@@ -183,8 +183,8 @@
 </style>

 <script>
-import closeIcon from '@/assets/svg/close.svg';
-import sparkles from '@/assets/svg/sparkles-left.svg';
+import closeIcon from '@/assets/svg/close.svg?raw';
+import sparkles from '@/assets/svg/sparkles-left.svg?raw';

 export default {
  data () {
@@ -125,8 +125,8 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/create-task.scss';
+  @import '@/assets/scss/colors.scss';
+  @import '@/assets/scss/create-task.scss';

  h1 {
    color: $purple-300;
@@ -190,13 +190,13 @@ import toggleSwitch from '@/components/ui/toggleSwitch';

 import sync from '../../mixins/sync';

-import positiveIcon from '@/assets/svg/positive.svg';
-import filterIcon from '@/assets/svg/filter.svg';
-import deleteIcon from '@/assets/svg/delete.svg';
-import habitIcon from '@/assets/svg/habit.svg';
-import dailyIcon from '@/assets/svg/daily.svg';
-import todoIcon from '@/assets/svg/todo.svg';
-import rewardIcon from '@/assets/svg/reward.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';
+import filterIcon from '@/assets/svg/filter.svg?raw';
+import deleteIcon from '@/assets/svg/delete.svg?raw';
+import habitIcon from '@/assets/svg/habit.svg?raw';
+import dailyIcon from '@/assets/svg/daily.svg?raw';
+import todoIcon from '@/assets/svg/todo.svg?raw';
+import rewardIcon from '@/assets/svg/reward.svg?raw';

 import * as Analytics from '@/libs/analytics';
 import { mapState } from '@/libs/store';
@@ -212,8 +212,8 @@ export default {
 </script>

 <style scoped lang="scss">
-  @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/variables.scss';
+  @import '@/assets/scss/colors.scss';
+  @import '@/assets/scss/variables.scss';

  .chat-actions {
    margin-top: 1em;
@@ -21,7 +21,7 @@
 </template>

 <style lang="scss">
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .community-guidelines {
  background-color: rgba(135, 129, 144, 0.84);
@@ -114,7 +114,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .copy-icon {
    width: 1rem;
@@ -163,7 +163,7 @@
    width: 100%;

    .quest_screen {
-      background-image: url('~@/assets/images/group@3x.png');
+      background-image: url('@/assets/images/group@3x.png');
      background-size: cover;
      width: 100%;
      height: 246px;
@@ -196,7 +196,7 @@
  }

  .join-party {
-    background-image: url('~@/assets/images/party.png');
+    background-image: url('@/assets/images/party.png');
    background-size: cover;
    width: 203px;
    height: 66px;
@@ -244,7 +244,7 @@ import * as Analytics from '@/libs/analytics';
 import notifications from '@/mixins/notifications';
 import closeX from '../ui/closeX';

-import copyIcon from '@/assets/svg/copy.svg';
+import copyIcon from '@/assets/svg/copy.svg?raw';
 import copyToClipboard from '@/mixins/copyToClipboard';

 export default {
@@ -65,7 +65,7 @@ b-dropdown(:text="$t('sort')", right=true)
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .sort-select {
    margin: 2em;
@@ -95,7 +95,7 @@ import PublicGuildItem from './publicGuildItem';
 import Sidebar from './groupSidebar';
 import groupUtilities from '@/mixins/groupsUtilities';

-import positiveIcon from '@/assets/svg/positive.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';

 function _mapCategories (guilds) {
  guilds.forEach(guild => {
@@ -115,7 +115,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  @media (min-width: 1300px) {
    .standard-page {
@@ -297,17 +297,17 @@ import markdownDirective from '@/directives/markdown';
 import chat from './chat';
 import userLink from '../userLink';

-import deleteIcon from '@/assets/svg/delete.svg';
-import copyIcon from '@/assets/svg/copy.svg';
-import likeIcon from '@/assets/svg/like.svg';
-import likedIcon from '@/assets/svg/liked.svg';
-import reportIcon from '@/assets/svg/report.svg';
-import gemIcon from '@/assets/svg/gem.svg';
-import questIcon from '@/assets/svg/quest.svg';
-import questBackground from '@/assets/svg/quest-background-border.svg';
-import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-small.svg';
-import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-small.svg';
-import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-small.svg';
+import deleteIcon from '@/assets/svg/delete.svg?raw';
+import copyIcon from '@/assets/svg/copy.svg?raw';
+import likeIcon from '@/assets/svg/like.svg?raw';
+import likedIcon from '@/assets/svg/liked.svg?raw';
+import reportIcon from '@/assets/svg/report.svg?raw';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import questIcon from '@/assets/svg/quest.svg?raw';
+import questBackground from '@/assets/svg/quest-background-border.svg?raw';
+import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-small.svg?raw';
+import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-small.svg?raw';
+import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-small.svg?raw';
 import QuestDetailModal from './questDetailModal';
 import RightSidebar from '@/components/groups/rightSidebar';
 import InvitationListModal from './invitationListModal';
@@ -312,7 +312,7 @@ label.custom-control-label(v-once) {{ $t('allowGuildInvitationsFromNonMembers')
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .custom-control-input {
    z-index: 1 !important;
@@ -376,8 +376,8 @@ import { MAX_SUMMARY_SIZE_FOR_GUILDS } from '@/../../common/script/constants';
 import CategoryOptions from '@/../../common/script/content/categoryOptions';
 import toggleSwitch from '@/components/ui/toggleSwitch';
 import markdownDirective from '@/directives/markdown';
-import gemIcon from '@/assets/svg/gem.svg';
-import informationIcon from '@/assets/svg/information.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import informationIcon from '@/assets/svg/information.svg?raw';

 import { userStateMixin } from '../../mixins/userState';

@@ -79,7 +79,7 @@
 </template>

 <style lang='scss'>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  #invitation-list {
    .modal-header {
@@ -127,7 +127,7 @@
 </style>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .header-wrap {
    width: 100%;
@@ -242,8 +242,8 @@ import CloseIcon from '../shared/closeIcon';
 import ClassBadge from '../members/classBadge';
 import UserLabel from '../userLabel';

-import svgClose from '@/assets/svg/close.svg';
-import svgCheck from '@/assets/svg/check.svg';
+import svgClose from '@/assets/svg/close.svg?raw';
+import svgCheck from '@/assets/svg/check.svg?raw';

 export default {
  components: {
@@ -75,7 +75,7 @@
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  a:not([href]) {
    font-size: 16px;
@@ -126,7 +126,7 @@ import isEmail from 'validator/es/lib/isEmail';
 import isUUID from 'validator/es/lib/isUUID';
 import { mapState } from '@/libs/store';
 import notifications from '@/mixins/notifications';
-import positiveIcon from '@/assets/svg/positive.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';

 const INVITE_DEFAULTS = { text: '', error: null, valid: null };

@@ -128,7 +128,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  h1 {
    color: $purple-300;
@@ -252,12 +252,12 @@ import Avatar from '../avatar';
 import userLink from '../userLink';
 import { mapState } from '@/libs/store';

-import syncIcon from '@/assets/svg/sync-2.svg';
-import usersIcon from '@/assets/svg/users.svg';
-import warriorIcon from '@/assets/svg/warrior.svg';
-import rogueIcon from '@/assets/svg/rogue.svg';
-import healerIcon from '@/assets/svg/healer.svg';
-import wizardIcon from '@/assets/svg/wizard.svg';
+import syncIcon from '@/assets/svg/sync-2.svg?raw';
+import usersIcon from '@/assets/svg/users.svg?raw';
+import warriorIcon from '@/assets/svg/warrior.svg?raw';
+import rogueIcon from '@/assets/svg/rogue.svg?raw';
+import healerIcon from '@/assets/svg/healer.svg?raw';
+import wizardIcon from '@/assets/svg/wizard.svg?raw';

 export default {
  components: {
@@ -278,7 +278,7 @@
 </style>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .apply-options {
    padding: 1em;
@@ -372,10 +372,10 @@ import isEmpty from 'lodash/isEmpty';
 import removeMemberModal from '@/components/members/removeMemberModal';
 import loadingGryphon from '@/components/ui/loadingGryphon';
 import MemberDetails from '../memberDetails';
-import blockIcon from '@/assets/svg/block.svg';
-import messageIcon from '@/assets/members/message.svg';
-import starIcon from '@/assets/members/star.svg';
-import dots from '@/assets/svg/dots.svg';
+import blockIcon from '@/assets/svg/block.svg?raw';
+import messageIcon from '@/assets/members/message.svg?raw';
+import starIcon from '@/assets/members/star.svg?raw';
+import dots from '@/assets/svg/dots.svg?raw';
 import SelectList from '@/components/ui/selectList';
 import { PAGES } from '@/libs/consts';
 import { userStateMixin } from '../../mixins/userState';
@@ -81,7 +81,7 @@ b-dropdown(:text="$t('sort')", right=true)
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
  .sort-select {
    margin: 2em;
  }
@@ -115,8 +115,8 @@ import groupUtilities from '@/mixins/groupsUtilities';
 import PublicGuildItem from './publicGuildItem';
 import Sidebar from './groupSidebar';

-import greyBadgeIcon from '@/assets/svg/grey-badge.svg';
-import positiveIcon from '@/assets/svg/positive.svg';
+import greyBadgeIcon from '@/assets/svg/grey-badge.svg?raw';
+import positiveIcon from '@/assets/svg/positive.svg?raw';

 export default {
  components: { PublicGuildItem, Sidebar },
@@ -87,7 +87,7 @@
 </style>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .header-wrap {
    width: 100%;
@@ -109,7 +109,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .card-link {
    color: #4E4A57 !important;
@@ -218,10 +218,10 @@ import { mapState } from '@/libs/store';
 import categoryTags from '../categories/categoryTags';
 import groupUtilities from '@/mixins/groupsUtilities';
 import markdown from '@/directives/markdown';
-import gemIcon from '@/assets/svg/gem.svg';
-import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-large.svg';
-import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-large.svg';
-import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-large.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-large.svg?raw';
+import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-large.svg?raw';
+import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-large.svg?raw';

 export default {
  directives: {
@@ -151,7 +151,7 @@
 </template>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  h2 {
    color: $purple-300;
@@ -308,7 +308,7 @@ import getItemInfo from '@/../../common/script/libs/getItemInfo';
 import { mapState } from '@/libs/store';
 import * as Analytics from '@/libs/analytics';

-import navigationBack from '@/assets/svg/navigation_back.svg';
+import navigationBack from '@/assets/svg/navigation_back.svg?raw';
 import questDialogContent from '../shops/quests/questDialogContent';
 import closeIcon from '../shared/closeIcon';
 import QuestRewards from '../shops/quests/questRewards';
@@ -269,7 +269,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .svg-icon {
    height: 25px;
@@ -645,10 +645,10 @@ import { mapState } from '@/libs/store';
 import sidebarSection from '../sidebarSection';
 import Sprite from '../ui/sprite';

-import questIcon from '@/assets/svg/quest.svg';
-import swordIcon from '@/assets/svg/sword.svg';
-import rageIcon from '@/assets/svg/rage.svg';
-import healthNoPaddingIcon from '@/assets/svg/health_no_padding.svg';
+import questIcon from '@/assets/svg/quest.svg?raw';
+import swordIcon from '@/assets/svg/sword.svg?raw';
+import rageIcon from '@/assets/svg/rage.svg?raw';
+import healthNoPaddingIcon from '@/assets/svg/health_no_padding.svg?raw';
 import questActionsMixin from '@/components/groups/questActions.mixin';

 export default {
@@ -143,12 +143,12 @@ import questSidebarSection from '@/components/groups/questSidebarSection';
 import sidebarSection from '@/components/sidebarSection';
 import markdownDirective from '@/directives/markdown';

-import menuIcon from '@/assets/svg/menu.svg';
-import sparklesIcon from '@/assets/svg/sparklesIcon.svg';
-import leaveIcon from '@/assets/svg/leave.svg';
-import editIcon from '@/assets/svg/edit.svg';
-import messageIcon from '@/assets/svg/message.svg';
-import usersIcon from '@/assets/svg/users.svg';
+import menuIcon from '@/assets/svg/menu.svg?raw';
+import sparklesIcon from '@/assets/svg/sparklesIcon.svg?raw';
+import leaveIcon from '@/assets/svg/leave.svg?raw';
+import editIcon from '@/assets/svg/edit.svg?raw';
+import messageIcon from '@/assets/svg/message.svg?raw';
+import usersIcon from '@/assets/svg/users.svg?raw';

 export default {
  components: {
@@ -181,7 +181,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  @media (min-width: 1300px) {
    .sidebar {
@@ -157,12 +157,12 @@
                    <img
                      v-if="!group.quest.extra.worldDmg.seasonalShop"
                      class="rage-strike"
-                      src="~@/assets/images/world-boss/rage_strike@2x.png"
+                      src="@/assets/images/world-boss/rage_strike@2x.png"
                    >
                    <img
                      v-if="group.quest.extra.worldDmg.seasonalShop"
                      class="rage-strike-active"
-                      src="~@/assets/images/world-boss/rage_strike-seasonalShop@2x.png"
+                      src="@/assets/images/world-boss/rage_strike-seasonalShop@2x.png"
                    >
                  </div>
                  <div
@@ -172,12 +172,12 @@
                    <img
                      v-if="!group.quest.extra.worldDmg.market"
                      class="rage-strike"
-                      src="~@/assets/images/world-boss/rage_strike@2x.png"
+                      src="@/assets/images/world-boss/rage_strike@2x.png"
                    >
                    <img
                      v-if="group.quest.extra.worldDmg.market"
                      class="rage-strike-active"
-                      src="~@/assets/images/world-boss/rage_strike-market@2x.png"
+                      src="@/assets/images/world-boss/rage_strike-market@2x.png"
                    >
                  </div>
                  <div
@@ -187,12 +187,12 @@
                    <img
                      v-if="!group.quest.extra.worldDmg.quests"
                      class="rage-strike"
-                      src="~@/assets/images/world-boss/rage_strike@2x.png"
+                      src="@/assets/images/world-boss/rage_strike@2x.png"
                    >
                    <img
                      v-if="group.quest.extra.worldDmg.quests"
                      class="rage-strike-active"
-                      src="~@/assets/images/world-boss/rage_strike-quests@2x.png"
+                      src="@/assets/images/world-boss/rage_strike-quests@2x.png"
                    >
                  </div>
                </div>
@@ -486,7 +486,7 @@
 </template>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  h1 {
    color: $purple-200;
@@ -756,25 +756,25 @@ import worldBossRageModal from '../world-boss/worldBossRageModal';
 import sidebarSection from '../sidebarSection';
 import chat from './chat';

-import challengeIcon from '@/assets/svg/challenge.svg';
-import chevronIcon from '@/assets/svg/chevron-red.svg';
-import gemIcon from '@/assets/svg/gem.svg';
-import healthIcon from '@/assets/svg/health.svg';
-import informationIconRed from '@/assets/svg/information-red.svg';
-import questBackground from '@/assets/svg/quest-background-border.svg';
-import rageIcon from '@/assets/svg/rage.svg';
-import swordIcon from '@/assets/svg/sword.svg';
+import challengeIcon from '@/assets/svg/challenge.svg?raw';
+import chevronIcon from '@/assets/svg/chevron-red.svg?raw';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import healthIcon from '@/assets/svg/health.svg?raw';
+import informationIconRed from '@/assets/svg/information-red.svg?raw';
+import questBackground from '@/assets/svg/quest-background-border.svg?raw';
+import rageIcon from '@/assets/svg/rage.svg?raw';
+import swordIcon from '@/assets/svg/sword.svg?raw';

-import tier1 from '@/assets/svg/tier-1.svg';
-import tier2 from '@/assets/svg/tier-2.svg';
-import tier3 from '@/assets/svg/tier-3.svg';
-import tier4 from '@/assets/svg/tier-4.svg';
-import tier5 from '@/assets/svg/tier-5.svg';
-import tier6 from '@/assets/svg/tier-6.svg';
-import tier7 from '@/assets/svg/tier-7.svg';
-import tierMod from '@/assets/svg/tier-mod.svg';
-import tierNPC from '@/assets/svg/tier-npc.svg';
-import tierStaff from '@/assets/svg/tier-staff.svg';
+import tier1 from '@/assets/svg/tier-1.svg?raw';
+import tier2 from '@/assets/svg/tier-2.svg?raw';
+import tier3 from '@/assets/svg/tier-3.svg?raw';
+import tier4 from '@/assets/svg/tier-4.svg?raw';
+import tier5 from '@/assets/svg/tier-5.svg?raw';
+import tier6 from '@/assets/svg/tier-6.svg?raw';
+import tier7 from '@/assets/svg/tier-7.svg?raw';
+import tierMod from '@/assets/svg/tier-mod.svg?raw';
+import tierNPC from '@/assets/svg/tier-npc.svg?raw';
+import tierStaff from '@/assets/svg/tier-staff.svg?raw';

 import staffList from '../../libs/staffList';
 import reportBug from '@/mixins/reportBug.js';
@@ -20,7 +20,7 @@ body.modal-open .habitica-top-banner {
 </style>

 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .habitica-top-banner {
  width: 100%;
@@ -41,7 +41,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .announce-text {
    color: $purple-50;
@@ -56,7 +56,7 @@
      rgba(255,190,93,1) 25%,
      rgba(255,190,93,1) 75%,
      rgba(255,190,93,0) 100%),
-      url('~@/assets/images/glitter.png');
+      url('@/assets/images/glitter.png');
    cursor: pointer;
  }

@@ -86,8 +86,8 @@ import find from 'lodash/find';
 import { mapState } from '@/libs/store';
 import BaseBanner from './base';

-import giftsBirthday from '@/assets/svg/gifts-birthday.svg';
-import tenBirthday from '@/assets/svg/10th-birthday-linear.svg';
+import giftsBirthday from '@/assets/svg/gifts-birthday.svg?raw';
+import tenBirthday from '@/assets/svg/10th-birthday-linear.svg?raw';

 export default {
  components: {
@@ -17,7 +17,7 @@
 </template>

 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .chat-banner {
    width: 100%;
@@ -28,7 +28,7 @@
 </template>

 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .resting-banner {
  background-color: $blue-10;
@@ -15,62 +15,62 @@
        v-if="eventName === 'fall_extra_gems'"
        class="d-none d-xl-block"
        srcset="
-    ~@/assets/images/gems/fall-confetti-left/confetti.png,
-    ~@/assets/images/gems/fall-confetti-left/confetti@2x.png 2x,
-    ~@/assets/images/gems/fall-confetti-left/confetti@3x.png 3x"
-        src="~@/assets/images/gems/fall-confetti-left/confetti.png"
+    @/assets/images/gems/fall-confetti-left/confetti.png,
+    @/assets/images/gems/fall-confetti-left/confetti@2x.png 2x,
+    @/assets/images/gems/fall-confetti-left/confetti@3x.png 3x"
+        src="@/assets/images/gems/fall-confetti-left/confetti.png"
      >
      <img
        v-else-if="eventName === 'spooky_extra_gems'"
        class="d-none d-xl-block"
        srcset="
-    ~@/assets/images/gems/spooky-confetti-left/confetti.png,
-    ~@/assets/images/gems/spooky-confetti-left/confetti@2x.png 2x,
-    ~@/assets/images/gems/spooky-confetti-left/confetti@3x.png 3x"
-        src="~@/assets/images/gems/spooky-confetti-left/confetti.png"
+    @/assets/images/gems/spooky-confetti-left/confetti.png,
+    @/assets/images/gems/spooky-confetti-left/confetti@2x.png 2x,
+    @/assets/images/gems/spooky-confetti-left/confetti@3x.png 3x"
+        src="@/assets/images/gems/spooky-confetti-left/confetti.png"
      >
      <div class="promo-test">
        <img
          v-if="eventName === 'fall_extra_gems'"
          srcset="
-      ~@/assets/images/gems/fall-text/text.png,
-      ~@/assets/images/gems/fall-text/text@2x.png 2x,
-      ~@/assets/images/gems/fall-text/text@3x.png 3x"
-          src="~@/assets/images/gems/fall-text/text.png"
+      @/assets/images/gems/fall-text/text.png,
+      @/assets/images/gems/fall-text/text@2x.png 2x,
+      @/assets/images/gems/fall-text/text@3x.png 3x"
+          src="@/assets/images/gems/fall-text/text.png"
        >
        <img
          v-else-if="eventName === 'spooky_extra_gems'"
          srcset="
-      ~@/assets/images/gems/spooky-text/text.png,
-      ~@/assets/images/gems/spooky-text/text@2x.png 2x,
-      ~@/assets/images/gems/spooky-text/text@3x.png 3x"
-          src="~@/assets/images/gems/spooky-text/text.png"
+      @/assets/images/gems/spooky-text/text.png,
+      @/assets/images/gems/spooky-text/text@2x.png 2x,
+      @/assets/images/gems/spooky-text/text@3x.png 3x"
+          src="@/assets/images/gems/spooky-text/text.png"
        >
      </div>
      <img
        v-if="eventName === 'fall_extra_gems'"
        class="d-none d-xl-block"
        srcset="
-    ~@/assets/images/gems/fall-confetti-right/confetti.png,
-    ~@/assets/images/gems/fall-confetti-right/confetti@2x.png 2x,
-    ~@/assets/images/gems/fall-confetti-right/confetti@3x.png 3x"
-        src="~@/assets/images/gems/fall-confetti-right/confetti.png"
+    @/assets/images/gems/fall-confetti-right/confetti.png,
+    @/assets/images/gems/fall-confetti-right/confetti@2x.png 2x,
+    @/assets/images/gems/fall-confetti-right/confetti@3x.png 3x"
+        src="@/assets/images/gems/fall-confetti-right/confetti.png"
      >
      <img
        v-else-if="eventName === 'spooky_extra_gems'"
        class="d-none d-xl-block"
        srcset="
-    ~@/assets/images/gems/spooky-confetti-right/confetti.png,
-    ~@/assets/images/gems/spooky-confetti-right/confetti@2x.png 2x,
-    ~@/assets/images/gems/spooky-confetti-right/confetti@3x.png 3x"
-        src="~@/assets/images/gems/spooky-confetti-right/confetti.png"
+    @/assets/images/gems/spooky-confetti-right/confetti.png,
+    @/assets/images/gems/spooky-confetti-right/confetti@2x.png 2x,
+    @/assets/images/gems/spooky-confetti-right/confetti@3x.png 3x"
+        src="@/assets/images/gems/spooky-confetti-right/confetti.png"
      >
    </div>
  </base-banner>
 </template>

 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .gems-promo-banner-fall_extra_gems {
  background: $gray-10;
@@ -34,7 +34,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .announce-text {
    color: $white;
@@ -67,7 +67,7 @@ import find from 'lodash/find';
 import { mapState } from '@/libs/store';
 import BaseBanner from './base';

-import gifts from '@/assets/svg/gifts.svg';
+import gifts from '@/assets/svg/gifts.svg?raw';

 export default {
  components: {
@@ -74,7 +74,7 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  #app-header {
    padding-left: 24px;
@@ -402,9 +402,9 @@ body.modal-open #habitica-menu {
 </style>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/utils.scss';
-  @import '~@/assets/scss/variables.scss';
+  @import '@/assets/scss/colors.scss';
+  @import '@/assets/scss/utils.scss';
+  @import '@/assets/scss/variables.scss';

  .menu-toggle {
    border: none;
@@ -417,7 +417,7 @@ body.modal-open #habitica-menu {

  .topbar {
    z-index: 1080;
-    background: $purple-100 url(~@/assets/svg/for-css/bits.svg) right top no-repeat;
+    background: $purple-100 url(@/assets/svg/for-css/bits.svg) right top no-repeat;
    min-height: 56px;
    box-shadow: 0 1px 2px 0 rgba($black, 0.24);

@@ -740,12 +740,12 @@ body.modal-open #habitica-menu {
 import { mapState, mapGetters } from '@/libs/store';
 import { goToModForm } from '@/libs/modform';

-import gemIcon from '@/assets/svg/gem.svg';
-import goldIcon from '@/assets/svg/gold.svg';
-import syncIcon from '@/assets/svg/sync.svg';
-import svgHourglasses from '@/assets/svg/hourglass.svg';
-import chevronDownIcon from '@/assets/svg/chevron-down.svg';
-import melior from '@/assets/svg/melior.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import goldIcon from '@/assets/svg/gold.svg?raw';
+import syncIcon from '@/assets/svg/sync.svg?raw';
+import svgHourglasses from '@/assets/svg/hourglass.svg?raw';
+import chevronDownIcon from '@/assets/svg/chevron-down.svg?raw';
+import melior from '@/assets/svg/melior.svg?raw';

 import creatorIntro from '../creatorIntro';
 import notificationMenu from './notificationsDropdown';
@@ -7,7 +7,7 @@
 </template>

 <style lang="scss">
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .message-count {
  background-color: $red-50;
@@ -30,7 +30,7 @@
 </template>

 <style lang="scss"> // Not scoped because the classes could be used in i18n strings
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 .notification-small {
  font-size: 12px;
  line-height: 1.33;
@@ -68,7 +68,7 @@
 </style>

 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .notification {
  width: 378px;
@@ -132,7 +132,7 @@
 </style>

 <script>
-import closeIcon from '@/assets/svg/close.svg';
+import closeIcon from '@/assets/svg/close.svg?raw';
 import { mapActions, mapState } from '@/libs/store';

 export default {
@@ -39,14 +39,14 @@
 </template>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  small, strong {
    color: $white;
  }

  .notification {
-    background-image: url('~@/assets/images/g1g1-notif.png');
+    background-image: url('@/assets/images/g1g1-notif.png');
    height: 10rem;
    padding: 3rem;
    position: relative;
@@ -81,7 +81,7 @@
 </style>

 <script>
-import closeIcon from '@/assets/svg/close-teal.svg';
+import closeIcon from '@/assets/svg/close-teal.svg?raw';
 import { mapActions } from '@/libs/store';

 export default {
@@ -13,7 +13,7 @@
    >
      <img
        class="onboarding-complete-banner d-block"
-        src="~@/assets/images/onboarding-complete-banner@2x.png"
+        src="@/assets/images/onboarding-complete-banner@2x.png"
      >
      <h3 v-once>
        {{ $t('onboardingComplete') }}
@@ -36,7 +36,7 @@
 </template>

 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';

 .onboarding-complete-content {
  text-align: center;
@@ -27,7 +27,7 @@

 <script>
 import BaseNotification from './base';
-import sparklesIcon from '@/assets/svg/sparkles.svg';
+import sparklesIcon from '@/assets/svg/sparkles.svg?raw';

 export default {
  components: {
@@ -102,7 +102,7 @@
  }

  .left-hearts {
-    background-image: url('~@/assets/images/world-boss/left-hearts@3x.png');
+    background-image: url('@/assets/images/world-boss/left-hearts@3x.png');
  }

  .quest_dysheartener_notification, .phobia_dysheartener_notification {
@@ -116,12 +116,12 @@
  }

  .quest_dysheartener_notification {
-    background-image: url('~@/assets/images/world-boss/mantis-static-notification@3x.png');
+    background-image: url('@/assets/images/world-boss/mantis-static-notification@3x.png');
  }

  .phobia_dysheartener_notification {
    display: none;
-    background-image: url('~@/assets/images/world-boss/heart-translucent-shadow-notification@3x.png');
+    background-image: url('@/assets/images/world-boss/heart-translucent-shadow-notification@3x.png');
  }

  .health-bar {
@@ -173,8 +173,8 @@ import * as quests from '@/../../common/script/content/quests';
 import { mapState } from '@/libs/store';
 import BaseNotification from './base';

-import health from '@/assets/svg/health.svg';
-import sword from '@/assets/svg/sword.svg';
+import health from '@/assets/svg/health.svg?raw';
+import sword from '@/assets/svg/sword.svg?raw';
 import { worldStateMixin } from '@/mixins/worldState';

 export default {
@@ -73,7 +73,7 @@
 </template>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .dropdown-item {
    padding: 16px 24px;
@@ -115,12 +115,12 @@
 import * as quests from '@/../../common/script/content/quests';
 import { hasCompletedOnboarding } from '@/../../common/script/libs/onboarding';
 import { mapState, mapActions } from '@/libs/store';
-import notificationsIcon from '@/assets/svg/notifications.svg';
+import notificationsIcon from '@/assets/svg/notifications.svg?raw';
 import MenuDropdown from '../ui/customMenuDropdown';
 import MessageCount from './messageCount.functional.vue';
 import { CONSTANTS, getLocalSetting, setLocalSetting } from '@/libs/userlocalManager';
-import successImage from '@/assets/svg/success.svg';
-import starBadge from '@/assets/svg/star-badge.svg';
+import successImage from '@/assets/svg/success.svg?raw';
+import starBadge from '@/assets/svg/star-badge.svg?raw';

 // Notifications
 import CARD_RECEIVED from './notifications/cardReceived';
@@ -68,7 +68,7 @@
 </template>

 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .onboarding-guide-panel {
    white-space: normal;
@@ -193,8 +193,8 @@
 import achievs from '@/../../common/script/libs/achievements';
 import { mapState } from '@/libs/store';

-import onboardingGuideBanner from '@/assets/svg/onboarding-guide-banner.svg';
-import downIcon from '@/assets/svg/down.svg';
+import onboardingGuideBanner from '@/assets/svg/onboarding-guide-banner.svg?raw';
+import downIcon from '@/assets/svg/down.svg?raw';

 export default {
  props: {
@@ -80,10 +80,10 @@
        <img
          class="swords mb-3"
          srcset="
-        ~@/assets/images/swords.png,
-        ~@/assets/images/swords@2x.png 2x,
-        ~@/assets/images/swords@3x.png 3x"
-          src="~@/assets/images/swords.png"
+        @/assets/images/swords.png,
+        @/assets/images/swords@2x.png 2x,
+        @/assets/images/swords@3x.png 3x"
+          src="@/assets/images/swords.png"
        >
        <p
          v-once
@@ -104,7 +104,7 @@
 </template>

 <style lang='scss' scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
@media only screen and (max-width: 992px) {
  .item-with-icon.item-user {
    margin-right: 0px;
@@ -140,7 +140,7 @@

 <script>
 import { mapState } from '@/libs/store';
-import userIcon from '@/assets/svg/user.svg';
+import userIcon from '@/assets/svg/user.svg?raw';
 import MenuDropdown from '../ui/customMenuDropdown';
 import MessageCount from './messageCount.functional.vue';
 import { EVENTS } from '@/libs/events';
@@ -38,7 +38,7 @@

 <style lang="scss">

-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';

  .attributes-group {
    border-radius: 4px;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Phillip Thelen	e10b7deb4b	attempt implementing prerendering	2025-02-04 17:43:30 +01:00
Phillip Thelen	d46fa98390	tell vite to ignore browser-script url	2025-02-04 17:42:55 +01:00
Phillip Thelen	3d6afa9f11	fix setupNconf imports	2025-02-04 12:29:33 +01:00
Phillip Thelen	e7616cae8d	setup nconf correctly for client build	2025-02-04 11:21:08 +01:00
Phillip Thelen	3a457f69a9	set serving url for vite content	2025-02-03 18:22:17 +01:00
Phillip Thelen	a4297283cb	fix lint	2025-02-03 17:45:09 +01:00
Phillip Thelen	ca08e3ef81	fix import	2025-02-03 17:41:41 +01:00
Phillip Thelen	c582dbd169	use vitest for client spec tests	2025-02-03 17:37:11 +01:00
Phillip Thelen	56ef07c8d2	fix various import issues	2025-02-03 16:05:03 +01:00
Phillip Thelen	896836f807	eslint fixes	2025-02-03 14:02:46 +01:00
Phillip Thelen	b5458bb604	remove gulp-nodemon and update nodemon	2025-02-03 14:00:04 +01:00
Phillip Thelen	2edb255e55	move from vue-cli-service/webpack to vite	2025-01-23 15:11:10 +01:00
Rafał Jagielski	200d917582	Fix intro guide (#15247 ) * Provide window.jquery to modules in vue.config.js * Fix curly-spacing lint error	2025-01-22 14:53:24 -06:00
negue	73082a8cf0	fix toggle disable icon position	2025-01-21 22:34:34 +01:00
Kalista Payne	dd08eee20c	chore(images): update css	2025-01-21 08:52:21 -06:00