From 7faa598ca7486dcef5339f46930bc0d7a5f28793 Mon Sep 17 00:00:00 2001
From: Danish Arora <danisharora099@gmail.com>
Date: Sun, 3 Nov 2024 00:27:59 +0530
Subject: [PATCH] chore(buddybook): support base URL

---
 examples/buddybook/index.html                |  6 +++---
 examples/buddybook/src/App.tsx               | 14 +++++++-------
 examples/buddybook/src/components/Header.tsx | 14 +++++++-------
 examples/buddybook/vite.config.ts            |  1 +
 4 files changed, 18 insertions(+), 17 deletions(-)
diff --git a/examples/buddybook/index.html b/examples/buddybook/index.html
index 5289da1..7013e97 100644
--- a/examples/buddybook/index.html
+++ b/examples/buddybook/index.html
@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="icon" type="image/svg+xml" href="/buddybook/favicon.svg" />
+    <link rel="icon" type="image/png" href="/buddybook/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>BuddyBook Dogfood</title>
-    <base href="/" />
+    <base href="/buddybook/" />
     <script>
       window.global = window;
       window.process = {
diff --git a/examples/buddybook/src/App.tsx b/examples/buddybook/src/App.tsx
index fb5e07e..2643810 100644
--- a/examples/buddybook/src/App.tsx
+++ b/examples/buddybook/src/App.tsx
@@ -130,11 +130,11 @@ function App() {
       <Header wakuStatus={wakuStatus} />
       <main className="container mx-auto px-4 py-4 md:py-8 max-w-7xl">
         <Routes>
-          <Route path="/create" element={<ChainCreationForm />} />
-          <Route path="/view" element={<ChainList chainsData={chainsData} onChainUpdate={handleChainUpdate} isLoading={isLoadingChains} />} />
-          <Route path="/" element={<Home />} />
+          <Route path="create" element={<ChainCreationForm />} />
+          <Route path="view" element={<ChainList chainsData={chainsData} onChainUpdate={handleChainUpdate} isLoading={isLoadingChains} />} />
+          <Route path="" element={<Home />} />
           <Route 
-            path="/sign/:chainUUID/:blockUUID" 
+            path="sign/:chainUUID/:blockUUID"
             element={
               <SignSharedChain 
                 chainsData={chainsData} 
@@ -143,8 +143,8 @@ function App() {
               />
             } 
           />
-          <Route path="/telemetry" element={<TelemetryPage />} />
-          <Route path="*" element={<Navigate to="/" replace />} />
+          <Route path="telemetry" element={<TelemetryPage />} />
+          <Route path="*" element={<Navigate to="" replace />} />
         </Routes>
       </main>
     </div>
@@ -155,7 +155,7 @@ const Home: React.FC = () => (
   <div className="space-y-4 md:space-y-6 p-4 md:p-6">
     <h1 className="text-2xl md:text-4xl font-bold">BuddyBook</h1>
     <div className="w-full max-w-sm mx-auto p-4 md:p-6 bg-card rounded-lg shadow-md">
-      <Link to="/create">
+      <Link to="create">
         <Button className="w-full mb-4">
           Create New Chain
         </Button>
diff --git a/examples/buddybook/src/components/Header.tsx b/examples/buddybook/src/components/Header.tsx
index 1fc763a..180e008 100644
--- a/examples/buddybook/src/components/Header.tsx
+++ b/examples/buddybook/src/components/Header.tsx
@@ -57,7 +57,7 @@ const Header: React.FC<HeaderProps> = ({ wakuStatus }) => {
 
   return (
     <header className="border-b">
-      <div className="container mx-auto px-4 py-2 md:py-4">
+      <div className="container mx-auto px-4 py-4">
         <div className="flex flex-col md:flex-row justify-between items-center space-y-2 md:space-y-0">
           <div className="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-4 w-full md:w-auto">
             <h1 className="text-xl md:text-2xl font-bold">BuddyBook</h1>
@@ -65,24 +65,24 @@ const Header: React.FC<HeaderProps> = ({ wakuStatus }) => {
               <ul className="flex justify-center md:justify-start space-x-4">
                 <li>
                   <Link 
-                    to="/create" 
-                    className={`text-sm ${location.pathname === '/create' ? 'text-primary font-semibold' : 'text-muted-foreground'}`}
+                    to="create"
+                    className={`text-sm ${location.pathname.endsWith('/create') ? 'text-primary font-semibold' : 'text-muted-foreground'}`}
                   >
                     Create Chain
                   </Link>
                 </li>
                 <li>
                   <Link 
-                    to="/view" 
-                    className={`text-sm ${location.pathname === '/view' ? 'text-primary font-semibold' : 'text-muted-foreground'}`}
+                    to="view"
+                    className={`text-sm ${location.pathname.endsWith('/view') ? 'text-primary font-semibold' : 'text-muted-foreground'}`}
                   >
                     View Chains
                   </Link>
                 </li>
                 <li>
                   <Link 
-                    to="/telemetry" 
-                    className={`text-sm ${location.pathname === '/telemetry' ? 'text-primary font-semibold' : 'text-muted-foreground'}`}
+                    to="telemetry"
+                    className={`text-sm ${location.pathname.endsWith('/telemetry') ? 'text-primary font-semibold' : 'text-muted-foreground'}`}
                   >
                     Telemetry
                   </Link>
diff --git a/examples/buddybook/vite.config.ts b/examples/buddybook/vite.config.ts
index 8aeb465..d3046eb 100644
--- a/examples/buddybook/vite.config.ts
+++ b/examples/buddybook/vite.config.ts
@@ -6,6 +6,7 @@ export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
   
   return {
+    base: '/buddybook/',
     plugins: [
       react(),
       {
