Migrate to VITE

XpiritBV · Aug 21, 2024 · 7421bc7 · 7421bc7
1 parent b4f9766
commit 7421bc7
Show file tree

Hide file tree

Showing 12 changed files with 42 additions and 45 deletions.
diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml
@@ -41,8 +41,10 @@ jobs:
         run: npm ci
 
       - name: Build project
+        env:
+          NODE_ENV: ${{ vars.NODE_ENV }} # use the vars to indicate the env that is uesd in the react-config.js to set the base url / folder
         run: |
-          export NODE_ENV='github-pages'
+          export NODE_ENV=$NODE_ENV
           export REPO_NAME="$(echo $GITHUB_REPOSITORY | cut -d'/' -f2)"
           export BUILDNUMBER="$(echo $GITHUB_RUN_NUMBER)"
           echo "Building in repo [$REPO_NAME] with build number [$BUILDNUMBER] for [$NODE_ENV] environment."
@@ -60,7 +62,7 @@ jobs:
         uses: actions/upload-pages-artifact@v3
         with:
           path: dist
-          
+
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite build && vite preview"
   },
   "dependencies": {
     "react": "^18.2.0",

diff --git a/public/404.html b/public/404.html
@@ -2,33 +2,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script>
-      // Redirect to the correct URL
-      var pathname = window.location.pathname;
-      var search = window.location.search;
-
-      // Remove leading slash from pathname if it exists
-      if (pathname.startsWith('/')) {
-        pathname = pathname.substring(1);
-      }
-
-      // Construct the new URL
-      let basePath = '/copilot-videos/#' + pathname.replace('copilot-videos', '');
-      // If there are double slashes anywhere in the url, remove one
-      if (basePath.includes('//')) {
-        basePath = basePath.replace('//', '/');
-      }
-      // log the parts for debugging
-      console.log(`search: ${search}`);
-      console.log(`pathname: ${basePath}`);
-
-      // Build the new URL
-      const url = search ? basePath + search : basePath;
-      console.log(`redirecting to url: ${url}`);
-
-      // Redirect to the new URL
-      window.location.href = url;
-    </script>
+    <meta http-equiv="refresh" content="0; URL=/#/404" />
   </head>
   <body>
   </body>

diff --git a/react-config.js b/react-config.js
@@ -1,3 +1,3 @@
-const basename = process.env.NODE_ENV === 'github-pages' ? '/copilot-videos/' : '/';
+const basename = process.env.NODE_ENV === 'github-pages' ? '/copilot-videos/' : '';
 
 export default basename;
diff --git a/src/App.jsx b/src/App.jsx
@@ -8,17 +8,20 @@ import Skus from './pages/Skus';
 import Tutorials from './pages/Tutorials';
 import './styles.css';
 import basename from '../react-config';
+import NotFound from './pages/NotFound';
 
 function App() {
   return (
     <Router basename={basename}>
       <Routes>
         <Route path="/" element={<Index />} />
         <Route path="/detail" element={<Detail />} />
-        <Route path="/game-landscape" element={<GameLandscape />} />
-        <Route path="/game-level" element={<GameLevel />} />
+        <Route path="/gamelandscape" element={<GameLandscape />} />
+        <Route path="/gamelevel" element={<GameLevel />} />
         <Route path="/skus" element={<Skus />} />
-        <Route path="/tutorials" element={<Tutorials />} />
+        <Route path="/tutorials" element={<Tutorials />} /> 
+        {/* Add a catch-all route for 404 */}
+        <Route path="*" element={<NotFound />} />
       </Routes>
     </Router>
   );

diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx
@@ -10,7 +10,7 @@ const useQuery = () => {
 const Detail = () => {
 //  const { videoId } = useParams();
   const [videoDetails, setVideoDetails] = useState(null);
-  
+
   const query = useQuery();
   const videoId = query.get('videoId');
 

diff --git a/src/pages/GameLandscape.jsx b/src/pages/GameLandscape.jsx
@@ -1,11 +1,13 @@
 import React, { useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
 import '../styles.css';
 import getData from '../utils/getData';
 import Header from './title-header';
 import basename from '../../react-config';
 
 const GameLandscape = () => {
   const canvasRef = useRef(null);
+  const navigate = useNavigate();
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -176,11 +178,8 @@ const GameLandscape = () => {
 
     function displayLevelInfo(levelIndex) {
       const redirect = basename;
-      if (basename === "/") {
-        window.location.href = `${redirect}game-level?level=${levelIndex + 1}`;
-      } else {
-        window.location.href = `${basename}/game-level?level=${levelIndex + 1}`;
-      }
+      console.log(`displayLevelInfo basename: ${basename}`);
+      navigate(`/gamelevel?level=${levelIndex}`);
     }
 
     loadLevels();
@@ -190,10 +189,10 @@ const GameLandscape = () => {
     });
   }, []);
 
-  return (    
+  return (
     <div>
       <Header title={`Levels of Enlightenment ${basename}`} />
-      <div id="game-container">        
+      <div id="game-container">
         <canvas id="game-canvas" ref={canvasRef}></canvas>
         <div id="tooltip" style={{ display: 'none' }}>Tooltip Text</div>
       </div>

diff --git a/src/pages/Index.jsx b/src/pages/Index.jsx
@@ -128,7 +128,7 @@ const Index = () => {
             <Link to="/skus">Copilot Business vs Enterprise</Link>
           </div>
           <div className="box">
-            <Link to="/game-landscape">Levels of Enlightenment</Link>
+            <Link to="/gamelandscape">Levels of Enlightenment</Link>
           </div>
           <div className="box">
             <Link to="/tutorials">Tutorials</Link>

diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const NotFound = () => {
+    console.log('NotFound component rendered');
+    return (
+        <div>
+            Not found
+        </div>
+    );
+};
+
+export default NotFound;
diff --git a/src/pages/Skus.jsx b/src/pages/Skus.jsx
@@ -33,7 +33,7 @@ const Skus = () => {
             <h2>GitHub Copilot Business</h2>
           </div>
           <div id="business-features" className="sku-grid">
-          {            
+          {
             features.business.map(item => (
               <div key={item.id} className="video-box" onClick={() => handleClick(item.id)}>
                 <h3>{item.title}</h3>

diff --git a/src/styles.css b/src/styles.css
@@ -465,4 +465,4 @@ h1 {
 
 .footer div {
     margin-right: 7px;
-}
+}
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from "path";
+
+export default defineConfig({
+  plugins: [react()],
+});