Merge pull request #268 from framesjs/fix/quickstart-docs-readme

fix: update quickstart code and fix baseUrl
framesjs · Apr 2, 2024 · 6c4d048 · 6c4d048
2 parents 3fc766d + e6b5450
commit 6c4d048
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 54 deletions.
diff --git a/.changeset/small-clouds-divide.md b/.changeset/small-clouds-divide.md
@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+fix: quickstart example and baseUrl
diff --git a/docs/pages/guides/create-frame.mdx b/docs/pages/guides/create-frame.mdx
@@ -28,10 +28,14 @@ yarn add frames.js
 
 ### Create your Frames app
 
+Create a `frames` directory in your Next.js app and add the following files:
+
 ```tsx [./app/frames/frames.ts]
 import { createFrames } from "frames.js/next";
 
-export const frames = createFrames();
+export const frames = createFrames({
+  basePath: "/frames",
+});
 ```
 
 ### Create a route

diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
@@ -55,53 +55,92 @@ pnpm create frames
 
 ### Start with frames.js in Next.js in three steps
 
-```bash
+::::steps
+
+### Add `frames.js` to your project
+
+```sh
 yarn add frames.js
 ```
 
-```tsx [./app/page.tsx]
-import { fetchMetadata } from "frames.js/next";
+### Create your Frames app
 
-export async function generateMetadata() {
-  return {
-    title: "My page",
-    other: await fetchMetadata(
-      new URL(
-        "/frames",
-        process.env.VERCEL_URL
-          ? `https://${process.env.VERCEL_URL}`
-          : "http://localhost:3000"
-      )
-    ),
-  };
-}
+Create a `frames` directory in your Next.js app and add the following files:
 
-export default function Home(props) {
-  return <div>My Page</div>;
-}
+```tsx [./app/frames/frames.ts]
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/frames",
+});
 ```
 
-```ts [./app/frames/route.tsx]
+### Create a Frames route
+
+```tsx [./app/frames/route.tsx]
 /* eslint-disable react/jsx-key */
-import { createFrames, Button } from 'frames.js/next';
+import { Button } from "frames.js/next";
+import { frames } from "./frames";
 
-const frames = createFrames();
 const handleRequest = frames(async (ctx) => {
   return {
-    image: <div tw="w-full h-full bg-slate-700 text-white justify-center items-center">
-      {ctx.message?.state?.count ?? 0}
-    </div>,
+    image: (
+      <span>
+        {ctx.pressedButton
+          ? `I clicked ${ctx.searchParams.value}`
+          : `Click some button`}
+      </span>
+    ),
     buttons: [
-      <Button action="post">Increment counter</Button>
+      <Button action="post" target={{ query: { value: "Yes" } }}>
+        Say Yes
+      </Button>,
+      <Button action="post" target={{ query: { value: "No" } }}>
+        Say No
+      </Button>,
     ],
-    state: { count: (ctx.message?.state?.count ?? 0) + 1 }
   };
 });
 
 export const GET = handleRequest;
 export const POST = handleRequest;
 ```
 
+### Include Frames alongside your existing page's metadata
+
+```tsx [./app/page.tsx]
+import { fetchMetadata } from "frames.js/next";
+
+export async function generateMetadata() {
+  return {
+    title: "My Page",
+    // ...
+    other: {
+      // ...
+      ...(await fetchMetadata(
+        // provide a full URL to your /frames endpoint
+        new URL(
+          "/frames",
+          process.env.VERCEL_URL
+            ? `https://${process.env.VERCEL_URL}`
+            : "http://localhost:3000"
+        )
+      )),
+    },
+  };
+}
+
+export default function Page() {
+  return <span>My existing page</span>;
+}
+```
+
+### Run `yarn run dev`
+
+### Done! 🎉
+
+::::
+
 ## Community
 
 Check out the following places for more Frames-related content:
@@ -117,7 +156,7 @@ Check out the following places for more Frames-related content:
 
 Or use the [hosted Frames debugger](https://debugger.framesjs.org/?url=https%3A%2F%2Fframesjs.org). Running locally has the benefits of it working with natively with localhost.
 
-## Prefer to not use JSX? 
+## Prefer to not use JSX?
 
 ### frames.js in Next.js using helper functions
 

diff --git a/packages/frames.js/README.md b/packages/frames.js/README.md
@@ -42,53 +42,89 @@ or [clone from github](https://github.com/framesjs/frames.js/tree/main/examples/
 
 ## Alternatively, add frames.js to your existing project manually
 
-### Start with frames.js in Next.js in three steps
 
-```bash
+### 1. Add `frames.js` to your project
+
+```sh
 yarn add frames.js
 ```
 
-```tsx filename="// ./app/page.tsx"
-// ./app/page.tsx
+### 2. Create your Frames app
 
-import { fetchMetadata } from "frames.js/next";
+Create a `frames` directory in your Next.js app and add the following files:
 
-export async function generateMetadata() {
-  return {
-    title: "My page",
-    other: await fetchMetadata(
-      new URL("/frames", process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000")
-    ),
-  };
-}
+#### `./app/frames/frames.ts`
+```tsx [./app/frames/frames.ts]
+import { createFrames } from "frames.js/next";
 
-export default function Home(props) {
-  return <div>My Page</div>;
-}
+export const frames = createFrames({
+  basePath: "/frames",
+});
 ```
 
-```ts filename="./app/frames/route.tsx"
-// ./app/frames/route.tsx
+### 3. Create a Frames route
+
+#### `./app/frames/route.tsx`
+```tsx [./app/frames/route.tsx]
 /* eslint-disable react/jsx-key */
-import { createFrames, Button } from 'frames.js/next';
+import { Button } from "frames.js/next";
+import { frames } from "./frames";
 
-const frames = createFrames();
 const handleRequest = frames(async (ctx) => {
   return {
-    image: <div tw="w-full h-full bg-slate-700 text-white justify-center items-center">
-      {ctx.message?.state?.count ?? 0}
-    </div>,
+    image: (
+      <span>
+        {ctx.pressedButton
+          ? `I clicked ${ctx.searchParams.value}`
+          : `Click some button`}
+      </span>
+    ),
     buttons: [
-      <Button action="post">Increment counter</Button>
+      <Button action="post" target={{ query: { value: "Yes" } }}>
+        Say Yes
+      </Button>,
+      <Button action="post" target={{ query: { value: "No" } }}>
+        Say No
+      </Button>,
     ],
-    state: { count: (ctx.message?.state?.count ?? 0) + 1 }
   };
 });
 
 export const GET = handleRequest;
 export const POST = handleRequest;
 ```
 
+### 4. Include Frames alongside your existing page's metadata
+
+```tsx [./app/page.tsx]
+import { fetchMetadata } from "frames.js/next";
+
+export async function generateMetadata() {
+  return {
+    title: "My Page",
+    // ...
+    other: {
+      // ...
+      ...(await fetchMetadata(
+        // provide a full URL to your /frames endpoint
+        new URL(
+          "/frames",
+          process.env.VERCEL_URL
+            ? `https://${process.env.VERCEL_URL}`
+            : "http://localhost:3000"
+        )
+      )),
+    },
+  };
+}
+
+export default function Page() {
+  return <span>My existing page</span>;
+}
+```
+
+### 5. Done! 🎉
+
 ![](/frames/frame2.png)
 
 [Debugging your Frames locally](/guides/debugger)