Auto-generate SVG aspect ratios

[danieltott]

Note for Hacktoberfest:

Virtual Coffee is reserving all open issues for Virtual Coffee members for the month of October.

Find out more about becoming a member

---

Issue Context

The UndrawIllustration component is used to display our nice unDraw illustrations.

In order to avoid layout jumps, we've added the aspect ratios of the svgs, but they're hard-coded which is hard to keep up to date.

What I'd like to do is generate these automatically.

Proposed solution

Build-time steps (generally):

• Write a node script that reads the svgs, gets the width/height values, and then outputs a file (json or js/ts) in app/_generatedData that contains that data
• Add that script to the build steps in package.json
• Update UndrawIllustration to read from that data

Things to think about:
Any time we have generated data, we have to think about the developer experience of using the data during development. For instance, what happens if we change/add an svg? Does it automatically reload, or do I have to stop and start the server again?

Alternatives Considered

There may also be a runtime solution to this (as opposed to build-time) but I can't imagine it would be very performant. Definitely open to discussing options though.

Additional Resources

The svg-parser package looks like it could be useful.

Code of Conduct

• I've read the Code of Conduct and understand my responsibilities as a member of the Virtual Coffee community

[JoeKarow]

I'll take this on!