bhousel / svg-labels Goto Github PK

Add an API call to get all labels for a github repository.

Add an interactive labelmaker to the labl.es landing page 🏷

Tests are failing because the fixtures are built for the old-style labels (see #15)

Because testing is nice

GitHub will set the text color either dark or light based on the lightness of the background color, and we should do it too.

This is a nitpicky issue, and maybe we won't change it, but - the outline stroke this library creates is not exactly like the one that the GitHub labels have.

GitHub label:

This library:

The issue is:

A 1px inset box shadow in CSS is not the same as a 1px outline stroke in SVG. SVG strokes are placed along the centerline, not at the inset. You can see by making the label very big that the stroke spills out over the edge of the label:

This is really not a big deal, but we could fix this by drawing a separate SVG path where the inset should be.

Or we could do nothing and just wait until the SVG Strokes specification is approved and supported in browsers.

Should support https

Should serve a nice static landing page that says what it does.

Certain unicode (e.g. emoji) in the text string breaks the width calculation, causing the generated SVG to have NaN width. 🙀

Input:

http://labl.es/svg?text=scream%20cat%20%F0%9F%99%80

Output:

<svg xmlns="http://www.w3.org/2000/svg" width="NaN" height="20">
<rect width="NaN" height="20" rx="2" ry="2" fill="#ee0701" stroke="#273135" stroke-width="1" stroke-opacity="0.12" stroke-linejoin="round"/>
<text x="NaN" y="14" fill="#fff" text-anchor="middle" font-family="Helvetica,Arial" font-size="12" font-weight="600">scream cat 😱</text></svg>

Need to update the code to match GitHub's newish design