From 24eb181d6de8c5f05b6dc862f0c09fa9f1d89242 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Wed, 15 Feb 2023 20:17:48 +0100
Subject: [PATCH] docs(i18n): include translation status in contributing guide
 (#1734)

Co-authored-by: Michel EDIGHOFFER <edimitchel@gmail.com>
---
 CONTRIBUTING.md                             | 9 ++++++++-
 docs/components/global/TranslationState.vue | 5 +++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 72d04784..7ca369c9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -89,7 +89,14 @@ We've added some `UnoCSS` utilities styles to help you with that:
 
 ## Internationalization
 
-We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://i18n.nuxtjs.org/) to handle internationalization.
+We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://v8.i18n.nuxtjs.org/) to handle internationalization.
+
+You can check current [translation status](https://docs.elk.zone/docs/guide/contributing#translation-status): more instructions on table caption.
+
+If you are updating a translation in your local environment, you can run the following commands to check the status:
+- from root folder: `nr prepare-translation-status`
+- change to `docs` folder and run docs dev server `nr dev`
+- open `http://localhost:3000/docs/guide/contributing#translation-status` in your browser
 
 ### Adding a new language
 
diff --git a/docs/components/global/TranslationState.vue b/docs/components/global/TranslationState.vue
index 7df72efd..55ae0cba 100644
--- a/docs/components/global/TranslationState.vue
+++ b/docs/components/global/TranslationState.vue
@@ -78,11 +78,15 @@ const copyToClipboard = async () => {
         <div>
           If you want to send a PR, click on <strong>Edit</strong> link on the corresponding translation file, it will open <strong>Codeflow</strong>:
           <NuxtLink
+            class="inline"
             target="_blank"
             href="https://developer.stackblitz.com/codeflow/working-in-codeflow-ide#making-a-pr-with-codeflow-ide"
             title="How to make a PR with Codeflow IDE (opens in new window)"
           >
             read the following guide
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h7v2H5v14h14v-7h2v7q0 .825-.587 1.413Q19.825 21 19 21Zm4.7-5.3l-1.4-1.4L17.6 5H14V3h7v7h-2V6.4Z" />
+            </svg>
           </NuxtLink>
         </div>
       </caption>
@@ -239,6 +243,7 @@ tr.expandable, tr.expandable td {
 }
 
 a.codeflow,
+a.inline,
 td.expandable div {
   display: flex;
   align-items: center;