feat: dynamic social card images

[leovct]

Description

Very first draft of dynamic social card images using @vercel/og.

The design is super ugly but the information required is there.

To check it out, run the server locally and take a look at the following:

• http://localhost:3000/api/og (this will compare Ethereum and Optimism by default)
• http://localhost:3000/api/og?base=1&target=42161 (compare Ethereum and Arbitrum)
• http://localhost:3000/api/og?base=10&target=42161 (compare Optimism and Arbitrum)

0ther

• Bump next version from 13.4.0 to 13.4.12 to avoid errors when building with pnpm

  
  > evm-diff@0.1.0 build /Users/leovct/Documents/opensource/evm-diff
  > next build

info - Linting and checking validity of types
info - Creating an optimized production build ... [webpack.cache.PackFileCacheStrategy] Serializing big strings (685kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)

[webpack.cache.PackFileCacheStrategy] Serializing big strings (686kiB) impacts deserialization performance (consider using Buffer instead and decode when needed) Failed to compile. node:crypto Module build failed: UnhandledSchemeError: Reading from "node:crypto" is not handled by plugins (Unhandled scheme). Webpack supports "data:" and "file:" URIs by default. You may need an additional plugin to handle "node:" URIs. at /Users/leovct/Documents/opensource/evm-diff/node_modules/.pnpm/next@13.4.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/webpack/bundle5.js:28:395974 at Hook.eval [as callAsync] (eval at create (/Users/leovct/Documents/opensource/evm-diff/node_modules/.pnpm/next@13.4.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/webpack/bundle5.js:13:28771), :6:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/leovct/Documents/opensource/evm-diff/node_modules/.pnpm/next@13.4.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/webpack/bundle5.js:13:25925) at Object.processResource (/Users/leovct/Documents/opensource/evm-diff/node_modules/.pnpm/next@13.4.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/webpack/bundle5.js:28:395899) at processResource (/Users/leovct/Documents/opensource/evm-diff/node_modules/.pnpm/next@13.4.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5308) at iteratePitchingLoaders (/Users/leovct/Documents/opensource/evm-diff/node_modules/.pnpm/next@13.4.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4667) at runLoaders (/Users/leovct/Documents/opensource/evm-diff/node_modules/.pnpm/next@13.4.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:8590) at NormalModule._doBuild (/Users/leovct/Documents/opensource/evm-diff/node_modules/.pnpm/next@13.4.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/webpack/bundle5.js:28:395761) at NormalModule.build (/Users/leovct/Documents/opensource/evm-diff/node_modules/.pnpm/next@13.4.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/webpack/bundle5.js:28:397789) at /Users/leovct/Documents/opensource/evm-diff/node_modules/.pnpm/next@13.4.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/webpack/bundle5.js:28:81243 Import trace for requested module: node:crypto ./node_modules/.pnpm/@noble+hashes@1.3.0/node_modules/@noble/hashes/esm/cryptoNode.js ./node_modules/.pnpm/@noble+hashes@1.3.0/node_modules/@noble/hashes/esm/utils.js ./node_modules/.pnpm/@noble+curves@1.0.0/node_modules/@noble/curves/esm/secp256k1.js ./node_modules/.pnpm/viem@1.5.0_typescript@5.0.4/node_modules/viem/dist/esm/utils/signature/hexToSignature.js ./node_modules/.pnpm/viem@1.5.0_typescript@5.0.4/node_modules/viem/dist/esm/index.js ``` ## Related Issue #2 ## Todos - [x] Initial PoC - [x] Code factorisation - [ ] Improve design (this could be done in a follow-up PR) ## Screenshots

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
evm-diff	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 8, 2023 11:23pm

[leovct]

https://evm-diff-jk5fu20qb-msolomon-s-team.vercel.app/api/og

[leovct]

I've added a few more things.

• Add the missing meta tag to display the card image preview when sharing a link. For this to work, we need to provide the site URL. At the moment, I set it to https://www.evmdiff.com (see src/lib/constants.ts). That's why the preview won't work until we merge this PR to the main branch (or we change the value of the URL in the PR to test maybe? - I don't know how to predict Vercel's deployment URL, you might need to help me there :) ).
• Move the base and target state up one level from src/components/ChainDiffSelector.tsx to src/pages/index.tsx in order to pass it to the Head component. Thus, card images should be dynamic and display the differences between the selected chains. If no chains are selected, then it will compare the default chains which are Ethereum and Optimism.
• Remove ChainDiffSelector in the error div of the Diff component. Instead, I displayed the list of supported chains with their ids and a link to the default block explorer website (I'd like it to be the chain website/documentation - I suggested to add such field in the @wagmi/chains repository) and also a link to go back to the homepage where the user can select chains using the UI. I think that if such error happen, that's because the user tried to manually modify the query parameters (either base or target) and thus, providing the list of supported chains with their ids should be more than enough. What do you think?
• Add robots.txt to enable bots (especially social media providers) to fetch the card image.
• New constants to define the default base and target chains.