Umbraco package of the month: Auto dictionaries

Jeroen van Kempen - Oct 21 - - Dev Community

I am doing a monthly blog about different package within the Umbraco landscape. Previous blogs can be found over at https://techhub.iodigital.com

This month, I am looking at the package "Auto dictionaries" a package that detects static content and allows you to set the text to an existing dictionary item or create a new translation. You can expand it by using a translator like DeepL or Microsoft Translation to automatically add those translations.

Setup

Unless you want to use the auto-translation feature, no other setup is needed beyond just installing the package. If you want to make use of the auto-translators, you need to set up the translator you want to use and the API key, endpoint, or region based on the translator you are going to use. In my case, I used the free version of DeepL, and all I had to do was set up the API key.

How does it work

The package detects static content found by a complex bit of regex. These finds will be collected in a new overview under the "Translations" tab. In this overview, you will see a list of the configured .cshtml files in Umbraco—think about the _layout file, blocks, or pages.
Pages overview, which shows how many static texts there are

When going into detail on one of these pages, there is an overview of all the static texts the package has found. You can then choose to match an already existing dictionary item or to add a new dictionary item. If you have a translator configured, it will also give you an option to generate a translation based on the original text.
detailed view of all the static pieces of text on one page

When adding the translation, it replaces the static text with the dictionary item (@Umbraco.GetDictionaryValue("ClickHere")) in the .cshtml file. This means that this package is more for developers than clients because the changes will just be removed after a deployment.

Issues

There was one issue I had when trying out this package with languages other than English, and one call to action to help improve the existing regex.

Other languages

My attempts to use the translator from Dutch to English came with a problem. Whether it is an issue with the package or the free version of DeepL, I am not 100% sure. But it is a notable problem if you have project that use two different languages than English. I have made an issue on GitHub to get more detail about it.
Additionally, it is worth noting that even when using English as the default language, it does not detect the language of the text you are translating it just assumes the text was in English.

Regex

The package creator, "Johannes Lantz," has an open issue in which he asks for anybody's help to improve the way static texts get detected, because everybody's setup is different and there are way too many variables to think about. So, if you are a regex expert, make sure to see if you can help.
https://github.com/Lantzify/auto-dictionaries/issues/7

Personally, I am not a regex expert, but after pushing the limits of the regex, I found the biggest issue are external scripts, JavaScript code in the .cshtml files or text with <a> attributes in the middle for example. But for the normal pieces of text in buttons, titles, or texts, it works great.

More functionality

It is a nice feature to be able to auto-translate the static pieces of text, but it is currently only available when adding new items from one of the new overviews. I would also like this to be an option on the already existing dictionary items.
When hearing about this package, I thought this would already be a feature, but sadly it was not. So, I have asked for it to be added on GitHub.

Conclusion

I find this a great package, especially if you have old stuff or just a lot of pages or blocks. However, it still has a few kinks to work out, particularly the issues with languages other than English. I like the overview it gives you of all the work you have to do, but it is currently more for developers than for clients.

I would like to thank Johannes Lantz for this package and wish him good luck for the future #H5YR

https://github.com/Lantzify/auto-dictionaries
https://marketplace.umbraco.com/package/autodictionaries

.