✨ Add meta title support to all pages (#2039)

Author: alejsdev

frontend/src/routes/__root.tsx

@@ -1,12 +1,13 @@
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
-import { createRootRoute, Outlet } from "@tanstack/react-router"
+import { createRootRoute, HeadContent, Outlet } from "@tanstack/react-router"
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"
 import ErrorComponent from "@/components/Common/ErrorComponent"
 import NotFound from "@/components/Common/NotFound"
 
 export const Route = createRootRoute({
   component: () => (
     <>
+      <HeadContent />
       <Outlet />
       <TanStackRouterDevtools position="bottom-right" />
       <ReactQueryDevtools initialIsOpen={false} />

frontend/src/routes/_layout/admin.tsx

@@ -18,6 +18,13 @@ function getUsersQueryOptions() {
 
 export const Route = createFileRoute("/_layout/admin")({
   component: Admin,
+  head: () => ({
+    meta: [
+      {
+        title: "Admin - FastAPI Cloud",
+      },
+    ],
+  }),
 })
 
 function UsersTableContent() {

frontend/src/routes/_layout/index.tsx

@@ -4,6 +4,13 @@ import useAuth from "@/hooks/useAuth"
 
 export const Route = createFileRoute("/_layout/")({
   component: Dashboard,
+  head: () => ({
+    meta: [
+      {
+        title: "Dashboard - FastAPI Cloud",
+      },
+    ],
+  }),
 })
 
 function Dashboard() {
@@ -16,7 +23,7 @@ function Dashboard() {
           Hi, {currentUser?.full_name || currentUser?.email} 👋
         </h1>
         <p className="text-muted-foreground">
-          Welcome back, nice to see you again!
+          Welcome back, nice to see you again!!!
         </p>
       </div>
     </div>

frontend/src/routes/_layout/items.tsx

@@ -18,6 +18,13 @@ function getItemsQueryOptions() {
 
 export const Route = createFileRoute("/_layout/items")({
   component: Items,
+  head: () => ({
+    meta: [
+      {
+        title: "Items - FastAPI Cloud",
+      },
+    ],
+  }),
 })
 
 function ItemsTableContent() {

frontend/src/routes/_layout/settings.tsx

@@ -14,6 +14,13 @@ const tabsConfig = [
 
 export const Route = createFileRoute("/_layout/settings")({
   component: UserSettings,
+  head: () => ({
+    meta: [
+      {
+        title: "Settings - FastAPI Cloud",
+      },
+    ],
+  }),
 })
 
 function UserSettings() {

frontend/src/routes/login.tsx

@@ -41,6 +41,13 @@ export const Route = createFileRoute("/login")({
       })
     }
   },
+  head: () => ({
+    meta: [
+      {
+        title: "Log In - FastAPI Cloud",
+      },
+    ],
+  }),
 })
 
 function Login() {

frontend/src/routes/recover-password.tsx

@@ -39,6 +39,13 @@ export const Route = createFileRoute("/recover-password")({
       })
     }
   },
+  head: () => ({
+    meta: [
+      {
+        title: "Recover Password - FastAPI Cloud",
+      },
+    ],
+  }),
 })
 
 function RecoverPassword() {

frontend/src/routes/reset-password.tsx

@@ -57,6 +57,13 @@ export const Route = createFileRoute("/reset-password")({
       throw redirect({ to: "/login" })
     }
   },
+  head: () => ({
+    meta: [
+      {
+        title: "Reset Password - FastAPI Cloud",
+      },
+    ],
+  }),
 })
 
 function ResetPassword() {

frontend/src/routes/signup.tsx

@@ -48,6 +48,13 @@ export const Route = createFileRoute("/signup")({
       })
     }
   },
+  head: () => ({
+    meta: [
+      {
+        title: "Sign Up - FastAPI Cloud",
+      },
+    ],
+  }),
 })
 
 function SignUp() {