f47e1f16d7
* feat: add token and nft injection * feat: basic tests * fix: get jest configured properly * fix: change timeout * fix: uninstall port ready * fix: readd port ready * fix: local tests work * Update yarn.lock * add lint disable for setup files * fix: update dependencies * fix: basic test suite for nfts/tokens * feat: collection data * fix: make tests more comprehensive * fix: change matches to contains * fix: tests for twitter alt image tag * fix: image gen * fix: add patch-package * fix: update yarn install * feat: basic image gen for nfts and collections * fix: remove vibrant attempt * use watermark asset * dynamically grab color * modularize code and prototype for token preview * refactor code * finalize css * fix color grabber * update tests * fix up css * refactor code a bit more * remove console logs * tests * update tests * update images based on design feedback * network logos * update lint * slight refactoring * more refactoring * fix packages * Update yarn.lock * remove dynamically generated image stuff * Revert "remove dynamically generated image stuff" This reverts commit a80241edb3a970a724b9a07ce36e492ff8a1c2af. * change image reference and revamp tests * cleanup return values * Create README.md * Revert "Create README.md" This reverts commit 7a91c98d384995fba914c9bf9a2fb3072793621f. * First round of feedback * comments * feat: cache * Update test.yml * Update test.yml * Update test.yml * feedback round 2 * final feedback * final final feedback * add coverage and other options * Update test.yml * start typecheck * update cache * update snapshots? * Update jest.config.json * Update jest.config.json * give timeout some buffer * update import * upgrade ts * fix typing for apollo deps * finalize typechecks * downgrade typescript to original version * add cache directory to jest * remove coverage * remove google analytics from tests * merge main * remove timeout * update tests * update graphql queries * review changes * try cache setup * Update cache.test.ts * make cache helper function * cache test * remove unneeded test causing issues * feat: parallelize cache (#6930) * feat: parallelize cache? * remove graph query from concurrency await * most of feedback * move tests * update token tests * singleton cache * restructuring res and cache promise * abstract away repeated graph logic * update tests and functions * refactor * update typing, parallelize, and start tests * fix one tsc issue * final feedback * Update yarn.lock * final final feedback * add svgs * try and setup svg * stashing changes * cleanup! * prepare for start of feedback? * LESS GOO * modify versioning * fix: update wrangler version * Update yarn.lock * downgrade wrangler * Update yarn.lock * Update yarn.lock * fix type error * update github test * cleanup tests * Delete custom.d.ts * fix: cloudfunctions * update tests * final touchups * lint * change github action * Update yarn.lock * styling updates * nate's feedback * feedback p1 * typing feedback * update yarn * Create wrangler.toml * move wrangler.toml location * last try * Delete wrangler.toml * use 2.20? * remove comment * Update yarn.lock * change compatibility date * update wrangler and fix bugs * Update colorthief+2.4.0.patch * build: cleanup flags * cleaner patches * update compatibility date * quick tweeks * cleanup rendering and lint * patch things up * fix: color extraction * DONE! * tests and other qol updates * lint * add more tests * feedback * simplify getcolors --------- Co-authored-by: Zach Pomerantz <zzmp@uniswap.org> |
||
---|---|---|
.. | ||
api/image | ||
components | ||
nfts | ||
tokens | ||
utils | ||
[[index]].ts | ||
babel.config.js | ||
client.ts | ||
constants.ts | ||
default.test.ts | ||
global-setup.ts | ||
global-teardown.ts | ||
global.d.ts | ||
jest.config.json | ||
README.md | ||
tsconfig.json | ||
types.d.ts |
Cloudflare Cloud Functions
Purpose
These functions utilize Cloudflare Functions to dynamically inject meta tags server side for richer link sharing capabilities.
Functions
Currently, there are 2 types of cloudflare functions developed
- Meta Data Injectors - Workers that inject Open Graph standardized meta tags into the
header
of specific webpages.- Currently we support this functionaltiy for three separate webpages: NFT Assets, NFT Collections, and Token Detail Pages
- These functions query data from GraphQL and then formats them into HTML
meta
tags to be injected
- Dynamically Generated Images - Utilizes Vercel's Open Graph Image Generation Library to create custom thumbnails for specific webpages
- Currently supports NFT Assets, NFT Collections, and Token Detail Pages
- These functions query data from GraphQL, and utilize
Satori
to convert HTML into a png image response which is then returned when the api is called. - Can be found in the
api/image
folder.
Testing
Testing is done utilizing a custom jest environment as well as Cloudflare's local tester: wrangler
. Wrangler enables testing locally by running a proxy to wrap localhost
. Testing can be done the following ways.
- Manually by running
yarn start:cloud
to setup wrangler onlocalhost:3000
- Automated tests by running
yarn test:cloud
to setup both a jest and wrangler environment and automatically test features
Deployment
Functions will be deployed to Cloudlfare where they will be ran automatically when the appropriate route is hit.
Miscellaneous
- Caching: In order to speed up webpage requests, repeated GraphQL queries will be saved and pulled using Cloudflare's Cache API.
Scripts
-
yarn start:cloud
(NODE_OPTIONS=--dns-result-order=ipv4first PORT=3001 npx wrangler pages dev --node-compat --proxy=3001 --port=3000 -- yarn start), script to start local wrangler environmentnpx wrangler pages dev
: this basis of this command which starts a local instance of wrangler to test cloud functions--node-compat
: wrangler option that enables compatibility with Node.js modules--proxy:3001
: telling the proxy to listen on port 3001--port=3000
: telling wrangler to run our proxy on port 3000NODE_OPTIONS=--dns-result-order=ipv4first
: wrangler still serves to IPv4 which isn't compatible with Node 18 which default resolves to IPv6 so we need to specify to serve to IPv4PORT-3001 --yarn start
: runs default yarn start on port 3001
-
yarn test:cloud
(NODE_OPTIONS=--experimental-vm-modules yarn jest functions --watch --config=functions/jest.config.json), script to test cloud functions with jestNODE_OPTIONS=--experimental-vm-modules
: support for ES Modules and Web Assembly--config=functions/jest.config.json
: specifying which config file to use
Additional Documents