Chore/docs and example fonts

docs/pages/guides/middleware.mdx

@@ -50,4 +50,26 @@ const frames = createFrames({
     }),
   ],
 });
+```
+
+## Writing your own middleware
+
+You should make sure to clone any request you use, in order to not break other middleware. For example you can only call `const body = await ctx.request.clone().json();` once on a request.
+
+Here's an example. Your middleware should return `next({ ... })` with an additional object that will be merged into the existing `ctx`
+```tsx
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-custom-middleware/frames",
+  middleware: [
+    async (ctx, next) => {
+      const body = await ctx.request.clone().json();
+
+      return next({ body });
+    },
+    // the request body will now be available via `ctx.body` in your handler
+  ],
+});
+
 ```

docs/pages/reference/core/Button.mdx

@@ -20,15 +20,15 @@ This button sends a request to a URL on which it was rendered. If you want to na
 
 The `target` path will be resolved relatively to current URL.
 
-### Passing state when button is clicked using query parameters
+### Passing query params when button is clicked using query parameters
 
 ```tsx
 <Button action="post" target={{ query: { foo: "bar" }, pathname: "/next-route"}}>
   Click me
 </Button>
 ```
 
-The state will be available in handler `ctx.pressedButton.state`.
+The query params will be available in handler via `ctx.searchParams.foo`.
 
 ## Post Redirect Button
 

examples/framesjs-starter/app/examples/new-api-custom-font/frames/frames.ts

@@ -0,0 +1,5 @@
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-custom-font/frames",
+});

examples/framesjs-starter/app/examples/new-api-custom-font/frames/route.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable react/jsx-key */
+import { frames } from "./frames";
+
+// without this line, this type of importing fonts doesn't work for some reason
+export const runtime = "edge";
+
+const regularFont = fetch(
+  new URL("/public/Inter-Regular.ttf", import.meta.url)
+).then((res) => res.arrayBuffer());
+
+const boldFont = fetch(new URL("/public/Inter-Bold.ttf", import.meta.url)).then(
+  (res) => res.arrayBuffer()
+);
+
+const handleRequest = frames(async (ctx) => {
+  const [regularFontData, boldFontData] = await Promise.all([
+    regularFont,
+    boldFont,
+  ]);
+
+  return {
+    image: (
+      <span>
+        <div style={{ marginTop: 40, fontWeight: 400 }}>Regular Inter Font</div>
+        <div style={{ marginTop: 40, fontWeight: 700 }}>Bold Inter Font</div>
+      </span>
+    ),
+    textInput: "Type something!",
+    imageOptions: {
+      fonts: [
+        {
+          name: "Inter",
+          data: regularFontData,
+          weight: 400,
+        },
+        {
+          name: "Inter",
+          data: boldFontData,
+          weight: 700,
+        },
+      ],
+    },
+  };
+});
+
+export const GET = handleRequest;
+export const POST = handleRequest;

examples/framesjs-starter/app/examples/new-api-custom-font/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { currentURL, vercelURL } from "../../utils";
+import { createDebugUrl } from "../../debug";
+import type { Metadata } from "next";
+import { fetchMetadata } from "frames.js/next";
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: "New api example",
+    description: "This is a new api example",
+    other: {
+      ...(await fetchMetadata(
+        new URL(
+          "/examples/new-api-custom-font/frames",
+          vercelURL() || "http://localhost:3000"
+        )
+      )),
+    },
+  };
+}
+
+export default async function Home() {
+  const url = currentURL("/examples/new-api-custom-font");
+
+  return (
+    <div>
+      New api example.{" "}
+      <Link href={createDebugUrl(url)} className="underline">
+        Debug
+      </Link>
+    </div>
+  );
+}

examples/framesjs-starter/app/examples/new-api-custom-middleware/frames/frames.ts

@@ -0,0 +1,13 @@
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-custom-middleware/frames",
+  middleware: [
+    async (ctx, next) => {
+      const body = await ctx.request.clone().json();
+
+      return next({ body });
+    },
+    // the request body will now be available via ctx.body in your handler
+  ],
+});

examples/framesjs-starter/app/examples/new-api-custom-middleware/frames/next/route.tsx

@@ -0,0 +1,21 @@
+/* eslint-disable react/jsx-key */
+import { Button } from "frames.js/next";
+import { frames } from "../frames";
+
+const handleRequest = frames(async (ctx) => {
+  return {
+    image: (
+      <span>
+        This is next frame and you clicked button:{" "}
+        {ctx.pressedButton ? "✅" : "❌"}
+      </span>
+    ),
+    buttons: [
+      <Button action="post" target="/">
+        Previous frame
+      </Button>,
+    ],
+  };
+});
+
+export const POST = handleRequest;

examples/framesjs-starter/app/examples/new-api-custom-middleware/frames/route.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable react/jsx-key */
+import { Button } from "frames.js/next";
+import { frames } from "./frames";
+
+const handleRequest = frames(async (ctx) => {
+  return {
+    image: (
+      <span>
+        Hello there: {ctx.pressedButton ? "✅" : "❌"}
+        {ctx.message?.inputText ? `, Typed: ${ctx.message?.inputText}` : ""}
+      </span>
+    ),
+    buttons: [
+      <Button action="post">Click me</Button>,
+      <Button action="post" target="/next">
+        Next frame
+      </Button>,
+    ],
+    textInput: "Type something!",
+  };
+});
+
+export const GET = handleRequest;
+export const POST = handleRequest;

examples/framesjs-starter/app/examples/new-api-custom-middleware/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { currentURL, vercelURL } from "../../utils";
+import { createDebugUrl } from "../../debug";
+import type { Metadata } from "next";
+import { fetchMetadata } from "frames.js/next";
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: "New api example",
+    description: "This is a new api example",
+    other: {
+      ...(await fetchMetadata(
+        new URL(
+          "/examples/new-api-custom-middleware/frames",
+          vercelURL() || "http://localhost:3000"
+        )
+      )),
+    },
+  };
+}
+
+export default async function Home() {
+  const url = currentURL("/examples/new-api-custom-middleware");
+
+  return (
+    <div>
+      New api example.{" "}
+      <Link href={createDebugUrl(url)} className="underline">
+        Debug
+      </Link>
+    </div>
+  );
+}

examples/framesjs-starter/app/examples/page.tsx

@@ -33,6 +33,19 @@ export default function ExamplesIndexPage() {
             Only followers can mint
           </Link>
         </li>
+        <li>
+          <Link className="underline" href="/examples/new-api-custom-font">
+            Custom font
+          </Link>
+        </li>
+        <li>
+          <Link
+            className="underline"
+            href="/examples/new-api-custom-middleware"
+          >
+            Custom middleware
+          </Link>
+        </li>
       </ul>
       <b>Frames.js v0.8 and below</b>
       <ul>