From 7421bc71777243d29c76eb28a10cf2d14535d72f Mon Sep 17 00:00:00 2001 From: Rob Bos Date: Wed, 21 Aug 2024 17:49:08 +0000 Subject: [PATCH] Migrate to VITE --- .github/workflows/deploy-pages.yml | 6 ++++-- package.json | 2 +- public/404.html | 28 +--------------------------- react-config.js | 2 +- src/App.jsx | 9 ++++++--- src/pages/Detail.jsx | 2 +- src/pages/GameLandscape.jsx | 13 ++++++------- src/pages/Index.jsx | 2 +- src/pages/NotFound.jsx | 12 ++++++++++++ src/pages/Skus.jsx | 2 +- src/styles.css | 2 +- vite.config.js | 7 +++++++ 12 files changed, 42 insertions(+), 45 deletions(-) create mode 100644 src/pages/NotFound.jsx create mode 100644 vite.config.js diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml index 79a71d0..f1fd526 100644 --- 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 index 7fbe14a..20833b1 100644 --- 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 index aadafb2..7e92cfc 100644 --- a/public/404.html +++ b/public/404.html @@ -2,33 +2,7 @@ - + diff --git a/react-config.js b/react-config.js index 0a9d7b5..d7f5e7d 100644 --- 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; \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 3059f89..85172ac 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,6 +8,7 @@ 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 ( @@ -15,10 +16,12 @@ function App() { } /> } /> - } /> - } /> + } /> + } /> } /> - } /> + } /> + {/* Add a catch-all route for 404 */} + } /> ); diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx index 21496af..483cbbe 100644 --- 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 index b185376..0d0a414 100644 --- a/src/pages/GameLandscape.jsx +++ b/src/pages/GameLandscape.jsx @@ -1,4 +1,5 @@ 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'; @@ -6,6 +7,7 @@ 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 (
-
+
Tooltip Text
diff --git a/src/pages/Index.jsx b/src/pages/Index.jsx index 11fb2af..5fc00a7 100644 --- a/src/pages/Index.jsx +++ b/src/pages/Index.jsx @@ -128,7 +128,7 @@ const Index = () => { Copilot Business vs Enterprise
- Levels of Enlightenment + Levels of Enlightenment
Tutorials diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx new file mode 100644 index 0000000..d9a64d9 --- /dev/null +++ b/src/pages/NotFound.jsx @@ -0,0 +1,12 @@ +import React from 'react'; + +const NotFound = () => { + console.log('NotFound component rendered'); + return ( +
+ Not found +
+ ); +}; + +export default NotFound; \ No newline at end of file diff --git a/src/pages/Skus.jsx b/src/pages/Skus.jsx index 796f223..51515eb 100644 --- a/src/pages/Skus.jsx +++ b/src/pages/Skus.jsx @@ -33,7 +33,7 @@ const Skus = () => {

GitHub Copilot Business

- { + { features.business.map(item => (
handleClick(item.id)}>

{item.title}

diff --git a/src/styles.css b/src/styles.css index a9ba710..9784a25 100644 --- a/src/styles.css +++ b/src/styles.css @@ -465,4 +465,4 @@ h1 { .footer div { margin-right: 7px; -} \ No newline at end of file +} diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..502ae2f --- /dev/null +++ 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()], +});