Chore/docs and example fonts

docs/pages/guides/image-generation.mdx

@@ -47,4 +47,4 @@ The Image generation uses an experimental tailwind based system, [read their doc
 ## Using custom fonts & font-weight
 
 In order to use custom fonts or font weights, you need to load fonts for them in `imageOptions`, [reference docs here](https://vercel.com/docs/functions/og-image-generation/og-image-api).
-[An example of how to do this](https://github.com/orgs/vercel/discussions/1343#discussioncomment-5562614), instead of using ImageResponse pass the options to `imageOptions` and the first argument to `image`.
+[An example of how to do this](https://github.com/orgs/vercel/discussions/1343#discussioncomment-5562614), instead of using ImageResponse pass the options to `imageOptions` and the first argument to `image`.

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-alt/frames.ts

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

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

@@ -0,0 +1,75 @@
+/* eslint-disable react/jsx-key */
+import { Button } from "frames.js/next";
+import { frames } from "./frames";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+
+export const runtime = "nodejs";
+
+const interRegularFont = fs.readFile(
+  path.join(path.resolve(process.cwd(), "public"), "Inter-Regular.ttf")
+);
+
+const interBoldFont = fs.readFile(
+  path.join(path.resolve(process.cwd(), "public"), "Inter-Bold.ttf")
+);
+
+const firaScriptFont = fs.readFile(
+  path.join(
+    path.resolve(process.cwd(), "public"),
+    "FiraCodeiScript-Regular.ttf"
+  )
+);
+
+const handleRequest = frames(async (ctx) => {
+  const [interRegularFontData, interBoldFontData, firaScriptData] =
+    await Promise.all([interRegularFont, interBoldFont, firaScriptFont]);
+
+  return {
+    buttons: [
+      <Button target={"/frames"} action="post">
+        Edge Fn
+      </Button>,
+      <Button action="post" target={"/frames-alt"}>
+        Node.js
+      </Button>,
+    ],
+    image: (
+      <span tw="flex flex-col">
+        <div>Node.js example custom fonts</div>
+        <div style={{ marginTop: 40, fontWeight: 400 }}>Regular Inter Font</div>
+        <div style={{ marginTop: 40, fontWeight: 700 }}>Bold Inter Font</div>
+        <div
+          style={{
+            fontFamily: "'Fira Code', monospace",
+            marginTop: 40,
+          }}
+        >
+          Fira
+        </div>
+      </span>
+    ),
+    imageOptions: {
+      fonts: [
+        {
+          name: "Inter",
+          data: interRegularFontData,
+          weight: 400,
+        },
+        {
+          name: "Inter",
+          data: interBoldFontData,
+          weight: 700,
+        },
+        {
+          name: "Fira Code",
+          data: firaScriptData,
+          weight: 700,
+        },
+      ],
+    },
+  };
+});
+
+export const GET = handleRequest;
+export const POST = handleRequest;

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",
+});

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

@@ -0,0 +1,70 @@
+/* eslint-disable react/jsx-key */
+import { Button } from "frames.js/next";
+import { frames } from "./frames";
+
+// without this line, this type of importing fonts doesn't work for some reason
+export const runtime = "edge";
+
+const interRegularFont = fetch(
+  new URL("/public/Inter-Regular.ttf", import.meta.url)
+).then((res) => res.arrayBuffer());
+const interBoldFont = fetch(
+  new URL("/public/Inter-Bold.ttf", import.meta.url)
+).then((res) => res.arrayBuffer());
+const firaScriptFont = fetch(
+  new URL("/public/FiraCodeiScript-Regular.ttf", import.meta.url)
+).then((res) => res.arrayBuffer());
+
+const handleRequest = frames(async (ctx) => {
+  const [interRegularFontData, interBoldFontData, firaScriptFontData] =
+    await Promise.all([interRegularFont, interBoldFont, firaScriptFont]);
+
+  return {
+    image: (
+      <span tw="flex flex-col">
+        <div>Edge functions example custom fonts</div>
+        <div style={{ marginTop: 40, fontWeight: 400 }}>Regular Inter Font</div>
+        <div style={{ marginTop: 40, fontWeight: 700 }}>Bold Inter Font</div>
+        <div
+          style={{
+            fontFamily: "'Fira Code', monospace",
+            marginTop: 40,
+          }}
+        >
+          Fira
+        </div>
+      </span>
+    ),
+    buttons: [
+      <Button target={"/frames"} action="post">
+        Edge Fn
+      </Button>,
+      <Button action="post" target={"/frames-alt"}>
+        Node.js
+      </Button>,
+    ],
+    textInput: "Type something!",
+    imageOptions: {
+      fonts: [
+        {
+          name: "Inter",
+          data: interRegularFontData,
+          weight: 400,
+        },
+        {
+          name: "Inter",
+          data: interBoldFontData,
+          weight: 700,
+        },
+        {
+          name: "Fira Code",
+          data: firaScriptFontData,
+          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/frames");
+
+  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>