Skip to content

Commit

Permalink
feat: Add Translation (#8)
Browse files Browse the repository at this point in the history
* feat: add inlang

* feat: add script to add translations inline

* feat: add workflow to push inline localization

* fix: correct branch name

* fix: workflow condition

* feat: add push event to inline localization

* fix: naming

* feat: remove localization form top-announcement banner

* Apply automatic changes

* improvement: better automated commit message

* test: remove localization

* Add inline translations

* Add inline translations

* feat: add fake banner

* fix: translation key

* feat: add swap banners translations

* Add inline translations

* feat: replace headers and subheaders with translations keys

* feat: make swap rotating banner properties camelCase

* feat: inline-translations in json file

* Add inline translations

* improvement: remove localizations folder

* improvement: remove unused command

* improvement: readme

* Add inline translations

* improvement: re-add top announcement banner test

* Add inline translations

* feat: do not overwrite existing properties

* Add inline translations

* feat: do not create localization object automatically

---------

Co-authored-by: JoseRFelix <[email protected]>
  • Loading branch information
JoseRFelix and JoseRFelix authored Jan 9, 2024
1 parent 473a360 commit ff74647
Show file tree
Hide file tree
Showing 12 changed files with 551 additions and 126 deletions.
34 changes: 34 additions & 0 deletions .github/workflows/push-localization.yml
Original file line number Diff line number Diff line change
@@ -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"
2 changes: 1 addition & 1 deletion .github/workflows/validate-cms.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
node_modules
node_modules
project.inlang/.cache
17 changes: 17 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -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`.
File renamed without changes.
244 changes: 207 additions & 37 deletions cms/swap-rotating-banner.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "圖表在點背景上呈指數增長到右上角"
}
}
}
50 changes: 49 additions & 1 deletion cms/top-announcement-banner.json
Original file line number Diff line number Diff line change
@@ -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": "點這裡了解更多。" }
}
}
Loading

0 comments on commit ff74647

Please sign in to comment.