docs: reorganize integrations/adapters navs

apps/content/.vitepress/config.ts

@@ -88,30 +88,24 @@ export default defineConfig({
             { text: 'HTTP', link: '/docs/adapters/http' },
             { text: 'Websocket', link: '/docs/adapters/websocket' },
             { text: 'Message Port', link: '/docs/adapters/message-port' },
+            { text: '---' },
+            { text: 'Astro', link: '/docs/adapters/astro' },
+            { text: 'Browser', link: '/docs/adapters/browser' },
+            { text: 'Electron', link: '/docs/adapters/electron' },
+            { text: 'Elysia', link: '/docs/adapters/elysia' },
+            { text: 'Express', link: '/docs/adapters/express' },
+            { text: 'Fastify', link: '/docs/adapters/fastify' },
+            { text: 'Hono', link: '/docs/adapters/hono' },
+            { text: 'Next.js', link: '/docs/adapters/next' },
+            { text: 'Nuxt', link: '/docs/adapters/nuxt' },
+            { text: 'React Native', link: '/docs/adapters/react-native' },
+            { text: 'Remix', link: '/docs/adapters/remix' },
+            { text: 'Solid Start', link: '/docs/adapters/solid-start' },
+            { text: 'Svelte Kit', link: '/docs/adapters/svelte-kit' },
+            { text: 'Tanstack Start', link: '/docs/adapters/tanstack-start' },
+            { text: 'Worker Threads', link: '/docs/adapters/worker-threads' },
           ],
         },
-        {
-          text: 'Integrations',
-          collapsed: true,
-          items: [
-            { text: 'Astro', link: '/docs/integrations/astro' },
-            { text: 'Browser', link: '/docs/integrations/browser' },
-            { text: 'Electron', link: '/docs/integrations/electron' },
-            { text: 'Elysia', link: '/docs/integrations/elysia' },
-            { text: 'Express', link: '/docs/integrations/express' },
-            { text: 'Fastify', link: '/docs/integrations/fastify' },
-            { text: 'Hono', link: '/docs/integrations/hono' },
-            { text: 'Next.js', link: '/docs/integrations/next' },
-            { text: 'Nuxt', link: '/docs/integrations/nuxt' },
-            { text: 'React Native', link: '/docs/integrations/react-native' },
-            { text: 'Remix', link: '/docs/integrations/remix' },
-            { text: 'Solid Start', link: '/docs/integrations/solid-start' },
-            { text: 'SvelteKit', link: '/docs/integrations/svelte-kit' },
-            { text: 'Tanstack Start', link: '/docs/integrations/tanstack-start' },
-            { text: 'Worker Threads', link: '/docs/integrations/worker-threads' },
-          ],
-
-        },
         {
           text: 'Plugins',
           collapsed: true,
@@ -138,15 +132,24 @@ export default defineConfig({
           ],
         },
         {
-          text: 'Tanstack Query',
+          text: 'Integrations',
           collapsed: true,
           items: [
-            { text: 'New', link: '/docs/tanstack-query/new' },
-            { text: 'Basic', link: '/docs/tanstack-query/basic' },
-            { text: 'React', link: '/docs/tanstack-query/react' },
-            { text: 'Vue', link: '/docs/tanstack-query/vue' },
-            { text: 'Solid', link: '/docs/tanstack-query/solid' },
-            { text: 'Svelte', link: '/docs/tanstack-query/svelte' },
+            { text: 'Tanstack Query', link: '/docs/integrations/tanstack-query' },
+            {
+              text: 'Tanstack Query (Old)',
+              collapsed: true,
+              items: [
+                { text: 'Basic', link: '/docs/integrations/tanstack-query-old/basic' },
+                { text: 'React', link: '/docs/integrations/tanstack-query-old/react' },
+                { text: 'Vue', link: '/docs/integrations/tanstack-query-old/vue' },
+                { text: 'Solid', link: '/docs/integrations/tanstack-query-old/solid' },
+                { text: 'Svelte', link: '/docs/integrations/tanstack-query-old/svelte' },
+              ],
+            },
+            { text: 'Pinia Colada', link: '/docs/integrations/pinia-colada' },
+            { text: 'Hey API', link: '/docs/integrations/hey-api' },
+            { text: 'NestJS', link: '/docs/openapi/integrations/implement-contract-in-nest' },
           ],
         },
         {
@@ -174,9 +177,6 @@ export default defineConfig({
           text: 'Others',
           collapsed: true,
           items: [
-            { text: 'Pinia Colada', link: '/docs/pinia-colada' },
-            { text: 'Hey API', link: '/docs/hey-api' },
-            { text: 'NestJS', link: '/docs/openapi/nest/implement-contract' },
             { text: 'Playgrounds', link: '/docs/playgrounds' },
             { text: 'Comparison', link: '/docs/comparison' },
             { text: 'Ecosystem', link: '/docs/ecosystem' },
@@ -208,10 +208,10 @@ export default defineConfig({
           ],
         },
         {
-          text: 'NestJS',
+          text: 'Integrations',
           collapsed: true,
           items: [
-            { text: 'Implement Contract', link: '/docs/openapi/nest/implement-contract' },
+            { text: 'Implement Contract in NestJS', link: '/docs/openapi/integrations/implement-contract-in-nest' },
           ],
         },
         {

apps/content/docs/integrations/astro.md → apps/content/docs/adapters/astro.md

@@ -1,14 +1,16 @@
 ---
-title: Astro Integration
-description: Integrate oRPC with Astro
+title: Astro Adapter
+description: Use oRPC inside an Astro project
 ---
 
-# Astro Integration
+# Astro Adapter
 
 [Astro](https://astro.build/) is a JavaScript web framework optimized for building fast, content-driven websites. For additional context, refer to the [HTTP Adapter](/docs/adapters/http) guide.
 
 ## Basic
 
+::: code-group
+
 ```ts [pages/rpc/[...rest].ts]
 import { RPCHandler } from '@orpc/server/fetch'
 
@@ -26,6 +28,8 @@ export const ALL: APIRoute = async ({ request }) => {
 }
 ```
 
+:::
+
 ::: info
 The `handler` can be any supported oRPC handler, such as [RPCHandler](/docs/rpc-handler), [OpenAPIHandler](/docs/openapi/openapi-handler), or another custom handler.
 :::

apps/content/docs/integrations/browser.md → apps/content/docs/adapters/browser.md

@@ -1,9 +1,9 @@
 ---
-title: Browser Integration
+title: Browser Adapter
 description: Type-safe communication between browser scripts using Message Port Adapter
 ---
 
-# Browser Integration
+# Browser Adapter
 
 Enable type-safe communication between browser scripts using the [Message Port Adapter](/docs/adapters/message-port).
 

apps/content/docs/integrations/electron.md → apps/content/docs/adapters/electron.md

@@ -1,9 +1,9 @@
 ---
-title: Electron Integration
-description: Integrate oRPC with Electron
+title: Electron Adapter
+description: Use oRPC inside an Electron project
 ---
 
-# Electron Integration
+# Electron Adapter
 
 Establish type-safe communication between processes in [Electron](https://www.electronjs.org/) using the [Message Port Adapter](/docs/adapters/message-port). Before you start, we recommend reading the [MessagePorts in Electron](https://www.electronjs.org/docs/latest/tutorial/message-ports) guide.
 

apps/content/docs/integrations/elysia.md → apps/content/docs/adapters/elysia.md

@@ -1,9 +1,9 @@
 ---
-title: Elysia Integration
-description: Integrate oRPC with Elysia
+title: Elysia Adapter
+description: Use oRPC inside an Elysia project
 ---
 
-# Elysia Integration
+# Elysia Adapter
 
 [Elysia](https://elysiajs.com/) is a high-performance web framework for [Bun](https://bun.sh/) that adheres to the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). For additional context, refer to the [HTTP Adapter](/docs/adapters/http) guide.
 

apps/content/docs/integrations/express.md → apps/content/docs/adapters/express.md

@@ -1,9 +1,9 @@
 ---
-title: Express.js Integration
-description: Seamlessly integrate oRPC with Express.js
+title: Express.js Adapter
+description: Use oRPC inside an Express.js project
 ---
 
-# Express.js Integration
+# Express.js Adapter
 
 [Express.js](https://expressjs.com/) is a popular Node.js framework for building web applications. For additional context, refer to the [HTTP Adapter](/docs/adapters/http) guide.
 

apps/content/docs/integrations/fastify.md → apps/content/docs/adapters/fastify.md

@@ -1,9 +1,9 @@
 ---
-title: Fastify Integration
-description: Seamlessly integrate oRPC with Fastify
+title: Fastify Adapter
+description: Use oRPC inside an Fastify project
 ---
 
-# Fastify Integration
+# Fastify Adapter
 
 [Fastify](https://fastify.dev/) is a web framework highly focused on providing the best developer experience with the least overhead and a powerful plugin architecture. For additional context, refer to the [HTTP Adapter](/docs/adapters/http) guide.
 

apps/content/docs/integrations/hono.md → apps/content/docs/adapters/hono.md

@@ -1,9 +1,9 @@
 ---
-title: Hono Integration
-description: Integrate oRPC with Hono
+title: Hono Adapter
+description: Use oRPC inside an Hono project
 ---
 
-# Hono Integration
+# Hono Adapter
 
 [Hono](https://honojs.dev/) is a high-performance web framework built on top of [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). For additional context, refer to the [HTTP Adapter](/docs/adapters/http) guide.
 

apps/content/docs/adapters/message-port.md

@@ -7,11 +7,11 @@ description: Using oRPC with Message Ports
 
 oRPC offers built-in support for common Message Port implementations, enabling easy internal communication between different processes.
 
-| Environment                                                                                | Documentation                                          |
-| ------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
-| [Electron Message Port](https://www.electronjs.org/docs/latest/tutorial/message-ports)     | [Integration Guide](/docs/integrations/electron)       |
-| Browser (extension background to popup/content, window to window, etc.)                    | [Integration Guide](/docs/integrations/browser)        |
-| [Node.js Worker Threads Port](https://nodejs.org/api/worker_threads.html#workerparentport) | [Integration Guide](/docs/integrations/worker-threads) |
+| Environment                                                                                | Documentation                                  |
+| ------------------------------------------------------------------------------------------ | ---------------------------------------------- |
+| [Electron Message Port](https://www.electronjs.org/docs/latest/tutorial/message-ports)     | [Adapter Guide](/docs/adapters/electron)       |
+| Browser (extension background to popup/content, window to window, etc.)                    | [Adapter Guide](/docs/adapters/browser)        |
+| [Node.js Worker Threads Port](https://nodejs.org/api/worker_threads.html#workerparentport) | [Adapter Guide](/docs/adapters/worker-threads) |
 
 ## Basic Usage
 

apps/content/docs/integrations/next.md → apps/content/docs/adapters/next.md

@@ -1,9 +1,9 @@
 ---
-title: Next.js Integration
-description: Seamlessly integrate oRPC with Next.js
+title: Next.js Adapter
+description: Use oRPC inside an Next.js project
 ---
 
-# Next.js Integration
+# Next.js Adapter
 
 [Next.js](https://nextjs.org/) is a leading React framework for server-rendered apps. oRPC works with both the [App Router](https://nextjs.org/docs/app/getting-started/installation) and [Pages Router](https://nextjs.org/docs/pages/getting-started/installation). For additional context, refer to the [HTTP Adapter](/docs/adapters/http) guide.
 

apps/content/docs/integrations/nuxt.md → apps/content/docs/adapters/nuxt.md

@@ -1,9 +1,9 @@
 ---
-title: Nuxt.js Integration
-description: Integrate oRPC with Nuxt.js
+title: Nuxt.js Adapter
+description: Use oRPC inside an Nuxt.js project
 ---
 
-# Nuxt.js Integration
+# Nuxt.js Adapter
 
 [Nuxt.js](https://nuxtjs.org/) is a popular Vue.js framework for building server-side applications. It built on top of [Nitro](https://nitro.build/) server a lightweight, high-performance Node.js runtime. For more details, see the [HTTP Adapter](/docs/adapters/http) guide.
 

apps/content/docs/integrations/react-native.md → apps/content/docs/adapters/react-native.md

@@ -1,9 +1,9 @@
 ---
-title: React Native Integration
-description: Seamlessly integrate oRPC with React Native
+title: React Native Adapter
+description: Use oRPC inside a React Native project
 ---
 
-# React Native Integration
+# React Native Adapter
 
 [React Native](https://reactnative.dev/) is a framework for building native apps using React. For additional context, refer to the [HTTP Adapter](/docs/adapters/http) guide.
 

apps/content/docs/integrations/remix.md → apps/content/docs/adapters/remix.md

@@ -1,9 +1,9 @@
 ---
-title: Remix Integration
-description: Integrate oRPC with Remix
+title: Remix Adapter
+description: Use oRPC inside an Remix project
 ---
 
-# Remix Integration
+# Remix Adapter
 
 [Remix](https://remix.run/) is a full stack JavaScript framework for building web applications with React. For additional context, refer to the [HTTP Adapter](/docs/adapters/http) guide.
 

apps/content/docs/integrations/solid-start.md → apps/content/docs/adapters/solid-start.md

@@ -1,11 +1,11 @@
 ---
-title: Solid Start Integration
-description: Setup oRPC within a Solid Start application
+title: Solid Start Adapter
+description: Use oRPC inside a Solid Start project
 ---
 
-# SolidStart Integration
+# Solid Start Adapter
 
-[SolidStart](https://start.solidjs.com/) is a full stack JavaScript framework for building web applications with SolidJS. For additional context, refer to the [HTTP Adapter](/docs/adapters/http) guide.
+[Solid Start](https://start.solidjs.com/) is a full stack JavaScript framework for building web applications with SolidJS. For additional context, refer to the [HTTP Adapter](/docs/adapters/http) guide.
 
 ## Server
 

apps/content/docs/integrations/svelte-kit.md → apps/content/docs/adapters/svelte-kit.md

@@ -1,11 +1,11 @@
 ---
-title: SvelteKit Integration
-description: Integrate oRPC with SvelteKit
+title: Svelte Kit Adapter
+description: Use oRPC inside an Svelte Kit project
 ---
 
-# SvelteKit Integration
+# Svelte Kit Adapter
 
-[SvelteKit](https://svelte.dev/docs/kit/introduction) is a framework for rapidly developing robust, performant web applications using Svelte. For additional context, refer to the [HTTP Adapter](/docs/adapters/http) guide.
+[Svelte Kit](https://svelte.dev/docs/kit/introduction) is a framework for rapidly developing robust, performant web applications using Svelte. For additional context, refer to the [HTTP Adapter](/docs/adapters/http) guide.
 
 ## Basic
 

apps/content/docs/integrations/tanstack-start.md → apps/content/docs/adapters/tanstack-start.md

@@ -1,9 +1,9 @@
 ---
-title: TanStack Start Integration
-description: Integrate oRPC with TanStack Start
+title: TanStack Start Adapter
+description: Use oRPC inside a TanStack Start project
 ---
 
-# TanStack Start Integration
+# TanStack Start Adapter
 
 [TanStack Start](https://tanstack.com/start) is a full-stack React framework built on [Nitro](https://nitro.build/) and the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). For additional context, see the [HTTP Adapter](/docs/adapters/http) guide.
 

apps/content/docs/integrations/worker-threads.md → apps/content/docs/adapters/worker-threads.md

@@ -1,9 +1,9 @@
 ---
-title: Worker Threads Integration
+title: Worker Threads Adapter
 description: Enable type-safe communication between Node.js Worker Threads using oRPC.
 ---
 
-# Worker Threads Integration
+# Worker Threads Adapter
 
 Use [Node.js Worker Threads](https://nodejs.org/api/worker_threads.html) with oRPC for type-safe inter-thread communication via the [Message Port Adapter](/docs/adapters/message-port). Before proceeding, we recommend reviewing the [Node.js Worker Thread API](https://nodejs.org/api/worker_threads.html).
 

apps/content/docs/best-practices/optimize-ssr.md

@@ -170,7 +170,7 @@ This example uses Next.js, but you can apply the same pattern in SvelteKit, Nuxt
 
 ## TanStack Query
 
-Combining this oRPC setup with TanStack Query (React Query, Solid Query, etc.) provides a powerful pattern for data fetching, and state management, especially with Suspense hooks. Refer to these details in [Tanstack Query Integration Guide](/docs/tanstack-query/basic) and [Tanstack Query SSR Guide](https://tanstack.com/query/latest/docs/framework/react/guides/ssr).
+Combining this oRPC setup with TanStack Query (React Query, Solid Query, etc.) provides a powerful pattern for data fetching, and state management, especially with Suspense hooks. Refer to these details in [Tanstack Query Integration Guide](/docs/integrations/tanstack-query-old/basic) and [Tanstack Query SSR Guide](https://tanstack.com/query/latest/docs/framework/react/guides/ssr).
 
 ```tsx
 export default function PlanetListPage() {

apps/content/docs/comparison.md

@@ -17,11 +17,12 @@ This comparison table helps you understand how oRPC differs from other popular T
 | End-to-end Typesafe Errors                     | [1](/docs/client/error-handling), [2](/docs/error-handling#type%E2%80%90safe-error-handling) | ✅   | 🟡   | ✅      |
 | End-to-end Typesafe File/Blob                  | [1](/docs/file-upload-download)                                                              | ✅   | 🟡   | 🛑      |
 | End-to-end Typesafe Streaming                  | [1](/docs/event-iterator)                                                                    | ✅   | ✅   | 🛑      |
-| Tanstack Query Integration (React)             | [1](/docs/tanstack-query/react)                                                              | ✅   | ✅   | 🟡      |
-| Tanstack Query Integration (Vue)               | [1](/docs/tanstack-query/vue)                                                                | ✅   | 🛑   | 🟡      |
-| Tanstack Query Integration (Solid)             | [1](/docs/tanstack-query/solid)                                                              | ✅   | 🛑   | 🟡      |
-| Tanstack Query Integration (Svelte)            | [1](/docs/tanstack-query/svelte)                                                             | ✅   | 🛑   | 🛑      |
-| Vue Pinia Colada Integration                   | [1](/docs/pinia-colada)                                                                      | ✅   | 🛑   | 🛑      |
+| Tanstack Query Integration (React)             | [1](/docs/integrations/tanstack-query)                                                       | ✅   | ✅   | 🟡      |
+| Tanstack Query Integration (Vue)               | [1](/docs/integrations/tanstack-query)                                                       | ✅   | 🛑   | 🟡      |
+| Tanstack Query Integration (Solid)             | [1](/docs/integrations/tanstack-query)                                                       | ✅   | 🛑   | 🟡      |
+| Tanstack Query Integration (Svelte)            | [1](/docs/integrations/tanstack-query)                                                       | ✅   | 🛑   | 🛑      |
+| Tanstack Query Integration (Angular)           | [1](/docs/integrations/tanstack-query)                                                       | ✅   | 🛑   | 🛑      |
+| Vue Pinia Colada Integration                   | [1](/docs/integrations/pinia-colada)                                                         | ✅   | 🛑   | 🛑      |
 | With Contract-First Approach                   | [1](/docs/contract-first/define-contract)                                                    | ✅   | 🛑   | ✅      |
 | Without Contract-First Approach                |                                                                                              | ✅   | ✅   | 🛑      |
 | OpenAPI Support                                | [1](/docs/openapi/openapi-handler)                                                           | ✅   | 🟡   | 🟡      |
@@ -35,5 +36,5 @@ This comparison table helps you understand how oRPC differs from other popular T
 | Built-in Plugins (CORS, CSRF, Retry, ...)      |                                                                                              | ✅   | 🛑   | 🛑      |
 | Batch Request/Response                         | [1](/docs/plugins/batch-request-response)                                                    | ✅   | ✅   | 🛑      |
 | WebSockets                                     | [1](/docs/adapters/websocket)                                                                | ✅   | ✅   | 🛑      |
-| Nest.js integration                            | [1](/docs/openapi/nest/implement-contract)                                                   | ✅   | 🟡   | ✅      |
+| Nest.js integration                            | [1](/docs/openapi/integrations/implement-contract-in-nest)                                   | ✅   | 🟡   | ✅      |
 | Message Port (Electron, Browser, Workers, ...) | [1](/docs/adapters/message-port)                                                             | ✅   | 🟡   | 🛑      |

apps/content/docs/tanstack-query/react.md → apps/content/docs/integrations/tanstack-query-old/react.md

@@ -5,7 +5,7 @@ description: Seamlessly integrate oRPC with Tanstack Query for React
 
 # Tanstack Query Integration For React
 
-This guide shows how to integrate oRPC with Tanstack Query for React. For an introduction, please review the [Basic Guide](/docs/tanstack-query/basic) first.
+This guide shows how to integrate oRPC with Tanstack Query for React. For an introduction, please review the [Basic Guide](/docs/integrations/tanstack-query-old/basic) first.
 
 ## Installation