docs: add frontmatter to the "how-to" guides (#4835)

SeanCassiere · web-flow · commit 7f290adb41b0 · 2025-07-30T20:04:05.000+12:00
diff --git a/docs/router/framework/react/how-to/arrays-objects-dates-search-params.md b/docs/router/framework/react/how-to/arrays-objects-dates-search-params.md
@@ -2,8 +2,6 @@
 title: Work with Arrays, Objects, and Dates in Search Parameters
 ---
 
-# How to Work with Arrays, Objects, and Dates in Search Parameters
-
 Learn to handle arrays, objects, dates, and nested data structures in search parameters while maintaining type safety and URL compatibility.
 
 ## Quick Start
diff --git a/docs/router/framework/react/how-to/debug-router-issues.md b/docs/router/framework/react/how-to/debug-router-issues.md
@@ -1,4 +1,6 @@
-# How to Debug Common Router Issues
+---
+title: How to Debug Common Router Issues
+---
 
 This guide covers debugging common TanStack Router problems, from route matching failures to navigation issues and performance problems.
 
diff --git a/docs/router/framework/react/how-to/deploy-to-production.md b/docs/router/framework/react/how-to/deploy-to-production.md
@@ -1,4 +1,6 @@
-# How to Deploy TanStack Router to Production
+---
+title: How to Deploy TanStack Router to Production
+---
 
 This guide covers deploying TanStack Router applications to popular hosting platforms.
 
diff --git a/docs/router/framework/react/how-to/install.md b/docs/router/framework/react/how-to/install.md
@@ -2,8 +2,6 @@
 title: How to Install TanStack Router
 ---
 
-# How to Install TanStack Router
-
 ## Prerequisites
 
 - React 18.x.x or 19.x.x
diff --git a/docs/router/framework/react/how-to/integrate-chakra-ui.md b/docs/router/framework/react/how-to/integrate-chakra-ui.md
@@ -1,4 +1,6 @@
-# How to Integrate TanStack Router with Chakra UI
+---
+title: How to Integrate TanStack Router with Chakra UI
+---
 
 This guide covers setting up Chakra UI with TanStack Router, including theme configuration and creating responsive, accessible components.
 
diff --git a/docs/router/framework/react/how-to/integrate-framer-motion.md b/docs/router/framework/react/how-to/integrate-framer-motion.md
@@ -1,4 +1,6 @@
-# How to Integrate TanStack Router with Framer Motion
+---
+title: How to Integrate TanStack Router with Framer Motion
+---
 
 This guide covers setting up Framer Motion with TanStack Router for smooth route transitions and navigation animations.
 
diff --git a/docs/router/framework/react/how-to/integrate-material-ui.md b/docs/router/framework/react/how-to/integrate-material-ui.md
@@ -1,4 +1,6 @@
-# How to Integrate TanStack Router with Material-UI (MUI)
+---
+title: How to Integrate TanStack Router with Material-UI (MUI)
+---
 
 This guide covers setting up Material-UI with TanStack Router, including proper TypeScript integration and component composition patterns.
 
diff --git a/docs/router/framework/react/how-to/integrate-shadcn-ui.md b/docs/router/framework/react/how-to/integrate-shadcn-ui.md
@@ -1,4 +1,6 @@
-# How to Integrate TanStack Router with Shadcn/ui
+---
+title: How to Integrate TanStack Router with Shadcn/ui
+---
 
 This guide covers setting up Shadcn/ui with TanStack Router, including solutions for common animation and compatibility issues.
 
diff --git a/docs/router/framework/react/how-to/migrate-from-react-router.md b/docs/router/framework/react/how-to/migrate-from-react-router.md
@@ -2,8 +2,6 @@
 title: How to Migrate from React Router v7
 ---
 
-# How to Migrate from React Router v7
-
 This guide provides a step-by-step process to migrate your application from React Router v7 to TanStack Router. We'll cover the complete migration process from removing React Router dependencies to implementing TanStack Router's type-safe routing patterns.
 
 ## Quick Start
diff --git a/docs/router/framework/react/how-to/navigate-with-search-params.md b/docs/router/framework/react/how-to/navigate-with-search-params.md
@@ -1,4 +1,6 @@
-# How to Navigate with Search Parameters
+---
+title: How to Navigate with Search Parameters
+---
 
 This guide covers updating and managing search parameters during navigation using TanStack Router's Link components and programmatic navigation methods.
 
diff --git a/docs/router/framework/react/how-to/setup-auth-providers.md b/docs/router/framework/react/how-to/setup-auth-providers.md
@@ -1,4 +1,6 @@
-# How to Integrate Authentication Providers
+---
+title: How to Set Up Authentication Providers
+---
 
 This guide covers integrating popular authentication services (Auth0, Clerk, Supabase) with TanStack Router.
 
diff --git a/docs/router/framework/react/how-to/setup-authentication.md b/docs/router/framework/react/how-to/setup-authentication.md
@@ -1,4 +1,6 @@
-# How to Set Up Basic Authentication and Protected Routes
+---
+title: How to Set Up Basic Authentication and Protected Routes
+---
 
 This guide covers implementing basic authentication patterns and protecting routes in TanStack Router applications.
 
diff --git a/docs/router/framework/react/how-to/setup-basic-search-params.md b/docs/router/framework/react/how-to/setup-basic-search-params.md
@@ -1,9 +1,7 @@
 ---
-title: Set Up Basic Search Parameters
+title: How to Set Up Basic Search Parameters
 ---
 
-# How to Set Up Basic Search Parameters
-
 Learn how to add type-safe, production-ready search parameters to your TanStack Router routes using schema validation. This guide covers the fundamentals of search parameter validation, reading values, and handling different data types with any standard schema-compliant validation library.
 
 ## Quick Start
diff --git a/docs/router/framework/react/how-to/setup-rbac.md b/docs/router/framework/react/how-to/setup-rbac.md
@@ -1,4 +1,6 @@
-# How to Set Up Role-Based Access Control
+---
+title: How to Set Up Role-Based Access Control
+---
 
 This guide covers implementing role-based access control (RBAC) and permission-based routing in TanStack Router applications.
 
diff --git a/docs/router/framework/react/how-to/setup-ssr.md b/docs/router/framework/react/how-to/setup-ssr.md
@@ -1,4 +1,6 @@
-# How to Set Up Server-Side Rendering (SSR)
+---
+title: How to Set Up Server-Side Rendering (SSR)
+---
 
 > [!IMPORTANT] > **[TanStack Start](../guide/tanstack-start.md) is the recommended way to set up SSR** - it provides SSR, streaming, and deployment with zero configuration.
 >
diff --git a/docs/router/framework/react/how-to/test-file-based-routing.md b/docs/router/framework/react/how-to/test-file-based-routing.md
@@ -1,4 +1,6 @@
-# How to Test Router with File-Based Routing
+---
+title: How to Test Router with File-Based Routing
+---
 
 This guide covers testing TanStack Router applications that use file-based routing, including testing route generation, file-based route components, and file-based routing patterns.
 
diff --git a/docs/router/framework/react/how-to/use-environment-variables.md b/docs/router/framework/react/how-to/use-environment-variables.md
@@ -1,4 +1,6 @@
-# How to Use Environment Variables in TanStack Router
+---
+title: How to Use Environment Variables
+---
 
 Learn how to configure and use environment variables in your TanStack Router application for API endpoints, feature flags, and build configuration across different bundlers.
 
diff --git a/docs/router/framework/react/how-to/validate-search-params.md b/docs/router/framework/react/how-to/validate-search-params.md
@@ -2,8 +2,6 @@
 title: Validate Search Parameters with Schemas
 ---
 
-# How to Validate Search Parameters with Schemas
-
 Learn how to add robust schema validation to your search parameters using popular validation libraries like Zod, Valibot, and ArkType. This guide covers validation setup, error handling, type safety, and common validation patterns for production applications.
 
 **Prerequisites:** [Set Up Basic Search Parameters](./setup-basic-search-params.md) - Foundation concepts for reading and working with search params.
diff --git a/docs/start/framework/react/how-to/use-environment-variables.md b/docs/start/framework/react/how-to/use-environment-variables.md
@@ -1,4 +1,6 @@
-# How to Use Environment Variables in TanStack Start
+---
+title: How to Use Environment Variables
+---
 
 Learn how to securely configure and use environment variables in your TanStack Start application across different contexts (server functions, client code, and build processes).
 
diff --git a/docs/start/framework/react/how-to/write-isomorphic-client-server-code.md b/docs/start/framework/react/how-to/write-isomorphic-client-server-code.md
@@ -1,4 +1,6 @@
-# How to Write Isomorphic, Client-Only, and Server-Only Code
+---
+title: How to Write Isomorphic, Client-Only, and Server-Only Code
+---
 
 This guide covers TanStack Start's execution model and APIs for controlling where code runs.
 
