remove base path for discord activity

embedg-app/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port 3000",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },

embedg-app/src/components/MessagePreview.tsx

@@ -8,6 +8,7 @@ import { colorIntToHex } from "../util/discord";
 import { useSendSettingsStore } from "../state/sendSettings";
 import Twemoji from "react-twemoji";
 import { useGuildBrandingQuery } from "../api/queries";
+import { getRelativeUrl } from "../util/url";
 
 const buttonColors = {
   1: "discord-button-primary",
@@ -33,7 +34,8 @@ export default function MessagePreview({ msg }: { msg: Message }) {
   const defaultUsername =
     (branding?.success && branding.data.default_username) || "Embed Generator";
   const defaultAvatarUrl =
-    (branding?.success && branding.data.default_avatar_url) || "/app/logo.svg";
+    (branding?.success && branding.data.default_avatar_url) ||
+    getRelativeUrl("/logo.svg");
 
   return (
     <Twemoji options={{ className: "discord-twemoji" }}>
@@ -340,7 +342,7 @@ export default function MessagePreview({ msg }: { msg: Message }) {
           >
             <div className="discord-replied-message">
               <img
-                src={msg.avatar_url || "/app/logo.svg"}
+                src={msg.avatar_url || getRelativeUrl("/logo.svg")}
                 alt=""
                 className="discord-replied-message-avatar"
               />
@@ -356,7 +358,7 @@ export default function MessagePreview({ msg }: { msg: Message }) {
             </div>
             <div className="discord-message-inner">
               <div className="discord-author-avatar">
-                <img src="/app/logo.svg" alt="" />
+                <img src={getRelativeUrl("/logo.svg")} alt="" />
               </div>
               <div className="discord-message-content">
                 <span className="discord-author-info">

embedg-app/src/main.tsx

@@ -5,11 +5,12 @@ import "./index.css";
 import { QueryClientProvider } from "react-query";
 import queryClient from "./api/client";
 import { BrowserRouter } from "react-router-dom";
+import { baseUrl } from "./util/url";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <BrowserRouter basename="/app">
+      <BrowserRouter basename={baseUrl}>
         <App />
       </BrowserRouter>
     </QueryClientProvider>

embedg-app/src/util/url.ts

@@ -0,0 +1,5 @@
+export const baseUrl = import.meta.env.BASE_URL.replace(/\/$/, "");
+
+export function getRelativeUrl(path: string): string {
+  return `${baseUrl}${path}`;
+}

embedg-app/src/vite-env.d.ts

@@ -1 +1,10 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_DISCORD_ACTIVITY: string;
+  readonly BASE_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

embedg-app/vite.config.ts

@@ -1,25 +1,28 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import { resolve } from "path";
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  base: "/app",
-  server: {
-    proxy: {
-      "/api": {
-        target: "http://127.0.0.1:8080",
+export default ({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+
+  return defineConfig({
+    plugins: [react()],
+    base: env.VITE_DISCORD_ACTIVITY === "true" ? undefined : "/app/",
+    server: {
+      proxy: {
+        "/api": {
+          target: "http://127.0.0.1:8080",
+        },
       },
+      base: "/app/",
     },
-    base: "/app/",
-  },
-  build: {
-    rollupOptions: {
-      input: {
-        main: resolve(__dirname, "index.html"),
-        // nested: resolve(__dirname, "nested/index.html"),
+    build: {
+      rollupOptions: {
+        input: {
+          main: resolve(__dirname, "index.html"),
+          // nested: resolve(__dirname, "nested/index.html"),
+        },
       },
     },
-  },
-});
+  });
+};