feat: Add Translation

.github/workflows/push-localization.yml

@@ -0,0 +1,34 @@
+name: Push a new commit with inline translations on cms files
+
+on:
+  push:
+  pull_request:
+    branches-ignore:
+      - main
+
+jobs:
+  commit-inline-translations:
+    runs-on: ubuntu-latest
+
+    permissions:
+      # Give the default GITHUB_TOKEN write permission to commit and push the
+      # added or changed files to the repository.
+      contents: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "20.x"
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Add inline translations
+        run: yarn inline-translations
+
+      - uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: "Add inline translations"

.github/workflows/validate-cms.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Use Node.js
         uses: actions/setup-node@v2

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+project.inlang/.cache

README.md

@@ -0,0 +1,17 @@
+### FE Content
+
+This repository serves as a Content Management System (CMS) for the [Osmosis Frontend](https://github.com/osmosis-labs/osmosis-frontend).
+
+#### Translation
+
+The content in this repository is available in various languages, with translations automatically handled by inlang. Follow these steps to translate content:
+
+1. Add an English translation in the CMS file under the localization property by inserting an "en" key.
+   Example:
+   ```json
+   "localization": {
+       "en": {}
+   }
+   ```
+2. After committing and pushing changes to a branch, the CI process will automatically add the translations to the same branch.
+3. To manually handle translations, execute the command `yarn inline-translations`.

cms/swap-rotating-banner.json

@@ -3,59 +3,229 @@
   "banners": [
     {
       "name": "milkTIA",
-      "start_date": "2023-12-18T14:30:00.123Z",
-      "end_date": "2024-01-25T14:30:00.123Z",
-      "header": "Got Milk?",
-      "subheader": "$milkTIA now available on Osmosis",
-      "external_url": "/pool/1335",
-      "icon_image_url": "https://raw.githubusercontent.com/osmosis-labs/fe-content/main/images/milkTIA.svg",
-      "icon_image_alt": "milkTIA logo",
+      "startDate": "2023-12-18T14:30:00.123Z",
+      "endDate": "2024-01-25T14:30:00.123Z",
+      "headerOrTranslationKey": "milkHeader",
+      "subheaderOrTranslationKey": "milkSubheader",
+      "externalUrl": "/pool/1335",
+      "iconImageUrl": "https://raw.githubusercontent.com/osmosis-labs/fe-content/main/images/milkTIA.svg",
+      "iconImageAltOrTranslationKey": "milkImageAlt",
       "gradient": "linear-gradient(93.62deg, #F7D1F2 -6.6%, #4B99FC 46.78%, #D3AAFB 105.39%)",
-      "font_color": "#213469",
-      "arrow_color": "#213469",
+      "fontColor": "#213469",
+      "arrowColor": "#213469",
       "featured": true
     },
     {
       "name": "Place limit orders",
-      "start_date": "2023-06-22T14:30:00.123Z",
-      "end_date": "2024-06-22T14:30:00.123Z",
-      "header": "Place limit orders",
-      "subheader": "Experience pro trading with TFM",
-      "external_url": "https://osmosis.tfm.com/",
-      "icon_image_url": "https://raw.githubusercontent.com/osmosis-labs/fe-content/main/images/place-limit-order.svg",
-      "icon_image_alt": "Variable chart decreasing to the lower right, then increasing to the upper right with dollar signs",
+      "startDate": "2023-06-22T14:30:00.123Z",
+      "endDate": "2024-06-22T14:30:00.123Z",
+      "headerOrTranslationKey": "tfmHeader",
+      "subheaderOrTranslationKey": "tfmSubheader",
+      "externalUrl": "https://osmosis.tfm.com/",
+      "iconImageUrl": "https://raw.githubusercontent.com/osmosis-labs/fe-content/main/images/place-limit-order.svg",
+      "iconImageAltOrTranslationKey": "Variable chart decreasing to the lower right, then increasing to the upper right with dollar signs",
       "gradient": "linear-gradient(136deg, #3B154F 0%, #10061C 47.66%, #0E2654 100%)",
-      "font_color": "#E4E1FB",
-      "arrow_color": "#BAF3FF",
+      "fontColor": "#E4E1FB",
+      "arrowColor": "#BAF3FF",
       "featured": true
     },
     {
       "name": "Looking to DCA?",
-      "start_date": "2023-06-22T14:30:00.123Z",
-      "end_date": "2024-06-22T14:30:00.123Z",
-      "header": "Looking to DCA?",
-      "subheader": "Set up recurring swaps with CalcFi",
-      "external_url": "https://app.calculated.fi/create-strategy/dca-in/assets/?chain=Osmosis&utm_source=osmosis_dex",
-      "icon_image_url": "https://raw.githubusercontent.com/osmosis-labs/fe-content/main/images/dollar-cost-averaging.svg",
-      "icon_image_alt": "Chart increasing to the upper right with dollar signs",
+      "startDate": "2023-06-22T14:30:00.123Z",
+      "endDate": "2024-06-22T14:30:00.123Z",
+      "headerOrTranslationKey": "calcFiHeader",
+      "subheaderOrTranslationKey": "calcFiSubheader",
+      "externalUrl": "https://app.calculated.fi/create-strategy/dca-in/assets/?chain=Osmosis&utm_source=osmosis_dex",
+      "iconImageUrl": "https://raw.githubusercontent.com/osmosis-labs/fe-content/main/images/dollar-cost-averaging.svg",
+      "iconImageAltOrTranslationKey": "Chart increasing to the upper right with dollar signs",
       "gradient": "linear-gradient(136deg, #543E17 0%, #161A24 47.66%, #183B5B 100%)",
-      "font_color": "#FFF5C7",
-      "arrow_color": "#EED75F",
+      "fontColor": "#FFF5C7",
+      "arrowColor": "#EED75F",
       "featured": true
     },
     {
       "name": "Margined Protocol",
-      "start_date": "2023-11-10T14:30:00.123Z",
-      "end_date": "2024-11-10T14:30:00.123Z",
-      "header": "Feeling bullish?",
-      "subheader": "Try quadratic leverage on Margined",
-      "external_url": "https://trade.margined.io/",
-      "icon_image_url": "https://raw.githubusercontent.com/osmosis-labs/fe-content/main/images/feeling-bullish.svg",
-      "icon_image_alt": "Chart increasing exponentially to the upper right over a background of dots",
+      "startDate": "2023-11-10T14:30:00.123Z",
+      "endDate": "2024-11-10T14:30:00.123Z",
+      "headerOrTranslationKey": "marginedHeader",
+      "subheaderOrTranslationKey": "marginedSubheader",
+      "externalUrl": "https://trade.margined.io/",
+      "iconImageUrl": "https://raw.githubusercontent.com/osmosis-labs/fe-content/main/images/feeling-bullish.svg",
+      "iconImageAltOrTranslationKey": "Chart increasing exponentially to the upper right over a background of dots",
       "gradient": "linear-gradient(136deg, #020200 0%, #000000 47.66%, #373E24 100%)",
-      "font_color": "#CBFD50",
-      "arrow_color": "#CBFD50",
+      "fontColor": "#CBFD50",
+      "arrowColor": "#CBFD50",
       "featured": true
     }
-  ]
+  ],
+  "localization": {
+    "en": {
+      "milkHeader": "Got Milk?",
+      "milkSubheader": "$milkTIA now available on Osmosis",
+      "milkImageAlt": "milkTIA logo",
+      "tfmHeader": "Place limit orders",
+      "tfmSubheader": "Experience pro trading with TFM",
+      "tfmImageAlt": "Variable chart decreasing to the lower right, then increasing to the upper right with dollar signs",
+      "calcFiHeader": "Looking to DCA?",
+      "calcFiSubheader": "Set up recurring swaps with CalcFi",
+      "calcFiImageAlt": "Chart increasing to the upper right with dollar signs",
+      "marginedHeader": "Feeling bullish?",
+      "marginedSubheader": "Try quadratic leverage on Margined",
+      "marginedImageAlt": "Chart increasing exponentially to the upper right over a background of dots"
+    },
+    "es": {
+      "milkHeader": "¿Tienes leche?",
+      "milkSubheader": "$milkTIA ya disponible en Osmosis",
+      "milkImageAlt": "logotipo de la leche TIA",
+      "tfmHeader": "Realizar órdenes limitadas",
+      "tfmSubheader": "Experimente el comercio profesional con TFM",
+      "tfmImageAlt": "Gráfico de variables que disminuye hacia la parte inferior derecha y luego aumenta hacia la parte superior derecha con signos de dólar",
+      "calcFiHeader": "¿Buscando al DCA?",
+      "calcFiSubheader": "Configure swaps recurrentes con CalcFi",
+      "calcFiImageAlt": "Gráfico que aumenta hacia la parte superior derecha con signos de dólar",
+      "marginedHeader": "¿Te sientes optimista?",
+      "marginedSubheader": "Pruebe el apalancamiento cuadrático en Margined",
+      "marginedImageAlt": "Gráfico que aumenta exponencialmente hacia la esquina superior derecha sobre un fondo de puntos"
+    },
+    "fa": {
+      "milkHeader": "شیر دارید؟",
+      "milkSubheader": "$milkTIA اکنون در Osmosis موجود است",
+      "milkImageAlt": "آرم milkTIA",
+      "tfmHeader": "ثبت سفارشات محدود",
+      "tfmSubheader": "تجارت حرفه ای را با TFM تجربه کنید",
+      "tfmImageAlt": "نمودار متغیر به سمت راست پایین کاهش می یابد، سپس با علائم دلار به سمت راست بالا افزایش می یابد",
+      "calcFiHeader": "به دنبال DCA هستید؟",
+      "calcFiSubheader": "تبادلات مکرر را با CalcFi تنظیم کنید",
+      "calcFiImageAlt": "نمودار به سمت راست بالا با علائم دلار در حال افزایش است",
+      "marginedHeader": "احساس صعود؟",
+      "marginedSubheader": "اهرم درجه دوم را روی Margined امتحان کنید",
+      "marginedImageAlt": "نمودار به صورت تصاعدی به سمت راست بالا در پس زمینه ای از نقاط افزایش می یابد"
+    },
+    "fr": {
+      "milkHeader": "Avoir du lait?",
+      "milkSubheader": "$milkTIA maintenant disponible sur Osmosis",
+      "milkImageAlt": "logo laitTIA",
+      "tfmHeader": "Passer des ordres limités",
+      "tfmSubheader": "Faites l'expérience du trading professionnel avec TFM",
+      "tfmImageAlt": "Graphique variable décroissant vers le bas à droite, puis augmentant vers le haut à droite avec des signes dollar",
+      "calcFiHeader": "Vous envisagez le DCA ?",
+      "calcFiSubheader": "Mettre en place des swaps récurrents avec CalcFi",
+      "calcFiImageAlt": "Graphique croissant vers le coin supérieur droit avec des signes dollar",
+      "marginedHeader": "Vous vous sentez optimiste ?",
+      "marginedSubheader": "Essayez l'effet de levier quadratique sur Margined",
+      "marginedImageAlt": "Graphique augmentant de façon exponentielle vers le coin supérieur droit sur un fond de points"
+    },
+    "ko": {
+      "milkHeader": "우유를 얻었다?",
+      "milkSubheader": "이제 Osmosis에서 $milkTIA를 이용할 수 있습니다.",
+      "milkImageAlt": "우유TIA 로고",
+      "tfmHeader": "지정가 주문하기",
+      "tfmSubheader": "TFM으로 프로 트레이딩을 경험해보세요",
+      "tfmImageAlt": "오른쪽 아래로 감소한 후 달러 기호와 함께 오른쪽 위로 증가하는 가변 차트",
+      "calcFiHeader": "DCA를 찾고 계십니까?",
+      "calcFiSubheader": "CalcFi로 반복 스왑 설정",
+      "calcFiImageAlt": "달러 기호가 있는 오른쪽 상단으로 증가하는 차트",
+      "marginedHeader": "낙관적인 느낌?",
+      "marginedSubheader": "Margined에서 2차 레버리지를 사용해 보세요.",
+      "marginedImageAlt": "점 배경 위에 오른쪽 상단으로 기하급수적으로 증가하는 차트"
+    },
+    "pl": {
+      "milkHeader": "Masz mleko?",
+      "milkSubheader": "$milkTIA jest teraz dostępny na Osmosis",
+      "milkImageAlt": "logo milkTIA",
+      "tfmHeader": "Składaj zamówienia z limitem",
+      "tfmSubheader": "Doświadcz profesjonalnego handlu z TFM",
+      "tfmImageAlt": "Zmienny wykres malejący w prawym dolnym rogu, a następnie rosnący w prawym górnym rogu ze znakami dolara",
+      "calcFiHeader": "Szukasz DCA?",
+      "calcFiSubheader": "Konfiguruj cykliczne wymiany za pomocą CalcFi",
+      "calcFiImageAlt": "Wykres rosnący w prawym górnym rogu ze znakami dolara",
+      "marginedHeader": "Czujesz się uparty?",
+      "marginedSubheader": "Wypróbuj dźwignię kwadratową na Margined",
+      "marginedImageAlt": "Wykres rosnący wykładniczo w prawym górnym rogu na tle kropek"
+    },
+    "pt-br": {
+      "milkHeader": "Tenho leite?",
+      "milkSubheader": "$milkTIA agora disponível em Osmose",
+      "milkImageAlt": "logotipo do leiteTIA",
+      "tfmHeader": "Faça pedidos com limite",
+      "tfmSubheader": "Experimente negociação profissional com TFM",
+      "tfmImageAlt": "Gráfico variável diminuindo para o canto inferior direito e aumentando para o canto superior direito com cifrões",
+      "calcFiHeader": "Olhando para o DCA?",
+      "calcFiSubheader": "Configure swaps recorrentes com CalcFi",
+      "calcFiImageAlt": "Gráfico aumentando para o canto superior direito com cifrões",
+      "marginedHeader": "Sentindo-se otimista?",
+      "marginedSubheader": "Experimente a alavancagem quadrática em Margined",
+      "marginedImageAlt": "Gráfico aumentando exponencialmente no canto superior direito sobre um fundo de pontos"
+    },
+    "ro": {
+      "milkHeader": "Am lapte?",
+      "milkSubheader": "$milkTIA acum disponibil pe Osmosis",
+      "milkImageAlt": "sigla milkTIA",
+      "tfmHeader": "Plasați comenzi limită",
+      "tfmSubheader": "Experiență de tranzacționare profesională cu TFM",
+      "tfmImageAlt": "Graficul variabil scade în dreapta jos, apoi crește în dreapta sus cu semnele dolarului",
+      "calcFiHeader": "Cauți DCA?",
+      "calcFiSubheader": "Configurați schimburi recurente cu CalcFi",
+      "calcFiImageAlt": "Grafic în creștere în dreapta sus cu semnele dolarului",
+      "marginedHeader": "Te simți optimist?",
+      "marginedSubheader": "Încercați pârghia pătratică pe Margined",
+      "marginedImageAlt": "Graficul crește exponențial în dreapta sus pe un fundal de puncte"
+    },
+    "tr": {
+      "milkHeader": "Süt var mı?",
+      "milkSubheader": "$milkTIA artık Osmosis'te mevcut",
+      "milkImageAlt": "sütTIA logosu",
+      "tfmHeader": "Limit emirleri ver",
+      "tfmSubheader": "TFM ile profesyonel ticareti deneyimleyin",
+      "tfmImageAlt": "Dolar işaretleri ile sağ alta doğru azalan, ardından sağ üst tarafa doğru artan değişken grafik",
+      "calcFiHeader": "DCA'yı mı arıyorsunuz?",
+      "calcFiSubheader": "CalcFi ile yinelenen takaslar ayarlayın",
+      "calcFiImageAlt": "Dolar işaretleri ile sağ üste doğru artan grafik",
+      "marginedHeader": "Yükseliş mi hissediyorsunuz?",
+      "marginedSubheader": "Margined'de ikinci dereceden kaldıracı deneyin",
+      "marginedImageAlt": "Noktalardan oluşan bir arka plan üzerinde sağ üste doğru katlanarak artan grafik"
+    },
+    "zh-cn": {
+      "milkHeader": "有牛奶吗？",
+      "milkSubheader": "$milkTIA 现已在 Osmosis 上发售",
+      "milkImageAlt": "牛奶TIA标志",
+      "tfmHeader": "下限价单",
+      "tfmSubheader": "通过 TFM 体验专业交易",
+      "tfmImageAlt": "变量图表向右下方递减，然后以美元符号向右上方递增",
+      "calcFiHeader": "正在寻找 DCA？",
+      "calcFiSubheader": "使用 CalcFi 设置定期交换",
+      "calcFiImageAlt": "图表向右上方增加并带有美元符号",
+      "marginedHeader": "感觉看涨吗？",
+      "marginedSubheader": "尝试在保证金上使用二次杠杆",
+      "marginedImageAlt": "图表在点背景上呈指数增长到右上角"
+    },
+    "zh-hk": {
+      "milkHeader": "有牛奶嗎？",
+      "milkSubheader": "$milkTIA 現已在 Osmosis 上架",
+      "milkImageAlt": "牛奶TIA標誌",
+      "tfmHeader": "下限價單",
+      "tfmSubheader": "透過 TFM 體驗專業交易",
+      "tfmImageAlt": "變數圖表向右下方遞減，然後以美元符號向右上方遞增",
+      "calcFiHeader": "正在尋找 DCA？",
+      "calcFiSubheader": "使用 CalcFi 設定定期交換",
+      "calcFiImageAlt": "圖表向右上方增加並帶有美元符號",
+      "marginedHeader": "感覺看漲嗎？",
+      "marginedSubheader": "試試在保證金上使用二次槓桿",
+      "marginedImageAlt": "圖表在點背景上呈指數增長到右上角"
+    },
+    "zh-tw": {
+      "milkHeader": "有牛奶嗎？",
+      "milkSubheader": "$milkTIA 現已在 Osmosis 上架",
+      "milkImageAlt": "牛奶TIA標誌",
+      "tfmHeader": "下限價單",
+      "tfmSubheader": "透過 TFM 體驗專業交易",
+      "tfmImageAlt": "變數圖表向右下方遞減，然後以美元符號向右上方遞增",
+      "calcFiHeader": "正在尋找 DCA？",
+      "calcFiSubheader": "使用 CalcFi 設定定期交換",
+      "calcFiImageAlt": "圖表向右上方增加並帶有美元符號",
+      "marginedHeader": "感覺看漲嗎？",
+      "marginedSubheader": "試試在保證金上使用二次槓桿",
+      "marginedImageAlt": "圖表在點背景上呈指數增長到右上角"
+    }
+  }
 }

cms/top-announcement-banner.json

@@ -1,5 +1,53 @@
 {
   "$schema": "../schemas/top-announcement-banner.schema.json",
   "isChainHalted": false,
-  "banner": null
+  "banner": {
+    "enTextOrLocalizationPath": "title",
+    "link": {
+      "enTextOrLocalizationKey": "linkLearnMore",
+      "isExternal": true,
+      "url": "https://www.google.com"
+    },
+    "localStorageKey": "top-announcement-banner-test",
+    "startDate": "2024-01-08T00:00:00.000Z",
+    "endDate": "2024-02-01T00:00:00.000Z"
+  },
+  "localization": {
+    "en": { "title": "Testing!", "linkLearnMore": "Click here to learn more." },
+    "es": {
+      "title": "¡Pruebas!",
+      "linkLearnMore": "Clic aquí para saber más."
+    },
+    "fa": {
+      "title": "آزمایش کردن!",
+      "linkLearnMore": "برای اطلاعات بیشتر اینجا کلیک کنید."
+    },
+    "fr": {
+      "title": "Essai!",
+      "linkLearnMore": "Cliquez ici pour en savoir plus."
+    },
+    "ko": {
+      "title": "테스트!",
+      "linkLearnMore": "자세한 내용을 보려면 여기를 클릭하세요."
+    },
+    "pl": {
+      "title": "Testowanie!",
+      "linkLearnMore": "Kliknij tutaj, aby dowiedzieć się więcej."
+    },
+    "pt-br": {
+      "title": "Testando!",
+      "linkLearnMore": "Clique aqui para saber mais."
+    },
+    "ro": {
+      "title": "Testare!",
+      "linkLearnMore": "Apasa aici pentru a afla mai multe."
+    },
+    "tr": {
+      "title": "Test yapmak!",
+      "linkLearnMore": "Daha fazlasını öğrenmek için buraya tıklayın."
+    },
+    "zh-cn": { "title": "测试！", "linkLearnMore": "点击这里了解更多。" },
+    "zh-hk": { "title": "測試！", "linkLearnMore": "點這裡了解更多。" },
+    "zh-tw": { "title": "測試！", "linkLearnMore": "點這裡了解更多。" }
+  }
 }