uniswap-interface-uncensored/functions
Brendan Wong f47e1f16d7
fix: color extraction for rich link previews (#7138)
* 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>
2023-08-10 18:32:08 -04:00
..
api/image fix: color extraction for rich link previews (#7138) 2023-08-10 18:32:08 -04:00
components feat: automated testing for cloud functions (#6931) 2023-07-25 15:12:13 -04:00
nfts feat: dynamically generated images for rich link previews (#6902) 2023-08-10 15:29:37 -04:00
tokens feat: dynamically generated images for rich link previews (#6902) 2023-08-10 15:29:37 -04:00
utils fix: color extraction for rich link previews (#7138) 2023-08-10 18:32:08 -04:00
[[index]].ts feat: fallback metadata injection (#7070) 2023-08-08 15:50:52 -04:00
babel.config.js feat: wrangler infra and test environment (#6797) 2023-07-07 11:41:09 -04:00
client.ts feat: cloudflare worker to inject meta tags (#6901) 2023-07-18 12:35:29 -04:00
constants.ts feat: dynamically generated images for rich link previews (#6902) 2023-08-10 15:29:37 -04:00
default.test.ts fix: downgrade wrangler (#7128) 2023-08-09 20:20:02 -04:00
global-setup.ts fix: cleanup cloud function environment (#7085) 2023-08-08 15:21:30 -04:00
global-teardown.ts feat: wrangler infra and test environment (#6797) 2023-07-07 11:41:09 -04:00
global.d.ts feat: wrangler infra and test environment (#6797) 2023-07-07 11:41:09 -04:00
jest.config.json feat: automated testing for cloud functions (#6931) 2023-07-25 15:12:13 -04:00
README.md feat: readme for cloud functions (#6914) 2023-07-25 15:06:28 -04:00
tsconfig.json feat: dynamically generated images for rich link previews (#6902) 2023-08-10 15:29:37 -04:00
types.d.ts feat: dynamically generated images for rich link previews (#6902) 2023-08-10 15:29:37 -04:00

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 on localhost: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 environment

    • npx 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 3000
    • NODE_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 IPv4
    • PORT-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 jest

    • NODE_OPTIONS=--experimental-vm-modules: support for ES Modules and Web Assembly
    • --config=functions/jest.config.json: specifying which config file to use

    Additional Documents