For translators: generate app screenshots for additional context

[jonator]

Problem

For translators, they may have to play a bit of a guessing game of where a certain translation is used within the app. To get the true context of a given translation, they must have enough knowledge of the various workflows of an app and be able to search for and find a translation using their language of reference.

Full Solution

Since inlang can find out where translation keys are referenced in the html, it shouldn't be too hard for it to use a headless browser to generate screenshots to help translators identify where a certain translation is used within the app. IMO this would be a killer feature, and would greatly improve the translator's UX, as they'd be able to browse images of the app with the actual text emphasized. Difficult edge case- properly generating screenshots for translations contained within dropdowns, modals, or otherwise interactive elements. Perhaps (to be JS framework agnostic) to fully expose this feature, developers would be required to provide a sequence of actions (via a list of HTML identifier paths to send click events to) and/or API mocks to get the app into the desired state before taking the screenshot.

Secondary Solution

Encourage developers (via warnings from CLI or VSCode) to include a context string to describe the context (location, situation) of a given localization key. This context string could then be presented to translators instead of the raw translation key.

[samuelstroschein]

The screenshots are ideally auto-generated. Given that we will provide dev tools, and have access to the entire code (prerendering?), automating screenshots should be doable.

[ivanhofer]

related: #355