From 4180694f7206971437d2bf55d15d515fa47b24e1 Mon Sep 17 00:00:00 2001 From: Ian Mayo Date: Wed, 20 Aug 2025 17:14:41 +0100 Subject: [PATCH 1/5] fix: resolve GitHub Pages routing issues - Add basename prop to React Router using Vite's BASE_URL - Fix 404.html asset paths to include /ToolVault/ prefix - Implement proper SPA redirect mechanism for GitHub Pages - Handle redirected URLs in main application entry point This fixes the issue where URLs showed debrief.github.io instead of debrief.github.io/ToolVault/ and ensures proper React Router navigation. --- toolvault-frontend/public/404.html | 14 +++++--------- toolvault-frontend/src/App.tsx | 5 ++++- toolvault-frontend/src/main.tsx | 12 ++++++++++++ 3 files changed, 21 insertions(+), 10 deletions(-) diff --git a/toolvault-frontend/public/404.html b/toolvault-frontend/public/404.html index 866ab39..634a3d0 100644 --- a/toolvault-frontend/public/404.html +++ b/toolvault-frontend/public/404.html @@ -2,21 +2,17 @@ - + ToolVault - Tool Discovery and Execution Platform
- \ No newline at end of file diff --git a/toolvault-frontend/src/App.tsx b/toolvault-frontend/src/App.tsx index 3a1d3f6..c05e5a4 100644 --- a/toolvault-frontend/src/App.tsx +++ b/toolvault-frontend/src/App.tsx @@ -7,8 +7,11 @@ import ToolBrowser from './components/ToolBrowser/ToolBrowser'; import './App.css'; function App() { + // Get the base path from Vite's configuration + const basename = import.meta.env.BASE_URL; + return ( - + } /> diff --git a/toolvault-frontend/src/main.tsx b/toolvault-frontend/src/main.tsx index d8ff0ce..f19fd31 100644 --- a/toolvault-frontend/src/main.tsx +++ b/toolvault-frontend/src/main.tsx @@ -3,6 +3,18 @@ import { createRoot } from 'react-dom/client' import './index.css' import App from './App.tsx' +// Handle GitHub Pages SPA redirect +(function() { + const redirect = sessionStorage.redirect; + delete sessionStorage.redirect; + if (redirect && redirect !== location.href) { + // Extract the path from the stored redirect URL + const redirectUrl = new URL(redirect); + const newPath = redirectUrl.pathname + redirectUrl.search + redirectUrl.hash; + history.replaceState({}, '', newPath); + } +})(); + const rootElement = document.getElementById('root'); if (!rootElement) { throw new Error('Root element not found'); From 17299cefb5d1092093731b70cb73cb9a653d1bf0 Mon Sep 17 00:00:00 2001 From: Ian Mayo Date: Wed, 20 Aug 2025 17:16:02 +0100 Subject: [PATCH 2/5] feat: add npm validation and gh repo view commands to local settings --- .claude/settings.local.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.claude/settings.local.json b/.claude/settings.local.json index ca4e270..05c62cf 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -120,7 +120,9 @@ "Bash(open http://localhost:5174/tool/translate?tab=example)", "Bash(open http://localhost:5174/tool/translate)", "Bash(GITHUB_PAGES=true yarn build)", - "Bash(gh run list:*)" + "Bash(gh run list:*)", + "Bash(npm run validate:*)", + "Bash(gh repo view:*)" ] } } \ No newline at end of file From a6134cea89af232d97e3790747a6888474bbc45f Mon Sep 17 00:00:00 2001 From: Ian Mayo Date: Wed, 20 Aug 2025 17:47:36 +0100 Subject: [PATCH 3/5] fix: use correct base path for JavaScript bundle loading in production - Update bundleLoader to use import.meta.env.BASE_URL for production paths - Fix scriptLoader to load tool scripts from correct /ToolVault/ base path - Ensures bundle metadata and tool scripts load correctly on GitHub Pages This resolves the 'Error Loading Tools' issue where the bundle loader was trying to fetch from wrong paths (/examples vs /ToolVault/examples). --- toolvault-frontend/src/services/bundleLoader.ts | 8 +++++--- toolvault-frontend/src/services/scriptLoader.ts | 3 ++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/toolvault-frontend/src/services/bundleLoader.ts b/toolvault-frontend/src/services/bundleLoader.ts index 03ba930..cdd6c41 100644 --- a/toolvault-frontend/src/services/bundleLoader.ts +++ b/toolvault-frontend/src/services/bundleLoader.ts @@ -36,10 +36,11 @@ export class BundleLoader { } async loadPhase0Bundle(): Promise { - // Load the Phase 0 JavaScript bundle from the original location + // Load the Phase 0 JavaScript bundle from the correct location + const basePath = import.meta.env.BASE_URL || '/'; const bundlePath = import.meta.env.DEV ? '/examples/javascript-bundle/index.json' // Vite dev server can serve parent directories with fs.allow - : '/examples/javascript-bundle/index.json'; // In production, this will be bundled + : `${basePath}examples/javascript-bundle/index.json`; // In production, use the base path return this.loadBundle(bundlePath); } @@ -74,9 +75,10 @@ export class BundleLoader { } try { + const basePath = import.meta.env.BASE_URL || '/'; const historyPath = import.meta.env.DEV ? '/examples/javascript-bundle/history.json' - : '/examples/javascript-bundle/history.json'; + : `${basePath}examples/javascript-bundle/history.json`; const response = await fetch(historyPath); if (!response.ok) { diff --git a/toolvault-frontend/src/services/scriptLoader.ts b/toolvault-frontend/src/services/scriptLoader.ts index 530d75e..91c68a4 100644 --- a/toolvault-frontend/src/services/scriptLoader.ts +++ b/toolvault-frontend/src/services/scriptLoader.ts @@ -71,9 +71,10 @@ export class ScriptLoader { return new Promise((resolve, reject) => { // Determine script path based on tool category const category = this.getToolCategory(toolMetadata); + const basePath = import.meta.env.BASE_URL || '/'; const scriptPath = import.meta.env.DEV ? `/examples/javascript-bundle/tools/${category}/${toolMetadata.id}.js` // Vite dev server can serve parent directories with fs.allow - : `/examples/javascript-bundle/tools/${category}/${toolMetadata.id}.js`; // In production, this will be bundled + : `${basePath}examples/javascript-bundle/tools/${category}/${toolMetadata.id}.js`; // In production, use the base path // Create script element const script = document.createElement('script'); From b1a1f8074f368f7a0424c23643fe2aaca1e20876 Mon Sep 17 00:00:00 2001 From: Ian Mayo Date: Wed, 20 Aug 2025 17:48:47 +0100 Subject: [PATCH 4/5] tighten constraints --- .claude/settings.local.json | 1 - 1 file changed, 1 deletion(-) diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 05c62cf..8d9c603 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -2,7 +2,6 @@ "permissions": { "allow": [ "Bash(yarn init:*)", - "Bash(yarn add:*)", "Bash(mkdir:*)", "Bash(yarn build-plugin:*)", "Bash(rm:*)", From eb29c62b3d33eb6387b9b100dcd3c54055baa3fd Mon Sep 17 00:00:00 2001 From: Ian Mayo Date: Thu, 21 Aug 2025 08:21:39 +0100 Subject: [PATCH 5/5] fix: resolve path issues between local preview and GitHub Pages production MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add VITE_PREVIEW_MODE environment variable support - Update bundleLoader, scriptLoader to handle preview vs production paths - Fix Playwright test configuration for local testing - Ensure proper base path handling for both localhost and GitHub Pages 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- toolvault-frontend/playwright.config.ts | 2 +- toolvault-frontend/src/services/bundleLoader.ts | 12 ++++++++++-- toolvault-frontend/src/services/scriptLoader.ts | 6 +++++- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/toolvault-frontend/playwright.config.ts b/toolvault-frontend/playwright.config.ts index 9b475c6..f984e79 100644 --- a/toolvault-frontend/playwright.config.ts +++ b/toolvault-frontend/playwright.config.ts @@ -18,7 +18,7 @@ export default defineConfig({ }, ], webServer: { - command: 'yarn preview --port 4173', + command: 'VITE_PREVIEW_MODE=true yarn preview --port 4173', url: 'http://localhost:4173', reuseExistingServer: !process.env.CI, timeout: 30 * 1000, // 30 seconds diff --git a/toolvault-frontend/src/services/bundleLoader.ts b/toolvault-frontend/src/services/bundleLoader.ts index cdd6c41..c5c8432 100644 --- a/toolvault-frontend/src/services/bundleLoader.ts +++ b/toolvault-frontend/src/services/bundleLoader.ts @@ -38,9 +38,13 @@ export class BundleLoader { async loadPhase0Bundle(): Promise { // Load the Phase 0 JavaScript bundle from the correct location const basePath = import.meta.env.BASE_URL || '/'; + const isPreviewMode = import.meta.env.VITE_PREVIEW_MODE === 'true'; + const bundlePath = import.meta.env.DEV ? '/examples/javascript-bundle/index.json' // Vite dev server can serve parent directories with fs.allow - : `${basePath}examples/javascript-bundle/index.json`; // In production, use the base path + : isPreviewMode + ? '/examples/javascript-bundle/index.json' // Preview mode serves from root + : `${basePath}examples/javascript-bundle/index.json`; // GitHub Pages production return this.loadBundle(bundlePath); } @@ -76,9 +80,13 @@ export class BundleLoader { try { const basePath = import.meta.env.BASE_URL || '/'; + const isPreviewMode = import.meta.env.VITE_PREVIEW_MODE === 'true'; + const historyPath = import.meta.env.DEV ? '/examples/javascript-bundle/history.json' - : `${basePath}examples/javascript-bundle/history.json`; + : isPreviewMode + ? '/examples/javascript-bundle/history.json' // Preview mode serves from root + : `${basePath}examples/javascript-bundle/history.json`; // GitHub Pages production const response = await fetch(historyPath); if (!response.ok) { diff --git a/toolvault-frontend/src/services/scriptLoader.ts b/toolvault-frontend/src/services/scriptLoader.ts index 91c68a4..359560d 100644 --- a/toolvault-frontend/src/services/scriptLoader.ts +++ b/toolvault-frontend/src/services/scriptLoader.ts @@ -72,9 +72,13 @@ export class ScriptLoader { // Determine script path based on tool category const category = this.getToolCategory(toolMetadata); const basePath = import.meta.env.BASE_URL || '/'; + const isPreviewMode = import.meta.env.VITE_PREVIEW_MODE === 'true'; + const scriptPath = import.meta.env.DEV ? `/examples/javascript-bundle/tools/${category}/${toolMetadata.id}.js` // Vite dev server can serve parent directories with fs.allow - : `${basePath}examples/javascript-bundle/tools/${category}/${toolMetadata.id}.js`; // In production, use the base path + : isPreviewMode + ? `/examples/javascript-bundle/tools/${category}/${toolMetadata.id}.js` // Preview mode serves from root + : `${basePath}examples/javascript-bundle/tools/${category}/${toolMetadata.id}.js`; // GitHub Pages production // Create script element const script = document.createElement('script');