adds basePath to images

trathailoi · Mar 22, 2023 · 7bb2977 · 7bb2977
1 parent 970024f
commit 7bb2977
Show file tree

Hide file tree

Showing 35 changed files with 116 additions and 57 deletions.
diff --git a/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx b/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
@@ -1,3 +1,4 @@
+import Router from 'next/router'
 import { FC, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Button, Input, InputNumber, Toggle, Listbox, IconEye, IconEyeOff } from 'ui'
@@ -123,7 +124,9 @@ const FormField: FC<Props> = ({ name, properties, formValues, disabled = false }
                 key={option.value}
                 label={option.label}
                 value={option.value}
-                addOnBefore={() => <img className="h-6 w-6" src={`/img/icons/${option.icon}`} />}
+                addOnBefore={() => (
+                  <img className="h-6 w-6" src={`${Router.basePath}/img/icons/${option.icon}`} />
+                )}
               >
                 {option.label}
               </Listbox.Option>

diff --git a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
@@ -1,4 +1,5 @@
 import { FC, useState } from 'react'
+import Router from 'next/router'
 import ReactMarkdown from 'react-markdown'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
@@ -78,7 +79,7 @@ const ProviderForm: FC<Props> = ({ provider }) => {
               width={14}
             />
             <img
-              src={`/img/icons/${provider.misc.iconKey}.svg`}
+              src={`${Router.basePath}/img/icons/${provider.misc.iconKey}.svg`}
               width={18}
               alt={`${provider.title} auth icon`}
             />

diff --git a/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx b/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
@@ -1,4 +1,5 @@
 import { FC, useState } from 'react'
+import Router from 'next/router'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { Listbox, IconLoader, Button, IconPlus, IconAlertCircle, IconCreditCard } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
@@ -400,7 +401,7 @@ const PaymentSummaryPanel: FC<Props> = ({
                     addOnBefore={() => {
                       return (
                         <img
-                          src={`/img/payment-methods/${method.card.brand
+                          src={`${Router.basePath}/img/payment-methods/${method.card.brand
                             .replace(' ', '-')
                             .toLowerCase()}.png`}
                           width="32"

diff --git a/...omponents/interfaces/Database/Hooks/CreateHook/RadioGroupHookService/RadioHookService.tsx b/...omponents/interfaces/Database/Hooks/CreateHook/RadioGroupHookService/RadioHookService.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image'
+import Router from 'next/router'
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
 import { Radio, Badge } from 'ui'
@@ -27,7 +28,7 @@ const RadioHookService: FC<Props> = observer(
             <div className="flex items-center space-x-5">
               {/* <div className="h-3 w-3"> */}
               <Image
-                src={`/img/function-providers/${img_url}`}
+                src={`${Router.basePath}/img/function-providers/${img_url}`}
                 layout="fixed"
                 width="32"
                 height="32"

diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/TableSelection.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/TableSelection.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import Router from 'next/router'
 import SVG from 'react-inlinesvg'
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
@@ -73,7 +74,7 @@ const TableSelection: FC = observer(({}) => {
             addOnBefore={() => (
               <div className="flex items-center justify-center rounded bg-scale-1200 p-1 text-scale-100 ">
                 <SVG
-                  src={'/img/table-editor.svg'}
+                  src={`${Router.basePath}/img/table-editor.svg`}
                   style={{ width: `16px`, height: `16px`, strokeWidth: '1px' }}
                   preProcessor={(code) =>
                     code.replace(/svg/, 'svg class="m-auto text-color-inherit"')

diff --git a/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx b/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx
@@ -14,7 +14,7 @@ import {
   Button,
 } from 'ui'
 import { Dictionary } from 'components/grid'
-import { useRouter } from 'next/router'
+import Router, { useRouter } from 'next/router'
 import SVG from 'react-inlinesvg'
 
 import ChooseFunctionForm from './ChooseFunctionForm'
@@ -545,7 +545,7 @@ const ListboxTable: FC = observer(({}) => {
             addOnBefore={() => (
               <div className="flex items-center justify-center rounded bg-scale-1200 p-1 text-scale-100 ">
                 <SVG
-                  src={'/img/table-editor.svg'}
+                  src={`${Router.basePath}/img/table-editor.svg`}
                   style={{ width: `16px`, height: `16px`, strokeWidth: '1px' }}
                   preProcessor={(code) =>
                     code.replace(/svg/, 'svg class="m-auto text-color-inherit"')

diff --git a/studio/components/interfaces/Database/Wrappers/Wrappers.constants.ts b/studio/components/interfaces/Database/Wrappers/Wrappers.constants.ts
@@ -1,11 +1,12 @@
+import Router from 'next/router'
 import { WrapperMeta } from './Wrappers.types'
 
 export const WRAPPERS: WrapperMeta[] = [
   {
     name: 'stripe_wrapper',
     handlerName: 'stripe_fdw_handler',
     validatorName: 'stripe_fdw_validator',
-    icon: '/img/icons/stripe-icon.svg',
+    icon: `${Router.basePath}/img/icons/stripe-icon.svg`,
     extensionName: 'StripeFdw',
     label: 'Stripe',
     docsUrl: 'https://supabase.com/docs/guides/database/wrappers/stripe',
@@ -409,7 +410,7 @@ export const WRAPPERS: WrapperMeta[] = [
     name: 'firebase_wrapper',
     handlerName: 'firebase_fdw_handler',
     validatorName: 'firebase_fdw_validator',
-    icon: '/img/icons/firebase-icon.svg',
+    icon: `${Router.basePath}/img/icons/firebase-icon.svg`,
     extensionName: 'FirebaseFdw',
     label: 'Firebase',
     docsUrl: 'https://supabase.com/docs/guides/database/wrappers/firebase',

diff --git a/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx b/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import Router from 'next/router'
 import { useState } from 'react'
 import { Button, IconExternalLink } from 'ui'
 import { observer } from 'mobx-react-lite'
@@ -65,8 +66,8 @@ const WrappersDisabledState = () => {
           backgroundSize: '45%',
           backgroundPosition: '105% 40%',
           backgroundImage: ui.isDarkTheme
-            ? 'url("/img/wrappers-dark.png")'
-            : 'url("/img/wrappers-light.png")',
+            ? `url("${Router.basePath}/img/wrappers-dark.png")`
+            : `url("${Router.basePath}/img/wrappers-light.png")`,
         }}
       >
         <div className="w-3/5 space-y-8">

diff --git a/studio/components/interfaces/Home/ClientLibrary.tsx b/studio/components/interfaces/Home/ClientLibrary.tsx
@@ -1,4 +1,5 @@
 import { FC } from 'react'
+import Router from 'next/router'
 import { IconBookOpen, IconGitHub, Button, Badge } from 'ui'
 
 interface Props {
@@ -13,7 +14,7 @@ const ClientLibrary: FC<Props> = ({ language, releaseState, officialSupport, doc
   return (
     <div className="flex items-start space-x-6">
       <img
-        src={`/img/libraries/${language.toLowerCase()}-icon.svg`}
+        src={`${Router.basePath}/img/libraries/${language.toLowerCase()}-icon.svg`}
         alt={`${language} logo`}
         width="21"
       />

diff --git a/studio/components/interfaces/Home/ExampleProject.tsx b/studio/components/interfaces/Home/ExampleProject.tsx
@@ -1,4 +1,5 @@
 import { FC } from 'react'
+import Router from 'next/router'
 import { IconChevronRight } from 'ui'
 import { useStore } from 'hooks'
 import Link from 'next/link'
@@ -29,8 +30,12 @@ const ExampleProject: FC<Props> = ({ framework, title, description, url }) => {
           <div className="mr-4 flex flex-col">
             <img
               className="transition-all group-hover:scale-110"
-              src={`/img/libraries/${framework.toLowerCase()}${
-                ['expo', 'nextjs'].includes(framework.toLowerCase()) ? (isDarkTheme ? '-dark' : '') : ''
+              src={`${Router.basePath}/img/libraries/${framework.toLowerCase()}${
+                ['expo', 'nextjs'].includes(framework.toLowerCase())
+                  ? isDarkTheme
+                    ? '-dark'
+                    : ''
+                  : ''
               }-icon.svg`}
               alt={`${framework} logo`}
               width={26}

diff --git a/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx b/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
@@ -47,7 +47,7 @@ const NewProjectPanel: FC<Props> = ({}) => {
                       type="default"
                       icon={
                         <SVG
-                          src="/img/table-editor.svg"
+                          src={`${router.basePath}/img/table-editor.svg`}
                           style={{ width: `${14}px`, height: `${14}px` }}
                           preProcessor={(code) =>
                             code.replace(/svg/, 'svg class="m-auto text-color-inherit"')
@@ -65,7 +65,7 @@ const NewProjectPanel: FC<Props> = ({}) => {
                       type="default"
                       icon={
                         <SVG
-                          src="/img/sql-editor.svg"
+                          src={`${router.basePath}/img/sql-editor.svg`}
                           style={{ width: `${14}px`, height: `${14}px` }}
                           preProcessor={(code) =>
                             code.replace(/svg/, 'svg class="m-auto text-color-inherit"')

diff --git a/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx b/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx
@@ -1,4 +1,5 @@
 import { FC, useState } from 'react'
+import Router from 'next/router'
 import {
   Dropdown,
   IconPlus,
@@ -158,7 +159,7 @@ const PaymentMethods: FC<Props> = ({
                       <div key={paymentMethod.id} className="flex items-center justify-between">
                         <div className="flex items-center space-x-8">
                           <img
-                            src={`/img/payment-methods/${paymentMethod.card.brand
+                            src={`${Router.basePath}/img/payment-methods/${paymentMethod.card.brand
                               .replace(' ', '-')
                               .toLowerCase()}.png`}
                             width="32"

diff --git a/studio/components/interfaces/Settings/Vault/VaultToggle.tsx b/studio/components/interfaces/Settings/Vault/VaultToggle.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import Router from 'next/router'
 import { observer } from 'mobx-react-lite'
 import { FC, useState } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
@@ -63,8 +64,8 @@ const VaultToggle: FC<Props> = () => {
           backgroundSize: isNotAvailable ? '50%' : '40%',
           backgroundPosition: '100% 24%',
           backgroundImage: ui.isDarkTheme
-            ? 'url("/img/vault-dark.png")'
-            : 'url("/img/vault-light.png")',
+            ? `url("${Router.basePath}/img/vault-dark.png")`
+            : `url("${Router.basePath}/img/vault-light.png")`,
         }}
       >
         <div className="w-3/5 space-y-8">

diff --git a/studio/components/layouts/AccountLayout/AccountLayout.tsx b/studio/components/layouts/AccountLayout/AccountLayout.tsx
@@ -75,14 +75,14 @@ const AccountLayout: FC<Props> = ({ children, title, breadcrumbs }) => {
             links: [
               {
                 isActive: router.pathname === `/account/me`,
-                icon: '/img/user.svg',
+                icon: `${router.basePath}/img/user.svg`,
                 label: 'Preferences',
                 href: `/account/me`,
                 key: `/account/me`,
               },
               {
                 isActive: router.pathname === `/account/tokens`,
-                icon: '/img/user.svg',
+                icon: `${router.basePath}/img/user.svg`,
                 label: 'Access Tokens',
                 href: `/account/tokens`,
                 key: `/account/tokens`,
@@ -97,14 +97,14 @@ const AccountLayout: FC<Props> = ({ children, title, breadcrumbs }) => {
       links: [
         {
           key: 'ext-guides',
-          icon: '/img/book.svg',
+          icon: `${router.basePath}/img/book.svg`,
           label: 'Guides',
           href: 'https://supabase.com/docs',
           isExternal: true,
         },
         {
           key: 'ext-guides',
-          icon: '/img/book-open.svg',
+          icon: `${router.basePath}/img/book-open.svg`,
           label: 'API Reference',
           href: 'https://supabase.com/docs/guides/database/api',
           isExternal: true,

diff --git a/studio/components/layouts/DocsLayout/DocsLayout.utils.tsx b/studio/components/layouts/DocsLayout/DocsLayout.utils.tsx
@@ -1,5 +1,6 @@
-import { ProductMenuGroup } from 'components/ui/ProductMenu/ProductMenu.types'
+import Router from 'next/router'
 import SVG from 'react-inlinesvg'
+import { ProductMenuGroup } from 'components/ui/ProductMenu/ProductMenu.types'
 import { IconBook, IconBookOpen } from 'ui'
 
 export const generateDocsMenu = (
@@ -71,7 +72,7 @@ export const generateDocsMenu = (
                 url: `/project/${ref}/api/graphiql`,
                 icon: (
                   <SVG
-                    src="/img/graphql.svg"
+                    src={`${Router.basePath}/img/graphql.svg`}
                     style={{ width: `${16}px`, height: `${16}px` }}
                     className="text-scale-1200"
                     preProcessor={(code) =>

diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
@@ -83,14 +83,16 @@ const HelpPopover: FC<Props> = () => {
                 >
                   <Image
                     className="absolute left-0 top-0 opacity-50"
-                    src={'/img/support/discord-bg-small.jpg'}
+                    src={`${router.basePath}/img/support/discord-bg-small.jpg`}
                     layout="fill"
                     objectFit="cover"
                     alt="discord illustration header"
                   />
                   <Button
                     type="secondary"
-                    icon={<SVG src={`/img/discord-icon.svg`} className="h-4 w-4" />}
+                    icon={
+                      <SVG src={`${router.basePath}/img/discord-icon.svg`} className="h-4 w-4" />
+                    }
                   >
                     <span style={{ color: '#404EED' }}>Join Discord server</span>
                   </Button>
@@ -106,7 +108,7 @@ const HelpPopover: FC<Props> = () => {
                 >
                   <Image
                     className="absolute left-0 top-0 opacity-50"
-                    src={'/img/support/github-bg.jpg?v-1'}
+                    src={`${router.basePath}/img/support/github-bg.jpg?v-1`}
                     layout="fill"
                     objectFit="cover"
                     alt="discord illustration header"

diff --git a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
@@ -42,7 +42,7 @@ const NavigationBar: FC<Props> = ({}) => {
         <Link href="/projects">
           <a className="block">
             <img
-              src="/img/supabase-logo.svg"
+              src={`${router.basePath}/img/supabase-logo.svg`}
               alt="Supabase"
               className="mx-auto h-[40px] w-6 cursor-pointer rounded"
             />

diff --git a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
@@ -9,6 +9,7 @@ import {
   IconUsers,
 } from 'ui'
 import SVG from 'react-inlinesvg'
+import Router from 'next/router'
 
 import { ProjectBase } from 'types'
 import { Route } from 'components/ui/ui.types'
@@ -27,7 +28,7 @@ export const generateToolRoutes = (ref?: string, project?: ProjectBase): Route[]
       label: 'Table Editor',
       icon: (
         <SVG
-          src="/img/table-editor.svg"
+          src={`${Router.basePath}/img/table-editor.svg`}
           style={{ width: `${18}px`, height: `${18}px` }}
           preProcessor={(code) => code.replace(/svg/, 'svg class="m-auto text-color-inherit"')}
         />
@@ -41,7 +42,7 @@ export const generateToolRoutes = (ref?: string, project?: ProjectBase): Route[]
       label: 'SQL Editor',
       icon: (
         <SVG
-          src="/img/sql-editor.svg"
+          src={`${Router.basePath}/img/sql-editor.svg`}
           style={{ width: `${18}px`, height: `${18}px` }}
           preProcessor={(code) => code.replace(/svg/, 'svg class="m-auto text-color-inherit"')}
         />

diff --git a/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx b/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx
@@ -2,6 +2,7 @@ import { useStore } from 'hooks'
 import { observer } from 'mobx-react-lite'
 import Image from 'next/image'
 import Link from 'next/link'
+import Router from 'next/router'
 import { PropsWithChildren } from 'react'
 
 type ForgotPasswordLayoutProps = {
@@ -31,7 +32,11 @@ const ForgotPasswordLayout = ({
               <Link href={logoLinkToMarketingSite ? 'https://supabase.com' : '/projects'}>
                 <a>
                   <Image
-                    src={theme == 'dark' ? '/img/supabase-dark.svg' : '/img/supabase-light.svg'}
+                    src={
+                      theme == 'dark'
+                        ? `${Router.basePath}/img/supabase-dark.svg`
+                        : `${Router.basePath}/img/supabase-light.svg`
+                    }
                     alt=""
                     height={24}
                     width={120}

diff --git a/studio/components/layouts/SignInLayout/SignInLayout.tsx b/studio/components/layouts/SignInLayout/SignInLayout.tsx
@@ -7,6 +7,7 @@ import { observer } from 'mobx-react-lite'
 import Head from 'next/head'
 import Image from 'next/image'
 import Link from 'next/link'
+import Router from 'next/router'
 import { PropsWithChildren, useEffect, useState } from 'react'
 import { tweets } from 'shared-data'
 import { Button, IconFileText } from 'ui'
@@ -94,7 +95,11 @@ const SignInLayout = ({
                 <Link href={logoLinkToMarketingSite ? 'https://supabase.com' : '/projects'}>
                   <a>
                     <Image
-                      src={theme == 'dark' ? '/img/supabase-dark.svg' : '/img/supabase-light.svg'}
+                      src={
+                        theme == 'dark'
+                          ? `${Router.basePath}/img/supabase-dark.svg`
+                          : `${Router.basePath}/img/supabase-light.svg`
+                      }
                       alt="Supabase Logo"
                       height={24}
                       width={120}

diff --git a/studio/components/layouts/VercelIntegrationLayout.tsx b/studio/components/layouts/VercelIntegrationLayout.tsx
@@ -1,5 +1,6 @@
 import { FC, ReactNode } from 'react'
 import Head from 'next/head'
+import Router from 'next/router'
 import Divider from 'components/ui/Divider'
 
 interface Props {
@@ -20,7 +21,11 @@ const VercelIntegrationLayout: FC<Props> = ({ children }) => {
               <div className="flex justify-start lg:w-0 lg:flex-1">
                 <div>
                   <span className="sr-only">Supabase</span>
-                  <img className="h-6 w-auto sm:h-6" src="/img/supabase-logo.svg" alt="" />
+                  <img
+                    className="h-6 w-auto sm:h-6"
+                    src={`${Router.basePath}/img/supabase-logo.svg`}
+                    alt=""
+                  />
                 </div>
               </div>
             </div>