feat: Add frames package (poap-xyz#96)

Author: reobin

.eslintrc.js

@@ -41,6 +41,7 @@ module.exports = {
           './packages/providers/tsconfig.json',
           './packages/utils/tsconfig.json',
           './packages/poaps/tsconfig.json',
+          './packages/frames/tsconfig.json',
           './tsconfig.json',
         ],
       },
@@ -53,4 +54,4 @@ module.exports = {
       },
     },
   ],
-};
+};

README.md

@@ -157,6 +157,17 @@ Please ensure that your code adheres to the project's code style and passes all
         <br />
         <a href="#" title="Code">💻</a>
     </td>
+    <td align="center">
+        <a href="https://github.com/reobin">
+            <img src="https://avatars.githubusercontent.com/u/5920450?v=4" width="100px;" alt=""/>
+            <br />
+            <sub>
+            <b>Robin Gagnon</b>
+            </sub>
+        </a>
+        <br />
+        <a href="#" title="Code">💻</a>
+    </td>
   </tr>
 </table>
 

examples/frames/.nvmrc

@@ -0,0 +1 @@
+v18

examples/frames/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "backend-frames-example",
+  "version": "1.0.0",
+  "description": "Backend example for using the library",
+  "main": "src/index.ts",
+  "scripts": {
+    "start": "ts-node ./src/index.ts",
+    "build": "tsc",
+    "test": "echo \"No tests specified\" && exit 0"
+  },
+  "dependencies": {
+    "@poap-xyz/frames": "*",
+    "@poap-xyz/providers": "*",
+    "@poap-xyz/utils": "*",
+    "@types/node": "^18.16.0",
+    "axios": "^1.3.5",
+    "dotenv": "^16.0.3",
+    "stream": "^0.0.2"
+  },
+  "devDependencies": {
+    "@types/node-fetch": "^2.6.3",
+    "ts-node": "^10.4.0",
+    "typescript": "^4.5.5"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

examples/frames/src/frames/base.ts

@@ -0,0 +1,8 @@
+import { Frame, FrameAspectRatio } from '@poap-xyz/frames';
+
+export const BASE_FRAME = new Frame({
+  title: 'Hello World',
+  image: 'https://placehold.co/600x600',
+  aspectRatio: FrameAspectRatio.SQUARE,
+  postUrl: 'https://poap.xyz',
+});

examples/frames/src/frames/buttons.ts

@@ -0,0 +1,21 @@
+import { Frame, FrameAspectRatio, FrameButtonAction } from '@poap-xyz/frames';
+
+export const FRAME_WITH_BUTTONS = new Frame({
+  title: 'Hello World',
+  image: 'https://placehold.co/600x600',
+  aspectRatio: FrameAspectRatio.SQUARE,
+  postUrl: 'https://poap.xyz',
+  buttons: [
+    { label: 'Button 1' },
+    {
+      label: 'Button 2',
+      action: FrameButtonAction.POST,
+      target: 'https://poap.xyz',
+    },
+    {
+      label: 'Button 3',
+      action: FrameButtonAction.LINK,
+      target: 'https://poap.xyz',
+    },
+  ],
+});

examples/frames/src/index.ts

@@ -0,0 +1,22 @@
+import dotenv from 'dotenv';
+import { Frame } from '@poap-xyz/frames';
+import { BASE_FRAME } from './frames/base';
+import { FRAME_WITH_BUTTONS } from './frames/buttons';
+
+dotenv.config();
+
+function main(): void {
+  runFrameExample('Base frame', BASE_FRAME);
+  runFrameExample('Frame with buttons', FRAME_WITH_BUTTONS);
+}
+
+function runFrameExample(name: string, frame: Frame): void {
+  console.log(name);
+  console.log('meta tags:');
+  console.log(frame.toMetaTags());
+  console.log('html:');
+  console.log(frame.render());
+  console.log('---------');
+}
+
+main();

examples/frames/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "lib": ["es6"],
+    "target": "es6",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "dist",
+    "resolveJsonModule": true,
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
+  },
+  "include": ["src/**/*.ts", "src/assets/*.png"],
+  "exclude": ["node_modules", "**/*.spec.ts"],
+}

package-order.sh

@@ -7,4 +7,5 @@ DIRS=(
   "packages/drops"
   "packages/poaps"
   "packages/moments"
+  "packages/frames"
 )

packages/frames/README.md

@@ -0,0 +1,65 @@
+# @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 help with the development of Farcaster Frames.
+
+## Features
+
+- Generate the frame meta tags
+- Generate the frame HTML markup
+
+## Installation
+
+### NPM
+
+```bash
+npm install @poap-xyz/frames
+```
+
+### Yarn
+
+```bash
+yarn add @poap-xyz/frames
+```
+
+## Usage
+
+### Meta tags
+
+```javascript
+const frame = useMemo(() => new Frame({ ... });
+return (
+  <>
+    <NextSeo
+      title="Hello World"
+      description="..."
+      openGraph={{ images: [...] }}
+      additionalMetaTags={frame.toMetaTags()}
+    />
+    <div>...</div>
+  </>
+)
+```
+
+### HTML render
+
+```javascript
+// /api/frame.ts
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const frame = new Frame({ ... });
+  return res.status(200).send(frame.render());
+}
+```
+
+## 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).

packages/frames/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@poap-xyz/frames",
+  "version": "1.0.0",
+  "description": "Frames module for the poap.js library",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.mjs",
+  "typings": "dist/cjs/index.d.ts",
+  "browser": "dist/umd/index.js",
+  "exports": {
+    "require": "./dist/cjs/index.cjs",
+    "import": "./dist/esm/index.mjs",
+    "browser": "./dist/umd/index.js"
+  },
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/poap-xyz/poap.js.git"
+  },
+  "author": "POAP",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/poap-xyz/poap.js/issues"
+  },
+  "homepage": "https://github.com/poap-xyz/poap.js#readme",
+  "scripts": {
+    "build": "rollup -c --bundleConfigAsCjs"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "next-seo": "^6.4.0"
+  }
+}

packages/frames/rollup.config.js

@@ -0,0 +1,3 @@
+import configs from '../../rollup.base.config';
+
+export default configs;