chore: prep release (#140)

.changeset/chatty-bananas-breathe.md

@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': minor
+---
+
+- **feat**: Updated `FrameMetadataType` to support `target` for button `post` and `post_redirect` actions. By @HashWarlock @zizzamia #130 #136

CHANGELOG.md

@@ -4,46 +4,46 @@
 
 ### Patch Changes
 
-- 926bc30: - **docs**: Init https://onchainkit.xyz . By @zizzamia #131
-  - **feat**: Added `getFarcasterUserAddress` utility to extract the user's custody and/or verified addresses. By @Sneh1999 #114 #121
-  - **feat**: Updates the version of `@types/jest` package. By @Sneh1999 #114
+- **docs**: Init https://onchainkit.xyz . By @zizzamia #131 926bc30
+- **feat**: Added `getFarcasterUserAddress` utility to extract the user's custody and/or verified addresses. By @Sneh1999 #114 #121
+- **feat**: Updates the version of `@types/jest` package. By @Sneh1999 #114
 
 ## 0.6.1
 
 ### Patch Changes
 
-- c5ee76d: - **feat**: automated the `og:image` and `og:title` properties for `getFrameHtmlResponse` and `FrameMetadata`. By @zizzamia #109
+- **feat**: automated the `og:image` and `og:title` properties for `getFrameHtmlResponse` and `FrameMetadata`. By @zizzamia #109 c5ee76d
 
 ## 0.6.0
 
 ### Minor Changes
 
-- fc74af1: - **feat**: better treeshaking support by using **packemon**. By @zizzamia & @wespickett #105
+- **feat**: better treeshaking support by using **packemon**. By @zizzamia & @wespickett #105 fc74af1
 
-  BREAKING CHANGES
+BREAKING CHANGES
 
-  For modern apps that utilize `ES2020` or the latest version, breaking changes are not anticipated. However, if you encounter any building issues when using OnchainKit with older apps that rely on `ES6`, please open an issue and provide details of the error you're experiencing. We will do our best to provide the necessary support.
+For modern apps that utilize `ES2020` or the latest version, breaking changes are not anticipated. However, if you encounter any building issues when using OnchainKit with older apps that rely on `ES6`, please open an issue and provide details of the error you're experiencing. We will do our best to provide the necessary support.
 
 ## 0.5.4
 
 ### Patch Changes
 
-- bf014fd: - **feat**: exported `FrameButtonMetadata`, `FrameInputMetadata` and `FrameImageMetadata` types. By @zizzamia #111
-  - **feat**: introduced support for image aspect ratio metadata, ensuring backward compatibility. Image metadata can now be defined either as a string (with a default aspect ratio of `1.91:1`) or as an object with a src URL string and an aspect ratio of either `1.91:1` or `1:1`. By @taycaldwell #110
+- **feat**: exported `FrameButtonMetadata`, `FrameInputMetadata` and `FrameImageMetadata` types. By @zizzamia #111 bf014fd
+- **feat**: introduced support for image aspect ratio metadata, ensuring backward compatibility. Image metadata can now be defined either as a string (with a default aspect ratio of `1.91:1`) or as an object with a src URL string and an aspect ratio of either `1.91:1` or `1:1`. By @taycaldwell #110
 
 ## 0.5.3
 
 ### Patch Changes
 
-- f2cf7b6: - **feat**: all `FrameMetadataType` parameters have been updated to use consistent lowerCamelCase. It's important to note that we are not deprecating the old method, at least for a few weeks, to allow time for migration to the new approach. By @zizzamia #106
-  - **feat**: while there is no real issue in using either `property` or `name` as the standard for a metadata element, it is fair to respect the Open Graph specification, which originally uses `property`. By @zizzamia #106
+- **feat**: all `FrameMetadataType` parameters have been updated to use consistent lowerCamelCase. It's important to note that we are not deprecating the old method, at least for a few weeks, to allow time for migration to the new approach. By @zizzamia #106 f2cf7b6
+- **feat**: while there is no real issue in using either `property` or `name` as the standard for a metadata element, it is fair to respect the Open Graph specification, which originally uses `property`. By @zizzamia #106
 
 ## 0.5.2
 
 ### Patch Changes
 
-- cefcfa8: - **fix**: `<FrameMetadata>` component when used with Helmet. To ensure smooth functionality when used with Helmet as a wrapper component, it is crucial to flatten the Buttons loop. By @zizzamia #99
-  - **feat**: added `Avatar` component, to our Identity Kit. The `Avatar` component primarily focuses on showcasing ENS avatar for given Ethereum addresses, and defaults to a default SVG avatar when an ENS avatar isn't available. By @alvaroraminelli #69
+- **fix**: `<FrameMetadata>` component when used with Helmet. To ensure smooth functionality when used with Helmet as a wrapper component, it is crucial to flatten the Buttons loop. By @zizzamia #99 cefcfa8
+- **feat**: added `Avatar` component, to our Identity Kit. The `Avatar` component primarily focuses on showcasing ENS avatar for given Ethereum addresses, and defaults to a default SVG avatar when an ENS avatar isn't available. By @alvaroraminelli #69
 
 ## 0.5.1
 

README.md

@@ -48,6 +48,8 @@ For documentation and guides, visit [onchainkit.xyz](https://onchainkit.xyz/).
 
 ## Features
 
+OnchainKit offers three themes packed with React components and TypeScript utilities ready for action.
+
 - [Farcaster Kit](https://onchainkit.xyz/farcasterkit/introduction)
   - Utilities:
     - [`getFarcasterUserAddress`](https://onchainkit.xyz/farcasterkit/get-farcaster-user-address)
@@ -62,8 +64,8 @@ For documentation and guides, visit [onchainkit.xyz](https://onchainkit.xyz/).
 
 - [Identity Kit](https://onchainkit.xyz/identitykit/introduction)
   - Components:
-    - [`<Name />`](https://onchainkit.xyz/identitykit/introduction#name)
-    - [`<Avatar />`](https://onchainkit.xyz/identitykit/introduction#avatar)
+    - [`<Avatar />`](https://onchainkit.xyz/identitykit/avatar)
+    - [`<Name />`](https://onchainkit.xyz/identitykit/name)
 
 ## Overview
 

site/docs/pages/farcasterkit/introduction.mdx

@@ -1,3 +1,8 @@
+---
+title: Introduction to Farcaster Kit · OnchainKit
+deescription: A brief introduction on essential Farcaster knowledge and OnchainKit utilities.
+---
+
 # Introduction to Farcaster Kit [A brief introduction on essential Farcaster knowledge.]
 
 Farcaster is a decentralized social network on Ethereum.

site/docs/pages/farcasterkit/types.mdx

@@ -1,3 +1,8 @@
+---
+title: FrameKit Types
+deescription: Glossary of Types in Farcaster Kit.
+---
+
 # Types [Glossary of Types in Farcaster Kit.]
 
 ## `GetFarcasterUserAddressResponse`

site/docs/pages/framekit/frame-metadata.mdx

@@ -57,41 +57,4 @@ export default function HomePage() {
 
 ## Props
 
-```ts
-type FrameButtonMetadata =
-  | {
-      action: 'link' | 'mint';
-      label: string;
-      target: string;
-    }
-  | {
-      action?: 'post' | 'post_redirect';
-      label: string;
-    };
-
-type FrameImageMetadata = {
-  src: string;
-  aspectRatio?: '1.91:1' | '1:1';
-};
-
-type FrameInputMetadata = {
-  text: string;
-};
-
-type FrameMetadataType = {
-  // A list of strings which are the label for the buttons in the frame (max 4 buttons).
-  buttons?: [FrameButtonMetadata, ...FrameButtonMetadata[]];
-  // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1 or 1:1
-  image: FrameImageMetadata;
-  // The text input to use for the Frame.
-  input?: FrameInputMetadata;
-  // A valid POST URL to send the Signature Packet to.
-  postUrl?: string;
-  // A period in seconds at which the app should expect the image to update.
-  refreshPeriod?: number;
-};
-
-type FrameMetadataReact = FrameMetadataType & {
-  wrapper?: React.ComponentType<any>;
-};
-```
+[`FrameMetadataReact`](/framekit/types#framemetadatareact)

site/docs/pages/framekit/get-frame-html-response.mdx

@@ -42,37 +42,4 @@ type FrameHTMLResponse = string;
 
 ## Parameters
 
-```ts
-type FrameButtonMetadata =
-  | {
-      action: 'link' | 'mint';
-      label: string;
-      target: string;
-    }
-  | {
-      action?: 'post' | 'post_redirect';
-      label: string;
-    };
-
-type FrameImageMetadata = {
-  src: string;
-  aspectRatio?: '1.91:1' | '1:1';
-};
-
-type FrameInputMetadata = {
-  text: string;
-};
-
-type FrameMetadataType = {
-  // A list of strings which are the label for the buttons in the frame (max 4 buttons).
-  buttons?: [FrameButtonMetadata, ...FrameButtonMetadata[]];
-  // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1 or 1:1
-  image: FrameImageMetadata;
-  // The text input to use for the Frame.
-  input?: FrameInputMetadata;
-  // A valid POST URL to send the Signature Packet to.
-  postUrl?: string;
-  // A period in seconds at which the app should expect the image to update.
-  refreshPeriod?: number;
-};
-```
+[`FrameMetadataType`](/framekit/types#framemetadatatype)

site/docs/pages/framekit/get-frame-metadata.mdx

@@ -36,43 +36,8 @@ export default function Page() {
 
 ## Returns
 
-```ts
-type FrameMetadataResponse = Record<string, string>;
-```
+[`FrameMetadataResponse`](/framekit/types#framemetadataresponse)
 
 ## Parameters
 
-```ts
-type FrameButtonMetadata =
-  | {
-      action: 'link' | 'mint';
-      label: string;
-      target: string;
-    }
-  | {
-      action?: 'post' | 'post_redirect';
-      label: string;
-    };
-
-type FrameImageMetadata = {
-  src: string;
-  aspectRatio?: '1.91:1' | '1:1';
-};
-
-type FrameInputMetadata = {
-  text: string;
-};
-
-type FrameMetadataType = {
-  // A list of strings which are the label for the buttons in the frame (max 4 buttons).
-  buttons?: [FrameButtonMetadata, ...FrameButtonMetadata[]];
-  // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1
-  image: FrameImageMetadata;
-  // The text input to use for the Frame.
-  input?: FrameInputMetadata;
-  // A valid POST URL to send the Signature Packet to.
-  postUrl?: string;
-  // A period in seconds at which the app should expect the image to update.
-  refreshPeriod?: number;
-};
-```
+[`FrameMetadataType`](/framekit/types#framemetadatatype)

site/docs/pages/framekit/introduction.mdx

@@ -1,3 +1,8 @@
+---
+title: Introduction to Frame Kit · OnchainKit
+deescription: Introduction to Frame Kit
+---
+
 # Introduction to Frame Kit
 
 A Frame transforms any cast into an interactive app.

site/docs/pages/framekit/types.mdx

@@ -1 +1,72 @@
+---
+title: FrameKit Types
+deescription: Glossary of Types in Frame Kit.
+---
+
 # Types [Glossary of Types in Frame Kit.]
+
+## `FrameButtonMetadata`
+
+```ts
+type FrameButtonMetadata =
+  | {
+      action: 'link' | 'mint';
+      label: string;
+      target: string;
+    }
+  | {
+      action?: 'post' | 'post_redirect';
+      label: string;
+      target?: string;
+    };
+```
+
+## `FrameImageMetadata`
+
+```ts
+type FrameImageMetadata = {
+  src: string;
+  aspectRatio?: '1.91:1' | '1:1';
+};
+```
+
+## `FrameInputMetadata`
+
+```ts
+type FrameInputMetadata = {
+  text: string;
+};
+```
+
+## `FrameMetadataResponse`
+
+```ts
+type FrameMetadataResponse = Record<string, string>;
+```
+
+## `FrameMetadataReact`
+
+```ts
+type FrameMetadataReact = FrameMetadataType & {
+  ogDescription?: string;
+  ogTitle?: string;
+  wrapper?: React.ComponentType<any>;
+};
+```
+
+## `FrameMetadataType`
+
+```ts
+type FrameMetadataType = {
+  // A list of strings which are the label for the buttons in the frame (max 4 buttons).
+  buttons?: [FrameButtonMetadata, ...FrameButtonMetadata[]];
+  // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1
+  image: string | FrameImageMetadata;
+  // The text input to use for the Frame.
+  input?: FrameInputMetadata;
+  // A valid POST URL to send the Signature Packet to.
+  postUrl?: string;
+  // A period in seconds at which the app should expect the image to update.
+  refreshPeriod?: number;
+};
+```

site/docs/pages/getting-started.mdx

@@ -17,5 +17,21 @@ pnpm add @coinbase/onchainkit
 
 OnchainKit is divided into various theme utilities and components that are available for your use:
 
-- [Frame Kit](/framekit/introduction) 🖼️
-- [Identity Kit](/identitykit/introduction) 👨‍🚀
+- [Farcaster Kit](/farcasterkit/introduction)
+
+  - Utilities:
+    - [`getFarcasterUserAddress`](/farcasterkit/get-farcaster-user-address)
+
+- [Frame Kit](/framekit/introduction)
+
+  - Components:
+    - [`<FrameMetadata />`](/framekit/frame-metadata)
+  - Utilities:
+    - [`getFrameHtmlResponse`](/framekit/get-frame-html-response)
+    - [`getFrameMessage`](/framekit/get-frame-message)
+    - [`getFrameMetadata`](/framekit/get-frame-metadata)
+
+- [Identity Kit](/identitykit/introduction)
+  - Components:
+    - [`<Avatar />`](/identitykit/avatar)
+    - [`<Name />`](/identitykit/name)

site/docs/pages/identitykit/avatar.mdx

@@ -0,0 +1,24 @@
+# Avatar
+
+The `Avatar` component is used to display ENS avatar associated with Ethereum addresses. When an ENS avatar is not available, it defaults to blue color avatar.
+
+## Usage
+
+```tsx
+import { Avatar } from '@coinbase/onchainkit';
+
+<Avatar address="0x1234567890abcdef1234567890abcdef12345678" />;
+```
+
+## Props
+
+```ts
+type UseAvatar = {
+  // Ethereum address to be resolved from ENS.
+  address: Address;
+  // Optional CSS class for custom styling.
+  className?: string;
+  // Additional HTML attributes for the span element.
+  props?: React.HTMLAttributes<HTMLSpanElement>;
+};
+```