From c13159df02ddb43649e3c85d3c11f4175caebc35 Mon Sep 17 00:00:00 2001 From: Diogo Silva Date: Wed, 12 Sep 2018 16:14:15 +0100 Subject: [PATCH] feat: add i18n --- add-on/_locales/en/messages.json | 34 ++++++++++++++ add-on/src/landing-pages/welcome/page.js | 15 +++--- add-on/src/utils/i18n.js | 59 ++++++++++++++++++++++++ 3 files changed, 101 insertions(+), 7 deletions(-) create mode 100644 add-on/src/utils/i18n.js diff --git a/add-on/_locales/en/messages.json b/add-on/_locales/en/messages.json index 494c044d5..ea937c2b9 100644 --- a/add-on/_locales/en/messages.json +++ b/add-on/_locales/en/messages.json @@ -459,10 +459,28 @@ "message": "You are all set!", "description": "Ready message title (page_landingWelcome_renderWelcome_title)" }, + "page_landingWelcome_renderWelcome_copy_peers": { + "message": "Right now your node is connected to $PEERS$ peers.", + "description": "Ready message copy (page_landingWelcome_renderWelcome_copy_peers)", + "placeholders": { + "peers": { + "content": "$1", + "example": "350" + } + } + }, + "page_landingWelcome_renderWelcome_copy_discover": { + "message": "Discover what you can do with Companion and dive into the distributed web with IPFS!", + "description": "Ready message copy (page_landingWelcome_renderWelcome_copy_discover)" + }, "page_landingWelcome_installSteps_title": { "message": "Is your IPFS daemon running?", "description": "Install steps title (page_landingWelcome_installSteps_title)" }, + "page_landingWelcome_installSteps_copy_install": { + "message": "If you haven't installed IPFS please do so with these instructions.", + "description": "Install steps copy (page_landingWelcome_installSteps_copy_install)" + }, "page_landingWelcome_installSteps_copy_run": { "message": "Then make sure to have an IPFS daemon running in your terminal:", "description": "Install steps run message (page_landingWelcome_installSteps_copy_run)" @@ -471,18 +489,34 @@ "message": "New to IPFS?", "description": "Resources title (page_landingWelcome_renderResources_title_new_ipfs)" }, + "page_landingWelcome_renderResources_copy_new_ipfs": { + "message": "Read the documentation to learn about the basic concepts and working with IPFS.", + "description": "Resources copy (page_landingWelcome_renderResources_copy_new_ipfs)" + }, "page_landingWelcome_renderResources_title_discover": { "message": "Discover!", "description": "Resources title (page_landingWelcome_renderResources_title_discover)" }, + "page_landingWelcome_renderResources_copy_discover": { + "message": "Find useful resources for using IPFS and building things on top of it.", + "description": "Resources copy (page_landingWelcome_renderResources_copy_discover)" + }, "page_landingWelcome_renderResources_title_got_questions": { "message": "Got questions?", "description": "Resources title (page_landingWelcome_renderResources_title_got_questions)" }, + "page_landingWelcome_renderResources_copy_got_questions": { + "message": "Visit the Discussion and Support Forum.", + "description": "Resources copy (page_landingWelcome_renderResources_copy_got_questions)" + }, "page_landingWelcome_renderResources_title_want_to_help": { "message": "Want to help?", "description": "Resources title (page_landingWelcome_renderResources_title_want_to_help)" }, + "page_landingWelcome_renderResources_copy_want_to_help": { + "message": "Join the IPFS Community! Contribute with code, documentation, translations or help by supporting other users.", + "description": "Resources copy (page_landingWelcome_renderResources_copy_want_to_help)" + }, "page_landingWelcome_renderVideos_alpha_demo": { "message": "IPFS Alpha Demo", "description": "Videos section title (page_landingWelcome_renderVideos_alpha_demo)" diff --git a/add-on/src/landing-pages/welcome/page.js b/add-on/src/landing-pages/welcome/page.js index f456703d8..3eac17ccb 100644 --- a/add-on/src/landing-pages/welcome/page.js +++ b/add-on/src/landing-pages/welcome/page.js @@ -2,6 +2,7 @@ const html = require('choo/html') const logo = require('../../popup/logo') +const { renderTranslatedLink, renderTranslatedDynamicSpan } = require('../../utils/i18n') // Assets const libp2pLogo = '../../../images/libp2p.svg' @@ -77,8 +78,8 @@ const renderWelcome = (i18n, peerCount) => { ${checkmarkSvg()}

${i18n.getMessage('page_landingWelcome_renderWelcome_title')}

-

Right now your node is connected to ${peerCount} peers.

-

Discover what you can do with Companion and dive into the distributed web with IPFS!

+

${renderTranslatedDynamicSpan('page_landingWelcome_renderWelcome_copy_peers', peerCount, 'class="aqua fw6"')}

+

${renderTranslatedLink('page_landingWelcome_renderWelcome_copy_discover', ['https://github.com/ipfs-shipyard/ipfs-companion#features'], `target="_blank" class="${anchorClass}"`)}

` } @@ -90,7 +91,7 @@ const renderInstallSteps = (i18n) => { return html`

${i18n.getMessage('page_landingWelcome_installSteps_title')}

-

If you haven't installed IPFS please do so with these instructions.

+

${renderTranslatedLink('page_landingWelcome_installSteps_copy_install', ['https://docs.ipfs.io/introduction/install/'], `target="_blank" class="${anchorClass}"`)}

${i18n.getMessage('page_landingWelcome_installSteps_copy_run')}

$ ipfs daemon @@ -113,16 +114,16 @@ const renderResources = (i18n) => { return html`

${i18n.getMessage('page_landingWelcome_renderResources_title_new_ipfs')}

-

Read the documentation to learn about the basic concepts and working with IPFS.

+

${renderTranslatedLink('page_landingWelcome_renderResources_copy_new_ipfs', ['https://docs.ipfs.io', 'https://docs.ipfs.io/guides/concepts'], `target="_blank" class="${anchorClass}"`)}

${i18n.getMessage('page_landingWelcome_renderResources_title_discover')}

-

Find useful resources for using IPFS and building things on top of it.

+

${renderTranslatedLink('page_landingWelcome_renderResources_copy_discover', ['https://awesome.ipfs.io', 'https://github.com/ipfs/ipfs#project-links'], `target="_blank" class="${anchorClass}"`)}

${i18n.getMessage('page_landingWelcome_renderResources_title_got_questions')}

-

Visit the Discussion and Support Forum.

+

${renderTranslatedLink('page_landingWelcome_renderResources_copy_got_questions', ['https://discuss.ipfs.io'], `target="_blank" class="${anchorClass}"`)}

${i18n.getMessage('page_landingWelcome_renderResources_title_want_to_help')}

-

Join the IPFS Community! Contribute code, documentation, translations or help by supporting other users.

+

${renderTranslatedLink('page_landingWelcome_renderResources_copy_want_to_help', ['https://github.com/ipfs/community/#community', 'https://github.com/ipfs/ipfs#project-links', 'https://github.com/ipfs/docs', 'https://www.transifex.com/ipfs/public', 'https://discuss.ipfs.io/c/help'], `target="_blank" class="${anchorClass}"`)}

` } diff --git a/add-on/src/utils/i18n.js b/add-on/src/utils/i18n.js new file mode 100644 index 000000000..6a3023c21 --- /dev/null +++ b/add-on/src/utils/i18n.js @@ -0,0 +1,59 @@ +'use strict' +/* eslint-env browser, webextensions */ + +const browser = require('webextension-polyfill') + +/** + * Renders a translated string with html anchors. + * @param {String} message The message to translate. + * @param {Array} links The array of hrefs. + * @param {Object} attributes HTML attributes to put in the anchor. + * @return {html} An HTML node with the translated string with anchors. + */ +const renderTranslatedLink = (message, links, attributes) => { + const regex = /(.+?)<\/a>/mg + const str = browser.i18n.getMessage(message) + let match = regex.exec(str) + + let output = str + let i = 0 + while (match !== null) { + output = output.replace(match[0], `${match[1]}`) + match = regex.exec(str) + i++ + } + + const template = document.createElement('template') + template.innerHTML = output + + return template.content +} + +/** + * Renders a translated string with html spans. + * @param {String} message - The message to translate. + * @param {String} dynamicData - The dynamic data in the translation. + * @param {Object} attributes HTML attributes to put in the anchor. + * @return {html} An HTML node with the translated string with spans. + */ +const renderTranslatedDynamicSpan = (message, dynamicData, attributes) => { + const regex = /<\/span>/mg + const str = browser.i18n.getMessage(message) + let match = regex.exec(str) + + let output = str + while (match !== null) { + output = output.replace(match[0], `${dynamicData}`) + match = regex.exec(str) + } + + const template = document.createElement('template') + template.innerHTML = output + + return template.content +} + +module.exports = { + renderTranslatedLink, + renderTranslatedDynamicSpan +}