feature: configure CI/CD

.env

@@ -1,3 +1,5 @@
+VITE_BASE_PATH=/quiz
+
 VITE_SUPABASE_URL=https://<project>.supabase.co
 VITE_SUPABASE_ANON_KEY=<your-anon-key>
 

src/config/assets.ts

@@ -0,0 +1,7 @@
+export function base (): string {
+  return import.meta.env.VITE_BASE_PATH || '/'
+}
+
+export function image (path: string): string {
+  return (base() + '/assets/images/' + path).replace(/([^:]\/)\/+/g, '$1')
+}

src/main.tsx

@@ -5,11 +5,13 @@ import { BrowserRouter } from 'react-router-dom'
 import './config/i18n'
 import App from './App.tsx'
 import './index.css'
+import { base } from './config/assets.ts'
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <BrowserRouter  basename="/quiz">
-      <App />
-    </BrowserRouter>
-  </React.StrictMode>,
-)
+ReactDOM.createRoot(document.getElementById('root')!)
+  .render(
+    <React.StrictMode>
+      <BrowserRouter basename={base()}>
+        <App />
+      </BrowserRouter>
+    </React.StrictMode>,
+  )

src/view/components/game/GameCorrectAnswer.tsx

@@ -1,12 +1,13 @@
 import { GameQuestionComponentsProps } from './GameQuestion.tsx'
+import { image } from '../../../config/assets.ts'
 
 export function GameCorrectAnswer ({ finishQuestion }: GameQuestionComponentsProps) {
   return (
     <div className="correct">
       <img
         style={{ width: '80%' }}
         className="center-block"
-        src="/assets/images/phpinga.png"
+        src={image('/phpinga.png')}
         alt="PHPinga"
       />
       <h1 className="text-center">Certa a resposta!</h1>

src/view/components/game/GameTimeExpired.tsx

@@ -1,12 +1,13 @@
 import { GameQuestionComponentsProps } from './GameQuestion.tsx'
+import { image } from '../../../config/assets.ts'
 
 export function GameTimeExpired ({ finishQuestion }: GameQuestionComponentsProps) {
   return (
     <div className="wrong">
       <img
         style={{ width: '80%' }}
         className="center-block"
-        src="/assets/images/phpinga.png"
+        src={image('/phpinga.png')}
         alt="PHPinga"
       />
       <h1 className="text-center">Acabou o tempo!</h1>

src/view/components/game/GameWrongAnswer.tsx

@@ -1,12 +1,13 @@
 import { GameQuestionComponentsProps } from './GameQuestion.tsx'
+import { image } from '../../../config/assets.ts'
 
 export function GameWrongAnswer ({ finishQuestion }: GameQuestionComponentsProps) {
   return (
     <div className="wrong">
       <img
         style={{ width: '80%' }}
         className="center-block"
-        src="/assets/images/phpinga.png"
+        src={image('/phpinga.png')}
         alt="PHPinga"
       />
       <h1 className="text-center">Bebe!</h1>

src/view/pages/game/GameEndPage.tsx

@@ -1,5 +1,6 @@
 import { useNavigate, useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
+import { image } from '../../../config/assets.ts'
 
 export function GameEndPage () {
   const params = useParams()
@@ -16,7 +17,7 @@ export function GameEndPage () {
       <img
         style={{ width: '80%' }}
         className="center-block"
-        src="/assets/images/phpinga.png"
+        src={image('/phpinga.png')}
         alt="PHPinga"
       />
       <h1 className="text-center">{t('title')}</h1>

vite.config.ts

@@ -1,8 +1,12 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  base: '/quiz',
-})
+export default ({ mode }: { mode: string}) => {
+  process.env = {...process.env, ...loadEnv(mode, process.cwd())}
+
+  return defineConfig({
+    plugins: [react()],
+    base: process.env.VITE_BASE_PATH || '/',
+  })
+}