chore: add docs guides

Author: davidfurlong

docs/pages/guides/caching.mdx

@@ -0,0 +1,19 @@
+---
+title: "Caching"
+description: ""
+---
+
+You can set the caching policy of your frames by defining the `Cache-Control` headers of your responses
+
+```tsx
+// ...
+const handleRequest = frames(async ({ message }) => {
+  return {
+    // ...
+    headers: {
+      // Max cache age of 5 seconds
+      "Cache-Control": "max-age=5",
+    },
+  };
+});
+```

docs/pages/guides/create-frame.mdx

@@ -0,0 +1,76 @@
+---
+title: "Guide: Display Frames in your app"
+description: "Frames.js is the react based framework for making frames. Debugger included."
+---
+
+# Quickstart Guide: Create your first Frame
+
+This guide shows you how to add frames rendering to your next.js + tailwind app using frames.js.
+
+## Steps
+
+1. Create a new repo
+
+`npx create-next-app@latest my-project --ts --eslint --tailwind --app`
+
+`cd my-project`
+
+`yarn add frames.js`
+
+`yarn install`
+
+2. Create your Frames app
+
+```tsx filename="// ./app/frames/route.tsx"
+// ./app/frames/route.tsx
+import { createFrames, Button } from "frames.js/next";
+
+const frames = createFrames();
+const handleRequest = frames(async ({ pressedButton }) => {
+  return {
+    image: (
+      <span>
+        {pressedButton
+          ? `I clicked ${pressedButton.state}`
+          : `Click some button`}
+      </span>
+    ),
+    buttons: [
+      <Button action="post" state="Yes">
+        Say Yes
+      </Button>,
+      <Button action="post" state="No">
+        Say No
+      </Button>,
+    ],
+  };
+});
+
+export const GET = handleRequest;
+export const POST = handleRequest;
+```
+
+3. If you have an existing page, render Frames in your metadata
+
+```tsx filename="// ./app/page.tsx"
+// ./app/page.tsx
+import { fetchMetadata } from "frames.js/next";
+
+export async function generateMetadata() {
+  return {
+    title: "My Page",
+    // provide a full URL to your /frames endpoint
+    ...(await fetchMetadata(
+      new URL("/frames", process.env.VERCEL_URL || "http://localhost:3000")
+    )),
+  };
+}
+
+export default function Page() {
+  return <span>My existing page</span>;
+}
+```
+
+4. Run `yarn run dev`
+
+5. Done! 🎉

docs/pages/guides/debugger.mdx

@@ -0,0 +1,33 @@
+---
+title: "Local Debugging"
+description: "Build and test your frames with confidence"
+---
+
+# Local Debugging of your Frames
+
+![](/frames/frame2.png)
+
+The frames.js debugger comes inside the frames.js starter repos and will run automatically when you run your code.
+By default it runs on port 3010, at [http://localhost:3010](http://localhost:3010/?url=http%3A%2F%2Flocalhost%3A3000%2F).
+
+Features
+- fully interactive frames
+- connect wallet + transactions
+- performance analysis
+- frame validations
+- jump between Frames
+- inspect state
+- mock hub states
+- impersonate a user, or login with a real farcaster signer
+
+## Local Debugger CLI
+
+You can install and run the frames.js debugger independently of your frame, including for frames.js that don't use frames.js via
+
+`npm install -g @frames.js/debugger`
+
+`frames`
+
+## Hosted Debugger
+
+We've provided a [hosted version](https://debugger.framesjs.org/?url=https%3A%2F%2Fframesjs.org) of the debugger for convenience. Note it won't work with localhost urls without a service like `ngrok`, which is why we recommend running a local debugger.

docs/pages/guides/deployment.mdx

@@ -0,0 +1,14 @@
+---
+title: "Deployments"
+description: "A guide on shipping your frames.js frame to production"
+---
+
+# Shipping your Frame to production
+
+Frames.js works in most javascript frameworks or libraries, and should work out of the box with whereever you would normally deploy those.
+
+We suggest deploying your frames to Vercel, but Cloudflare workers, Docker, AWS or other platforms are compatible.
+
+## Vercel Deployments
+
+Run the `vercel` command-line tool from your frame's folder to deploy your frame to vercel.

docs/pages/guides/display-frames.mdx

@@ -19,72 +19,82 @@ This guide shows you how to add frames rendering to your next.js + tailwind app
 
 `yarn install`
 
-2. Create your Frames app
-
+2. Add proxies for routing frame requests via your backend for privacy + preventing CORS issues
 ```tsx filename="// ./app/frames/route.tsx"
 // ./app/frames/route.tsx
-import { createFrames, Button } from "frames.js/next";
-
-const frames = createFrames();
-const handleRequest = frames(async ({ clickedButton }) => {
-  return {
-    image: (
-      <span>
-        {clickedButton
-          ? `I clicked ${clickedButton.state}`
-          : `Click some button`}
-      </span>
-    ),
-    buttons: [
-      <Button action="post" state="Yes">
-        Say Yes
-      </Button>,
-      <Button action="post" state="No">
-        Say No
-      </Button>,
-    ],
-  };
-});
-
-export const GET = handleRequest;
-export const POST = handleRequest;
+export { GET, POST } from "frames.js/render/next";
 ```
 
-3. If you have an existing page, render Frames in your metadata
+3. Add the renderer to your page
 
 ```tsx filename="// ./app/page.tsx"
 // ./app/page.tsx
-import { fetchMetadata } from "frames.js/next";
-
-export async function generateMetadata() {
-  return {
-    title: "My Page",
-    // provide a full URL to your /frames endpoint
-    ...(await fetchMetadata(
-      new URL("/frames", process.env.VERCEL_URL || "http://localhost:3000")
-    )),
-  };
-}
+"use client";
+import {
+  FrameUI,
+  fallbackFrameContext,
+  FrameContext,
+} from "frames.js/render";
+import { signFrameAction, FarcasterSigner } from 'frames.js/render/farcaster'
+import { FrameImageNext } from "frames.js/render/next";
+import { FrameButton } from "frames.js";
+import { useFrame } from "frames.js/render/use-frame";
 
 export default function Page() {
-  return <span>My existing page</span>;
+  // TODO: replace with your farcaster signer
+  const farcasterSigner: FarcasterSigner = {
+    fid: 1,
+    status: 'approved',
+    publicKey:
+      "0x00000000000000000000000000000000000000000000000000000000000000000",
+    privateKey:
+      "0x00000000000000000000000000000000000000000000000000000000000000000",
+  };
+  
+  const frameState = useFrame({
+    // replace with your frame url
+    homeframeUrl:
+      "https://fc-polls.vercel.app/polls/73c6efda-bae7-4d46-8f36-3bb3b8377448",
+    // corresponds to the name of the route for POST in step 3
+    frameActionProxy: "/frames",
+    // corresponds to the name of the route for GET in step 3
+    frameGetProxy: "/frames",
+    frameContext: fallbackFrameContext,
+    // map to your identity if you have one
+    signerState: {
+      hasSigner: true,
+      signer: farcasterSigner,
+      onSignerlessFramePress: () => {
+        // Implement me
+        alert("A frame button was pressed without a signer. Perhaps you want to prompt a login");
+      },
+      signFrameAction: signFrameAction,
+    },
+  });
+
+  return (
+    <div className="w-[400px]">
+      <FrameUI frameState={frameState} theme={{}} FrameImage={FrameImageNext} />
+    </div>
+  );
 }
+
 ```
 
 4. In order for the styles to work, your project should have tailwind set up as well as the tailwind.config.js rule
 
 ```tsx filename="// tailwind.config.js"
 // tailwind.config.js
 const config = {
-  // ...
-  content: [
-    "./app/*.{ts,tsx,js,css}",
-    "./app/**/*.{ts,tsx,js,css}",
-    "./node_modules/frames.js/dist/render/next/*.{ts,tsx,js,css}",
-    "./node_modules/frames.js/dist/render/*.{ts,tsx,js,css}",
     // ...
-  ],
-};
+    content: [
+      "./app/*.{ts,tsx,js,css}",
+      "./app/**/*.{ts,tsx,js,css}",
+      "./node_modules/frames.js/dist/render/next/*.{ts,tsx,js,css}",
+      "./node_modules/frames.js/dist/render/*.{ts,tsx,js,css}",
+      // ...
+    ]
+}
 ```
 
 5. Allow images from any domain
@@ -106,3 +116,8 @@ const nextConfig = {
 6. Run `yarn run dev`
 
 7. Done! 🎉
+
+
+### Optional
+
+If needed, you can implement `FrameUI` yourself, using the [FrameUI](https://github.com/framesjs/frames.js/blob/main/packages/frames.js/src/render/frame-ui.tsx) component as a template

docs/pages/guides/image-generation.mdx

@@ -0,0 +1,41 @@
+---
+title: "Image Generation"
+description: "A guide on how to use images inside of frames"
+---
+
+# Images
+
+## Static Images
+
+```tsx
+// ...
+const handleRequest = frames(async ({ message }) => {
+  return {
+    // ...
+    image: "https://picsum.photos/seed/frames.js/1146/600",
+  };
+});
+```
+
+## Dynamic Image generation
+
+You can define a dynamic image by passing in a `JSX` element to `image` property. This uses [@vercel/og](https://vercel.com/docs/functions/og-image-generation) library under the hood, which includes a syntax for writing [tailwind CSS](https://tailwindcss.com/). You can pass in options for `@vercel/og` via the `imageOptions` property.
+There are certain constraints around dynamic images that you should be aware of - firstly, they can be slow, affecting the UX. 
+Secondly, dynamic images have a size limit of 256kB, which can easily be crossed if you use an existing image inside of the dynamic image.
+
+```tsx
+// ...
+const handleRequest = frames(async ({ message }) => {
+  return {
+    // ...
+    image: (
+      <div tw="bg-purple-800 text-white w-full h-full justify-center items-center flex">
+        This is rendered as an image
+      </div>
+    ),
+    imageOptions: {
+        // ...
+    }
+  };
+});
+```

docs/pages/guides/middleware.mdx

@@ -0,0 +1,8 @@
+---
+title: "Middleware"
+description: ""
+---
+
+Frames.js uses middleware to extend the functionality of Frames, bringing in data from API providers, verifying frame actions and adding Open Frames support.
+
+You can use middleware for all your frames by passing in middleware via `createFrames({ middleware: [...] })`.

docs/pages/guides/migration-guide.mdx

@@ -0,0 +1,18 @@
+---
+title: "Migrating Guide"
+description: "Update your frames.js version, pain free."
+---
+
+# Migration Guides
+
+## 0.9.x Breaking changes
+
+### Version 0.9 changes many APIs and decouples frames.js to no longer require next.js
+
+- Removes `useReducer` and state handling from computing from previous state to buttons defining the next state directly
+- Removes the need for `useReducer`, instead providing context via the `frames` function and middleware
+- Internal URL query parameters have changed
+- Imports have changed slightly
+- Routes now use JSX, so you may need to rename `route.ts` to `route.tsx`
+- For next.js app router, metadata is done via the `generateMetadata` function instead of rendering meta tags in the body
+- Replacing `<FrameContainer>`, JSX is now done within a `JSON` object return