From 196df600aad1588735273221f617f35ac2a8f0f5 Mon Sep 17 00:00:00 2001
From: Robin Gagnon <me@reobin.dev>
Date: Wed, 3 Apr 2024 09:10:15 -0500
Subject: [PATCH 1/2] docs: Add documentation for the @poap-xyz/frames package
 (#105)

---
 docs/pages/packages/_meta.json |  8 +++
 docs/pages/packages/frames.mdx | 90 ++++++++++++++++++++++++++++++++++
 packages/frames/src/Frame.ts   |  2 +-
 3 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 docs/pages/packages/_meta.json
 create mode 100644 docs/pages/packages/frames.mdx

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: '<image_url>',
+    aspectRatio: FrameAspectRatio.SQUARE,
+  });
+
+  return (
+    <>
+      <NextSeo
+        title="Hello Frames!"
+        description="page description"
+        openGraph={{ images: [{ url: '<image_url>' }] }}
+        additionalMetaTags={frame.toMetaTags()}
+      />
+      <div>page content...</div>
+    </>
+  )
+}
+```
+
+### 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: '<image_url>',
+    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 (
    *   <>
    *     <NextSeo

From 37b6cf28275b691ef0edb12874ca4829851d74eb Mon Sep 17 00:00:00 2001
From: Juan M <jm@guide42.com>
Date: Sat, 6 Apr 2024 02:43:26 -0300
Subject: [PATCH 2/2] Use yarn in docs readme

---
 docs/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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`.