visual-framework · bhushan-ebi · May 15, 2025 · Mar 18, 2025 · Mar 18, 2025 · Apr 30, 2025
diff --git a/.env.production b/.env.production
@@ -0,0 +1 @@
+PUBLIC_URL=https://visual-framework.github.io/vf-react
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -9,6 +9,7 @@ on:
 
 env:
   CI: true
+  PUBLIC_URL: /vf-react
 
 jobs:
   # test:
@@ -44,8 +45,10 @@ jobs:
         run: yarn install
       - name: Build page
         run: yarn build
+        env:
+          PUBLIC_URL: /vf-react
       - name: Deploy to gh-pages
         uses: peaceiris/actions-gh-pages@v3
         with:
           deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY_150525 }}
-          publish_dir: ./build
+          publish_dir: ./build
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+build
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "vf-react",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://visual-framework.github.io/vf-react/",
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Visual Framework React</title>
+  <script type="text/javascript">
+    // Single Page Apps for GitHub Pages
+    // MIT License
+    // https://github.com/rafgraph/spa-github-pages
+    var pathSegmentsToKeep = 1;
+
+    var l = window.location;
+    l.replace(
+      l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
+      l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
+      l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
+      (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+      l.hash
+    );
+  </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,25 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <base href="/">
+    <base href="%PUBLIC_URL%/">
+
+    <!-- GitHub Pages SPA redirect script -->
+    <script type="text/javascript">
+      // Single Page Apps for GitHub Pages
+      // MIT License
+      // https://github.com/rafgraph/spa-github-pages
+      (function(l) {
+        if (l.search[1] === '/' ) {
+          var decoded = l.search.slice(1).split('&').map(function(s) { 
+            return s.replace(/~and~/g, '&')
+          }).join('?');
+          window.history.replaceState(null, null,
+              l.pathname.slice(0, -1) + decoded + l.hash
+          );
+        }
+      }(window.location))
+    </script>
+
     <link rel="stylesheet" media="all" href="https://dev.assets.emblstatic.net/vf/develop/css/styles.css"/>
     <!--
       Want to build a site with the Visual Framework?
@@ -43,4 +61,4 @@
   </head>
   <body class="vf-body | vf-stack embl-content-hub-loaded">
   </body>
-</html>
+</html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
+import { HashRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
 import Header from './components/Header';
 import Footer from './components/Footer';
 import Home from './components/Home';
@@ -31,6 +31,7 @@ function RouteChangeHandler({ children }) {
 }
 
 function App() {
+  // Use HashRouter instead of BrowserRouter for GitHub Pages
   return (
     <Router>
       <RouteChangeHandler>

diff --git a/yarn.lock b/yarn.lock
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		PUBLIC_URL=https://visual-framework.github.io/vf-react