Updated guides intro and side menu (#1398)

* Updated intro and moved stripe webhooks into the webhooks section

* Added additional resources links to nextjs and remix

* Updated intro page

* Changed formatting to improve layout

* Removed Supabase card from frameworks

Author: D-K-P

docs/guides/examples/stripe-webhook.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Trigger a task from Stripe webhook events"
-sidebarTitle: "Stripe webhook"
+sidebarTitle: "Stripe webhooks"
 description: "This example demonstrates how to handle Stripe webhook events using Trigger.dev."
 ---
 

docs/guides/frameworks/nextjs.mdx

@@ -244,14 +244,24 @@ Here are the steps to trigger your task in the Next.js App and Pages router and
 
 </Tabs>
 
-<AddEnvironmentVariables/>
+<AddEnvironmentVariables />
 
-<DeployingYourTask/>
+<DeployingYourTask />
 
 ## Troubleshooting
 
     <NextjsTroubleshootingMissingApiKey/>
     <NextjsTroubleshootingButtonSyntax/>
     <WorkerFailedToStartWhenRunningDevCommand/>
 
+## Additional resources for Next.js
+
+<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>
+
 <UsefulNextSteps />

docs/guides/frameworks/remix.mdx

@@ -5,12 +5,12 @@ description: "This guide will show you how to setup Trigger.dev in your existing
 icon: "r"
 ---
 
-import Prerequisites from '/snippets/framework-prerequisites.mdx';
-import CliInitStep from '/snippets/step-cli-init.mdx';
-import CliDevStep from '/snippets/step-cli-dev.mdx';
-import CliRunTestStep from '/snippets/step-run-test.mdx';
-import CliViewRunStep from '/snippets/step-view-run.mdx';
-import UsefulNextSteps from '/snippets/useful-next-steps.mdx';
+import Prerequisites from "/snippets/framework-prerequisites.mdx";
+import CliInitStep from "/snippets/step-cli-init.mdx";
+import CliDevStep from "/snippets/step-cli-dev.mdx";
+import CliRunTestStep from "/snippets/step-run-test.mdx";
+import CliViewRunStep from "/snippets/step-view-run.mdx";
+import UsefulNextSteps from "/snippets/useful-next-steps.mdx";
 import TriggerTaskRemix from "/snippets/trigger-tasks-remix.mdx";
 import AddEnvironmentVariables from "/snippets/add-environment-variables.mdx";
 import DeployingYourTask from "/snippets/deplopying-your-task.mdx";
@@ -20,10 +20,10 @@ import DeployingYourTask from "/snippets/deplopying-your-task.mdx";
 ## Initial setup
 
 <Steps>
-    <CliInitStep />
-    <CliDevStep />
-    <CliRunTestStep />
-    <CliViewRunStep />
+  <CliInitStep />
+  <CliDevStep />
+  <CliRunTestStep />
+  <CliViewRunStep />
 </Steps>
 
 ## Set your secret key locally
@@ -40,27 +40,24 @@ For more information on authenticating with Trigger.dev, see the [API keys page]
 
   <Step title="Create an API route">
 
-  Create a new file called `api.hello-world.ts` (or `api.hello-world.js`) in the `app/routes` directory like this: `app/routes/api.hello-world.ts`.
+Create a new file called `api.hello-world.ts` (or `api.hello-world.js`) in the `app/routes` directory like this: `app/routes/api.hello-world.ts`.
 
   </Step>
 
   <Step title="Add your task">
 
-  Add this code to your `api.hello-world.ts` file which imports your task:
+Add this code to your `api.hello-world.ts` file which imports your task:
 
-  ```ts app/routes/api.hello-world.ts
-  import type { helloWorldTask } from "../../src/trigger/example";
-  import { tasks } from "@trigger.dev/sdk/v3";
+```ts app/routes/api.hello-world.ts
+import type { helloWorldTask } from "../../src/trigger/example";
+import { tasks } from "@trigger.dev/sdk/v3";
 
-  export async function loader() {
-    const handle = await tasks.trigger<typeof helloWorldTask>(
-      "hello-world",
-      "James"
-    );
+export async function loader() {
+  const handle = await tasks.trigger<typeof helloWorldTask>("hello-world", "James");
 
-    return new Response(JSON.stringify(handle), {
-      headers: { "Content-Type": "application/json" },
-    });
+  return new Response(JSON.stringify(handle), {
+    headers: { "Content-Type": "application/json" },
+  });
 }
 ```
 
@@ -74,13 +71,14 @@ For more information on authenticating with Trigger.dev, see the [API keys page]
 
 </Steps>
 
-<AddEnvironmentVariables/>
+<AddEnvironmentVariables />
 
-<DeployingYourTask/>
+<DeployingYourTask />
 
 ## Deploying to Vercel Edge Functions
 
 Before we start, it's important to note that:
+
 - We'll be using a type-only import for the task to ensure compatibility with the edge runtime.
 - The `@trigger.dev/sdk/v3` package supports the edge runtime out of the box.
 
@@ -104,10 +102,7 @@ export const config = {
 export async function action({ request }: { request: Request }) {
   // This is where you'd authenticate the request
   const payload = await request.json();
-  const handle = await tasks.trigger<typeof helloWorldTask>(
-    "hello-world",
-    payload
-  );
+  const handle = await tasks.trigger<typeof helloWorldTask>("hello-world", payload);
   return new Response(JSON.stringify(handle), {
     headers: { "Content-Type": "application/json" },
   });
@@ -155,7 +150,6 @@ Push your code to a Git repository and create a new project in the Vercel dashbo
 
 </Step>
 
-
 <Step title="Add your Vercel environment variables">
 
 In the Vercel project settings, add your Trigger.dev secret key:
@@ -174,7 +168,10 @@ You can find this key in the Trigger.dev dashboard under API Keys and select the
 
 Once you've added the environment variable, deploy your project to Vercel.
 
-<Note>Ensure you have also deployed your Trigger.dev task. See [deploy your task step](/guides/frameworks/remix#deploying-your-task-to-trigger-dev).</Note>
+<Note>
+  Ensure you have also deployed your Trigger.dev task. See [deploy your task
+  step](/guides/frameworks/remix#deploying-your-task-to-trigger-dev).
+</Note>
 
 </Step>
 
@@ -200,5 +197,14 @@ The `vercel-build` script in `package.json` is specific to Remix projects on Ver
 
 The `runtime: "edge"` configuration in the API route allows for better performance on Vercel's Edge Network.
 
+## Additional resources for Remix
+
+<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>
 
 <UsefulNextSteps />

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

@@ -27,9 +27,15 @@ A webhook handler is code that executes in response to an event. They can be end
   >
     How to create a webhook handler in a Remix app, and trigger a task from it.
   </Card>
+  <Card title="Stripe webhooks" icon="webhook" href="/guides/examples/stripe-webhook">
+    How to create a Stripe webhook handler and trigger a task when a 'checkout session completed'
+    event is received.
+  </Card>
+  <Card
+    title="Supabase database webhooks guide"
+    icon="webhook"
+    href="/guides/frameworks/supabase-edge-functions-database-webhooks"
+  >
+    Learn how to trigger a task from a Supabase edge function when an event occurs in your database.
+  </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/guides/introduction.mdx

@@ -17,20 +17,21 @@ import CardSupabase from "/snippets/card-supabase.mdx";
   <CardNodejs />
   <CardNextjs />
   <CardRemix />
-  <CardSupabase />
 </CardGroup>
 
 ## Guides
 
 Get set up fast using our detailed walk-through guides.
 
-| Guide                                                                                      | Description                                                   |
-| :----------------------------------------------------------------------------------------- | :------------------------------------------------------------ |
-| [Prisma](/guides/frameworks/prisma)                                                        | How to setup Prisma with Trigger.dev                          |
-| [Sequin database triggers](/guides/frameworks/sequin)                                      | How to trigger tasks from database changes using Sequin       |
-| [Supabase edge function hello world](/guides/frameworks/supabase-edge-functions-basic)     | How to trigger a task from a Supabase edge function           |
-| [Supabase database webhooks](/guides/frameworks/supabase-edge-functions-database-webhooks) | How to trigger a task using a Supabase database webhook       |
-| [Webhooks](/guides/frameworks/webhooks-guides-overview)                                    | How to setup webhooks with Trigger.dev and various frameworks |
+| Guide                                                                                      | Description                                       |
+| :----------------------------------------------------------------------------------------- | :------------------------------------------------ |
+| [Prisma](/guides/frameworks/prisma)                                                        | How to setup Prisma with Trigger.dev              |
+| [Sequin database triggers](/guides/frameworks/sequin)                                      | Trigger tasks from database changes using Sequin  |
+| [Supabase edge function hello world](/guides/frameworks/supabase-edge-functions-basic)     | Trigger tasks from Supabase edge function         |
+| [Supabase database webhooks](/guides/frameworks/supabase-edge-functions-database-webhooks) | Trigger tasks using Supabase database webhooks    |
+| [Using webhooks in Next.js](/guides/frameworks/nextjs-webhooks)                            | Trigger tasks from a webhook in Next.js           |
+| [Using webhooks in Remix](/guides/frameworks/remix-webhooks)                               | Trigger tasks from a webhook in Remix             |
+| [Stripe webhooks](/guides/examples/stripe-webhook)                                         | Trigger tasks from incoming Stripe webhook events |
 
 ## Example tasks
 
@@ -47,7 +48,11 @@ Tasks you can copy and paste to get started with Trigger.dev. They can all be ex
 | [Puppeteer](/guides/examples/puppeteer)                                       | Use Puppeteer to generate a PDF or scrape a webpage.                           |
 | [Resend email sequence](/guides/examples/resend-email-sequence)               | Send a sequence of emails over several days using Resend with Trigger.dev.     |
 | [Sharp image processing](/guides/examples/sharp-image-processing)             | Use Sharp to process an image and save it to Cloudflare R2.                    |
-| [Stripe webhook](/guides/examples/stripe-webhook)                             | Trigger a task from Stripe webhook events.                                     |
 | [Supabase database operations](/guides/examples/supabase-database-operations) | Run basic CRUD operations on a table in a Supabase database using Trigger.dev. |
 | [Supabase Storage upload](/guides/examples/supabase-storage-upload)           | Download a video from a URL and upload it to Supabase Storage using S3.        |
 | [Vercel AI SDK](/guides/examples/vercel-ai-sdk)                               | Use Vercel AI SDK to generate text using OpenAI.                               |
+
+<Note>
+  If you would like to see a guide for your framework, or an example task for your use case, please
+  request it in our [Discord server](https://trigger.dev/discord) and we'll add it to the list.
+</Note>

docs/mint.json

@@ -293,7 +293,8 @@
           "pages": [
             "guides/frameworks/webhooks-guides-overview",
             "guides/frameworks/nextjs-webhooks",
-            "guides/frameworks/remix-webhooks"
+            "guides/frameworks/remix-webhooks",
+            "guides/examples/stripe-webhook"
           ]
         }
       ]
@@ -308,7 +309,6 @@
         "guides/examples/pdf-to-image",
         "guides/examples/puppeteer",
         "guides/examples/sharp-image-processing",
-        "guides/examples/stripe-webhook",
         "guides/examples/supabase-database-operations",
         "guides/examples/supabase-storage-upload",
         "guides/examples/react-pdf",