Replit Agent
0c2ef37622
The browser tab previously showed a generic placeholder favicon and the
English title "EHSAN Closed Donation Loop". Per the reference, the tab now
shows the EHSAN logo mark and an Arabic platform title.
Changes:
- Favicon: copied the existing EHSAN logo (src/assets/ehsan-logo.png) to
public/favicon.png and pointed index.html at %BASE_URL%favicon.png
(base-path safe; verified it serves 200 image/png).
- Static head: index.html <title> and OG/Twitter titles + description now
use the Arabic platform name "منصة إحسان".
- Per-page titles: added a DocumentTitle component
(src/hooks/useDocumentTitle.ts) rendered in the Router that sets
document.title to "<page name> - <platform>" based on the current wouter
path and active language, reading from a new translations.meta section
(AR + EN). Home reads "الصفحة الرئيسية - منصة إحسان"; switches with language.
Approach note: titles are centralized in the router rather than edited into
each page file, keeping it DRY while covering all main routes.
Verified: tsc clean; e2e confirmed titles on /, /opportunities, /cart and
English fallback ("Home - EHSAN Platform"), plus favicon load.
86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
import { Switch, Route, Router as WouterRouter, Redirect } from "wouter";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import { Toaster } from "@/components/ui/toaster";
|
|
import { TooltipProvider } from "@/components/ui/tooltip";
|
|
import { LanguageProvider } from "./contexts/LanguageContext";
|
|
import { CartProvider } from "./contexts/CartContext";
|
|
import { AuthProvider, useAuth } from "./contexts/AuthContext";
|
|
import { AppLayout } from "./components/layout/AppLayout";
|
|
import { DocumentTitle } from "./hooks/useDocumentTitle";
|
|
import NotFound from "@/pages/not-found";
|
|
import { ComponentType } from "react";
|
|
|
|
// Page imports
|
|
import Home from "./pages/home";
|
|
import About from "./pages/about";
|
|
import Waqf from "./pages/waqf";
|
|
import Baraem from "./pages/baraem";
|
|
import RequestSupport from "./pages/request";
|
|
import Opportunities from "./pages/opportunities";
|
|
import Donate from "./pages/donate";
|
|
import Admin from "./pages/admin";
|
|
import Track from "./pages/track";
|
|
import ThankYou from "./pages/thank-you";
|
|
import WhatsappLog from "./pages/whatsapp-log";
|
|
import Login from "./pages/login";
|
|
import Cart from "./pages/cart";
|
|
|
|
const queryClient = new QueryClient();
|
|
|
|
function Protected({ component: Component }: { component: ComponentType<any> }) {
|
|
const { isAuthenticated } = useAuth();
|
|
if (!isAuthenticated) {
|
|
return <Redirect to="/login" />;
|
|
}
|
|
return <Component />;
|
|
}
|
|
|
|
function Router() {
|
|
return (
|
|
<AppLayout>
|
|
<DocumentTitle />
|
|
<Switch>
|
|
<Route path="/" component={Home} />
|
|
<Route path="/about/:section?" component={About} />
|
|
<Route path="/waqf" component={Waqf} />
|
|
<Route path="/baraem" component={Baraem} />
|
|
<Route path="/request" component={RequestSupport} />
|
|
<Route path="/opportunities" component={Opportunities} />
|
|
<Route path="/donate/:id" component={Donate} />
|
|
<Route path="/cart" component={Cart} />
|
|
<Route path="/login" component={Login} />
|
|
<Route path="/admin">
|
|
<Protected component={Admin} />
|
|
</Route>
|
|
<Route path="/track/:id" component={Track} />
|
|
<Route path="/thank-you/:id" component={ThankYou} />
|
|
<Route path="/whatsapp-log">
|
|
<Protected component={WhatsappLog} />
|
|
</Route>
|
|
<Route component={NotFound} />
|
|
</Switch>
|
|
</AppLayout>
|
|
);
|
|
}
|
|
|
|
function App() {
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<LanguageProvider>
|
|
<AuthProvider>
|
|
<CartProvider>
|
|
<TooltipProvider>
|
|
<WouterRouter base={import.meta.env.BASE_URL.replace(/\/$/, "")}>
|
|
<Router />
|
|
</WouterRouter>
|
|
<Toaster />
|
|
</TooltipProvider>
|
|
</CartProvider>
|
|
</AuthProvider>
|
|
</LanguageProvider>
|
|
</QueryClientProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|