Add quick ci build (#57)

.github/workflows/ci.yml

@@ -0,0 +1,57 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+
+  # Runs on pull requests targeting the default branch
+  pull_request:
+    branches: [ main ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Prevent duplicate ID's in the data.json
+        run: |
+          node .github/workflows/duplicate-ids-detection.js
+
+      - 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
+          REACT_APP_BUILDNUMBER: ${{ github.run_number }}
+        run: |
+          export NODE_ENV=$NODE_ENV
+          export REPO_NAME="$(echo $GITHUB_REPOSITORY | cut -d'/' -f2)"
+          echo "Building in repo [$REPO_NAME] with build number [$REACT_APP_BUILDNUMBER] for [$NODE_ENV] environment."
+          npm run build
+
+          # copy the index file from the dist folder into the 404 file
+          cp dist/index.html dist/404.html
+
+      - name: Listfiles
+        run: |
+          cd dist
+          ls -la

package.json

@@ -14,7 +14,6 @@
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.4",
     "vite": "^6.1.1",
-    "vite-plugin-html": "^3.2.2",
-    "vite-plugin-rewrite-all": "^1.0.2"
+    "vite-plugin-html": "^3.2.2"
   }
-}
+}

src/pages/Detail.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useParams, useLocation } from 'react-router-dom';
+import { useParams, useLocation, useNavigate } from 'react-router-dom';
 import '../styles.css';
 import getData from '../utils/getData';
 
@@ -8,7 +8,7 @@ const useQuery = () => {
 };
 
 const Detail = () => {
-//  const { videoId } = useParams();
+  const navigate = useNavigate();
   const [videoDetails, setVideoDetails] = useState(null);
 
   const query = useQuery();
@@ -39,9 +39,9 @@ const Detail = () => {
 
   return (
     <div id="feature-detail-container" style={{ textAlign: 'center' }}>
-      <a href="javascript:history.back()" style={{ display: 'inline-block', marginBottom: '20px' }}>Back</a>
+      <button onClick={() => navigate(-1)} style={{ display: 'inline-block', marginBottom: '20px' }}>Back</button>
       <h1 id="feature-title">{videoDetails.title}</h1>
-           <div id="video-container">
+      <div id="video-container">
         {videoDetails.videoUrl ? (
           <iframe
             id="feature-video"