fix: Update screenshots & fix docs (#532)

blog/2022-11-18-context-gamechanger.md → blog/2024-02-13-context-gamechanger.md

@@ -14,6 +14,8 @@ tags: [in-context, localization, i18n]
 
 Context is crucial for software localization as it allows translators to understand the content in its proper context and thus produce an accurate translation. Without context, a software translation can be inaccurate and lead to user confusion or errors. In some cases, the context can completely change the meaning of what is being translated, so it is essential to have a good understanding of the text's context before starting the localization process.
 
+![spreadsheet localization](/img/blog/context-gamechanger/bart_context.png)
+
 <!--truncate-->
 
 **Context is king** in software localization. For example, let's have the word "SAVE" How do you translate it without knowing the context?
@@ -29,7 +31,13 @@ In some languages other than English, the word "SAVE" can be translated differen
 
 Spreadsheets are still, unfortunately, often used for software localization. Even using basic spreadsheets like Excel, Numbers, or Google Sheets may seem the most straightforward way how to prepare your strings for translation, the oppposite is true. Unfortunately, this way you loose all the essential context while translating only in table rows of [spreadsheets](https://medium.com/tolgee/why-using-spreadsheets-for-apps-localization-is-not-the-brightest-idea-58b89e046a96).
 
-![spreadsheet localization](/img/blog/context-gamechanger/bart_context.png)
+:::tipCheck out the case study of Whatspot
+
+“Using spreadsheets for app localization is far-from-great approcah. We plan never to come back to our previous shared Google Sheets system”
+
+[Read case study](/blog/case-study-whatspot)
+
+:::
 
 ## How to provide context to translators?
 
@@ -45,6 +53,13 @@ Tolgee is an open-source tool for software localization. Besides other things, i
 
 ![in-context translation](/img/blog/context-gamechanger/in_context_tolgee.png)
 
+<br></br>
+
+> _"Before discovering Tolgee all of the translations for our projects where managed through Excel files. It is needless to say how ingredient it was…"
+> [Review of Armen D., IT manager](https://www.capterra.com/p/10002120/Tolgee/reviews/4612131/)_
+
+<br></br>
+
 ## 1. Screenshots in Tolgee
 
 In some cases, screenshots may be the only available information about a particular piece of text, making them essential for accurate translation. In the Tolgee platform, you can manually upload up to 20 screenshots to every single translation key. The translator can then open it while translating and immediately see the context of the translated string. You can also use our [REST API](/api#tag/Screenshots/operation/uploadScreenshot) endpoint to upload a screenshot for a specific key.
@@ -73,8 +88,24 @@ The in-context translating feature is, at the same time, also an excellent tool
   <source src="/img/blog/context-gamechanger/in-context-translating.mov"></source>
 </video>
 
+## 3. Machine translation with context: Tolgee AI Translator
+
+Tolgee [AI Translator](/blog/tolgee-ai-translator) is a game-changer in software localization, providing **contextually tailored translations**. By seamlessly integrating with your application, Tolgee **extracts context automatically**, so you don't have to bother developers or designers by asking them to provide the description or to take screenshots for every key.
+
+Context is gathered through Tolgee's **native JS SDKs** that provide [in-context dialogs](/js-sdk/in-context). The SDKs are available for all major frameworks like React, Angular Vue.js, Svelte or plain JavaScript.
+
+Moreover, by prioritizing context, Tolgee ensures that translations are linguistically accurate and culturally relevant, enhancing the overall user experience and driving user engagement. You can also customize and improve AI translations with **Project descriptions and Languages notes**. You can learn more about this advanced feature [here](/blog/releasing-ai-customizations).
+
+:::tipSay hi to [Autonomous Localization](/blog/autonomous-localization)
+
+If you want to see a live demo of Tolgee Translator, [book a demo!](https://calendly.com/tolgee/30min)
+
+:::
+
 ## Conclusion
 
-Context has a significant role in translating, especially in software localization. It provides essential information to translators about the translated piece of text. Screenshots can be a powerful tool for translators to provide context, helping to improve the accuracy and quality of translations. They provide a visual context for the text that needs to be translated, making it easier to understand the meaning and intent. Screenshots can speed up the translation process by reducing the need for research or clarification. In-context translation can bring even more value to the whole localization process and generate highly accurate translations.
+Context has a significant role in translating, especially in software localization. It provides essential information to translators about the translated piece of text. Screenshots can be a powerful tool for translators to provide context, helping to improve the accuracy and quality of translations. They provide a visual context for the text that needs to be translated, making it easier to understand the meaning and intent. Screenshots can speed up the translation process by reducing the need for research or clarification. In-context translation can bring even more value to the whole localization process and generate highly accurate translations. The Tolgee Machine translator can understand the context of the strings used in apps, which leads to more accurate translations.
 
 Do you have any suggestions on how to offer context to translators in Tolgee better? [Let us know](mailto:[email protected]) or create a pull request on [GitHub](https://github.com/tolgee/tolgee-platform).
+
+[![Context is king banner](/img/blog/banners/banner-context.webp)](https://app.tolgee.io/sign_up)

blog/2024-03-05-releasing-visual-editor-and-formats-support.mdx

@@ -7,28 +7,34 @@ tags: ['tolgee', 'android', 'apple', 'ios', 'flutter', 'php', 'po', 'c++']
 image: '/img/blog/visual-editor-and-formats-support/og_image_light.webp'
 ---
 
-import ThemedImage from "@theme/ThemedImage";
-import useBaseUrl from "@docusaurus/useBaseUrl";
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 <ThemedImage
   alt="Visual editor and formats support"
   sources={{
-    light: useBaseUrl('/img/blog/visual-editor-and-formats-support/og_image_light.webp'),
-    dark: useBaseUrl('/img/blog/visual-editor-and-formats-support/og_image_dark.webp'),
+    light: useBaseUrl(
+      '/img/blog/visual-editor-and-formats-support/og_image_light.webp'
+    ),
+    dark: useBaseUrl(
+      '/img/blog/visual-editor-and-formats-support/og_image_dark.webp'
+    ),
   }}
 />
 
-We are happy to announce that we finally released tools enabling you to use Tolgee to translate also to iOS, Mac and other Apple platform Apps, Android, Flutter,
-PHP and C++. Also, you can reliably export to generic formats like Structured JSON with support for arrays or XLIFF.
+We are happy to announce that we finally released tools enabling you to use Tolgee to translate also to **iOS, Mac and other Apple platform Apps, Android, Flutter,
+PHP and C++**. Also, you can reliably export to generic formats like **Structured JSON** with support for arrays or **XLIFF**.
 
-To provide a convenient way of editing translations for developers, translators, localization managers, project managers and other stakeholders, we
-made our editor visual, so you can conveniently edit plurals and you can edit strings without the need to understand the
+To provide a convenient way of editing translations for developers, translators, localization managers, project managers and other stakeholders, **we
+made our translation editor visual**, so you can conveniently edit plurals and you can edit strings without the need to understand the
 placeholders or HTML tags syntax.
 
 <!--truncate-->
 
-## The new formats support freshly out of the oven
+## New Formats Support
+
 Tolgee now supports the following formats:
+
 - Tolgee Native JSON
 - Generic Structured JSON (With Arrays Support)
 - Generic XLIFF
@@ -42,22 +48,26 @@ Tolgee now supports the following formats:
 Convenient plurals editing in the visual editor is supported for all formats as well as placeholders visualization as
 described below.
 
-## The visual editor
+## The Visual Editor
+
 There are several issues regarding editing translation messages in different message formats and raw HTML. For
 example this ICU message:
 
 ```
 Hello, {name}! You have been promoted to <strong>{position}</strong>
 ```
 
-To edit this message, the translator needs to understand the ICU Message Syntax, so they know the `{name}` and
+To edit this message, the translator needs to understand the **ICU Message Syntax**, so they know the `{name}` and
 `{position}` are placeholders representing the user's name and new position. They need to understand that the `<strong>` is
 an HTML tag they must not translate (e.g., to `<fuerte>` to Spanish). The purpose of a visual editor is to hide the syntax
 from the translators and provide a convenient way to edit such messages.
 
-import { ScreenshotWrapper } from "../platform/shared/_ScreenshotWrapper";
+import { ScreenshotWrapper } from '../platform/shared/_ScreenshotWrapper';
 
-<ScreenshotWrapper src="/img/blog/visual-editor-and-formats-support/visual_editor.webp" alt="Visual editor" />
+<ScreenshotWrapper
+  src="/img/blog/visual-editor-and-formats-support/visual_editor.webp"
+  alt="Visual editor"
+/>
 
 This way, the translator to Spanish only needs to type the actual translated text and add the placeholders by
 clicking the missing placeholders below the input field.
@@ -68,39 +78,53 @@ behavior. When displaying visualized placeholders instead of the raw syntax, the
 naturally, and they don't have to think about the order of opening and closing HTML tags.
 
 ## Tolgee Universal ICU Placeholders
+
 For formats that are not natively using ICU Message Format, Tolgee can convert the placeholders to
-the Tolgee Universal ICU Placeholders when importing, so you can edit them in the visual editor.
+the **Tolgee Universal ICU Placeholders** when importing, so you can edit them in the visual editor.
 These placeholders are then converted back when exporting.
 [Read more about this concept in docs](/platform/translation_process/tolgee_universal_icu_placeholders).
 
 The main benefit of using unified placeholder syntax is that you're able to use the same localization data in different
 target platforms since these placeholders can be converted to every supported format.
 
 ## Convenient Plural Editing
+
 The ICU Message format was always native for Tolgee since it greatly supports plurals and has formatted
 implementations in many programming languages. However, editing such plural messages can be challenging for translators.
 
 E.g., the following ICU message:
+
 ```
 {count, plural, one {You have one message} other {You have {count} messages}}
 ```
 
 Using the visual editor, you can easily edit each form separately, which makes the translation much more convenient,
 while hiding the relatively complex ICU syntax from translators.
 
-<ScreenshotWrapper src="/img/blog/visual-editor-and-formats-support/editing_plural_tools.webp" alt="Editing plural" />
+<ScreenshotWrapper
+  src="/img/blog/visual-editor-and-formats-support/editing_plural_tools.webp"
+  alt="Editing plural"
+/>
 
 Also, all the tools like Translation memory or Machine translation show only the single plural form translation.
 
-## Shiny New layout
+## Shiny New Layout
 
-To make the Tolgee Translations view more flexible, we moved the translation tools, the comments and history to the right panel. The right panel provides a single interface for all the views and allows us to add
+To make the Tolgee Translations view more flexible, **we moved the translation tools, the comments and history to the right panel**. The right panel provides a single interface for all the views and allows us to add
 new panels in the future. We also plan to introduce the ability to create custom apps and expose access to this panel in
 the API to give developers a way to create custom tools for their needs.
 
-<ScreenshotWrapper src="/img/blog/visual-editor-and-formats-support/new_layout.webp" alt="New layout" />
+<ScreenshotWrapper
+  src="/img/blog/visual-editor-and-formats-support/new_layout.webp"
+  alt="New layout"
+/>
 
 ## TL;DR
+
 - Our latest release streamlines Tolgee's use across various platforms, including iOS, Mac, Android, Flutter, PHP, and C++.
 - It enables a wider range of formats, a visual editing experience, and a fresh layout for more seamless translation and localization processes.
 - Enhanced placeholder and plural editing simplifies the translation effort, encouraging consistency across formats.
+
+Let us know in the [Tolgee Slack community](https://Tolg.ee/slack) if you have any questions about those new features!
+
+[![Demo banner](/img/blog/blog-banners/banner-demo.webp)](https://calendly.com/tolgee/30min)

js-sdk/integrations/react/next/app_router.mdx

@@ -5,7 +5,7 @@ title: Next.js with app router
 description: 'Learn how to integrate Tolgee with Next.js and app router, while still use in-context translating and dev tools.'
 ---
 
-To see the full working code, check the [Example app](https://github.com/tolgee/next-example).
+To see the full working code, check the [Example app](https://github.com/tolgee/next-app-example).
 
 ## Installation
 

platform/account_settings/api_keys_and_pat_tokens.mdx

@@ -5,6 +5,8 @@ sidebar_label: API keys and PAT tokens
 description: 'Learn more about API keys and PAT tokens (=authentication methods enabling you to manage your data via REST API.)'
 ---
 
+import { ScreenshotWrapper } from '../shared/_ScreenshotWrapper';
+
 API keys and PAT tokens are authentication methods enabling you to manage your data via REST API.
 
 ## Project API keys
@@ -33,7 +35,10 @@ Project API keys can be generated by accessing user menu (Avatar in Top right) >
 
 Then you can generate a project API by filling in required fields and selecting scopes.
 
-![API key generation](/img/docs/platform/project_api_key_generation.png)
+<ScreenshotWrapper
+  src="/img/docs/platform/project-api-key.webp"
+  alt="API key generation"
+/>
 
 ### Regeneration
 
@@ -73,7 +78,7 @@ To access your API keys, open user menu (Avatar in Top right) and select `Person
 
 Project API keys can be generated by accessing user menu (Avatar in Top right) > `Personal Access Tokens` > `+ Add` button.
 
-![API key generation](/img/docs/platform/project_pat_generation.png)
+<ScreenshotWrapper src="/img/docs/platform/pat.webp" alt="PAT key generation" />
 
 ### Regeneration
 

platform/account_settings/password_and_2fa.mdx

@@ -4,18 +4,25 @@ title: Password and 2FA
 sidebar_label: Password and 2FA
 ---
 
+import { ScreenshotWrapper } from '../shared/_ScreenshotWrapper';
+
 ## Account security
+
 The Account security page allows you to change your password and enable two-factor authentication (2FA).
 You can access this page by clicking your username in the top right corner of the page and selecting `Account settings` from the dropdown menu and then clicking `Account security` in the left sidebar.
 
-![Account security page](/img/docs/platform/account_security_page.png)
+<ScreenshotWrapper
+  src="/img/docs/platform/account-security.webp"
+  alt="Account security page"
+/>
 
 ### Two-Factor Authentication
+
 Two-Factor Authentication (2FA) is a security feature that requires you to enter a code in addition to your password when you log in.
 This code is generated by an app on your phone. **We recommend enabling 2FA** to protect your account.
 
 To enable 2FA, click the `Enable 2FA` button. You will be prompted to enter your password and a code generated by an app on your phone.
 
-![Enable 2FA](/img/docs/platform/enable_2fa.png)
+<ScreenshotWrapper src="/img/docs/platform/two-factor.webp" alt="Enable 2FA" />
 
-After you confirm to enable 2FA, recovery codes will be generated. **Write down these codes and keep them in a safe place**. You will need them if you lose access to your phone.
+After you confirm to enable 2FA, recovery codes will be generated. **Write down these codes and keep them in a safe place**. You will need them if you lose access to your phone.

platform/formats/index.mdx

@@ -11,7 +11,7 @@ You can import data and export data to the formats listed below.
 Before you start working with imports and exports, you should get familiar with the concept of [Tolgee Universal ICU placeholders](/platform/translation_process/tolgee_universal_icu_placeholders).
 
 :::info
-Support for most of the formats below was added in  **v3.49.0**. If you are using an older version, please update.
+Support for most of the formats below was added in **v3.49.0**. If you are using an older version, please update.
 :::
 
 ## Tolgee native JSON
@@ -34,7 +34,7 @@ as stored in Tolgee. [Read more](xliff.mdx).
 
 Apple strings format is used in Apple platforms. It is used for localization of iOS, macOS, watchOS, and tvOS applications.
 We **recommend using this** since it's currently the most flexible format for Apple platforms. Using `.strings` &
-`.stringsdict`. You can also modify the base translation values. [Read more](apple_strings.mdx).
+`.stringsdict` you can also modify the base translation values. [Read more](apple_strings.mdx).
 
 ## Apple Xliff (.xliff)
 
@@ -43,6 +43,7 @@ However, Apple is very strict while importing data from `.xliff` back, so it's n
 with this format. Because of that, we recommend going with `.strings` & `.stringsdict` if you can. [Read more](apple_xliff.mdx).
 
 ## Apple String Catalog (.xcstrings)
+
 We currently don't support importing/exporting String Catalog `.xcstrings` directly, but you can translate String Catalogs via
 `.xliff` import/export. [Read more](apple_xliff.mdx).
 

platform/integrations/about_integrations.mdx

@@ -4,8 +4,21 @@ title: About Integrations
 sidebar_label: About Integrations
 ---
 
+import { ScreenshotWrapper } from '../shared/_ScreenshotWrapper';
+
 Easiest way to integrate Tolgee with your application is to open the **Integrate page** which you which you can find in the project menu.
 
 Select the integration you want to use from the list and follow the instructions. We highly recommend to create a **new API key for each integration**.
 
-![img](/img/docs/platform/integration_libraries.png)
+<ScreenshotWrapper
+  src="/img/docs/platform/integrations.webp"
+  alt="integrations"
+/>
+
+Currently, Tolgee has integrations for **all major JS frameworks** such as [React](/js-sdk/integrations/react/installation),
+[Angular](/js-sdk/integrations/angular/installation), [Vue](/js-sdk/integrations/vue/installation),
+[Next](/js-sdk/integrations/react/next/introduction), [Svelte](/js-sdk/integrations/svelte/installation),
+[React Native](/js-sdk/integrations/react/react_native), [Vanilla JS](/js-sdk/installation).
+
+**Other integrations:** [Figma](/platform/integrations/figma_plugin/setup), [Unreal](/platform/integrations/unreal_plugin/setup),
+[CLI](https://tolgee.io/tolgee-cli), [REST API](/api)

platform/integrations/other_integrations.mdx

@@ -0,0 +1,30 @@
+---
+id: other_integrations
+title: Other integrations
+sidebar_label: Other integrations
+---
+
+Tolgee native integrations empower you to:
+
+- Edit translations directly in your app. No developer knowledge needed for anyone to make changes.
+- Create one-click screenshots for translators to give them extra context for accurate translations.
+- Significantly enhance machine translation quality as Tolgee gathers context from your app.
+
+Currently, Tolgee has integrations for **all major JS frameworks** such as:
+
+- [React](/js-sdk/integrations/react/installation)
+- [Angular](/js-sdk/integrations/angular/installation)
+- [Vue](/js-sdk/integrations/vue/installation)
+- [Next](/js-sdk/integrations/react/next/introduction)
+- [Svelte](/js-sdk/integrations/svelte/installation)
+- [React Native](/js-sdk/integrations/react/react_native)
+- [Vanilla JS](/js-sdk/installation).
+
+**Other integrations:**
+
+- [Figma](/platform/integrations/figma_plugin/setup)
+- [Unreal](/platform/integrations/unreal_plugin/setup),
+- [CLI](https://tolgee.io/tolgee-cli)
+- [REST API](/api)
+
+Find all Tolgee integrations with useful links [here](/integrations).