search

NEAR-Edu / near-certification-tools

2 stars 2 forks source link

Finish implementing the dynamic image generator #1

Closed ryancwalsh closed 2 years ago

ryancwalsh commented 2 years ago

See this file, especially the highlighted lines: https://github.com/NEAR-Edu/near-certification-tools/blob/5958befba192dd824bf4341699f0b65665a6a77d/web-app/pages/api/cert/%5BimageFileName%5D.ts#L50-L80

Once Dan provides the background SVG files for each NEAR University program that offers a certificate, and the designs of what those certificates should look like with all of their text fields populated, we need to implement this function.

  1. Wait for Dan's files and designs. (Well, while you're waiting, read through everything, look through the code, pretend that he's already given you what you need, and see if you have any questions about the steps you'll need to take.)
  2. With git, checkout the 'develop' branch to your local machine
  3. Create a branch from that branch, and name it 'feature/generateImage'.
  4. Review /web-app/README.md to learn about the project and how to run it.
  5. When you receive the files from Dan, save them to /web-app/public/certificate-backgrounds/
  6. You can leave fetchCertificateDetails (mostly) stubbed out how it is (rather than trying to figure out how to fetch real data from the blockchain; we can work on that later).
  7. Edit /web-app/pages/api/cert/[imageFileName].ts as appropriate. You'll need to temporarily add to fetchCertificateDetails a property called 'program', the value of which will determine which background file to use and the styles of the text to add. Think about possible ways to do this. Maybe generateImage needs to have a switch or "if" statements that call addText differently based on 'program' codenames / nicknames (such as 'NCD').
  8. You'll commit code as you make progress and push those commits up to your remote branch. Eventually, when ready, you'll submit a Pull Request that we can review together.

This ticket / issue will be complete when we can visit http://localhost:3000/api/cert/017717dc-1e06-48d0-af2f-eb03b3dc5f9c.svg and see a production-ready image, and then temporarily changing the 'program' value within fetchCertificateDetails (to any program codename value that we offer) and refreshing that URL would always appropriately generate a good-looking certificate for the appropriate program.

ryancwalsh commented 2 years ago

See also the discussion before and after this post (for context): https://discord.com/channels/828768337978195969/906115083250307103/936732339097202799