fix: set correctly the main and types file in the package.json (#…

…14)

.changeset/mean-students-search.md

@@ -0,0 +1,6 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+- **docs**: kickoff docs for `generateFrameNextMetadata` core utility 
+- **fix**: set correctly the `main` and `types` file in the `package.json` 

README.md

@@ -1,3 +1,34 @@
 # [OnchainKit](https://github.com/coinbase/onchainkit/)
 
-> OnchainKit is a collection of CSS and React components specifically crafted to enhance your creativity when building onchain applications.
+> OnchainKit is a collection of CSS, React components and Core utilities specifically crafted to enhance your creativity when building onchain applications.
+
+## Core utilities
+
+### generateFrameNextMetadata
+
+Next App `page.ts`
+```ts
+// Steps 1. import generateFrameNextMetadata from @coinbase/onchainkit
+import { generateFrameNextMetadata } from '@coinbase/onchainkit';
+import type { Metadata } from 'next';
+import HomePage from './home';
+
+// Step 2. Use generateFrameNextMetadata to shape your Frame metadata
+const frameMetadata =  generateFrameNextMetadata({
+  buttons: ['boat'],
+  image: 'https://build-onchain-apps.vercel.app/release/v-0-17.png',
+  post_url: 'https://build-onchain-apps.vercel.app/api/frame',
+});
+
+// Step 3. Add your metadata in the Next.js metadata utility
+export const metadata: Metadata = {
+  manifest: '/manifest.json',
+  other: {
+    ...frameMetadata
+  },
+};
+
+export default function Page() {
+  return <HomePage />;
+}
+```

package.json

@@ -29,7 +29,7 @@
     "dist/"
   ],
   "type": "commonjs",
-  "main": "./dist/src/index.js",
-  "typings": "./dist/src/index.d.ts",
+  "main": "./dist/lib/index.js",
+  "typings": "./dist/types/index.d.ts",
   "packageManager": "[email protected]"
 }

src/index.ts

@@ -1,5 +1,5 @@
 // ☕️
-const version = '0.1.1';
+const version = '0.1.2';
 
 // TODO remove this line from here
 export { generateFrameNextMetadata } from './core/generateFrameNextMetadata';