-
-
Notifications
You must be signed in to change notification settings - Fork 250
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add translation support using i18next #681
base: dev
Are you sure you want to change the base?
Conversation
Only implemented to a few pages as an example, looking to get feedback. I do not know japanese, I just used google translate to translate a few words as an example - is most likely incorrect
Implemented the change to SpaceSettings as an example.
This reverts commit 1ed9d6d.
There was a 'jp' translation that I used to test
It seems the netlify preview 404s when trying to retrieve the translation.json file. Is this a problem with the netlify set up or something that I need to fix? |
Did you check whether the path given in the 404 error corresponds with the path you expected to be set within the code? |
Its the same path that gets requested when running locally, but netlify 404s while running locally works fine. If somebody could test running on their machine that might help to narrow to down? |
I think it might actually be an issue with the webpack, looking in to it now |
You need to copy them to dist directory during build, see Line 71 in 1979646
|
At the moment I have it working using i18next-loader, would it be preferable to copy? Line 52 in ef31851
|
No, you are doing it right with i18next-loader. |
That is such a needed feature, cant wait for merge |
Added to Auth.jsx and Client.jsx
Created a <Twemojify> component which can be passed through translation as a component, which then twemojify's the user name after translation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks. BTW please don't such big PR in future. 🙏
const failedDialog = () => { | ||
const renderFailure = (requestClose) => ( | ||
<div className="cross-signing__failure"> | ||
<Text variant="h1">{twemojify('❌')}</Text> | ||
<Text weight="medium">Failed to setup cross signing. Please try again.</Text> | ||
<Button onClick={requestClose}>Close</Button> | ||
</div> | ||
); | ||
import '../../i18n'; | ||
|
||
openReusableDialog( | ||
<Text variant="s1" weight="medium">Setup cross signing</Text>, | ||
renderFailure, | ||
); | ||
}; | ||
function CrossSigningSetup() { | ||
const { t } = useTranslation(); | ||
|
||
const securityKeyDialog = (key) => { | ||
const downloadKey = () => { | ||
const blob = new Blob([key.encodedPrivateKey], { | ||
type: 'text/plain;charset=us-ascii', | ||
}); | ||
FileSaver.saveAs(blob, 'security-key.txt'); | ||
}; | ||
const copyKey = () => { | ||
copyToClipboard(key.encodedPrivateKey); | ||
}; | ||
const initialValues = { phrase: '', confirmPhrase: '' }; | ||
const [genWithPhrase, setGenWithPhrase] = useState(undefined); | ||
|
||
const renderSecurityKey = () => ( | ||
<div className="cross-signing__key"> | ||
<Text weight="medium">Please save this security key somewhere safe.</Text> | ||
<Text className="cross-signing__key-text"> | ||
{key.encodedPrivateKey} | ||
</Text> | ||
<div className="cross-signing__key-btn"> | ||
<Button variant="primary" onClick={() => copyKey(key)}>Copy</Button> | ||
<Button onClick={() => downloadKey(key)}>Download</Button> | ||
const failedDialog = () => { | ||
const renderFailure = (requestClose) => ( | ||
<div className="cross-signing__failure"> | ||
<Text variant="h1">{twemojify('❌')}</Text> | ||
<Text weight="medium">{t('Organisms.CrossSigning.setup_failed')}</Text> | ||
<Button onClick={requestClose}>{t('common.close')}</Button> | ||
</div> | ||
</div> | ||
); | ||
); | ||
|
||
// Download automatically. | ||
downloadKey(); | ||
openReusableDialog( | ||
<Text variant="s1" weight="medium">{t('Organisms.CrossSigning.setup')}</Text>, | ||
renderFailure, | ||
); | ||
}; | ||
|
||
openReusableDialog( | ||
<Text variant="s1" weight="medium">Security Key</Text>, | ||
() => renderSecurityKey(), | ||
); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can't we do translation without moving these inside component?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it needs to be inside component for the t() hook to function properly. Is there a particular reason to not have these inside component?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
you can use t()
, but <Trans i18nKey="" />
seems to work
hi! sorry, i am new to web dev, what program would i use to translate this format? |
At the moment we dont have a translation platform set up. It will be easier if you wait for that to be finalised, but if you want to work on it right now, just fork this repo and the language files are just .json so you can edit with any text editor |
@aybura Could you please use the open-source Weblate platform for translating this? Using closed platforms like Transifex or Crowdin prevents some potential translators to contribute (including myself as I have a Weblate account, but not Transifex or Crowdin). |
Hi, |
@Airyzz could you perhaps rebase this PR to a more recent commit (doesn't have to be latest), or at least squash your commits? |
Description
Adds support for new languages as per #164
Adds i18next, i18next-browser-languagedetector, i18next-http-backend, react-i18next as dependencies
Type of change
Checklist:
Preview: https://62fa1243e46824314616a3e3--pr-cinny.netlify.app
⚠️ Exercise caution. Use test accounts. ⚠️