Fix paths, make dynamic for dev and prod

package.json

@@ -6,7 +6,7 @@
   "license": "AGPL-3.0-or-later",
   "scripts": {
     "api-test": "jest src/api_tests/api.spec.ts",
-    "build": "node generate_translations.js && vite build --base=/static/",
+    "build": "node generate_translations.js && NODE_ENV=production vite build --base=/static/",
     "lint": "tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx src",
     "start": "node generate_translations.js && vite --port 4444 --open"
   },

src/components/about.tsx

@@ -3,6 +3,7 @@ import { WebSocketService } from '../services';
 import { i18n } from '../i18next';
 import { Trans } from 'react-i18next';
 import { repoUrl } from '../utils';
+import { BASE_PATH } from "../isProduction";
 
 export class About extends Component<any, any> {
   constructor(props: any, context: any) {
@@ -21,7 +22,7 @@ export class About extends Component<any, any> {
       <div className="about-container">
         <div className="about-header">
           <img
-            src="/static/banner.png"
+            src={`${BASE_PATH}banner.png`}
             className="img-fluid"
             alt="bear with black text reading 'you have nothing to lose but your chains'"
           />
@@ -76,7 +77,7 @@ export class About extends Component<any, any> {
 
             <div className="my-4">
               <img
-                src="/static/last-comment.png"
+                src={`${BASE_PATH}last-comment.png`}
                 alt="the last comment before the r/chapotraphouse subreddit was shut down"
                 className="img-fluid"
               />

src/components/main.tsx

@@ -51,8 +51,8 @@ import {
   createPostLikeFindRes,
   editPostFindRes,
   commentsToFlatNodes,
-  setupTippy,
-} from '../utils';
+  setupTippy} from '../utils';
+import { BASE_PATH } from "../isProduction";
 import { i18n } from '../i18next';
 import { Trans, withTranslation } from 'react-i18next';
 import { PATREON_URL } from '../constants';
@@ -319,11 +319,11 @@ class Main extends Component<any, MainState> {
             <h5 className="mb-4 text-center h3">{`${this.state.siteRes.site.name}`}</h5>
             <img
               className="img-fluid mb-2"
-              src="/static/hexbear-logo.png"
+              src={`${BASE_PATH}hexbear-logo.png`}
               alt="hexbear logo"
             />
             <img
-              src="/static/welcome.gif"
+              src={`${BASE_PATH}welcome.gif`}
               className="img-fluid"
               style={{ width: '100%' }}
             />

src/components/navbar.tsx

@@ -29,8 +29,8 @@ import {
   toast,
   messageToastify,
   md,
-  imagesDownsize,
-} from '../utils';
+  imagesDownsize} from '../utils';
+import { BASE_PATH } from "../isProduction";
 import { version } from '../version';
 import { i18n } from '../i18next';
 import { User } from './user';
@@ -175,7 +175,7 @@ class UnwrappedNavbar extends Component<any, NavbarState> {
         <nav className="container-fluid navbar navbar-expand-md navbar-light main-navbar shadow p-0 px-3">
           <a className="navbar-brand" href="/">
             <img
-              src="/static/hexbear_head.svg"
+              src={`${BASE_PATH}hexbear_head.svg`}
               className="icon icon-navbar"
               alt="vaporwave hammer and sickle logo, courtesy of ancestral potato"
             />

src/components/welcome.tsx

@@ -12,6 +12,7 @@ import {
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { wsJsonToRes, validEmail, toast, setupTippy } from '../utils';
+import { BASE_PATH } from "../isProduction";
 import { i18n } from '../i18next';
 import { linkEvent } from '../linkEvent';
 
@@ -75,7 +76,7 @@ export class WelcomePage extends Component<any, State> {
             <div className="text-center my-4 p-1">
               <img
                 className="img-fluid mb-2 welcome-logo"
-                src="/static/logo.png"
+                src={`${BASE_PATH}logo.png`}
                 alt="vaporwave hammer and sickle logo, courtesy of ancestral potato"
               />
               <h3>Chapo Trap House is coming</h3>

src/custom-emojis.ts

@@ -1,3 +1,5 @@
+import { BASE_PATH } from "./isProduction";
+
 export const emojiPaths = [
   '100-com.png',
   '10000-com.png',
@@ -129,7 +131,7 @@ export const emojiPaths = [
   'zizek-ok.png',
 ];
 
-const EMOJI_DIR_PATH = '/static/emojis/';
+const EMOJI_DIR_PATH = `emojis/`;
 
 export const customEmojis = emojiPaths.map(path => ({
   key: path.split('.')[0],

src/isProduction.ts

@@ -0,0 +1,4 @@
+// eslint-ignore-next-line
+export const isProduction = process.env.NODE_ENV === "production";
+
+export const BASE_PATH = isProduction ? "/static/" : "/";

src/utils.ts

@@ -59,8 +59,10 @@ import emojiShortName from 'emoji-short-name';
 import Toastify from 'toastify-js';
 import tippy from 'tippy.js';
 import EmojiButton from '@joeattardi/emoji-button';
+
 import { customEmojis, replaceEmojis } from './custom-emojis';
 import moment from 'moment';
+import { BASE_PATH } from './isProduction';
 
 export const repoUrl = 'https://gitlab.com/chapo-sandbox/production';
 export const helpGuideUrl = '/docs/about_guide.html';
@@ -475,7 +477,7 @@ export function setTheme(theme: string = 'darkly', loggedIn: boolean = false) {
       .setAttribute('disabled', 'disabled');
 
     // Load the theme dynamically
-    let cssLoc = `/static/css/themes/${theme}.min.css`;
+    let cssLoc = `${BASE_PATH}css/themes/${theme}.min.css`;
     loadCss(theme, cssLoc);
     document.getElementById(theme).removeAttribute('disabled');
   }
@@ -648,7 +650,7 @@ export function setupTribute(): Tribute {
           {
             key: 'logo',
             val:
-              '<img className="icon icon-navbar" src="/static/logo.png" alt="vaporwave hammer and sickle logo, courtesy of ancestral potato">',
+              `<img className="icon icon-navbar" src="${BASE_PATH}logo.png" alt="vaporwave hammer and sickle logo, courtesy of ancestral potato">`,
           },
           ...customEmojis,
         ],