Merge branch 'update-fe-i18n-guide' into 'master'

Update i18n in FE docs for marking and interpolation

See merge request gitlab-org/gitlab-ce!15020

3 files changed, 39 insertions, 10 deletions

diff --git a/changelogs/unreleased/update-fe-i18n-guide.yml b/changelogs/unreleased/update-fe-i18n-guide.yml
new file mode 100644
index 00000000000..10bcf7836c6
--- /dev/null
+++ b/changelogs/unreleased/update-fe-i18n-guide.yml
@@ -0,0 +1,5 @@
+---
+title: Update i18n section in FE docs for marking and interpolation
+merge_request:
+author:
+type: changed
diff --git a/doc/development/fe_guide/index.md b/doc/development/fe_guide/index.md
index 73366eb9f3f..8f956681693 100644
--- a/doc/development/fe_guide/index.md
+++ b/doc/development/fe_guide/index.md
@@ -106,6 +106,10 @@ Frontend security practices.
 ## [Accessibility](accessibility.md)
 Our accessibility standards and resources.
 
+## [Internationalization (i18n) and Translations](../i18n/externalization.md)
+Frontend internationalization support is described in [this document](../i18n/).
+The [externalization part of the guide](../i18n/externalization.md) explains the helpers/methods available.
+
 
 [rails]: http://rubyonrails.org/
 [haml]: http://haml.info/
diff --git a/doc/development/i18n/externalization.md b/doc/development/i18n/externalization.md
index 167260b6e0e..7c38260406d 100644
--- a/doc/development/i18n/externalization.md
+++ b/doc/development/i18n/externalization.md
@@ -180,15 +180,43 @@ aren't in the message with id `1 pipeline`.
 
 ## Working with special content
 
+
+### Just marking content for parsing
+
+- In Ruby/HAML:
+
+    ```ruby
+    _('Subscribe')
+    ```
+
+- In JavaScript:
+
+    ```js
+    import { __ } from '../../../locale';
+    const label = __('Subscribe');
+    ```
+
+
+Sometimes there are some dynamic translations that can't be found by the
+parser when running `bundle exec rake gettext:find`. For these scenarios you can
+use the [`_N` method](https://github.com/grosser/gettext_i18n_rails/blob/c09e38d481e0899ca7d3fc01786834fa8e7aab97/Readme.md#unfound-translations-with-rake-gettextfind).
+
+There is also and alternative method to [translate messages from validation errors](https://github.com/grosser/gettext_i18n_rails/blob/c09e38d481e0899ca7d3fc01786834fa8e7aab97/Readme.md#option-a).
+
 ### Interpolation
 
 - In Ruby/HAML:
 
     ```ruby
-    _("Hello %{name}") % { name: 'Joe' }
+    _("Hello %{name}") % { name: 'Joe' } => 'Hello Joe'
     ```
 
-- In JavaScript: Not supported at this moment.
+- In JavaScript:
+
+    ```js
+    import { __, sprintf } from '../../../locale';
+    sprintf(__('Hello %{username}'), { username: 'Joe' }) => 'Hello Joe'
+    ```
 
 ### Plurals
 
@@ -234,14 +262,6 @@ Sometimes you need to add some context to the text that you want to translate
     s__('OpenedNDaysAgo|Opened')
     ```
 
-### Just marking content for parsing
-
-Sometimes there are some dynamic translations that can't be found by the
-parser when running `bundle exec rake gettext:find`. For these scenarios you can
-use the [`_N` method](https://github.com/grosser/gettext_i18n_rails/blob/c09e38d481e0899ca7d3fc01786834fa8e7aab97/Readme.md#unfound-translations-with-rake-gettextfind).
-
-There is also and alternative method to [translate messages from validation errors](https://github.com/grosser/gettext_i18n_rails/blob/c09e38d481e0899ca7d3fc01786834fa8e7aab97/Readme.md#option-a).
-
 ## Adding a new language
 
 Let's suppose you want to add translations for a new language, let's say French.