diff --git a/AGENTS.md b/AGENTS.md
index 2e60a577..486ce7ea 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -28,6 +28,11 @@ This project is a React-based web interface for the [Ergogen](https://github.com
- **Centralized Theming**: All colors and other theme-related properties (e.g., font sizes, spacing) should be centralized in `src/theme/theme.ts`. Components should import and use variables from this theme file instead of using hardcoded values.
- **Styled Components for Styling**: All styling, including global styles, should be managed using `styled-components`. Global styles should be defined in a `GlobalStyle` component to ensure consistency and encapsulation within the React component architecture, avoiding the use of separate CSS files like `index.css`.
+## Architecture
+
+- **GitHub Pages Hosting**: The application is hosted on GitHub Pages, which only serves static files. This means that client-side routing needs a workaround to handle direct navigation to sub-paths.
+- **404-based Redirect**: To handle client-side routing on GitHub Pages, a custom `public/404.html` file is used. This file contains a script that captures the requested path from `window.location.pathname`, stores it in `sessionStorage`, and then redirects the user to the root of the application (`/`). The main `App.tsx` component then reads this path from `sessionStorage` on load and navigates the user to the correct client-side route.
+
## Development environment
### Linting and formatting
diff --git a/e2e/routing.spec.ts b/e2e/routing.spec.ts
index 7ef50d17..35f8feeb 100644
--- a/e2e/routing.spec.ts
+++ b/e2e/routing.spec.ts
@@ -90,4 +90,12 @@ test.describe('Routing and Welcome Page', () => {
expect(parsed).toContain('points:');
}).toPass();
});
+
+ test('navigating directly to /new shows the welcome page after redirect', async ({
+ page,
+ }) => {
+ await page.goto('/new');
+ await expect(page).toHaveURL(/.*\/new/);
+ await expect(page.getByText('Welcome to Ergogen Web UI')).toBeVisible();
+ });
});
diff --git a/public/404.html b/public/404.html
new file mode 100644
index 00000000..a47eaefd
--- /dev/null
+++ b/public/404.html
@@ -0,0 +1,19 @@
+
+
+
+
+ Redirecting...
+
+
+
+ If you are not redirected automatically, please click here.
+
+
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 383e2adb..d3efbcaf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Routes, Route, Navigate } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
import { useLocalStorage } from 'react-use';
import styled from 'styled-components';
@@ -24,6 +24,16 @@ const App = () => {
initialConfig
);
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ const redirectPath = sessionStorage.getItem('redirectPath');
+ if (redirectPath) {
+ sessionStorage.removeItem('redirectPath');
+ navigate(redirectPath, { replace: true });
+ }
+ }, [navigate]);
+
return (
// Pass the state and the setter function down to the context provider.