solid-assets

Summary The ecosystem banner clips the last glyph of the project name whenever the name ends in "W" — e.g. renders as SOLID-FLO with a wedge-shaped sliver where the W should be. Reproduction Clipped (any name with a trailing W): https://assets.solidjs.com/banner?project=solid-flow&type=Ecosystem&background=tiles https://assets.solidjs.com/banner?project=flow&type=Ecosystem&background=tiles Renders fine (same W, mid-word — so it's not the glyph itself): https://assets.solidjs.com/banner?project=solid-flower&type=Ecosystem&background=tiles Likely cause In the project text is right-aligned from its measured advance width: so the text's right edge lands at — inside the horizontal span of the bottom-right corner rounding, which starts at ( in the crop mask). An advance width is the pen movement, not the rendered extent: a final glyph whose outline reaches slightly past its advance (W, the widest glyph in the face, at this weight/tracking) pokes past the measured box and gets cut. Names ending in narrower letters leave enough slack to hide the discrepancy. A fix could be either extra right margin (e.g. instead of , keeping the text clear of the corner span) or measuring the actual outline extent ( on the laid-out path) instead of the advance width. Workaround Appending two encoded trailing spaces pads the measured width enough for the final W to render fully: (One trailing space or a makes it worse/renders tofu — two spaces is the sweet spot.) This likely affects every ecosystem project whose name ends in W — flow-style libraries being a fairly popular genre. Happy to PR the margin fix if that's the preferred direction.

Many libraries target a single purpose, which is integration with a service or platform. E.g., let's say we have a SolidJS library for applying a MongoDB integration; the current banner would be something like this. !MongoDB Intergration Example of current banner implementation. But by applying to the URL, we should be able to create graphics like this. !Example Example of possible integration graphics. Many popular integration libraries use these graphics in the JavaScript ecosystem. Integration contains a big chunk of projects already in the SolidJS community; this will provide those libraries with official graphics for their projects. Technical notes We should apply a filter to the applied graphics to convert their logos to a light monochrome version to merge with our current graphics.

It would be great to support some more colour options I think. For example, I'd use this for https://github.com/thisbeyond/solid-select but the blue would be quite a clash with the orange.