ops(dashboard-v2): publish new dashboard under /v2 prefix

docker/nginx/conf.d/server/server.account

@@ -3,6 +3,10 @@ listen 443 ssl http2;
 include /etc/nginx/conf.d/include/ssl-settings;
 include /etc/nginx/conf.d/include/init-optional-variables;
 
+location /v2 {
+    proxy_pass http://dashboard-v2:9000;
+}
+
 location / {
     proxy_pass http://dashboard:3000;
 }

packages/dashboard-v2/gatsby-config.js

@@ -11,6 +11,7 @@ module.exports = {
     title: `Account Dashboard`,
     siteUrl: `https://account.${GATSBY_PORTAL_DOMAIN}`,
   },
+  pathPrefix: "/v2",
   trailingSlash: "never",
   plugins: [
     "gatsby-plugin-image",

packages/dashboard-v2/package.json

@@ -11,8 +11,8 @@
     "develop": "gatsby develop",
     "develop:secure": "dotenv -e .env.development -- gatsby develop --https -p=443",
     "start": "gatsby develop",
-    "build": "gatsby build",
+    "build": "gatsby build --prefix-paths",
-    "serve": "gatsby serve",
+    "serve": "gatsby serve --prefix-paths",
     "clean": "gatsby clean",
     "lint": "eslint .",
     "prettier": "prettier .",

packages/dashboard-v2/src/components/AvatarUploader/AvatarUploader.js

@@ -3,14 +3,14 @@ import { useEffect, useState } from "react";
 import { useUser } from "../../contexts/user";
 // import { SimpleUploadIcon } from "../Icons";
 
-const AVATAR_PLACEHOLDER = "/images/avatar-placeholder.svg";
+import avatarPlaceholder from "../../../static/images/avatar-placeholder.svg";
 
 export const AvatarUploader = (props) => {
   const { user } = useUser();
-  const [imageUrl, setImageUrl] = useState(AVATAR_PLACEHOLDER);
+  const [imageUrl, setImageUrl] = useState(avatarPlaceholder);
 
   useEffect(() => {
-    setImageUrl(user.avatarUrl ?? AVATAR_PLACEHOLDER);
+    setImageUrl(user.avatarUrl ?? avatarPlaceholder);
   }, [user]);
 
   return (

packages/dashboard-v2/src/layouts/AuthLayout.js

@@ -3,10 +3,13 @@ import styled from "styled-components";
 
 import { UserProvider } from "../contexts/user";
 
+import skynetLogo from "../../static/images/logo-black-text.svg";
+import authBg from "../../static/images/auth-bg.svg";
+
 const Layout = styled.div.attrs({
   className: "min-h-screen w-screen bg-black flex",
 })`
-  background-image: url(/images/auth-bg.svg);
+  background-image: url(${authBg});
   background-repeat: no-repeat;
   background-position: center center;
 `;
@@ -36,7 +39,7 @@ const AuthLayout =
             <Content>
               <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
                 <div className="mb-4 md:mb-16">
-                  <img src="/images/logo-black-text.svg" alt="Skynet" className="-ml-2" />
+                  <img src={skynetLogo} alt="Skynet" className="-ml-2" />
                 </div>
                 {children}
               </div>

packages/dashboard-v2/src/layouts/DashboardLayout.js

@@ -7,10 +7,12 @@ import { Footer } from "../components/Footer";
 import { UserProvider, useUser } from "../contexts/user";
 import { FullScreenLoadingIndicator } from "../components/LoadingIndicator";
 
+import dashboardBg from "../../static/images/dashboard-bg.svg";
+
 const Wrapper = styled.div.attrs({
   className: "min-h-screen overflow-hidden",
 })`
-  background-image: url(/images/dashboard-bg.svg);
+  background-image: url(${dashboardBg});
   background-position: center -280px;
   background-repeat: no-repeat;
 `;

packages/dashboard-v2/src/pages/settings/developer-settings.js

@@ -10,6 +10,8 @@ import { AddSponsorKeyForm } from "../../components/forms/AddSponsorKeyForm";
 import { Metadata } from "../../components/Metadata";
 import HighlightedLink from "../../components/HighlightedLink";
 
+import apiKeysImg from "../../../static/images/api-keys.svg";
+
 const DeveloperSettingsPage = () => {
   const { data: allKeys = [], mutate: reloadKeys, error } = useSWR("user/apikeys");
   const apiKeys = allKeys.filter(({ public: isPublic }) => isPublic === "false");
@@ -103,7 +105,7 @@ const DeveloperSettingsPage = () => {
           </section>
         </div>
         <div className="hidden xl:block w-full text-right pt-16 pr-5">
-          <img src="/images/api-keys.svg" alt="" className="inline-block h-[150px]" />
+          <img src={apiKeysImg} alt="" className="inline-block h-[150px]" />
         </div>
       </div>
     </>

packages/dashboard-v2/src/pages/settings/export.js

@@ -6,6 +6,8 @@ import { Switch } from "../../components/Switch";
 import { Button } from "../../components/Button";
 import { Metadata } from "../../components/Metadata";
 
+import exportImg from "../../../static/images/import-export.svg";
+
 const useExportOptions = () => {
   const [pinnedFiles, setPinnedFiles] = useState(false);
   const [uploadHistory, setUploadHistory] = useState(false);
@@ -65,7 +67,7 @@ const ExportPage = () => {
           </section>
         </div>
         <div className="hidden xl:block w-full text-right pt-20 pr-6">
-          <img src="/images/import-export.svg" alt="" className="inline-block w-[200px]" />
+          <img src={exportImg} alt="" className="inline-block w-[200px]" />
         </div>
       </div>
     </>

packages/dashboard-v2/src/pages/settings/notifications.js

@@ -1,11 +1,12 @@
 import * as React from "react";
-import { StaticImage } from "gatsby-plugin-image";
 
 import UserSettingsLayout from "../../layouts/UserSettingsLayout";
 
 import { Switch } from "../../components/Switch";
 import { Metadata } from "../../components/Metadata";
 
+import inboxImg from "../../../static/images/inbox.svg";
+
 const NotificationsPage = () => {
   return (
     <>
@@ -37,8 +38,8 @@ const NotificationsPage = () => {
             </ul>
           </section>
         </div>
-        <div className="hidden xl:block text-right w-full pr-14 pt-20">
+        <div className="hidden xl:block text-right w-full pl-12 pt-20">
-          <StaticImage src="../../../static/images/inbox.svg" alt="" placeholder="none" />
+          <img src={inboxImg} alt="" className="w-[200px]" />
         </div>
       </div>
     </>