Add SPA redirect handling for GitHub Pages#1
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR implements SPA (Single Page Application) redirect handling for GitHub Pages deployment. It adds client-side routing support to handle unknown routes by redirecting them through a custom 404 page back to the main application.
- Adds a custom 404.html page that captures unknown routes and redirects to the main app with encoded path parameters
- Injects JavaScript into index.html to decode and restore the original URL path after redirect
- Enables proper SPA routing behavior on GitHub Pages static hosting
Reviewed Changes
Copilot reviewed 2 out of 8 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| public/404.html | Custom 404 page that encodes route information and redirects to main app |
| index.html | Adds client-side script to decode and restore original URLs from redirect parameters |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| .map(function (s) { | ||
| return s.replace(/~and~/g, "&"); | ||
| }) | ||
| .join("?"); |
There was a problem hiding this comment.
The URL decoding logic assumes the search string starts with '/' but joins with '?' which creates malformed URLs. This should join with '&' to maintain proper query parameter format.
| .join("?"); | |
| .join("&"); |
| var params = new URLSearchParams(l.search); | ||
| var path = params.get("p"); | ||
| if (path) { | ||
| var query = params.get("q"); |
There was a problem hiding this comment.
The query parameter should be decoded using the same ~and~ replacement logic as used in the 404.html encoding to ensure consistency.
| var query = params.get("q"); | |
| var query = params.get("q"); | |
| if (query) query = query.replace(/~and~/g, "&"); |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
Codex Review: Here are some suggestions.
Reply with @codex fix comments to fix any unresolved comments.
About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you open a pull request for review, mark a draft as ready, or comment "@codex review". If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex fix this CI failure" or "@codex address that feedback".
| var params = new URLSearchParams(l.search); | ||
| var path = params.get("p"); | ||
| if (path) { | ||
| var query = params.get("q"); | ||
| var target = "/" + path + (query ? "?" + query : "") + l.hash; |
There was a problem hiding this comment.
[P1] Restore decoded query params after SPA redirect
The history-rewrite helper reconstructs the path from ?p= and ?q= parameters but it never reverses the ~and~ encoding that the new 404 redirect applies. Navigating directly to a route with multiple query parameters (e.g. /search?term=a&sort=asc) produces /search?term=a~and~sort=asc after the redirect, so the router receives an incorrect query string. Decode the path and query values with replace(/~and~/g, '&') before calling replaceState so the original URL is restored.
Useful? React with 👍 / 👎.
Summary
Testing
https://chatgpt.com/codex/tasks/task_e_68cdc99ca37c8322831e09757b73443e