Skip to content

B
bridge
Commit a7969e8a authored by Yamagishi Kazutoshi's avatar Yamagishi Kazutoshi
Browse files
Options

Add Japanese translations on React components

parent fb7bc8fc
Hide whitespace changes
Inline Side-by-side
Showing with 122 additions and 33 deletions
.gitignore
View file @ a7969e8a
......@@ -16,6 +16,8 @@
# Ignore Byebug command history file.
.byebug_history
.env
/app/javascript/locales/*
!/app/javascript/locales/.keep
/public/assets
/public/packs
/public/packs-test
......
app/javascript/bundles/HelloWorld/components/ConnectPrompt.jsx
View file @ a7969e8a
import PropTypes from 'prop-types';
import React from 'react';
import { FormattedMessage } from 'react-intl';
const ConnectPrompt = ({ isPioneer, domains }) => isPioneer ? (
<div className='connect-prompt'>
<h3><i className='fa fa-binoculars' /> You are a pioneer!</h3>
<p>You might be the first among your Twitter friends to explore Mastodon. Be sure to connect your Mastodon account so they see you when they join.</p>
<a target='_blank' href='/users/auth/mastodon'>Login via Mastodon</a>
{domains.length > 0 && <a target='_blank' className='secondary' href={`https://${domains[0].uri}/auth/sign_up`}>Create Mastodon account</a>}
<h3><i className='fa fa-binoculars' /> <FormattedMessage id='connect_prompt.pioneer.title' defaultMessage='You are a pioneer!' /></h3>
<p><FormattedMessage id='connect_prompt.pioneer.body' defaultMessage='You might be the first among your Twitter friends to explore Mastodon. Be sure to connect your Mastodon account so they see you when they join.' /></p>
<a target='_blank' href='/users/auth/mastodon'><FormattedMessage id='connect_prompt.login_via_mastodon' defaultMessage='Login via Mastodon' /></a>
{domains.length > 0 && <a target='_blank' className='secondary' href={`https://${domains[0].uri}/auth/sign_up`}><FormattedMessage id='connect_prompt.create_mastodon_account' defaultMessage='Create Mastodon account' /></a>}
</div>
) : (
<div className='connect-prompt'>
<h3><i className='fa fa-check' /> Almost there!</h3>
<p>For your friends to find you as well, you still need to login with your Mastodon account. If you need help choosing a server to create a new account on, <a href='#domains'>see where your friends have signed up</a> or click the button below.</p>
<a target='_blank' href='/users/auth/mastodon'>Login via Mastodon</a>
{domains.length > 0 && <a target='_blank' className='secondary' href={`https://${domains[0].uri}/auth/sign_up`}>Create Mastodon account</a>}
<h3><i className='fa fa-check' /> <FormattedMessage id='connect_prompt.tutorial.title' defaultMessage='Almost there!' /></h3>
<p><FormattedMessage id='connect_prompt.tutorial.body' defaultMessage='For your friends to find you as well, you still need to login with your Mastodon account. If you need help choosing a server to create a new account on, {link} or click the button below.' values={{ link: <a href='#domain'><FormattedMessage id='connect_prompt.tutorial.link' defaultMessage='see where your friends have signed up' /></a> }} /></p>
<a target='_blank' href='/users/auth/mastodon'><FormattedMessage id='connect_prompt.login_via_mastodon' defaultMessage='Login via Mastodon' /></a>
{domains.length > 0 && <a target='_blank' className='secondary' href={`https://${domains[0].uri}/auth/sign_up`}><FormattedMessage id='connect_prompt.create_mastodon_account' defaultMessage='Create Mastodon account' /></a>}
</div>
);
......
app/javascript/bundles/HelloWorld/components/HelloWorld.jsx
View file @ a7969e8a
......@@ -6,7 +6,6 @@ import ConnectPrompt from './ConnectPrompt';
export default class HelloWorld extends React.PureComponent {
static propTypes = {
status: PropTypes.string,
total: PropTypes.number,
at: PropTypes.number,
results: PropTypes.array.isRequired,
......@@ -24,7 +23,7 @@ export default class HelloWorld extends React.PureComponent {
}
render () {
const { status, inProgress, at, total, results, domains, defaultDomains, mastodonIsConnected } = this.props;
const { inProgress, at, total, results, domains, defaultDomains, mastodonIsConnected } = this.props;
if (inProgress) {
const pct = total > 0 ? (at / total).toFixed(2) * 100 : 10;
......@@ -33,10 +32,14 @@ export default class HelloWorld extends React.PureComponent {
return (
<div>
<div className='page-heading'>
<h3>
Searching for your friends...
<small>Please wait while your Twitter friends are being fetched</small>
</h3>
<FormattedMessage id='friends.searching.headline' defaultMessage='Searching for your friends...'>
{text => (
<h3>
{text}
<FormattedMessage id='friends.searching.subheadline' defaultMessage='Please wait while your Twitter friends are being fetched' tagName='small' />
</h3>
)}
</FormattedMessage>
</div>
<div className='progress-bar'>
......@@ -59,18 +62,24 @@ export default class HelloWorld extends React.PureComponent {
return (
<div>
{mastodonIsConnected ? (<div className='page-heading'>
<h3>
Your friends
<small>Here are your Twitter friends who are on Mastodon:</small>
</h3>
<FormattedMessage id='friends.headline' defaultMessage='Your friends'>
{text => (
<h3>
{text}
<FormattedMessage id='friends.subheadline' defaultMessage='Here are your Twitter friends who are on Mastodon:' tagName='small' />
</h3>
)}
</FormattedMessage>
</div>) : <ConnectPrompt domains={defaultDomains} />}
{results.length === 0 && <p className='lead'>
Right now, there are no results to be shown here. But maybe your friends haven't used this tool yet! Or maybe you are the trendsetter!
<FormattedMessage id='friends.empty' defaultMessage={`Right now, there are no results to be shown here. But maybe your friends haven't used this tool yet! Or maybe you are the trendsetter!`} />
</p>}
{results.length > 0 && mastodonIsConnected && <div style={{ textAlign: 'center', marginTop: -10, marginBottom: 20 }}>
<a className='candy-button' href='/friends/follow_all' data-method='post'>Follow all friends on Mastodon</a>
<a className='candy-button' href='/friends/follow_all' data-method='post'>
<FormattedMessage id='friends.follow_all' defaultMessage='Follow all friends on Mastodon' />
</a>
</div>}
{results.length > 0 && <StaggeredMotion defaultStyles={results.map(_ => ({ scale: 0 }))} styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => {
......@@ -99,10 +108,14 @@ export default class HelloWorld extends React.PureComponent {
</StaggeredMotion>}
<div className='page-heading'>
<h3>
Your friends' instances
<small>Here are the servers your friends are using:</small>
</h3>
<FormattedMessage id='friends.your_friends_instance.headline' defaultMessage={`Your friends' instances`}>
{text => (
<h3>
{text}
<FormattedMessage id='friends.your_friends_instance.subheadline' defaultMessage='Here are the servers your friends are using:' tagName='small' />
</h3>
)}
</FormattedMessage>
</div>
<div className='grid' id='domains'>
......@@ -112,14 +125,16 @@ export default class HelloWorld extends React.PureComponent {
<span className='title'>{domain.title}</span>
<span className='uri'>{domain.uri}</span>
{domain.stats && <span className='users'> (<FormattedMessage id='num_users' defaultMessage='{formatted_count} {count, plural, one {person} other {people}}' values={{ count: domain.stats.user_count, formatted_count: <FormattedNumber value={domain.stats.user_count} /> }} />)</span>}
{domain.stats && <span className='users'> (<FormattedMessage id='friends.num_users' defaultMessage='{formatted_count} {count, plural, one {person} other {people}}' values={{ count: domain.stats.user_count, formatted_count: <FormattedNumber value={domain.stats.user_count} /> }} />)</span>}
</div>
</a>
))}
<a target='_blank' className='instance-card' href='https://joinmastodon.org/#getting-started'>
<div className='info'>
<span className='title'>Find more on</span>
<FormattedMessage id='friends.find_more' defaultMessage='Find more on'>
{text => <span className='title'>{text}</span>}
</FormattedMessage>
<span className='uri'>joinmastodon.org</span>
</div>
</a>
......
app/javascript/bundles/HelloWorld/startup/HelloWorldApp.jsx
View file @ a7969e8a
......@@ -2,17 +2,22 @@ import React from 'react';
import { Provider } from 'react-redux';
import { IntlProvider, addLocaleData } from 'react-intl';
import en from 'react-intl/locale-data/en';
import ja from 'react-intl/locale-data/ja';
import { defaultLocale } from '../../../locales/default';
import { translations } from '../../../locales/translations';
import configureStore from '../store/helloWorldStore';
import HelloWorldContainer from '../containers/HelloWorldContainer';
addLocaleData([...en]);
addLocaleData([ ...en, ...ja ]);
const locale = document.documentElement.lang || defaultLocale;
const messages = translations[locale] || translations[defaultLocale];
// See documentation for https://github.com/reactjs/react-redux.
// This is how you get props from the Rails view into the redux store.
// This code here binds your smart component to the redux store.
const HelloWorldApp = (props) => (
<IntlProvider locale='en'>
<IntlProvider locale={locale} messages={messages}>
<Provider store={configureStore(props)}>
<HelloWorldContainer />
</Provider>
......
app/views/layouts/application.html.haml
View file @ a7969e8a
!!!
%html
%html{ lang: I18n.locale }
%head
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
%title= t('.title')
......
config/initializers/react_on_rails.rb
View file @ a7969e8a
......@@ -6,7 +6,7 @@
ReactOnRails.configure do |config|
# This configures the script to run to build the production assets by webpack. Set this to nil
# if you don't want react_on_rails building this file for you.
config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/webpack"
config.build_production_command = 'RAILS_ENV=production NODE_ENV=production bin/webpack'
################################################################################
################################################################################
......@@ -22,7 +22,7 @@ ReactOnRails.configure do |config|
# with rspec then this controls what yarn command is run
# to automatically refresh your webpack assets on every test run.
#
config.build_test_command = "RAILS_ENV=test bin/webpack"
config.build_test_command = 'RAILS_ENV=test bin/webpack'
################################################################################
################################################################################
......@@ -38,5 +38,20 @@ ReactOnRails.configure do |config|
# different. You should have ONE server bundle which can create all of your server rendered
# React components.
#
config.server_bundle_js_file = "hello-world-bundle.js"
config.server_bundle_js_file = 'server-bundle.js'
################################################################################
# I18N OPTIONS
################################################################################
# Replace the following line to the location where you keep translation.js & default.js for use
# by the npm packages react-intl. Be sure this directory exists!
config.i18n_dir = Rails.root.join('app', 'javascript', 'locales')
# If not using the i18n feature, then leave this section commented out or set the value
# of config.i18n_dir to nil.
#
# Replace the following line to the location where you keep your client i18n yml files
# that will source for automatic generation on translations.js & default.js
# By default(without this option) all yaml files from Rails.root.join("config", "locales")
# and installed gems are loaded
config.i18n_yml_dir = Rails.root.join('config', 'locales', 'client')
end
config/locales/client/en.yml 0 → 100644
View file @ a7969e8a
---
en:
connect_prompt:
create_mastodon_account: Create Mastodon account
login_via_mastodon: Login via Mastodon
pioneer:
body: You might be the first among your Twitter friends to explore Mastodon. Be sure to connect your Mastodon account so they see you when they join.
title: You are a pioneer!
tutorial:
body: For your friends to find you as well, you still need to login with your Mastodon account. If you need help choosing a server to create a new account on, {link} or click the button below.
link: see where your friends have signed up
title: Almost there!
friends:
empty: Right now, there are no results to be shown here. But maybe your friends haven't used this tool yet! Or maybe you are the trendsetter!
find_more: Find more on
follow_all: Follow all friends on Mastodon
headline: Your friends
num_users: '{formatted_count} {count, plural, one {person} other {people}}'
searching:
headline: Searching for your friends...
subheadline: Please wait while your Twitter friends are being fetched
subheadline: 'Here are your Twitter friends who are on Mastodon:'
your_friends_instance:
headline: Your friends' instances
subheadline: 'Here are the servers your friends are using:'
config/locales/client/ja.yml 0 → 100644
View file @ a7969e8a
---
ja:
connect_prompt:
create_mastodon_account: Mastodonのアカウントを作る
login_via_mastodon: Mastodonでログインする
pioneer:
body: あなたはTwitterの友だちの中でこのツールを使う最初の人かもしれません。Mastodonアカウントを接続して、友だちがMastodonに参加するときにあなたを探せるようにしましょう。
title: あなたはパイオニアです!
tutorial:
body: 友だちにあなたを見つけてもらうためにはMastodonのアカウントでログインする必要があります。新しいアカウントを作るインスタンスを選択する場合は{link}か下のボタンをクリックしてください。
link: あなたの友だちがアカウントを作ったインスタンスを見る
title: あと少し!
friends:
empty: 今ここに表示される結果はありません。ですがあなたの友だちがこのツールをまだ使っていない可能性があります! もしくはあなたがトレンドセッターです!
find_more: もっと探す
follow_all: 友だちを全員Mastodonでフォローする
headline: あなたの友だち
num_users: '{formatted_count}人'
searching:
headline: あなたの友だちを探しています...
subheadline: あなたのTwitterの友だちの情報が取得されている間お待ちください
subheadline: 'MastodonにいるあなたのTwitterの友だちは次の通りです:'
your_friends_instance:
headline: あなたの友だちのインスタンス
subheadline: 'あなたの友だちが使っているサーバーは次の通りです:'
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment