docs: polished Framegear (#153)

README.md

@@ -61,6 +61,7 @@ OnchainKit offers three themes packed with React components and TypeScript utili
     - [`getFrameHtmlResponse`](https://onchainkit.xyz/framekit/get-frame-html-response)
     - [`getFrameMessage`](https://onchainkit.xyz/framekit/get-frame-message)
     - [`getFrameMetadata`](https://onchainkit.xyz/framekit/get-frame-metadata)
+  - [Framegear](https://onchainkit.xyz/framekit/framegear)
 
 - [Identity Kit](https://onchainkit.xyz/identitykit/introduction)
   - Components:
@@ -136,10 +137,10 @@ Check out the following places for more OnchainKit-related content:
 ## Authors
 
 - [@zizzamia](https://github.com/zizzamia.png) ([X](https://twitter.com/Zizzamia))
+- [@cnasc](https://github.com/cnasc.png) ([warpcast](https://warpcast.com/cnasc))
 - [@alvaroraminelli](https://github.com/alvaroraminelli.png) ([X](https://twitter.com/alvaroraminelli))
 - [@robpolak](https://github.com/robpolak.png) ([X](https://twitter.com/0xr0b_eth))
 - [@taycaldwell](https://github.com/taycaldwell.png) ([X](https://twitter.com/taycaldwell_))
-- [@cnasc](https://github.com/cnasc.png) ([warpcast](https://warpcast.com/cnasc))
 - [@wespickett](https://github.com/wespickett.png) ([X](https://twitter.com/wespickett))
 
 ## License

site/docs/pages/framekit/framegear.mdx

@@ -1,66 +1,88 @@
-# framegear
+# Framegear
 
-`framegear` is a simple tool that allows you to run and test your frames locally:
+**Framegear** is a simple tool that allows you to run and test your frames locally:
 
 - without publishing
 - without casting
 - without spending warps
 
 ## Installation and Usage
 
-`framegear` is currently distributed as part of the [coinbase/onchainkit](https://github.com/coinbase/onchainkit.git) Git repository.
+**Framegear** is currently distributed as part of the [@coinbase/onchainkit](https://github.com/coinbase/onchainkit) Git repository.
 
-```sh
-# clone the repo
+:::code-group
+
+```bash [npm]
+git clone https://github.com/coinbase/onchainkit.git
+
+cd onchainkit/framegear
+npm install
+npm run dev
+```
+
+```bash [yarn]
 git clone https://github.com/coinbase/onchainkit.git
 
-# Use Yarn
 cd onchainkit/framegear
 yarn
 yarn dev
+```
 
-# Use NPM
-cd onchainkit/framegear
-npm install
-npm run dev
+```bash [pnpm]
+git clone https://github.com/coinbase/onchainkit.git
 
-# Use PNPM
 cd onchainkit/framegear
 pnpm install
 pnpm run dev
 ```
 
-Visit http://localhost:1337 to start the `framegear` interface. Enter the URL of your locally running
-frame (e.g., `http://localhost:3000`) and click `Fetch` to validate your frame response and start testing.
+:::
+
+Visit http://localhost:1337 to start the **Framegear** interface. Enter the URL of your locally
+running frame (e.g., `http://localhost:3000`) and click `Fetch` to validate your frame response and start testing.
+
+![Fetch Frame](https://onchainkit.xyz/assets/fetch-frame.png)]
 
 ### Frame-specific setup
 
-`framegear` can validate the initial response of any frame. However, more sophisticated debugging is available
-if the frame is built using `@coinbase/onchainkit` (versions `^0.8.0`). When calling the `getFrameMessage` function
-pass the `allowFramegear` option to allow `framegear` to send mock frame actions.
+**Framegear** can validate the initial response of any frame. For more advanced debugging capabilities,
+consider building the frame using `@coinbase/onchainkit` (versions `^0.8.0`). When using the `getFrameMessage` function,
+include the `allowFramegear` option to enable **Framegear** to send mock frame actions.
 
 ```ts
-const result = await getFrameMessage(body, { allowFramegear: true });
+import { getFrameMessage } from '@coinbase/onchainkit';
+
+// ...
+
+const { isValid, message } = await getFrameMessage(body, {
+  allowFramegear: true, // [!code focus]
+});
 ```
 
-#### An Important Security Note
+### Security Tip
 
-Frames in production should not pass the `allowFramegear` option. Exact setup will depend on the particular application,
-but one example is:
+When setting up frames in production, remember not to include the `allowFramegear` option.
+The exact setup might vary based on the application, but here's one example:
 
 ```ts
-const allowFramegear = process.env.NODE_ENV !== 'production';
+import { getFrameMessage } from '@coinbase/onchainkit';
+
+const allowFramegear = process.env.NODE_ENV !== 'production'; // [!code focus]
+
 // ...
-const result = await getFrameMessage(body, { allowFramegear });
+
+const { isValid, message } = await getFrameMessage(body, {
+  allowFramegear, // [!code focus]
+});
 ```
 
 ## Current Abilities
 
-At present, `framegear` is able to validate the initial frame response against the
+At present, **Framegear** is able to validate the initial frame response against the
 [current Frame Specification](https://docs.farcaster.xyz/reference/frames/spec) and interact with frames through
 buttons using the `post` action.
 
-`framegear` is under active development and much more functionality is on the roadmap including (but not limited to):
+**Framegear** is under active development and much more functionality is on the roadmap including (but not limited to):
 
 - more button actions
 - text input
@@ -69,4 +91,4 @@ buttons using the `post` action.
   - viewer liked
   - viewer recasted
 
-A partial roadmap can be viewed at https://github.com/coinbase/onchainkit/issues/146
+A partial roadmap can be viewed at https://github.com/coinbase/onchainkit/issues/146

site/docs/pages/getting-started.mdx

@@ -30,8 +30,7 @@ OnchainKit is divided into various theme utilities and components that are avail
     - [`getFrameHtmlResponse`](/framekit/get-frame-html-response)
     - [`getFrameMessage`](/framekit/get-frame-message)
     - [`getFrameMetadata`](/framekit/get-frame-metadata)
-  - Emulator
-    - [`framegear`](/framekit/framegear)
+  - [Framegear](/framekit/framegear)
 
 - [Identity Kit](/identitykit/introduction)
   - Components:

site/docs/pages/index.mdx

@@ -88,8 +88,7 @@ OnchainKit offers three themes packed with React components and TypeScript utili
     - [`getFrameHtmlResponse`](/framekit/get-frame-html-response)
     - [`getFrameMessage`](/framekit/get-frame-message)
     - [`getFrameMetadata`](/framekit/get-frame-metadata)
-  - Emulator
-    - [`framegear`](/framekit/framegear)
+  - [Framegear](/framekit/framegear)
 
 - [Identity Kit](/identitykit/introduction)
   - Components:

site/sidebar.ts

@@ -58,12 +58,12 @@ export const sidebar = [
         ],
       },
       {
-        text: 'Types',
-        link: '/framekit/types',
+        text: 'Framegear',
+        link: '/framekit/framegear',
       },
       {
-        text: 'Emulator',
-        link: '/framekit/framegear',
+        text: 'Types',
+        link: '/framekit/types',
       },
     ],
   },