monorepo: README project: create image with project lints (missing translations)

@samuelstroschein Now we’re good to go I think 😄 – everybody is happy now 😂

Yes leeeets go 😂

@samuelstroschein & me revisited the design and came up with a radical easier approach because of multiple reasons.

What do you all think? We wanted to have something smaller and the bar charts where not optimal, so got rid of them – bringing the number of the overall translation status and especially the number of errors and warning in the spotlight.

Furthermore, we switched the button design from link to real black button to give it more affordance. I’m pretty happy with it now!! ✨

Also, had pretty a hustle with handling all the different cases such as plurals in the “sentence strings” with “is” and “are” and handling errors, buuut here we are – I’m proud.

Sounds like the Editor should support this feature soon 😉

If we adjust the content per user (per browser languages) we probably get some similar outputs on the image as in the editor. Maybe we should discuss some kind of alignment at some point.

@jannesblobel @samuelstroschein We’re progressing real good so far, hope that this Satori library font fix is ready soon.

1. Create route for badge creation
2. Fetch repository and get inlang.config.js with ressources
3. Parse ressources for lints
4. Calculate percentages for badge purpose
5. Render a Bar with plain HTML and CSS

We have technical proof 👍

Now: Come up with a good and flexible design.

@samuelstroschein Now we’re good to go I think 😄 – everybody is happy now 😂

@samuelstroschein Yep, we will improve upon this base with different sizes, I also think that a small badge would be really valuable for the “readme status bar” at the top.

Just to keep you updated here:

This morning I spend 2h debugging why satori-html isnt working with variables and dynamic array maps and found out that this library doesn’t escape the JS used in the template literals correctly so I have to parse it myself and remove trailing commas & more.

Unfortunately, the satori package is compiled so I can’t patch the bug in there which is preventing us from using text in the image. I’m on it and will write shuding from Vercel again if there is no action in the next days.

But 🎉🎉🎉

We now have a first working solution! It’s not that special and nice and gets a visual facelift (maybe today) – but I’m proud 😊 This shows the translation progress of: github.com/inlang/example and can be used as (when merged/deployed):

<img src="http://inlang.com/badge?url=github.com/inlang/example" alt="translation progress" />

This afternoon, I will come up with a first design of how to make this really shine ☀️

Furthermore

const lang = req.headers["accept-language"]

I also prepared getting the language header and with that we can later implement a specific view per preffered language, the header response looks like that for German: @inlang/server:dev: de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7 – the qis the quantity and reflects in which priority the languages should be used.

@jannesblobel @samuelstroschein As we are generating charts in the server context and most libraries require canvas rendering, we need to use something that supports server-side rendering (SSR). For example, we could use a library like chart.js-node-ssr-example. https://github.com/shellyln/chart.js-node-ssr-example

However, for simplicity’s sake, I would prefer something like the solution described in this StackOverflow answer: https://stackoverflow.com/a/7191071.

@jannesblobel We (me + @samuelstroschein) decided that I go a bit further on the design side and do some explorations on how we can display the data in the README in multiple variants and sizes depending on the data and the preferences of the user.

This should only be a rough sketch as we want to kick this out of the door soon and improve it overtime.

For example as an improvement: Showing only relevant data for the user based on the request header languages of the image. “[DE]: 3 fehlende Übersetzungen – Jetzt übersetzen auf inlang.com”.

@jannesblobel I would consider this a a scaling issue. We can improve this over time if we see a repository with 50+ languages. 😄 Or do we have one already?

Yep