Programmatically generate variants #45
Conversation
- light - dark - square parsing the source SVG as a document and updating the relevant elements and their content.
assets.mjs
Outdated
| title.innerHTML = "CSS Logo Square"; | ||
| description.innerHTML = | ||
| "A purple square with the letters CSS inside in white"; | ||
| bg.setAttribute("d", "M0,0H1000V1000H-1000Z"); |
There was a problem hiding this comment.
The alternative would be to remove the path element and replace it with a rect as is currently the case, but it would save very few bytes and would be much more complex.
Instead we draw a full-width square by:
M0,0moving to the origin pointH1000drawing a 1000 horizontal line to the right edgeV1000drawing a 1000 vertical line to the bottom edgeH0drawing a horizontal line back to the left edgeZclosing the rectangle (optional)
|
Love this approach, but I think #35 should be merged first ;) |
There was a problem hiding this comment.
Nice work done here. 2 small things:
- I think
css.square.svg,css.dark.svgandcss.light.svgcan beremoved? - And I made I small update to them because the shape of the C was broken. Fixed the shape of the C #47
Don't you want to make these assets available for users? Happy either way it's a small change to produce a byte buffer than can be consumed by sharp: Alternatively if we keep the files we could have a test that ensures they remain all in sync during CI. Let me know what you'd prefer.
Fair enough, I'll endeavour to merge these changes soon. |
|
I thought that those SVG's where rendered by the script. But if not then they have to stay 😊 Sorry for the misunderstanding. |
They are indeed generated/overwritten by the script currently, but I thought we would want to expose them anyway? Maybe the following diagram helps understand the process a bit better… flowchart TD
css.svg("fa:fa-draw-square css.svg")
css.svg --> linkedom --> css.light.svg & css.dark.svg & css.square.svg
css.svg --> sharp
linkedom[assets.mjs - linkedom]
css.light.svg & css.dark.svg & css.square.svg --> sharp
sharp[assets.mjs - sharp]
sharp --> css.png & css.ico & css.avif & css.webp
I tried to follow the principles of #39 (comment) and keep the canonical “source” as the I think the worse that can happen with the current setup is that someone makes manual changes to one of the variants SVGs (light, dark or square) and it gets overwritten when they run |
There was a problem hiding this comment.
I really appreciate your work and I think it's a big improvement maybe @argyleink or @Que-tin can also give there thoughts.
|
Feel free to merge this whenever suits you 😁 |
Why are we doing this?
So that manual changes to the SVG only have to be made in
css.svg.Closes #31
What does this change?
Parse the source SVG as a document, and update the relevant elements with new content for the following variants, which are then written back to the repo as SVG:
css.light.svgcss.dark.svgcss.square.svgEverything is visually identical, as is confirmed by the lack of diff in the image files.