Added multi language support for document site#272
Conversation
* added simple support * Grouped tranlsations * Saving progress * Changed crowdin path and localized content to include whats-new * Added changes to create dynamic staticapp and dynamic language population and a custon 404 to allow for easier language selection and dynamic redirection to home * Started standardising scripts. * Saving progress. Split up some responsabilities. Renamed folders to be more accurate. Fixed redirects. * Added a way to sync files. * Removed old script * Started documentation --------- Co-authored-by: Nedas <nedas.surkus@tabulareditor.com>
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-mud-081affe03-272.westeurope.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-mud-081affe03-272.westeurope.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-mud-081affe03-272.westeurope.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-mud-081affe03-272.westeurope.azurestaticapps.net |
2 similar comments
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-mud-081affe03-272.westeurope.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-mud-081affe03-272.westeurope.azurestaticapps.net |
4cbf5b6 to
1c32d3a
Compare
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-mud-081affe03-272.westeurope.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-mud-081affe03-272.westeurope.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-mud-081affe03-272.westeurope.azurestaticapps.net |
…irects and updated readme files. General clean up. Added missing support for whats-new.
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-mud-081affe03-272.westeurope.azurestaticapps.net |
…ng for docfx. Added a trailing line fix
…abularEditor/TabularEditorDocs into feature/multilang-support_5604
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-mud-081affe03-272.westeurope.azurestaticapps.net |
|
|
||
| jobs: | ||
| build_and_deploy_job: | ||
| build_job: |
There was a problem hiding this comment.
The reason why we have to split the build and deploy jobs is simply due to the fact that the API folder would not be properly generated for translations.
Build runs on a windows-latest and deploy on ubuntu-latest.
Using windows -latest allows us to generate the dlls necessary for API folder population.
Using ubuntu-latest allows us to deploy to azure functions.
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> |
There was a problem hiding this comment.
The reason why 404 was changed so heavily is to account for the fact that we need 3 different scenarios.
- Using legacy redirects. If a user has saved it as https://docs.tabulareditor.com/api/index.html , we wish to redirect him to https://docs.tabulareditor.com/en/api/index.html
- We wish to display all available languages to the user if they try to use a non supported language for example "https://docs.tabulareditor.com/fr/api/index.html"
- We wish to display a different 404 in the case that the user misspelled the URL incorrectly. Ex: https://docs.tabulareditor.com/api/broken-link/index.html
Accounting for all 3 makes it necessary to change 404 heavily.
| @@ -1,142 +1,278 @@ | |||
| { | |||
There was a problem hiding this comment.
There is little point of adding any changes to staticwebapp.config.json anymore.
The reason is that this is automatically regenerated on run using gen_staticwebapp_config.py
The reason for it is is simply to ensure that all redirects have proper status codes for SEO purposes.
| @@ -0,0 +1,12 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
We need this default as a deployed app needs a fallback when we use multiple languages to communicate that by default we use english.
| - name: References | ||
| href: references/ | ||
| homepage: references/index.md | ||
| homepage: references/index.md |
There was a problem hiding this comment.
These changes are not really relevant. They do not change anything. But when generating the toc.yml for the localizedContent would be not the same
| "security", | ||
| "troubleshooting", | ||
| "tutorials", | ||
| "whats-new" |
There was a problem hiding this comment.
We maintain an html file for "whats-new". This will not be translated by crowdin. We might want to figure out a workaround for this by either converting "whats-new" to .md (I understand there is an instance of it in /references but I lack the context to make a decision on what to delete).
Or alternatively we can just specify that crowdin should translate HTML as well. This probably has no conflicts but it is out of scope to check
| "_comment": "Language display names and metadata. Add entries here for new languages.", | ||
| "defaultLanguage": "en", | ||
| "languages": { | ||
| "en": { "name": "English", "nativeName": "English" }, |
There was a problem hiding this comment.
I added some languages as just preparation. But generally, whenever we add a new language, we should modify this manifesto to include rich data such as native name and an english name.
I do consider this as an easy maintenance task that is documented in README.md
| {{#subMenu}} | ||
| <li class="main-nav__list-item main-nav__list-item--lvl1 lvl1 main-nav__list-item--dropdown"> | ||
| <a class="main-nav__list-item-link main-nav__list-item-link--lvl1 lvl1 main-nav__list-item-link--dropdown-toggle" href="#" aria-haspopup="true" aria-expanded="false" role="button" data-bs-toggle="dropdown" target="_self"> {{text}} </a> | ||
| <a class="main-nav__list-item-link main-nav__list-item-link--lvl1 lvl1 main-nav__list-item-link--dropdown-toggle" href="#" aria-haspopup="true" aria-expanded="false" role="button" data-bs-toggle="dropdown" target="_self"{{#uiStringKey}} data-ui-string="{{uiStringKey}}"{{/uiStringKey}}> {{text}} </a> |
There was a problem hiding this comment.
This is one way to translate all headers with crowdin.
| For windows | ||
|
|
||
| ```bash | ||
| npm run build |
There was a problem hiding this comment.
Added tutorial for windows generation. Despite the fact that templates cannot be generated in this project.
| target/ | ||
| /_site/* | ||
| !/_site/staticwebapp.config.json | ||
| /_site/ |
There was a problem hiding this comment.
Again. regarding the staticwebapp.config.
It is now regenerated automatically. No need to include it anymore.
| /_site/ | ||
|
|
||
| # Localized content | ||
| /localizedContent/en/ |
There was a problem hiding this comment.
/en/ is just a copy of content. There is little point in adding it as we will not be using crowdin to translate it.
However, we should maintain translation status. This keeps track on all content that was copy pasted from /content and it is used for comparison and syncing that no value is static.
| { | ||
| "source": "/content/404.html", | ||
| "translation": "/localizedContent/%two_letters_code%/404.html" | ||
| "translation": "/localizedContent/%two_letters_code%/content/404.html" |
There was a problem hiding this comment.
The changes here are quite simple in nature.
Due to how we previously designed the website, our docfx always gets information from /content/.
Additionally many picture URLs reference /content/* as their path. While I could change this and reduce the need to have an additional folder - It is too much effort for this PR.
It is also just an asthetic change.
NOTE:
You might try to argue that it might be a good idea to just have a global folder for content we do not translate. I agree but docfx does not. It requires the docfx.json to be in a root directory and as such, if you change the image paths to "../content" or something similar, it will throw out an error that specifies that it has too many redirections.
For now, we are copying all the file contents TO localisedContent as a workaround. It is not a pretty but it works.
One benefit of it is that it would allow the API and images to eventually be translated. For images specifically we could set up a macro that 1. opens tabular editor. 2. Navigates to where the image should be present. 3. takes a picture. 4. Switches language. 5. Repeat 3-4 until all available languages are covered. 6. Replaces the existing images with new images.
| To test your changes locally: | ||
| - Make sure [DocFX](https://dotnet.github.io/docfx/) is installed. | ||
| - Run `gen_redirects.py` in the root of the project. | ||
| - Run `docfx --serve` in the root of the project. |
There was a problem hiding this comment.
Generally since we never generate docfx in root anymore. There is no point in having these instructions. Instead do use python build-docs.py --serve , py build-docs.py --serve or & "$env:USERPROFILE\.local\bin\python3.14.exe" build-docs.py --serve depending on your python setup
| @@ -1,228 +0,0 @@ | |||
| { | |||
| "content/common/CSharpScripts/Advanced/script-add-databricks-metadata-descriptions.html": "/features/CSharpScripts/Advanced/script-add-databricks-metadata-descriptions.html", | |||
There was a problem hiding this comment.
moved into metadata
|
|
||
|
|
||
| # Default base URL for the documentation site | ||
| DEFAULT_BASE_URL = "https://docs.tabulareditor.com" |
There was a problem hiding this comment.
Might be a good idea to pull this out into metadata. But for now we know it will be used only in https://docs.tabulareditor.com so I am not quite sure on this.
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-mud-081affe03-272.westeurope.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-mud-081affe03-272.westeurope.azurestaticapps.net |
Added multi language support
Redone how docfx is generated. Switched to a python script.
Added a language picker.
Added a dynamic way to populate language picker. Creating a folder and adding a language to a language manifesto allows you to insert a new language without modifying other files.
Added a banner for languages which states "This text is made by AI and has not been reviewed by a human".
Adjusted redirections and modified 404 heavily to account for legacy urls. (/getting-started/index.html redirects to /en/getting-started/index.html).
Adjusted 404 to also distinguish between accessing an unsupported language and a wrong page. Example, we do not support french so if you navigate to "/fr/getting-started/index.html", 404 promts the user to see all supported languages.
If you navigate to a non existent page eg. /en/not-getting-started/index.html. It tells the user, the page does not exist.
Added SEO support for language switching.
Added a way to translate the header using _ui-strings.json. All header elements are supported for the translation.
Added a way to sync content with existing translations. Avoiding potential stale data. If a file is edited in the content - it will be replaced in the translation. If a file is deleted in translation - it will be regenerated on build.
Pipelines have been adjusted to account for the new multi languages.
Added a fallback option to languages that defaults to english.
Fixed broken header search bar
Note: In this PR i did not include the english fallback to any translations as they would be automatically generated on run. Additionally, they distract from the purpose of this review as it would be duplicating the website 3 times. I encourage to create a separate PR with the generated english fallbacks once we are ready to use crowdin.
Additional things: