fix: design article page (#488)

dgaponov · web-flow · commit 8447ab5853ca · 2025-10-10T11:22:22.000+03:00
diff --git a/.github/workflows/update-packages-readme.yml b/.github/workflows/update-packages-readme.yml
@@ -36,6 +36,11 @@ jobs:
           MODIFIED_README_FILES=$(git diff --name-only | grep -E 'src/content/local-docs/libs/.*/README\.md$' || echo "")
           echo "modified_readme_files=$(echo "$MODIFIED_README_FILES" | tr '\n' ',' | sed 's/,$//')" >> $GITHUB_OUTPUT
 
+          if [ -z "$MODIFIED_README_FILES" ]; then
+            echo "No README files changed — skipping commit and PR creation."
+            exit 0
+          fi
+
           git config user.email ""
           git config user.name "Update packages readme action"
           git checkout -b update-packages-readme
@@ -52,6 +57,7 @@ jobs:
   prepare-inputs:
     needs: update-packages-readme
     runs-on: ubuntu-latest
+    if: ${{ needs.update-packages-readme.outputs.pr_number != '' && needs.update-packages-readme.outputs.pr_number != null }}
     outputs:
       modified_library_readmes: ${{ steps.get-modified-files.outputs.modified_library_readmes }}
     steps:
@@ -80,6 +86,7 @@ jobs:
       - update-packages-readme
       - prepare-inputs
     runs-on: ubuntu-latest
+    if: ${{ needs.update-packages-readme.outputs.pr_number != '' && needs.update-packages-readme.outputs.pr_number != null }}
     strategy:
       max-parallel: 1
       matrix:
@@ -123,7 +130,6 @@ jobs:
           prompt: |
             Please translate the README source file to {targetLanguage}. \
             Make the translation sound as natural as possible. \
-            Keep the HTML snippet with the language options in the same place as in the source file. \
             Do not translate the first line in the source file if it looks like the name of the library. \
             For example, don't translate @gravity/uikit or Axios Wrapper - they need to be left in place. \
             Don't add html snippet with language options to the output. \
@@ -134,6 +140,7 @@ jobs:
       - update-packages-readme
       - translations
     runs-on: ubuntu-latest
+    if: ${{ needs.update-packages-readme.outputs.pr_number != '' && needs.update-packages-readme.outputs.pr_number != null }}
     steps:
       - uses: actions/checkout@v4
         with:
diff --git a/.github/workflows/update-translations.yml b/.github/workflows/update-translations.yml
@@ -1,6 +1,10 @@
 name: Update translations
 
 on:
+  push:
+    branches: [main]
+    paths:
+      - 'public/locales/en/**'
   workflow_dispatch:
 
 permissions: write-all
@@ -16,23 +20,76 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          fetch-depth: 0
+          fetch-depth: 2
       - name: Extract namespaces
         id: extract-namespaces
+        env:
+          EVENT_NAME: ${{ github.event_name }}
         run: |
-          FILES=$(ls public/locales/en/ | sed 's/\.json$//')
-          NAMESPACES_ARRAY=$(echo "$FILES" | jq -R -s -c 'split("\n") | map(select(length > 0))')
+          if [[ "$EVENT_NAME" == "push" ]]; then
+            MODIFIED_FILES=$(git diff --name-only HEAD^ HEAD | grep -E 'public/locales/en/.+\.json$' || echo "")
+            NAMESPACES_ARRAY=$(echo "$MODIFIED_FILES" | awk 'NF' | jq -R -c -s '
+              split("\n") |
+              map(select(length > 0)) |
+              map(capture("public/locales/en/(?<namespace>[^/]+)\\.json").namespace)
+            ')
+          else
+            FILES=$(ls public/locales/en/ | sed 's/\.json$//')
+            NAMESPACES_ARRAY=$(echo "$FILES" | jq -R -s -c 'split("\n") | map(select(length > 0))')
+          fi
+
           echo "namespaces=$NAMESPACES_ARRAY" >> $GITHUB_OUTPUT
 
-  translations:
+  create-pr:
+    permissions:
+      pull-requests: write
+      contents: write
+    runs-on: ubuntu-latest
     needs: prepare-inputs
+    if: ${{ fromJson(needs.prepare-inputs.outputs.namespaces)[0] != null }}
+    outputs:
+      pr_number: ${{ steps.create-pr.outputs.pr_number }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - name: Create pull request
+        id: create-pr
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          echo "temporary file" > temporary-file.txt
+
+          git config user.email ""
+          git config user.name "Update translations action"
+          git checkout -b update-translations
+          git add temporary-file.txt
+
+          export COMMIT_MESSAGE="initial commit"
+          git commit -m "$COMMIT_MESSAGE"
+          git push --set-upstream origin update-translations --force
+          gh pr create --title "i18n: update translations" --body "" -a "dgaponov" -a "imsitnikov" -a "vvtimofeev" 2>/dev/null || true
+          PR_NUMBER=$(gh pr view --json number -q ".number")
+
+          echo "pr_number=$PR_NUMBER" >> $GITHUB_OUTPUT
+
+  translations:
+    needs:
+      - prepare-inputs
+      - create-pr
     runs-on: ubuntu-latest
+    if: ${{ fromJson(needs.prepare-inputs.outputs.namespaces)[0] != null }}
     strategy:
+      max-parallel: 1
       matrix:
         namespace: ${{ fromJson(needs.prepare-inputs.outputs.namespaces) }}
     steps:
       - uses: actions/checkout@v4
         with:
+          ref: refs/pull/${{ needs.create-pr.outputs.pr_number }}/head
           fetch-depth: 0
       - name: Prepare inputs for ${{ matrix.namespace }}
         id: prepare-inputs
@@ -64,7 +121,7 @@ jobs:
           outputFiles: ${{ steps.prepare-inputs.outputs.output_files }}
           languages: ${{ env.LANGUAGES }}
           commitMessage: 'i18n: translations for namespace ${{ matrix.namespace }}'
-          pullRequestTitle: 'i18n: translations for namespace ${{ matrix.namespace }}'
+          pullRequestNumber: ${{ needs.create-pr.outputs.pr_number }}
           prompt: |
             Please translate the json source file to {targetLanguage}. \
             Make the translation sound as natural as possible. \
@@ -75,6 +132,35 @@ jobs:
                 "actions_openInFigma": "Open in Figma",
                 "title": "Components",
             } \
-            Return only the json, no other text. Remove formatting like markdown ```json```. \
+            Return only the json, no other text. \
+            Remove formatting like markdown ```json```. \
+            Do NOT add ``` tags to the result json. \
             Do not translate the library name in the source file if it looks like the name of the library (the exception is Themer, it can be translated). \
             For example, don't translate @gravity/uikit or Axios Wrapper - they need to be left in place.
+
+  merge-pr:
+    needs:
+      - create-pr
+      - translations
+    runs-on: ubuntu-latest
+    if: ${{ needs.create-pr.outputs.pr_number != '' && needs.create-pr.outputs.pr_number != null }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: refs/pull/${{ needs.create-pr.outputs.pr_number }}/head
+          fetch-depth: 2
+      - name: Merge PR
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          git checkout update-translations
+          git config user.email ""
+          git config user.name "Update translations action"
+          git checkout -b update-translations
+          rm -rf temporary-file.txt
+          git add .
+
+          export COMMIT_MESSAGE="remove temporary file"
+          git commit -m "$COMMIT_MESSAGE"
+          git push --set-upstream origin update-translations --force
+          gh pr merge ${{ needs.create-pr.outputs.pr_number }} --auto --squash
diff --git a/next-i18next.config.js b/next-i18next.config.js
@@ -5,7 +5,6 @@ module.exports = {
         defaultNS: 'common',
         ignoreJSONStructure: false,
     },
-    aiTranslatedLocales: [],
     routesWithoutRedirect: [
         '/sandbox',
         '/rtl',
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -34,6 +34,9 @@ export type LibData = {
         ru: string;
         es: string;
         zh: string;
+        fr: string;
+        de: string;
+        ko: string;
     };
     changelog: string;
     contributors: Contributor[];
diff --git a/src/components/DesignArticle/DesignArticle.tsx b/src/components/DesignArticle/DesignArticle.tsx
@@ -1,7 +1,7 @@
 import {useTranslation} from 'next-i18next';
 import React from 'react';
 
-import {Article} from '../../content/design/types';
+import {Article, ArticleSupportedLocale} from '../../content/design/types';
 import {useLocale} from '../../hooks/useLocale';
 import {block} from '../../utils';
 import {ArticleNavigation} from '../ArticleNavigation/ArticleNavigation';
@@ -74,14 +74,19 @@ export const DesignArticle: React.FC<DesignArticleProps> = ({article, sectionId,
         return prevSubSection.isComingSoon ? null : prevSubSection;
     }, [currentIndex, currentSection]);
 
+    const articleContent =
+        locale in article.content
+            ? article.content[locale as ArticleSupportedLocale]
+            : article.content.en;
+
     return (
         <div className={b()}>
             <h1 className={b('title')}>
                 {t(`design-articles-info:section_${sectionId}_article_${article.id}_title`)}
             </h1>
             <MDXRenderer
                 key={`${sectionId}-${article.id}-${locale}-article`}
-                text={article.content[locale]}
+                text={articleContent}
             />
             <div className={b('navigation')}>
                 <ArticleNavigation prevSection={prevSection} nextSection={nextSection} />
diff --git a/src/components/Menu/LocalePicker/LocalePicker.tsx b/src/components/Menu/LocalePicker/LocalePicker.tsx
@@ -4,14 +4,14 @@ import React from 'react';
 
 import i18nextConfig from '../../../../next-i18next.config';
 import {NEXT_LOCALE_COOKIE} from '../../../constants';
-import {useLocale} from '../../../hooks/useLocale';
+import {Locale, useLocale} from '../../../hooks/useLocale';
 import {block, setCookie} from '../../../utils';
 
 import './LocalePicker.scss';
 
 const b = block('menu-local-picker');
 
-const FLAGS: Record<string, string> = {
+const FLAGS: Record<Locale, string> = {
     en: 'us',
     ru: 'ru',
     es: 'es',
@@ -31,14 +31,10 @@ export const LocalePicker: React.FC = () => {
         const localeUpperCase = option.value.toUpperCase();
         return (
             <div className={b('locale-item')}>
-                {FLAGS[locale] ? <span className={`fi fi-${FLAGS[locale]}`}></span> : null}
-                <span className={b('locale-code')}>{localeUpperCase}</span>
-                {i18nextConfig.aiTranslatedLocales.includes(locale) ? (
-                    <React.Fragment>
-                        <span className={b('locale-ai-icon')}>✨</span>
-                        <span className={b('locale-ai-label')}>AI</span>
-                    </React.Fragment>
+                {FLAGS[locale as Locale] ? (
+                    <span className={`fi fi-${FLAGS[locale as Locale]}`}></span>
                 ) : null}
+                <span className={b('locale-code')}>{localeUpperCase}</span>
             </div>
         );
     }, []);
diff --git a/src/content/design/types.ts b/src/content/design/types.ts
@@ -1,11 +1,9 @@
+export const ARTICLE_SUPPORTED_LOCALES = ['en', 'ru', 'es', 'zh'] as const;
+export type ArticleSupportedLocale = (typeof ARTICLE_SUPPORTED_LOCALES)[number];
+
 export type Article = {
     id: string;
-    content: {
-        en: string;
-        ru: string;
-        es: string;
-        zh: string;
-    };
+    content: Record<ArticleSupportedLocale, string>;
 };
 
 export type Section = {
diff --git a/src/hooks/useLocale.ts b/src/hooks/useLocale.ts
@@ -2,8 +2,10 @@ import {useRouter} from 'next/router';
 
 import nextI18nextConfig from '../../next-i18next.config';
 
+export type Locale = 'en' | 'ru' | 'es' | 'zh' | 'ko' | 'fr' | 'de';
+
 export const useLocale = () => {
     const {locale} = useRouter();
 
-    return (locale ?? nextI18nextConfig.i18n.defaultLocale) as 'en' | 'ru' | 'es' | 'zh';
+    return (locale ?? nextI18nextConfig.i18n.defaultLocale) as Locale;
 };
