diff --git a/docs/README.md b/docs/README.md index a3d6f2ed..a1de4a63 100644 --- a/docs/README.md +++ b/docs/README.md @@ -4,13 +4,13 @@ This is a documentation website for POAP.js, a library for integrating with the ## Getting Started -To get started with this website, you'll need to install its dependencies and start the development server. You can do this using NPM: +To get started with this website, you'll need to install its dependencies and start the development server. You can do this using yarn: ### NPM ```bash -npm install -npm run dev +yarn install +yarn dev ``` Once the development server is running, you can view the website in your web browser by navigating to `http://localhost:3000`. diff --git a/docs/pages/packages/_meta.json b/docs/pages/packages/_meta.json new file mode 100644 index 00000000..2cb9400c --- /dev/null +++ b/docs/pages/packages/_meta.json @@ -0,0 +1,8 @@ +{ + "poaps": "POAPs", + "drops": "Drops", + "moments": "Moments", + "providers": "Providers", + "frames": "Frames", + "utils": "Utils" +} diff --git a/docs/pages/packages/frames.mdx b/docs/pages/packages/frames.mdx new file mode 100644 index 00000000..135cd7d2 --- /dev/null +++ b/docs/pages/packages/frames.mdx @@ -0,0 +1,90 @@ +# @poap-xyz/frames + +[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) + +@poap-xyz/frames is a package to ease the use of [Farcaster Frames](https://docs.farcaster.xyz/learn/what-is-farcaster/frames). + +## Features + +- Get the list of meta tags to add to an HTML page head +- Build and render the HTML page representing the frame + +## Installation + +### NPM + +```bash +npm install @poap-xyz/frames +``` + +### Yarn + +```bash +yarn add @poap-xyz/frames +``` + +## Usage + +### Get the list of meta tags + +```typescript +// pages/index.tsx +import { NextSeo } from 'next-seo'; +import { Frame, FrameAspectRatio } from '@poap-xyz/frames'; + +export default function Component() { + const frame = new Frame({ + title: 'Hello Frames!', + image: '', + aspectRatio: FrameAspectRatio.SQUARE, + }); + + return ( + <> + ' }] }} + additionalMetaTags={frame.toMetaTags()} + /> +
page content...
+ + ) +} +``` + +### Build and render the HTML page representing the frame + +```typescript +// pages/api/frame.ts +import { NextApiRequest, NextApiResponse } from 'next'; +import { Frame, FrameAspectRatio } from '@poap-xyz/frames'; + +export default async function handler( + req: NextApiRequest, + res: NextApiResponse, +) { + const frame = new Frame({ + title: 'Hello Frames!', + image: '', + aspectRatio: FrameAspectRatio.SQUARE, + }); + return res.status(200).send(frame.render()); +} +``` + +## Documentation + +For more detailed documentation on POAP topics, please visit [this link](https://documentation.poap.tech/docs). + +## Examples + +For example scripts and usage, please check the [examples](https://github.com/poap-xyz/poap.js/tree/main/examples). + +## Contributing + +We welcome contributions! Please see the `CONTRIBUTING.md` file for guidelines. + +## License + +@poap-xyz/frames is released under the [MIT License](https://opensource.org/licenses/MIT). diff --git a/packages/frames/src/Frame.ts b/packages/frames/src/Frame.ts index 872efa3e..437b0357 100644 --- a/packages/frames/src/Frame.ts +++ b/packages/frames/src/Frame.ts @@ -122,7 +122,7 @@ export class Frame { * Generates the meta tags used for the frame. * * @example - * const frame = useMemo(() => new Frame({ ... }); + * const frame = new Frame({ ... }); * return ( * <> *