chore: refactor screenshots

CONTRIBUTING.md

@@ -32,19 +32,15 @@ There are a couple of custom components in this project that you can use:
   <Include file="file.mdx" />
   ```
 
-- `MobileDesktopImage` - A component that displays an image for mobile and desktop. It's useful when you want to display different images for mobile and desktop.
+- `Screenshot` - A component that displays a screenshot.
 
-  ```mdx
-  import MobileDesktopImage from '~/components/MobileDesktopImage.astro';
-  import mobileImage from "./_assets/mobile-profile-image.jpg";
-  import desktopImage from "./_assets/desktop-profile-image.jpg";
-
-  <MobileDesktopImage
-      mobileImgUrl={mobileImage}
-      desktopImgUrl={desktopImage}
-      alt="Image alt text"
-  />
-  ```
+```mdx
+import Screenshot from '~/components/Screenshot.astro';
+
+<Screenshot src="/localization-resources/mt_suggestions.png" alt="Localization Resources" />
+```
+
+The `Screenshot` component automatically resolves the path to the screenshot, so you don't need to specify the full or relative path.
 
 ## Icons
 
@@ -82,30 +78,27 @@ It's always better to use these icons instead of local, as they are already supp
 
 ## Screenshots
 
-Put screenshots in the `_assets` directory at the same level as your MDX file. You can then reference them in your MDX file like this:
+Put screenshots in the `src/assets/screenshots` directory according to the document location. You can then reference them in your MDX file like this:
 
 ```mdx
-![Alt text](./_assets/screenshot.png)
-```
+import Screenshot from '~/components/Screenshot.astro';
 
-This architecture allows you to keep your images close to the content they are associated with and makes it easier to manage them. Make sure to add descriptive alt text to your images to make them accessible.
+<Screenshot src="/localization-resources/mt_suggestions.png" alt="Localization Resources" />
+```
 
-### Customizing screenshots
+It automatically resolves the path to the screenshot, so you don't need to specify the full or relative path. For the example above, the screenshot should be located in the `src/assets/screenshots/crowdin/localization-resources/mt_suggestions.png` path.
 
-You can use the Astro `Image` component to apply custom classes for screenshots. For example:
+For Crowdin Enterprise, just add the `enterprise` prop to the `Screenshot` component:
 
 ```mdx
-import { Image } from 'astro:assets';
-import configureFormat from "./_assets/bundles_configure_format.png";
+<Screenshot src="/organization-management/fields_details.png" alt="Field" enterprise />
+```
 
-[//]: # (...)
+So it will display the screenshot from the `src/assets/screenshots/enterprise/organization-management/fields_details.png` path.
 
-<Image src={configureFormat} alt="Configure Bundle File Format" class="dialog"/>
-```
+### Customizing screenshots
 
-- `dialog` - sets the maximum width of the image to `26rem`.
-- `no-shadow` - removes the shadow from the image.
-- etc.
+You can specify your own classes to customize the image (e.g, `no-shadow`, `dialog`)
 
 ## File-based/String-based content differentiation
 

src/components/Screenshot.astro

@@ -0,0 +1,17 @@
+---
+import { Image } from "astro:assets";
+
+interface Props {
+    src: string;
+    alt: string;
+    class?: string;
+    enterprise?: boolean;
+}
+
+const prefix = Astro.props.enterprise ? 'enterprise' : 'crowdin';
+const path = '/src/assets/screenshots/' + prefix + Astro.props.src;
+---
+
+<picture>
+    <img src={path} alt={Astro.props.alt} class={Astro.props.class} />
+</picture>

src/content/docs/crowdin/getting-started/for-managers.mdx

@@ -8,6 +8,7 @@ slug: for-managers
 import { CardGrid, LinkCard, Steps, Tabs, TabItem, Aside} from '@astrojs/starlight/components';
 import { Icon } from 'astro-icon/components';
 import ReadMore from '~/components/ReadMore.astro';
+import Screenshot from '~/components/Screenshot.astro';
 
 > Crowdin is a localization management platform that helps companies, teams, and individuals stay agile when translating products like mobile, desktop & web apps, websites, games, help documentation, and more.
 
@@ -57,12 +58,12 @@ Once you've created the project, you can upload localizable files in a way that
   <TabItem label="File-based project">
     To upload translatable content in a file-based project, open your project and go to **Sources > Files**:
 
-    ![Upload files](./_assets/upload_files.png)
+    <Screenshot src="/getting-started/upload_files.png" alt="Upload files" />
   </TabItem>
   <TabItem label="String-based project">
     To upload translatable content in a string-based project, open your project and go to the **Upload** tab:
 
-    ![Upload files](./_assets/upload_files_sb.png)
+    <Screenshot src="/getting-started/upload_files_sb.png" alt="Upload files" />
   </TabItem>
 </Tabs>
 
@@ -102,7 +103,7 @@ In most cases, you might have localization resources like [Translation Memory](/
 
 [Screenshots](/screenshots) are another great way to provide additional context so translators can understand better how they should translate the source strings. To upload screenshots, open your project and go to the **Screenshots** tab. Tag the source strings on the screenshots. This way, screenshots with tagged strings will appear under each string in the Editor's Context section.
 
-![Screenshots in the Editor](./_assets/screenshots_in_editor.png)
+<Screenshot src="/getting-started/screenshots_in_editor.png" alt="Screenshots in the Editor" />
 
 <CardGrid>
   <LinkCard
@@ -123,7 +124,7 @@ In most cases, you might have localization resources like [Translation Memory](/
 
 To save time, you can pre-translate your Crowdin project via [Translation Memory](/translation-memory) (TM) or [Machine Translation](/machine-translation) (MT). This way, you'll have some strings automatically translated before translators start working on your project translations. You can apply pre-translation manually or set up automatic pre-translation via [TM](/project-settings/translation-memories) or [MT](/project-settings#machine-translation), so each time new content is added, it's translated automatically.
 
-![Pre-translation via TM](./_assets/pre_translation.png)
+<Screenshot src="/getting-started/pre_translation.png" alt="Pre-translation via TM" />
 
 <ReadMore>
   Read more about [Pre-translation](/pre-translation).
@@ -135,7 +136,7 @@ Decide who will translate your content. You can cooperate with professional tran
 
 If you decide to [invite your own team of translators](/team-management), open your project and go to the **Members** tab. You can invite people to your project using their Crowdin username or email address and via the invitation link. When inviting new people, you can assign them the following roles: Manager, Language Coordinator, Proofreader, and Translator. You can [change the assigned role](/team-management) for any project member at any time.
 
-![Invite project members](./_assets/invite_dialog.png)
+<Screenshot src="/getting-started/invite_dialog.png" alt="Invite project members" />
 
 Once new members join your project, they can start translating the content in the [Editor](/online-editor).
 
@@ -150,7 +151,7 @@ There are five main types of reports you can find under the **Reports** tab in y
 * Translation Cost
 * Top Members
 
-![Project reports](./_assets/reports_general.png)
+<Screenshot src="/getting-started/reports_general.png" alt="Project reports" />
 
 <ReadMore>
   Read more about [Reports](/project-reports).
@@ -160,7 +161,7 @@ There are five main types of reports you can find under the **Reports** tab in y
 
 Translations are downloaded according to the export settings configured in the project's **Settings** tab.
 
-![Export Settings](./_assets/project_settings_export.png)
+<Screenshot src="/getting-started/project_settings_export.png" alt="Export Settings" />
 
 You can download translations manually using the web interface, using integrations (e.g., [GitHub](/github-integration) or similar), applying [API](https://developer.crowdin.com/api/v2/), or using a [console client](https://crowdin.github.io/crowdin-cli/) to automate the translation download.
 

src/content/docs/crowdin/getting-started/for-translators.mdx

@@ -8,6 +8,7 @@ slug: for-translators
 
 import { Aside, LinkCard } from '@astrojs/starlight/components';
 import { Icon } from 'astro-icon/components';
+import Screenshot from '~/components/Screenshot.astro';
 
 > Crowdin is a localization management platform that helps companies translate their software. In this article, you will find information on how you can contribute to localization projects as a translator.
 
@@ -23,15 +24,15 @@ Click the profile picture in the upper-right corner and select *Settings* to acc
 
 A profile page is a place where you start working on Crowdin projects. In the *Projects* tab, you can see all the projects you have joined.
 
-![Profile](./_assets/profile_full.png)
+<Screenshot src="/getting-started/profile_full.png" alt="Profile" />
 
 ## Exploring Projects
 
 Find a Crowdin project you would like to contribute to using the search field in the header or the direct URL provided by the project manager. However, not all projects can be found with the help of the search field. This is because they are private and only accessible via invitation links.
 
 Visit our [Showcases](https://crowdin.com/projects#showcases) page, where you can find some popular public projects grouped by category. Use the *Advanced Search* if you want to apply specific filter options (e.g., target languages, platform) to find a public project.
 
-![Showcases](./_assets/showcases.png)
+<Screenshot src="/getting-started/showcases.png" alt="Showcases" />
 
 <Aside type="tip">
   *Crowdsourcing* is an approach that engages a community for one common goal &ndash; to translate products on a volunteer basis into various target languages. As a volunteer translator, you can help organizations with localization by translating in Crowdin.
@@ -59,7 +60,7 @@ Once you find and open the needed project, you can access the following tabs:
 
 * **Discussions** &ndash; the page with the project-related conversations. You can participate in already existing discussions or create a new topic if necessary.
 
-![Project Home](./_assets/project_dashboard.png)
+<Screenshot src="/getting-started/project_dashboard.png" alt="Project Home" />
 
 ## Work in the Editor
 
@@ -69,7 +70,7 @@ Collaborate with other project members, discuss any issues or questions in the C
 
 As an alternative to translating online in the Editor, you can download project files for offline translation if the project manager has enabled public downloads. Use the XLIFF file format for offline translation, which is supported by most desktop localization tools.
 
-![Editor Sections](./_assets/online_editor_sections.png)
+<Screenshot src="/getting-started/online_editor_sections.png" alt="Editor Sections" />
 
 ### Section 1 (Left sidebar)
 
@@ -96,7 +97,7 @@ You can use this section to discuss the meaning of the source string or other re
 
 The Main menu <Icon name="mdi:menu" class="inline-icon"/> in the upper-left corner allows you to switch between files for translation, change translation languages, contact a manager, and configure the Editor view.
 
-![Main Menu](./_assets/volunteer_editor_menu.png)
+<Screenshot src="/getting-started/volunteer_editor_menu.png" alt="Main Menu" />
 
 ### Keyboard Shortcuts
 

src/content/docs/crowdin/getting-started/supported-formats.mdx

@@ -5,6 +5,7 @@ slug: supported-formats
 
 import { Steps } from '@astrojs/starlight/components';
 import FormatsBanner from '~/components/FormatsBanner.astro';
+import Screenshot from '~/components/Screenshot.astro';
 
 Crowdin supports a wide range of localization formats, including but not limited to files for mobile, software, documents, subtitles, and graphic assets.
 
@@ -30,7 +31,7 @@ Localize images associated with your product to improve your product’s user ex
   4. Download the localized graphics and use them in production.
 </Steps>
 
-![Assets Workflow](./_assets/assets-workflow.png)
+<Screenshot src="/getting-started/assets-workflow.png" alt="Assets Workflow" />
 
 ## Converted File Formats
 

src/content/docs/crowdin/localization-resources/machine-translation.mdx

@@ -6,12 +6,13 @@ slug: machine-translation
 [//]: # (https://support.crowdin.com/configuring-machine-translation-engines/)
 
 import { Steps, Aside, LinkCard } from '@astrojs/starlight/components';
+import Screenshot from '~/components/Screenshot.astro';
 
 Machine translation engines integrated with Crowdin provide translation suggestions from automatic translation services like Google Translate and AutoML Translation, Microsoft Translate, and more.
 
 Suggestions made by machine engines are displayed in the Editor under the translators’ suggestions field. Also, you can do [Pre-Translation](/pre-translation) using MT engines.
 
-![Machine Translation suggestions in the Editor](./_assets/mt_suggestions.png)
+<Screenshot src="/localization-resources/mt_suggestions.png" alt="Machine Translation suggestions in the Editor" />
 
 <LinkCard
   title="Add More Machine Translation Engines"
@@ -30,7 +31,7 @@ To configure the machine translation engines, follow these steps:
   3. Click **Update**.
 </Steps>
 
-![Configuring Machine Translation engines](./_assets/machine_translation_engines.png)
+<Screenshot src="/localization-resources/machine_translation_engines.png" alt="Configuring Machine Translation engines" />
 
 <Aside type="caution">
   Machine translation engines must be configured using the project owner's account.
@@ -157,7 +158,7 @@ To configure your Google Cloud AutoML custom glossary, follow these steps:
   5. (Optional) Specify your Custom Model. If needed, configure language mapping between Custom Model and Crowdin languages.
 </Steps>
 
-![Google Cloud AutoML Custom Glossary Configuration](./_assets/automl_custom_glossary_configuration.png)
+<Screenshot src="/localization-resources/automl_custom_glossary_configuration.png" alt="Google Cloud AutoML Custom Glossary Configuration" />
 
 ## MT Engine IDs
 

src/content/docs/crowdin/project-management/creating-project.mdx

@@ -7,6 +7,7 @@ slug: creating-project
 
 import { Steps, Aside, CardGrid, Card } from '@astrojs/starlight/components';
 import { Icon } from 'astro-icon/components';
+import Screenshot from '~/components/Screenshot.astro';
 
 To be able to upload your content for localization, create a project first.
 
@@ -43,15 +44,13 @@ To create a project, follow these steps:
 <Steps>
   1. [Log in](https://crowdin.com/login) to your Crowdin account or [Sign up](https://crowdin.com/join) to create one.
 
-  2. Click **Create Project**.
-     ![Create Project](./_assets/create_project.png)
+  2. Click **Create Project**. <Screenshot src="/project-management/create_project.png" alt="Create Project" />
 
   3. Name your project.
 
   4. Customize your project address if needed.
 
-  5. Select the preferred project visibility. You can choose between a **Public project** (visible to anyone) or a **Private project** (visible only to the invited project members). For a public project, you can enable **Moderated project joining** in your project **Settings** tab and restrict the possibility of translating for users until you confirm their join requests. Private projects can't be found via search engines and Crowdin search.
-     ![Project Visibility](./_assets/project_visibility.png)
+  5. Select the preferred project visibility. You can choose between a **Public project** (visible to anyone) or a **Private project** (visible only to the invited project members). For a public project, you can enable **Moderated project joining** in your project **Settings** tab and restrict the possibility of translating for users until you confirm their join requests. Private projects can't be found via search engines and Crowdin search. <Screenshot src="/project-management/project_visibility.png" alt="Project Visibility" />
 
   6. Select **String-based project** if you want to manage your translatable content as individual strings. Otherwise, keep this option cleared to manage your translatable content as source files.
 

src/content/docs/crowdin/project-management/project-activity.mdx

@@ -3,6 +3,8 @@ title: Project Activity
 slug: project-activity
 ---
 
+import Screenshot from '~/components/Screenshot.astro';
+
 The Activity tab lets you track all main events that happen in the project. For good readability, activity records are grouped by days, users, and activity types.
 
 ## Filter Activity Records
@@ -20,20 +22,20 @@ You can filter activity records by the following activity types:
 
 You can also filter activity records by a specific language or all languages, a specific user or all users, and the desired time period (e.g., Today, Yesterday, Last 7 days, Last 30 days, All time, and Custom Range).
 
-![Filter Activity Records](./_assets/project_activity_filter_records.png)
+<Screenshot src="/project-management/project_activity_filter_records.png" alt="Filter Activity Records" />
 
 ## Undo Activity Records
 
 If some unwanted actions (e.g., wrong translations upload, mistaken source file deletion, etc.) happen in the project, the project owner and managers can cancel them in the Activity tab by clicking UNDO next to the respective activity record. Proofreaders and translators can only cancel their own actions.
 
 Since activity records are grouped by types, you can either undo a whole group of activities or click **Details** and undo only some of them.
 
-![Undo Activity Records](./_assets/project_activity_undo_records.png)
+<Screenshot src="/project-management/project_activity_undo_records.png" alt="Undo Activity Records" />
 
 ## View Updated File Diffs
 
 For updated project files, besides the number of added, deleted, and updated strings, you can view the actual strings added, deleted, or updated during the source file update and word quantity contained in the strings. To view the detailed diff for the file update, click **Diff** next to the needed activity record.
 
 For grouped project file update records, click **Details** to see all updated files in the group and then click **Diff** next to the needed file.
 
-![View File Diffs](./_assets/project_activity_view_diff.png)
+<Screenshot src="/project-management/project_activity_view_diff.png" alt="View File Diffs" />