Skip to content

Commit

Permalink
feat: add i18n
Browse files Browse the repository at this point in the history
  • Loading branch information
fsdiogo committed Sep 12, 2018
1 parent 53fd1d9 commit c13159d
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 7 deletions.
34 changes: 34 additions & 0 deletions add-on/_locales/en/messages.json
Original file line number Diff line number Diff line change
Expand Up @@ -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 <span>$PEERS$</span> 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 <a>can do with Companion</a> 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 <a>with these instructions</a>.",
"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)"
Expand All @@ -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 <a>documentation</a> to learn about the basic <a>concepts</a> 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 <a>useful resources</a> for using IPFS and <a>building things</a> 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 <a>Discussion and Support Forum</a>.",
"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 <a>IPFS Community</a>! Contribute with <a>code</a>, <a>documentation</a>, <a>translations</a> or help by <a>supporting other users</a>.",
"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)"
Expand Down
15 changes: 8 additions & 7 deletions add-on/src/landing-pages/welcome/page.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -77,8 +78,8 @@ const renderWelcome = (i18n, peerCount) => {
${checkmarkSvg()}
<p class="mt2 mb0 f3">${i18n.getMessage('page_landingWelcome_renderWelcome_title')}</p>
</div>
<p class="${copyClass}">Right now your node is connected to <span class="aqua fw6">${peerCount}</span> peers.</p>
<p class="${copyClass} mb4">Discover what you <a class="${anchorClass}" href="https://github.com/ipfs-shipyard/ipfs-companion#features" target="_blank">can do with Companion</a> and dive into the distributed web with IPFS!</p>
<p class="${copyClass}">${renderTranslatedDynamicSpan('page_landingWelcome_renderWelcome_copy_peers', peerCount, 'class="aqua fw6"')}</p>
<p class="${copyClass} mb4">${renderTranslatedLink('page_landingWelcome_renderWelcome_copy_discover', ['https://github.com/ipfs-shipyard/ipfs-companion#features'], `target="_blank" class="${anchorClass}"`)}</p>
</div>
`
}
Expand All @@ -90,7 +91,7 @@ const renderInstallSteps = (i18n) => {
return html`
<div class="w-80 mv4 flex flex-column">
<p class="mt0 mb2 yellow f4 lh-title">${i18n.getMessage('page_landingWelcome_installSteps_title')}</p>
<p class="${copyClass}">If you haven't installed IPFS please do so <a class="${anchorClass}" href="https://ipfs.io/docs/getting-started/" target="_blank">with these instructions</a>.</p>
<p class="${copyClass}">${renderTranslatedLink('page_landingWelcome_installSteps_copy_install', ['https://docs.ipfs.io/introduction/install/'], `target="_blank" class="${anchorClass}"`)}</p>
<p class="${copyClass}">${i18n.getMessage('page_landingWelcome_installSteps_copy_run')}</p>
<div className='db w-100 mt3 pa3 bg-black-70 bt bw4 br2 snow f7'>
<code className='db'>$ ipfs daemon</code>
Expand All @@ -113,16 +114,16 @@ const renderResources = (i18n) => {
return html`
<div class="w-80 mv4 navy f5">
<p class="${labelClass}">${i18n.getMessage('page_landingWelcome_renderResources_title_new_ipfs')}</p>
<p class="${copyClass}">Read the <a class="${anchorClass}" href="https://docs.ipfs.io/" target="_blank">documentation</a> to learn about the basic <a class="${anchorClass}" href="https://docs.ipfs.io/guides/concepts" target="_blank">concepts</a> and working with IPFS.</p>
<p class="${copyClass}">${renderTranslatedLink('page_landingWelcome_renderResources_copy_new_ipfs', ['https://docs.ipfs.io', 'https://docs.ipfs.io/guides/concepts'], `target="_blank" class="${anchorClass}"`)}</p>
<p class="${labelClass}">${i18n.getMessage('page_landingWelcome_renderResources_title_discover')}</p>
<p class="${copyClass}">Find <a class="${anchorClass}" href="https://awesome.ipfs.io" target="_blank">useful resources</a> for using IPFS and <a class="${anchorClass}" href="https://github.com/ipfs/ipfs#project-links" target="_blank">building things</a> on top of it.</p>
<p class="${copyClass}">${renderTranslatedLink('page_landingWelcome_renderResources_copy_discover', ['https://awesome.ipfs.io', 'https://github.com/ipfs/ipfs#project-links'], `target="_blank" class="${anchorClass}"`)}</p>
<p class="${labelClass}">${i18n.getMessage('page_landingWelcome_renderResources_title_got_questions')}</p>
<p class="${copyClass}">Visit the <a class="${anchorClass}" href="https://discuss.ipfs.io/" target="_blank">Discussion and Support Forum</a>.</p>
<p class="${copyClass}">${renderTranslatedLink('page_landingWelcome_renderResources_copy_got_questions', ['https://discuss.ipfs.io'], `target="_blank" class="${anchorClass}"`)}</p>
<p class="${labelClass}">${i18n.getMessage('page_landingWelcome_renderResources_title_want_to_help')}</p>
<p class="${copyClass} mv0">Join the <a class="${anchorClass}" href="https://github.com/ipfs/community/#community" target="_blank">IPFS Community</a>! Contribute <a class="${anchorClass}" href="https://github.com/ipfs/ipfs#project-links" target="_blank">code</a>, <a class="${anchorClass}" href="https://github.com/ipfs/docs" target="_blank">documentation</a>, <a class="${anchorClass}" href="https://www.transifex.com/ipfs/public/" target="_blank">translations</a> or help by <a class="${anchorClass}" href="https://discuss.ipfs.io/c/help" target="_blank">supporting other users</a>.</p>
<p class="${copyClass} mv0">${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}"`)}</p>
</div>
`
}
Expand Down
59 changes: 59 additions & 0 deletions add-on/src/utils/i18n.js
Original file line number Diff line number Diff line change
@@ -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>(.+?)<\/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], `<a href="${links[i]}" ${attributes}>${match[1]}</a>`)
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><\/span>/mg
const str = browser.i18n.getMessage(message)
let match = regex.exec(str)

let output = str
while (match !== null) {
output = output.replace(match[0], `<span ${attributes}>${dynamicData}</span>`)
match = regex.exec(str)
}

const template = document.createElement('template')
template.innerHTML = output

return template.content
}

module.exports = {
renderTranslatedLink,
renderTranslatedDynamicSpan
}

0 comments on commit c13159d

Please sign in to comment.