docs: Downloading Translations (#2)

CONTRIBUTING.md

@@ -90,6 +90,23 @@ Put screenshots in the `_assets` directory at the same level as your MDX file. Y
 
 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.
 
+### Customizing screenshots
+
+You can use the Astro `Image` component to apply custom classes for screenshots. For example:
+
+```mdx
+import { Image } from 'astro:assets';
+import configureFormat from "./_assets/bundles_configure_format.png";
+
+[//]: # (...)
+
+<Image src={configureFormat} alt="Configure Bundle File Format" class="dialog"/>
+```
+
+- `dialog` - sets the maximum width of the image to `26rem`.
+- `no-shadow` - removes the shadow from the image.
+- etc.
+
 ## File-based/String-based content differentiation
 
 To differentiate between file-based and string-based content, you can use the `Tabs` component with the `syncKey` prop. This prop allows you to switch between tabs and keep the selected tab in sync across multiple components.

src/content/docs/crowdin/project-management/project-settings/export.mdx

@@ -0,0 +1,6 @@
+---
+title: Export
+slug: project-settings/export
+---
+
+https://support.crowdin.com/project-settings/#export

src/content/docs/crowdin/project-management/translations/bundles.mdx

@@ -2,7 +2,7 @@
 title: Target Files Bundles
 slug: bundles
 sidebar:
-  order: 1
+  order: 2
 ---
 
 [//]: # (https://support.crowdin.com/bundles/ + https://support.crowdin.com/bundles-sb/)
@@ -11,6 +11,11 @@ import { Steps, Aside, LinkCard, Tabs, TabItem, CardGrid } from '@astrojs/starli
 import { Icon } from 'astro-icon/components';
 import ReadMore from '~/components/ReadMore.astro';
 
+import { Image } from 'astro:assets';
+import configureFormat from "./_assets/bundles_configure_format.png";
+import contentDelivery from "./_assets/bundles_content_delivery.png";
+import contentDeliverySB from "./_assets/bundles_content_delivery_sb.png";
+
 Target file bundles or simply Bundles is the feature that allows you to export sets of strings or files in the formats you select, regardless of the original file format.
 
 By default, you can choose from the following three formats: XLIFF, Android XML, and iOS Strings. You can add more target file formats by installing respective applications from the [Crowdin Store](https://store.crowdin.com/tags/string-exporter).
@@ -33,6 +38,21 @@ The most common use cases are the following:
 * You can localize your mobile app without source files by combining Crowdin design tool plugins (Figma, Sketch, Adobe XD) to send strings straight to the Crowdin project and export translations in the preferred formats using bundles.
 * You can export specific sets of strings for offline translation in XLIFF format and then [upload finished translations](/offline-translation/#uploading-translations) back to Crowdin.
 
+<CardGrid>
+  <LinkCard
+    title="Custom Bundle Generator"
+    description="The app allows you to generate a resource files out of translate Crowdin strings."
+    href="https://store.crowdin.com/custom-bundle-generator"
+    target="_blank"
+  />
+  <LinkCard
+    title="Custom Bundle Builder"
+    description="Create your own script to build files from bundles."
+    href="https://store.crowdin.com/custom-export"
+    target="_blank"
+  />
+</CardGrid>
+
 ## Managing Bundles in UI
 
 To work with bundles manually, you can configure and download them from your Project page.
@@ -52,13 +72,13 @@ To configure a bundle, follow these steps:
 
       4. Specify the source and resulting file paths. If needed, you can add multiple source path patterns using <Icon name="mdi:plus" class="inline-icon" />. In the right panel, you can preview the structure of the source and translation files based on the specified paths.
 
-      5. (Optional) To ignore some folders or files, click **Add ignored pattern**, specify their respective pattern, and Crowdin will skip these specific files or folders during the bundle generation. If needed, you can add multiple ignore patterns using <Icon name="mdi:plus" class="inline-icon" />.
+      5. *(Optional)* To ignore some folders or files, click **Add ignored pattern**, specify their respective pattern, and Crowdin will skip these specific files or folders during the bundle generation. If needed, you can add multiple ignore patterns using <Icon name="mdi:plus" class="inline-icon" />.
 
-      6. (Optional) You can specify labels in the **Filter by labels** and **Exclude by labels** fields to filter strings, including or excluding them in the generated bundle. Read more about [Labels](/strings-management#labels).
+      6. *(Optional)* You can specify labels in the **Filter by labels** and **Exclude by labels** fields to filter strings, including or excluding them in the generated bundle. Read more about [Labels](/strings-management#labels).
 
       7. Select the file format you'd like your strings to be exported in. To add other formats, install the respective applications from our [Store](https://store.crowdin.com/tags/string-exporter).
 
-      8. (Optional) If a bundle file format has a <Icon name="mdi:cog" class="inline-icon" /> icon, it indicates that it has additional options (e.g., **Copy source to empty target** and **Export Translator’s Comments** for XLIFF (system), **Convert placeholders to target file format** for Android XML (system), etc.) you may use when setting up your bundle. Click the <Icon name="mdi:cog" class="inline-icon" /> icon on a selected bundle file format and configure it according to your preferences. ![Configure Bundle File Format](./_assets/bundles_configure_format.png)
+      8. *(Optional)* If a bundle file format has a <Icon name="mdi:cog" class="inline-icon" /> icon, it indicates that it has additional options (e.g., **Copy source to empty target** and **Export Translator’s Comments** for XLIFF (system), **Convert placeholders to target file format** for Android XML (system), etc.) you may use when setting up your bundle. Click the <Icon name="mdi:cog" class="inline-icon" /> icon on a selected bundle file format and configure it according to your preferences. <Image src={configureFormat} alt="Configure Bundle File Format" class="dialog"/>
 
       9. Click **Save**. ![Create Bundle](./_assets/bundles_create_bundle.png)
     </Steps>
@@ -73,14 +93,13 @@ To configure a bundle, follow these steps:
 
       4. Specify the source branches and resulting file paths. If needed, you can add multiple source branch path patterns using <Icon name="mdi:plus" class="inline-icon" />. In the right panel, you can preview the source branches and structure of the translation files based on the specified paths.
 
-      5. (Optional) To ignore some branches, click **Add ignored pattern**, specify their respective pattern, and Crowdin will skip these specific branches during the bundle generation. If needed, you can add multiple ignore patterns using <Icon name="mdi:plus" class="inline-icon"/>.
+      5. *(Optional)* To ignore some branches, click **Add ignored pattern**, specify their respective pattern, and Crowdin will skip these specific branches during the bundle generation. If needed, you can add multiple ignore patterns using <Icon name="mdi:plus" class="inline-icon"/>.
 
-      6. (Optional) You can specify labels in the **Filter by labels** and **Exclude by labels** fields to filter strings, including or excluding them in the generated bundle.
+      6. *(Optional)* You can specify labels in the **Filter by labels** and **Exclude by labels** fields to filter strings, including or excluding them in the generated bundle.
 
       7. Select the file format you'd like your strings to be exported in. To add other formats, install the respective applications from our [Store](https://store.crowdin.com/tags/string-exporter).
 
-      8. (Optional) If a bundle file format has a <Icon name="mdi:cog" class="inline-icon" /> icon, it indicates that it has additional options (e.g., **Copy source to empty target** and **Export Translator’s Comments** for XLIFF (system), **Convert placeholders to target file format** for Android XML (system), etc.) you may use when setting up your bundle. Click the <Icon name="mdi:cog" class="inline-icon" /> icon on a selected bundle file format and configure it according to your preferences.
-      ![Configure Bundle File Format](./_assets/bundles_configure_format.png)
+      8. *(Optional)* If a bundle file format has a <Icon name="mdi:cog" class="inline-icon" /> icon, it indicates that it has additional options (e.g., **Copy source to empty target** and **Export Translator’s Comments** for XLIFF (system), **Convert placeholders to target file format** for Android XML (system), etc.) you may use when setting up your bundle. Click the <Icon name="mdi:cog" class="inline-icon" /> icon on a selected bundle file format and configure it according to your preferences. <Image src={configureFormat} alt="Configure Bundle File Format" class="dialog"/>
 
       9. Click **Save**. ![Create Bundle](./_assets/bundles_create_bundle_sb.png)
     </Steps>
@@ -230,7 +249,7 @@ To add a distribution that exports translations using bundles, follow these step
 
       6. Select the needed bundles from the list or click **Create new** to create one from scratch.
 
-      7. Once you've selected all the needed bundles in the **Add distribution** dialog, click **Next**. ![OTA Content Delivery Bundles](./_assets/bundles_content_delivery.png)
+      7. Once you've selected all the needed bundles in the **Add distribution** dialog, click **Next**. <Image src={contentDelivery} alt="Configure Bundle File Format" class="dialog"/>
 
       8. Copy the distribution hash so you can use it for integration.
     </Steps>
@@ -247,7 +266,7 @@ To add a distribution that exports translations using bundles, follow these step
 
       5. Select the needed bundles from the list or click **Create new** to create one from scratch.
 
-      6. Once you've selected all the needed bundles in the **Add distribution** dialog, click **Next**. ![OTA Content Delivery Bundles](./_assets/bundles_content_delivery_sb.png)
+      6. Once you've selected all the needed bundles in the **Add distribution** dialog, click **Next**. <Image src={contentDeliverySB} alt="Configure Bundle File Format" class="dialog"/>
 
       7. Copy the distribution hash so you can use it for integration.
     </Steps>

src/content/docs/crowdin/project-management/translations/downloading-translations.mdx

@@ -5,4 +5,143 @@ sidebar:
   order: 0
 ---
 
-https://support.crowdin.com/downloading-translations/ + https://support.crowdin.com/downloading-translations-sb/
+[//]: # (https://support.crowdin.com/downloading-translations/ + https://support.crowdin.com/downloading-translations-sb/)
+
+import { Steps, Aside, Tabs, TabItem } from '@astrojs/starlight/components';
+import { Icon } from 'astro-icon/components';
+import ReadMore from '~/components/ReadMore.astro';
+
+You can download translations from your Crowdin project using and combining various options listed below:
+
+🌐 Download translations via Web UI:
+* [Translation ZIP archive for a whole project](#project-translation-download)
+* [Translation ZIP archive for separate languages](#language-translation-download)
+* [Translations in original format for separate files](#file-translation-download)
+
+📦 [Target File Bundles](#target-file-bundles)
+
+☁️ [Over-The-Air Content Delivery](#over-the-air-content-delivery)
+
+💻 [Console Client (CLI)](https://crowdin.github.io/crowdin-cli/)
+
+🔗 [API](https://developer.crowdin.com/api/v2/)
+
+🧩 Integrations ([GitHub](/github-integration), [GitLab](/gitlab-integration), [Bitbucket](/bitbucket-integration), [Azure Repos](/azure-repos-integration), and [many more](https://store.crowdin.com/)).
+
+👁️ [Preview translations](#preview-translations) for a whole project:
+* Download as CSV – download all project translations in a single CSV file.
+* Download as XLSX – download all project translations in a single XLSX file.
+* Preview in Browser – preview all project translations in a convenient table view.
+
+## Project Translation Download
+
+To download translations for the whole project, follow these steps:
+
+<Steps>
+  1. Open your project and go to the **Translations** tab.
+
+  2. Click **Download as ZIP** to expand the respective section.
+
+  3. Click **Build & Download**. ![Build project](./_assets/build_project.png)
+</Steps>
+
+<Aside>
+  Translations will be downloaded according to the [export settings](/project-settings/export) configured in the project's **Settings > Export**.
+</Aside>
+
+By default, the downloaded ZIP archive contains separate folders for each language. These folders are named with the corresponding [Language Codes](https://developer.crowdin.com/language-codes/).
+
+<Aside type="caution">
+  Project Translation Download is only available for [file-based](/creating-project#project-types) projects.
+</Aside>
+
+## Language Translation Download
+
+To download translations for a separate target language, follow these steps:
+
+<Steps>
+  1. Open your project and go to the **Translations** tab.
+
+  2. Click **Download as ZIP** to expand the respective section.
+
+  3. Select the needed language from the drop-down menu.
+
+  4. Click **Build & Download**. ![Build project](./_assets/build_project.png)
+</Steps>
+
+Alternatively, you can also do this in the **Dashboard** tab:
+
+<Steps>
+  1. Open your project and go to the **Dashboard** tab.
+
+  2. Click on the drop-down toggle toward the needed language to open language details.
+
+  3. Click **Download**. ![Download Language](./_assets/download_language.png)
+</Steps>
+
+<Aside type="caution">
+  Language Translation Download is only available for [file-based](/creating-project#project-types) projects.
+</Aside>
+
+## File Translation Download
+
+You can download translations for a separate file either on the language page or in the Editor. To download translations for a separate file on the language page, follow these steps:
+
+<Steps>
+  1. Open your project and select the target language.
+
+  2. Click <Icon name="mdi:dots-horizontal" class="inline-icon" /> toward the needed file.
+
+  3. Select **Download**. ![Download File on Language Page](./_assets/download_file_language_page.png)
+</Steps>
+
+To download translations for a separate file in the [Editor](/online-editor), follow these steps:
+
+<Steps>
+  1. Open your project and select the target language.
+
+  2. Click on the needed file to open it in the Editor.
+
+  3. Click on the Main menu <Icon name="mdi:menu" class="inline-icon"/> in the upper-left corner.
+
+  4. Select **Download**. ![Download File Translations in Editor](./_assets/download_file_editor.png)
+</Steps>
+
+<Aside type="tip">
+  You can use the keyboard shortcut to download translations for a file (by default, <kbd>Ctrl</kbd>+<kbd>S</kbd> or <kbd>⌘</kbd>+<kbd>S</kbd>).
+</Aside>
+
+<Aside type="caution">
+  File Translation Download is only available for [file-based](/creating-project#project-types) projects.
+</Aside>
+
+## Target File Bundles
+
+The Target File Bundles section allows you to manage bundles for exporting sets of strings in one of the selected formats.
+
+<ReadMore>
+  Read more about [configuring bundles](/bundles#managing-bundles-in-ui).
+</ReadMore>
+
+## Over-The-Air Content Delivery
+
+The Over-The-Air Content Delivery section allows you to set up and manage instant translation delivery to your mobile (iOS, Android), server, web, or desktop apps via CDN.
+
+<ReadMore>
+  Read more about [Content Delivery](/content-delivery).
+</ReadMore>
+
+## Preview Translations
+
+To preview translations for a whole project, follow these steps:
+
+<Steps>
+  1. Open your project and go to the **Translations** tab.
+
+  2. Choose one of the available options in the **Preview translations** section:
+     * **CSV** &ndash; download all project translations in a single CSV file.
+     * **XLSX** &ndash; download all project translations in a single XLSX file.
+     * **Preview in Browser** &ndash; preview all project translations in a convenient table view.
+</Steps>
+
+![Preview Translations](./_assets/preview_translations.png)

src/content/docs/crowdin/project-management/sources/uploading-translations.mdx → src/content/docs/crowdin/project-management/translations/uploading-translations.mdx

@@ -29,13 +29,11 @@ To upload translations to your project, follow these steps:
   <TabItem label="File-based project">
     1. Open your project and go to the **Translations** tab.
 
-    2. Click **Upload existing translations** to expand the respective section.
-       ![](./_assets/upload_translations.png)
+    2. Click **Upload existing translations** to expand the respective section. ![Upload Translations](./_assets/upload_translations.png)
 
     3. Drag and drop files from your machine, or click **Select Files**. You can upload ZIP archives to add multiple folders and files.
 
-    4. Crowdin automatically matches uploaded translations with appropriate source files and languages. Check it manually to make sure everything is matched correctly.
-       ![](./_assets/upload_translations_2.png)
+    4. Crowdin automatically matches uploaded translations with appropriate source files and languages. Check it manually to make sure everything is matched correctly. ![Match Files](./_assets/upload_translations_2.png)
 
     5. (Optional) Click the <Icon name="mdi:cog" class="inline-icon"/> button under the uploaded file list to view the advanced import settings.
 
@@ -59,8 +57,7 @@ To upload translations to your project, follow these steps:
 
     4. (Optional) In the **Translations** section, to the right of the uploaded file list, configure advanced translation import settings.
 
-    5. Click **Upload** to apply translations to the source strings.
-       ![](./_assets/upload_translations_sb.png)
+    5. Click **Upload** to apply translations to the source strings. ![Upload Translations](./_assets/upload_translations_sb.png)
 
        <Aside>
          By default, translations are uploaded as unapproved, translations that match the source strings, and translations for hidden strings are skipped during the upload.
@@ -78,16 +75,14 @@ To upload XLIFF translations for a specific target language, follow these steps:
   <TabItem label="File-based project">
     1. Select the language on the project page.
 
-    2. Click <Icon name="heroicons:arrows-up-down-solid" class="inline-icon"/> and select **Upload XLIFF Translations**.
-       ![](./_assets/upload_translations_xliff.png)
+    2. Click <Icon name="heroicons:arrows-up-down-solid" class="inline-icon"/> and select **Upload XLIFF Translations**. ![Upload Translations XLIFF](./_assets/upload_translations_xliff.png)
   </TabItem>
   <TabItem label="String-based project">
     1. Select the language on the project page to open it in the Editor.
 
     2. Click on the Main menu <Icon name="mdi:menu" class="inline-icon"/> in the upper-left corner.
 
-    3. Go to **File > Upload Translations**.
-       ![](./_assets/upload_translations_xliff_sb.png)
+    3. Go to **File > Upload Translations**. ![Upload Translations XLIFF](./_assets/upload_translations_xliff_sb.png)
   </TabItem>
 </Tabs>
 

src/global.css

@@ -8,19 +8,24 @@
     }
 }
 
-/* Style for Markdown images */
-.sl-markdown-content img:not(.no-shadow) {
-    border-radius: 10px;
-    border: 1px solid var(--sl-color-gray-6);
-    box-shadow: var(--sl-shadow-sm);
-    margin-top: 0.5rem;
-}
+.sl-markdown-content {
+    img:not(.no-shadow) {
+        border-radius: 10px;
+        border: 1px solid var(--sl-color-gray-6);
+        box-shadow: var(--sl-shadow-sm);
+        margin-top: 0.5rem;
+    }
 
-.sl-markdown-content .inline-icon {
-    display: inline;
-    margin: 0 0.25rem;
-}
+    .inline-icon {
+        display: inline;
+        margin: 0 0.25rem;
+    }
 
-.sl-markdown-content starlight-tabs {
-    margin-top: 2rem !important;
+    .dialog {
+        max-width: 26rem;
+    }
+
+    starlight-tabs {
+        margin-top: 2rem !important;
+    }
 }