Updated structure and added an overview page

Author: D-K-P

docs/guides/frameworks/webhooks.mdx renamed to docs/guides/frameworks/nextjs-webhooks.mdx

@@ -1,36 +1,15 @@
 ---
-title: "Setting up webhooks"
-sidebarTitle: "Webhooks"
-description: "Guides for using webhooks with Trigger.dev."
-icon: "webhook"
+title: "Triggering tasks with webhooks in Next.js"
+sidebarTitle: "Next.js webhooks"
+description: "Learn how to trigger a task from a webhook in a Next.js app."
 ---
 
-## Overview
-
-Webhooks are a way to send and receive events from external services. Triggering tasks using webhooks allow you to add real-time, event driven functionality to your app.
-
-A webhook handler is code that executes in response to an event. They can be endpoints in your framework's routing which will be triggered by an external service, for example.
-
-In this guide you'll learn how to set up webhook handlers and trigger tasks from them using popular frameworks.
-
-## Frameworks featured in this guide
-
-- [Next.js](/guides/frameworks/webhooks#nextjs-webhook-configuration), pages or app router
-- [Remix](/guides/frameworks/webhooks#remix-webhook-configuration)
-
-<Note>
-  If you would like to see a webhook guide for your framework, please request it in our [Discord
-  server](https://trigger.dev/discord).
-</Note>
-
-## Next.js webhook configuration
-
-### Prerequisites
+## Prerequisites
 
 - [A Next.js project, set up with Trigger.dev](/guides/frameworks/nextjs)
 - [cURL](https://curl.se/) installed on your local machine. This will be used to send a POST request to your webhook handler.
 
-### Adding a webhook handler
+## Adding a webhook handler
 
 The webhook handler will be an API route. The location of the route file will be different depending on whether you are using the pages router or the app router.
 
@@ -63,7 +42,7 @@ export async function POST(req: Request) {
 }
 ```
 
-### Triggering a task locally
+## Triggering a task locally
 
 Now that you have a webhook handler set up, you can trigger the 'Hello World' task from it. We will do this locally using cURL.
 
@@ -135,9 +114,3 @@ If you now go to your [Trigger.dev dashboard](https://cloud.trigger.dev), you sh
 </Step>
 
 </Steps>
-
-## Remix webhook configuration
-
-### Prerequisites
-
-- [A Remix project, set up with Trigger.dev](/guides/frameworks/remix)

docs/guides/frameworks/remix-webhooks.mdx

@@ -0,0 +1,38 @@
+---
+title: "Triggering tasks with webhooks in Remix"
+sidebarTitle: "Remix webhooks"
+description: "Learn how to trigger a task from a webhook in a Remix app."
+---
+
+## Prerequisites
+
+- [A Remix project, set up with Trigger.dev](/guides/frameworks/remix)
+- [cURL](https://curl.se/) installed on your local machine. This will be used to send a POST request to your webhook handler.
+
+## Adding a webhook handler
+
+The webhook handler will be an API route. Create a new file in `app/routes/api.webhook-handler.ts` or `app/routes/api.webhook-handler.js`.
+
+In your new file, add the following code:
+
+```ts /api/webhook-handler.ts
+import type { ActionFunctionArgs } from "@remix-run/node";
+import { tasks } from "@trigger.dev/sdk/v3";
+import { helloWorldTask } from "src/trigger/example";
+
+// This function can handle GET requests to check if the webhook is active in the browser - not required for Trigger but helpful for testing
+export async function loader() {
+  return new Response("Webhook endpoint is active", { status: 200 });
+}
+
+// This function handles the actual webhook payload and triggers the helloWorldTask
+export async function action({ request }: ActionFunctionArgs) {
+  const payload = await request.json();
+  console.log("Received webhook payload:", payload);
+
+  // Trigger the helloWorldTask with the webhook data as the payload
+  await tasks.trigger<typeof helloWorldTask>("hello-world", payload);
+
+  return new Response("OK", { status: 200 });
+}
+```

docs/guides/frameworks/webhooks-guides-overview.mdx

@@ -0,0 +1,35 @@
+---
+title: "Using webhooks with Trigger.dev"
+sidebarTitle: "Overview"
+description: "Guides for using webhooks with Trigger.dev."
+---
+
+## Overview
+
+Webhooks are a way to send and receive events from external services. Triggering tasks using webhooks allow you to add real-time, event driven functionality to your app.
+
+A webhook handler is code that executes in response to an event. They can be endpoints in your framework's routing which will be triggered by an external service.
+
+## Webhook guides
+
+<CardGroup cols={2}>
+  <Card
+    title="Next.js - triggering tasks using webhooks"
+    icon="N"
+    href="/guides/frameworks/nextjs-webhooks"
+  >
+    How to create a webhook handler in a Next.js app, and trigger a task from it.
+  </Card>
+  <Card
+    title="Remix - triggering tasks using webhooks"
+    icon="R"
+    href="/guides/frameworks/remix-webhooks"
+  >
+    How to create a webhook handler in a Remix app, and trigger a task from it.
+  </Card>
+</CardGroup>
+
+<Note>
+  If you would like to see a webhook guide for your framework, please request it in our [Discord
+  server](https://trigger.dev/discord).
+</Note>

docs/mint.json

@@ -286,7 +286,16 @@
             "guides/frameworks/supabase-edge-functions-database-webhooks"
           ]
         },
-        "guides/frameworks/webhooks"
+        {
+          "group": "Webhooks",
+          "icon": "webhook",
+          "iconType": "solid",
+          "pages": [
+            "guides/frameworks/webhooks-guides-overview",
+            "guides/frameworks/nextjs-webhooks",
+            "guides/frameworks/remix-webhooks"
+          ]
+        }
       ]
     },
     {