Merge pull request #267 from framesjs/docs/hub-context-middleware

docs: farcasterHubContext middleware usage instructions

Author: stephancill

.changeset/four-cheetahs-tease.md

@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+docs: improve farcasterHubContext docs

docs/pages/middleware/farcasterHubContext.mdx

@@ -2,9 +2,11 @@
 
 Fetches additional context about the message from a Farcaster hub.
 
-## Usage
+## Setup
+
+Add the `farcasterHubContext` middleware to your `createFrames` call:
 
-```tsx
+```tsx [frames.ts]
 // ...
 import { farcasterHubContext } from "frames.js/middleware";
 
@@ -18,6 +20,26 @@ const frames = createFrames({
 });
 ```
 
+## Usage
+
+Use the added context in your message handler:
+
+```tsx [route.tsx]
+import { frames } from "./frames";
+
+export const POST = frames(async (ctx) => {
+  if (!ctx.message?.isValid) {
+    throw new Error("Invalid message");
+  }
+
+  return {
+    image: <div tw="flex">Message from {ctx.message?.requesterFid}</div>,
+  };
+});
+```
+
+For all the added context see the [`getFrameMessage`](/reference/js/getFrameMessage) function reference.
+
 ## Options
 
 ### `hubHttpUrl`