add page sources, including static images
Signed-off-by: Jakub Sokołowski <jakub@status.im>
This commit is contained in:
parent
52d8db7167
commit
24525e8413
|
|
@ -0,0 +1,39 @@
|
|||
import React, { Component } from 'react';
|
||||
import Nav from "./components/nav";
|
||||
import Header from "./components/header";
|
||||
import Main from "./components/main";
|
||||
import Footer from "./components/footer";
|
||||
import { addLocaleData, IntlProvider } from 'react-intl';
|
||||
import enLocaleData from 'react-intl/locale-data/en';
|
||||
import koLocaleData from 'react-intl/locale-data/ko';
|
||||
import translations from './i18n/locales';
|
||||
|
||||
addLocaleData(enLocaleData);
|
||||
addLocaleData(koLocaleData);
|
||||
|
||||
var locale = (navigator.languages.slice(0, 2) && navigator.languages[0].slice(0,2)) || "en";
|
||||
var messages = translations[locale];
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
|
||||
<IntlProvider locale={locale} messages={messages}>
|
||||
<Nav />
|
||||
</IntlProvider>
|
||||
<IntlProvider locale={locale} messages={messages}>
|
||||
<Header />
|
||||
</IntlProvider>
|
||||
<IntlProvider locale={locale} messages={messages}>
|
||||
<Main />
|
||||
</IntlProvider>
|
||||
<IntlProvider locale={locale} messages={messages}>
|
||||
<Footer />
|
||||
</IntlProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<App />, div);
|
||||
ReactDOM.unmountComponentAtNode(div);
|
||||
});
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import React, { Component } from 'react';
|
||||
|
||||
class Footer extends Component {
|
||||
render() {
|
||||
return (
|
||||
|
||||
<footer>
|
||||
<h3>Status.im</h3>
|
||||
<ul>
|
||||
<li><a href="https://www.facebook.com/ethstatus/" target="_blank"><i className="fab fa-facebook-f"></i></a></li>
|
||||
<li><a href="https://twitter.com/ethstatus" target="_blank"><i className="fab fa-twitter"></i></a></li>
|
||||
<li><a href="https://www.youtube.com/channel/UCFzdJTUdzqyX4e9dOW7UpPQ" target="_blank"><i className="fab fa-youtube"></i></a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import React, { Component } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import Axios from 'axios';
|
||||
|
||||
class Form extends Component {
|
||||
|
||||
constructor(){
|
||||
super();
|
||||
this.state = {
|
||||
name : "",
|
||||
email : "",
|
||||
message : ""
|
||||
}
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this)
|
||||
}
|
||||
|
||||
handleChange = e => {
|
||||
this.setState({[e.target.name]: e.target.value })
|
||||
}
|
||||
|
||||
async handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
const { name, email, message } = this.state;
|
||||
const form = await Axios.post('api/form', {
|
||||
name,
|
||||
email,
|
||||
message
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<form>
|
||||
{/* I am just sending a basic error message */}
|
||||
{this.state.formError &&
|
||||
<p className="error">
|
||||
Fill all the input fields please.
|
||||
</p>
|
||||
}
|
||||
<p><FormattedMessage id="form.contact" defaultMessage="if you have any further questions, feel free to contact us" /></p>
|
||||
<div>
|
||||
<label htmlFor="name"><FormattedMessage id="form.name" defaultMessage="name" /></label>
|
||||
<input type="text" name="name" placeholder="Your name" onChange={this.handleChange} />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email"><FormattedMessage id="form.email" defaultMessage="email" /></label>
|
||||
<input type="email" name="email" placeholder="Email address" onChange={this.handleChange} />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="message"><FormattedMessage id="form.message" defaultMessage="message" /></label>
|
||||
<input type="text" name="message" placeholder="Your message" onChange={this.handleChange} />
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<p><FormattedMessage id="form.feedback" defaultMessage="Your feedback is always welcome! Thank you very much" /></p>
|
||||
<input type="submit" name="submit" value="Send" onClick= {this.handleSubmit} />
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default Form;
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import React, { Component } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
class Header extends Component {
|
||||
render() {
|
||||
return (
|
||||
<header>
|
||||
<div className="head">
|
||||
<h1><FormattedMessage id="header.main-1" defaultMessage="Translate Status" />< br />
|
||||
<FormattedMessage id="header.main-2" defaultMessage="into Your Language" /></h1>
|
||||
<div>
|
||||
<p><strong><FormattedMessage id="header.status" defaultMessage="Status" /></strong><FormattedMessage id="header.status-explanation-1" defaultMessage=" is completely open source and made by contributors all over the world."/>< br />
|
||||
<FormattedMessage id="header.status-explanation-2" defaultMessage="Your translations can help more people utilize this secure, censorship-resistant service" /></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default Header;
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
import React, { Component } from 'react';
|
||||
import Form from "./form";
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
class Main extends Component {
|
||||
render() {
|
||||
return (
|
||||
<main>
|
||||
|
||||
<div className="title-center">
|
||||
<h1><FormattedMessage id="main.language" defaultMessage="Languages to Translate" /></h1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="languages">
|
||||
<div className="language-one">
|
||||
<img src={require("../images/flags/korea.png")} className="flag" />
|
||||
<p className="language-title"><FormattedMessage id="main.korean" defaultMessage="Korean" /></p>
|
||||
<a href="https://forms.gle/EzAQ12B3vciiCiHF7" target="_blank"><p><FormattedMessage id="main.application" defaultMessage="Apply" /></p></a>
|
||||
</div>
|
||||
|
||||
<div className="language-two">
|
||||
<img src={require("../images/flags/china.png")} className="flag" />
|
||||
<p className="language-title"><FormattedMessage id="main.chinese" defaultMessage="Chinese" /></p>
|
||||
<a href="https://forms.gle/zkcYVmgHDV2cogD19" target="_blank"><p><FormattedMessage id="main.application" defaultMessage="Apply" /></p></a>
|
||||
</div>
|
||||
|
||||
<div className="language-three">
|
||||
<img src={require("../images/flags/russia.svg")} className="flag" />
|
||||
<p className="language-title"><FormattedMessage id="main.russian" defaultMessage="Russian" /></p>
|
||||
<a href="https://forms.gle/zkcYVmgHDV2cogD19" target="_blank"><p><FormattedMessage id="main.application" defaultMessage="Apply" /></p></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="languages">
|
||||
<div className="language-one">
|
||||
<img src={require("../images/flags/spain.png")} className="flag" />
|
||||
<p className="language-title"><FormattedMessage id="main.spanish" defaultMessage="Spanish" /></p>
|
||||
<a href="https://forms.gle/zkcYVmgHDV2cogD19" target="_blank"><p><FormattedMessage id="main.application" defaultMessage="Apply" /></p></a>
|
||||
</div>
|
||||
|
||||
<div className="language-two">
|
||||
<img src={require("../images/flags/latin_america.png")} className="flag" />
|
||||
<p className="language-title"><FormattedMessage id="main.spanish-latin" defaultMessage="Spanish (Latin America)" /></p>
|
||||
<a href="https://forms.gle/zkcYVmgHDV2cogD19" target="_blank"><p><FormattedMessage id="main.application" defaultMessage="Apply" /></p></a>
|
||||
</div>
|
||||
|
||||
<div className="language-three">
|
||||
<img src={require("../images/flags/portugal.png")} className="flag" />
|
||||
<p className="language-title"><FormattedMessage id="main.portuguese" defaultMessage="Portuguese" /></p>
|
||||
<a href="https://forms.gle/zkcYVmgHDV2cogD19" target="_blank"><p><FormattedMessage id="main.application" defaultMessage="Apply" /></p></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h2><FormattedMessage id="main.how-to-contribute" defaultMessage="How to Contribute?" /></h2>
|
||||
<div>
|
||||
<div>
|
||||
<h3><FormattedMessage id="main.app-and-website" defaultMessage="App and Website" /></h3>
|
||||
</div>
|
||||
<div>
|
||||
<div className="margin-bottom-40">
|
||||
<p><FormattedMessage id="main.before-lokalise" defaultMessage="You can translate the Status app and website into your language with" /> <a href="https://lokalise.co/" target="_blank"><FormattedMessage id="main.lokalise" defaultMessage="Lokalise! " /></a>
|
||||
<FormattedMessage id="main.after-lokalise" defaultMessage="Lokalise automates all the translation workflow and is very easy to use. You can find the simple 2 steps to start the translation as below." /></p>
|
||||
</div>
|
||||
<div className="margin-bottom-40">
|
||||
<p><b><FormattedMessage id="main.step1" defaultMessage="Step 1 : " /></b><FormattedMessage id="main.fillout" defaultMessage="Please click on the 'apply' button above and fill out the application form which takes less than 1 minute. As soon as we check out your application, you will be invited to Lokalise as a translator." /></p>
|
||||
<div className="lokalise-img">
|
||||
<img src={require("../images/lokalise1.png")} width="70%" className=""></img><br /><br /><br />
|
||||
<img src={require("../images/lokalise2.png")} width="70%" className=""></img>
|
||||
</div>
|
||||
</div>
|
||||
<div className="margin-bottom-40">
|
||||
<p><b><FormattedMessage id="main.step2" defaultMessage="Step 2 : " /></b><FormattedMessage id="main.find" defaultMessage="Sign up for Lokalise and you will find the words and sentences which are used on the Status app and website. Lokalise offers useful online translators(e.g. Google Translate, Microsoft Translator, and Yandex.Translate) showing suggestions for each of the strings and safely protects variables or string interpolation components that should not be translated." /></p>
|
||||
<div className="lokalise-img">
|
||||
<img src={require("../images/lokalise3.png")} width="70%" className=""></img>
|
||||
</div>
|
||||
</div>
|
||||
<div className="margin-bottom-40">
|
||||
<p><FormattedMessage id="main.finished" defaultMessage="That's all! Your passion for the private, secure and censorship-resistant communications will help build a better world that everyone can say what they want to say with Status. " /></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3><FormattedMessage id="main.documentation" defaultMessage="Documentation" /></h3>
|
||||
<p><FormattedMessage id="main.documentation-explanation" defaultMessage="We will refresh our documentation soon. Stay tunded and we will let you know when we are ready! You can see how our documentation's .md files look like " />
|
||||
<a href="https://github.com/status-im/status.im/blob/develop/source/build_status/desktop.md" target="_blank">
|
||||
<FormattedMessage id="main.doc-example" defaultMessage="here" /></a></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact-us">
|
||||
<h2><FormattedMessage id="main.contact" defaultMessage="Contact Us" /></h2>
|
||||
|
||||
{/* <Form /> */}
|
||||
<div className="align-center">
|
||||
<p><FormattedMessage id="main.contact-explanation" defaultMessage="if you have any further questions, feel free to contact us" /></p>
|
||||
<p><a href="mailto:translate@status.im">translate@status.im</a></p>
|
||||
<p><a href="https://get.status.im/chat/public/status-translate"><FormattedMessage id="main.public-chat" defaultMessage="#Status-translate Public chat" /></a></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Main;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import React, { Component } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
class Nav extends Component {
|
||||
render() {
|
||||
return (
|
||||
<nav>
|
||||
<ul>
|
||||
<a href="https://status.im/" target="_blank"><li><img src={require('../images/logo.png')} className="center-with-margin"/></li></a>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="https://status.im/" target="_blank"><FormattedMessage id="nav.home" defaultMessage="Home" /></a></li>
|
||||
<li><a href="https://github.com/status-im" target="_blank"><FormattedMessage id="nav.github" defaultMessage="Github" /></a></li>
|
||||
<li><a href="https://our.status.im/" target="_blank"><FormattedMessage id="nav.blog" defaultMessage="Blog" /></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Nav;
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"form.contact": "if you have any further questions, feel free to contact us",
|
||||
"form.email": "email",
|
||||
"form.feedback": "Your feedback is always welcome! Thank you very much",
|
||||
"form.message": "message",
|
||||
"form.name": "name",
|
||||
"header.main-1": "Translate Status",
|
||||
"header.main-2": "into Your Language",
|
||||
"header.status": "Status",
|
||||
"header.status-explanation-1": " is completely open source and made by contributors all over the world.",
|
||||
"header.status-explanation-2": "Your translations can help more people utilize this secure, censorship-resistant service.",
|
||||
"main.after-lokalise": " Lokalise automates all the translation workflow and is very easy to use. You can find the simple 2 steps to start the translation as below.",
|
||||
"main.app-and-website": "App and Website",
|
||||
"main.application": "Apply",
|
||||
"main.before-lokalise": "You can translate the Status app and website into your language with",
|
||||
"main.chinese": "Chinese",
|
||||
"main.contact": "Contact Us",
|
||||
"main.contact-explanation": "if you have any further questions, feel free to contact us.",
|
||||
"main.doc-example": " here.",
|
||||
"main.documentation": "Documentation",
|
||||
"main.documentation-explanation": "We will refresh our documentation soon. Stay tunded and we will let you know when we are ready! You can see how our documentation's .md files look like",
|
||||
"main.fillout": "Please click on the 'apply' button above and fill out the application form which takes less than 1 minute. As soon as we check out your application, you will be invited to Lokalise as a translator.",
|
||||
"main.find": "Sign up for Lokalise and you will find the words and sentences which are used on the Status app and website. Lokalise offers useful online translators(e.g. Google Translate, Microsoft Translator, and Yandex.Translate) showing suggestions for each of the strings and safely protects variables or string interpolation components that should not be translated.",
|
||||
"main.finished": "That's all! Your passion for the private, secure and censorship-resistant communication platform will help build a better world that everyone can say what they want to say with Status. ",
|
||||
"main.how-to-contribute": "How to Contribute?",
|
||||
"main.korean": "Korean",
|
||||
"main.language": "Languages to Translate",
|
||||
"main.lokalise": "Lokalise!",
|
||||
"main.portuguese": "Portuguese",
|
||||
"main.public-chat": "#Status-translate Public chat",
|
||||
"main.russian": "Russian",
|
||||
"main.spanish": "Spanish",
|
||||
"main.spanish-latin": "Spanish (Lantin America)",
|
||||
"main.step1": "Step 1 : ",
|
||||
"main.step2": "Step 2 : ",
|
||||
"nav.blog": "Blog",
|
||||
"nav.github": "Github",
|
||||
"nav.home": "Home"
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import en from "./en.json";
|
||||
import ko from "./ko.json";
|
||||
|
||||
export default { en, ko }
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"form.contact": "추가적인 질문이 있으시면 언제든지 문의해주세요",
|
||||
"form.email": "이메일 주소",
|
||||
"form.feedback": "여러분의 피드백은 언제나 환영입니다! 감사합니다",
|
||||
"form.message": "메시지",
|
||||
"form.name": "이름",
|
||||
"header.main-1": "스테이터스를",
|
||||
"header.main-2": "한국어로 번역해보세요",
|
||||
"header.status": "스테이터스",
|
||||
"header.status-explanation-1": "는 오픈소스 프로젝트로, 검열로부터 자유로운 커뮤니케이션을 열망하는 전세계 사용자들에 의해 번역되고 있습니다.",
|
||||
"header.status-explanation-2": "여러분의 소중한 번역은 조금 더 많은 사람들이 스테이터스의 안전한 P2P 커뮤니케이션 기능을 사용할 수 있도록 돕습니다.",
|
||||
"main.after-lokalise": "를 통해 스테이터스 앱과 웹사이트를 간단하게 번역하실 수 있습니다. 로컬라이즈는 모든 번역 프로세스를 자동화하며 누구든지 사용할 수 있는 간편한 플랫폼입니다. 여러분은 번역기 도구를 활용하여 화면에 나타난 문장이나 단어를 1:1로 번역하시면 됩니다.",
|
||||
"main.app-and-website": "스테이터스 앱 및 웹사이트",
|
||||
"main.application": "번역 신청",
|
||||
"main.before-lokalise": "여러분은",
|
||||
"main.chinese": "중국어",
|
||||
"main.contact": "문의하기",
|
||||
"main.contact-explanation": "궁금한 점이 있으시면, 언제든지 문의해주세요!",
|
||||
"main.doc-example": " 문서 예시",
|
||||
"main.documentation": "문서 (Documentation)",
|
||||
"main.documentation-explanation": "스테이터스는 곧 문서를 개편할 예정입니다. 문서 번역이 준비되는대로 안내해드릴 예정이며, 문서 페이지 예시는 다음 링크에서 확인할 수 있습니다.",
|
||||
"main.fillout": "상단의 스테이터스 앱, 홈페이지 번역 신청 구글 폼을 통해 로컬라이즈에서 번역가로 참여하실 수 있습니다(이메일 주소 필요). 신청 폼을 통해 초대 이메일을 받고 로컬라이즈에 접속하면 아래와 같은 화면을 확인하게 됩니다.",
|
||||
"main.find": "여러분은 스테이터스 앱과 홈페이지에서 사용되는 문장 및 단어를 확인하실 수 있습니다. 각 문장과 단어를 구글 번역기와 같은 도구를 활용하여 1:1로 번역하면 됩니다.",
|
||||
"main.finished": "끝입니다! 여러분의 번역은 조금 더 많은 사람들이 검열로부터 자유로운 안전한 커뮤니케이션 플랫폼을 사용할 수 있도록 돕습니다.",
|
||||
"main.how-to-contribute": "어떻게 번역하나요?",
|
||||
"main.korean": "한국어",
|
||||
"main.language": "언 어",
|
||||
"main.lokalise": "로컬라이즈(Lokalise)",
|
||||
"main.portuguese": "포루투칼어",
|
||||
"main.public-chat": "#Status-translate 오픈 채팅방",
|
||||
"main.russian": "러시아어",
|
||||
"main.spanish": "스페인어",
|
||||
"main.spanish-latin": "스페인어 (남미)",
|
||||
"main.step1": "1 단계: ",
|
||||
"main.step2": "2 단계: ",
|
||||
"nav.blog": "블로그",
|
||||
"nav.github": "깃허브",
|
||||
"nav.home": "홈페이지"
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[
|
||||
]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[
|
||||
]
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
[
|
||||
{
|
||||
"id": "form.contact",
|
||||
"defaultMessage": "if you have any further questions, feel free to contact us",
|
||||
"filepath": "src/components/form.js"
|
||||
},
|
||||
{
|
||||
"id": "form.name",
|
||||
"defaultMessage": "name",
|
||||
"filepath": "src/components/form.js"
|
||||
},
|
||||
{
|
||||
"id": "form.email",
|
||||
"defaultMessage": "email",
|
||||
"filepath": "src/components/form.js"
|
||||
},
|
||||
{
|
||||
"id": "form.message",
|
||||
"defaultMessage": "message",
|
||||
"filepath": "src/components/form.js"
|
||||
},
|
||||
{
|
||||
"id": "form.feedback",
|
||||
"defaultMessage": "Your feedback is always welcome! Thank you very much",
|
||||
"filepath": "src/components/form.js"
|
||||
},
|
||||
{
|
||||
"id": "header.main-1",
|
||||
"defaultMessage": "Translate Status",
|
||||
"filepath": "src/components/header.js"
|
||||
},
|
||||
{
|
||||
"id": "header.main-2",
|
||||
"defaultMessage": "into Your Language",
|
||||
"filepath": "src/components/header.js"
|
||||
},
|
||||
{
|
||||
"id": "header.status",
|
||||
"defaultMessage": "Status",
|
||||
"filepath": "src/components/header.js"
|
||||
},
|
||||
{
|
||||
"id": "header.status-explanation-1",
|
||||
"defaultMessage": "is completely open source and made by contributors all over the world.",
|
||||
"filepath": "src/components/header.js"
|
||||
},
|
||||
{
|
||||
"id": "header.status-explanation-2",
|
||||
"defaultMessage": "Your translations can help more people utilize this secure, censorship-resistant service",
|
||||
"filepath": "src/components/header.js"
|
||||
},
|
||||
{
|
||||
"id": "main.language",
|
||||
"defaultMessage": "Languages to Translate",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.korean",
|
||||
"defaultMessage": "Korean",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.application",
|
||||
"defaultMessage": "Application",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.chinese",
|
||||
"defaultMessage": "Chinese",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.russian",
|
||||
"defaultMessage": "Russian",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.spanish",
|
||||
"defaultMessage": "Spanish",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.spanish-latin",
|
||||
"defaultMessage": "Spanish (Latin America)",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.portuguese",
|
||||
"defaultMessage": "Portuguese",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.how-to-contribute",
|
||||
"defaultMessage": "How to Contribute?",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.app-and-website",
|
||||
"defaultMessage": "App and Website",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.before-lokalise",
|
||||
"defaultMessage": "You can translate the Status app and website into your language with",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.lokalise",
|
||||
"defaultMessage": "Lokalise!",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.after-lokalise",
|
||||
"defaultMessage": "Lokalise automates all the translation workflow and is very easy to use. What you have to do is to translate sentences into your language with the help of online translators. You can find an example below.",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.step1",
|
||||
"defaultMessage": "Step 1 :",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.fillout",
|
||||
"defaultMessage": "Fill out whatever form(Status app, Website, or both) you want above and you will be invited to Lokalise as a translator. When you sign in, you can find a screen with your language like this",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.step2",
|
||||
"defaultMessage": "Step 2 :",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.find",
|
||||
"defaultMessage": "You can find the words and sentences which are used on the Status app and website. Just translate it into your language with the helpers like Google Translate!",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.finished",
|
||||
"defaultMessage": "That's all! Your contribution helps more people use this secure, censorship-resistant communication platform.",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.documentation",
|
||||
"defaultMessage": "Documentation",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.documentation-explanation",
|
||||
"defaultMessage": "We will refresh our documentation soon. Stay tunded and we will let you know when we are ready! You can see how our documentation's .md files look like",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.doc-example",
|
||||
"defaultMessage": "here",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.contact",
|
||||
"defaultMessage": "Contact Us",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.contact-explanation",
|
||||
"defaultMessage": "if you have any further questions, feel free to contact us",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "main.public-chat",
|
||||
"defaultMessage": "#Status-translate Public chat",
|
||||
"filepath": "src/components/main.js"
|
||||
},
|
||||
{
|
||||
"id": "nav.home",
|
||||
"defaultMessage": "Home",
|
||||
"filepath": "src/components/nav.js"
|
||||
},
|
||||
{
|
||||
"id": "nav.github",
|
||||
"defaultMessage": "Github",
|
||||
"filepath": "src/components/nav.js"
|
||||
},
|
||||
{
|
||||
"id": "nav.blog",
|
||||
"defaultMessage": "Blog",
|
||||
"filepath": "src/components/nav.js"
|
||||
}
|
||||
]
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 6" width="1800" height="1200"><rect fill="#fff" width="9" height="3"/><rect fill="#f00" y="3" width="9" height="3"/><rect fill="#00f" y="2" width="9" height="2"/></svg>
|
||||
|
After Width: | Height: | Size: 261 B |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
|
|
@ -0,0 +1,690 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Raleway;
|
||||
background: #eee;
|
||||
color: #111;
|
||||
|
||||
}
|
||||
|
||||
body * {
|
||||
transition: all 0.300s ease-in-out;
|
||||
}
|
||||
|
||||
.lokalise-img {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
-webkit-box-shadow: 0px 10px 54px -11px rgba(0,0,0,0.75);
|
||||
-moz-box-shadow: 0px 10px 54px -11px rgba(0,0,0,0.75);
|
||||
box-shadow: 0px 10px 54px -11px rgba(0,0,0,0.75);
|
||||
}
|
||||
|
||||
main a:link, main a:visited {
|
||||
text-decoration: none;
|
||||
color: #4360DF;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.margin-bottom-40{
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/*------------- NAVIGATION BAR -------------------*/
|
||||
|
||||
nav {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
max-width: 1500px;
|
||||
margin: 0 auto 10px;
|
||||
padding: 12px 0;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
-webkit-box-shadow: 0px 10px 54px -11px rgba(0,0,0,0.75);
|
||||
-moz-box-shadow: 0px 10px 54px -11px rgba(0,0,0,0.75);
|
||||
box-shadow: 0px 10px 54px -11px rgba(0,0,0,0.75);
|
||||
}
|
||||
|
||||
nav img {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav ul:first-of-type{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
nav ul:first-of-type li{
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
text-indent: 30px;
|
||||
}
|
||||
|
||||
nav ul:first-of-type li span {
|
||||
font-weight: 500;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
nav ul:last-of-type{
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
}
|
||||
|
||||
nav ul li a, nav ul li a:visited{
|
||||
color:#111;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li.dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {background-color: #f1f1f1;}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*------------- HEADER -------------------*/
|
||||
|
||||
header {
|
||||
background: url("./images/world-map.png");
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
header div.head {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
header strong{
|
||||
font-weight: bold;
|
||||
color: #4360DF;
|
||||
}
|
||||
|
||||
|
||||
.title-center {
|
||||
text-align: center;
|
||||
margin: 10px auto 40px;
|
||||
}
|
||||
|
||||
header div.head h1 {
|
||||
font-size: 4rem;
|
||||
font-weight: bold;
|
||||
padding-top: 7rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header div.head p {
|
||||
font-size: 1.3rem;
|
||||
margin: 10px auto;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
line-height: 160%;
|
||||
}
|
||||
|
||||
|
||||
.contact {
|
||||
background: rgb(0, 99, 248);
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
-webkit-box-shadow: 0px 10px 54px -11px rgba(0,0,0,0.75);
|
||||
-moz-box-shadow: 0px 10px 54px -11px rgba(0,0,0,0.75);
|
||||
box-shadow: 0px 10px 54px -11px rgba(0,0,0,0.75);
|
||||
}
|
||||
|
||||
|
||||
/*------------- MAIN SECTION -------------------*/
|
||||
|
||||
|
||||
main {
|
||||
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
main section {
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 3fr;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
main section div b {
|
||||
color: rgb(0, 99, 248);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
main div h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
main section h2 {
|
||||
font-size: 3rem;
|
||||
color: black;
|
||||
text-transform: uppercase;
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main section h3 {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
main section div {
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
main section div p {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
main div p{
|
||||
line-height: 160%;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
|
||||
/*------------- countries -------------------*/
|
||||
|
||||
div.languages {
|
||||
display: grid;
|
||||
height: auto;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
.languages div {
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
width: 90%;
|
||||
border-radius: 10px;
|
||||
margin: 10px auto 50px auto;
|
||||
padding-bottom: 20px;
|
||||
|
||||
-webkit-box-shadow: 0px 10px 30px -9px rgba(0,0,0,0.75);
|
||||
-moz-box-shadow: 0px 10px 30px -9px rgba(0,0,0,0.75);
|
||||
box-shadow: 0px 10px 30px -9px rgba(0,0,0,0.75);
|
||||
|
||||
}
|
||||
|
||||
.percent{
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.languages p.language-icon {
|
||||
font-size: 3.4rem;
|
||||
padding: 30px 0px 30px 90px;
|
||||
margin: 0px 0px 30px 0px;
|
||||
text-align: left;
|
||||
color: rgb(0, 99, 248);
|
||||
filter: grayscale(0%);
|
||||
border-bottom: 2px solid rgb(0, 99, 248);
|
||||
}
|
||||
.languages p.language-title{
|
||||
font-size: 3.1rem;
|
||||
font-weight: bold;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*------------- FORM -------------------*/
|
||||
|
||||
main section form {
|
||||
padding: 0px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main section form p {
|
||||
font-size: 1.3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
main section form div {
|
||||
border:1px solid #eee;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 1.1rem;
|
||||
display: grid;
|
||||
margin-bottom: 10px;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
main section form div:last-of-type {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
|
||||
}
|
||||
|
||||
main section form div:last-of-type input {
|
||||
background: rgb(90, 99, 98);
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
-webkit-box-shadow: 0px 10px 10px -9px rgba(0,0,0,0.75);
|
||||
-moz-box-shadow: 0px 10px 10px -9px rgba(0,0,0,0.75);
|
||||
box-shadow: 0px 10px 10px -9px rgba(0,0,0,0.75);
|
||||
}
|
||||
|
||||
main section form div label {
|
||||
background: #444;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
padding: 6px;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
border-radius:10px;
|
||||
-webkit-box-shadow: 0px 10px 10px -9px rgba(0,0,0,0.75);
|
||||
-moz-box-shadow: 0px 10px 10px -9px rgba(0,0,0,0.75);
|
||||
box-shadow: 0px 10px 10px -9px rgba(0,0,0,0.75);
|
||||
}
|
||||
|
||||
main section form div input {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
}
|
||||
main section form div textarea {
|
||||
font-family: Raleway;
|
||||
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 1rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: rgb(255, 57, 57);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
/*------------- footer -------------------*/
|
||||
footer {
|
||||
background: rgb(0, 0, 0);
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin-top: 80px;
|
||||
display: grid;
|
||||
grid-template-columns:1fr 1fr 1fr;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
footer ul {
|
||||
|
||||
list-style: none;
|
||||
display: grid;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
footer ul li a {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.flag {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
align-content: center;
|
||||
height: 4em;
|
||||
margin: 30px auto 30px;
|
||||
}
|
||||
|
||||
/*------------- Responsive -------------------*/
|
||||
|
||||
@media (min-width:1100px) {
|
||||
|
||||
header div.head h1 {
|
||||
padding-top: 6rem;
|
||||
}
|
||||
|
||||
header div.head {
|
||||
width: 80%;
|
||||
}
|
||||
header div.head h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
main section {
|
||||
width: 90%;
|
||||
margin: 50px auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
}
|
||||
main section div p {
|
||||
padding: 0px 90px;
|
||||
}
|
||||
|
||||
.languages p.language-icon {
|
||||
font-size: 2.4rem;
|
||||
padding: 10px 30px;
|
||||
margin: 0px 0px 30px 0px;
|
||||
|
||||
}
|
||||
.languages p.language-title{
|
||||
font-size: 2.1rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width:1099px) and (min-width:850px) {
|
||||
header div.head h1 {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
|
||||
header div.head {
|
||||
width: 85%;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
header div.head h1 {
|
||||
font-size: 4rem;
|
||||
|
||||
}
|
||||
|
||||
main section {
|
||||
width: 90%;
|
||||
margin: 50px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
}
|
||||
main section div p {
|
||||
padding: 0px 90px;
|
||||
}
|
||||
|
||||
|
||||
.languages p.language-icon {
|
||||
font-size: 2.4rem;
|
||||
padding: 10px 30px;
|
||||
margin: 0px 0px 30px 0px;
|
||||
|
||||
}
|
||||
.languages p.language-title{
|
||||
font-size: 2.1rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:849px) and (min-width:600px) {
|
||||
|
||||
header {
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
header div.head h1 {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
header div.head {
|
||||
width: 75%;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
header div.head h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
main section {
|
||||
width: 90%;
|
||||
margin: 50px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
}
|
||||
main section div p {
|
||||
padding: 0px 90px;
|
||||
}
|
||||
|
||||
div.languages {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
div.languages div {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.languages p.language-icon {
|
||||
font-size: 2.4rem;
|
||||
padding: 10px 30px;
|
||||
margin: 0px 0px 30px 0px;
|
||||
|
||||
}
|
||||
.languages p.language-title{
|
||||
font-size: 2.1rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
main section h2 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
main section h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:599px) and (min-width:0px) {
|
||||
|
||||
header div.head h1 {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
header div.head p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
||||
header {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: center;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin-bottom: 10px;
|
||||
|
||||
}
|
||||
|
||||
.center-with-margin {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
nav ul:first-of-type {
|
||||
border-bottom:1px solid #111;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
nav ul:last-of-type li{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
|
||||
}
|
||||
|
||||
header div.head {
|
||||
width: 85%;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
}
|
||||
header div.head h1 {
|
||||
font-size: 1.8rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
header div.head p {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
|
||||
main section:first-of-type{
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
main section {
|
||||
width: 90%;
|
||||
padding: 10px 0;
|
||||
margin: 50px auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
}
|
||||
main section div p {
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
div.languages {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
div.languages div {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.languages p.language-icon {
|
||||
font-size: 2.4rem;
|
||||
padding: 10px 30px;
|
||||
margin: 0px 0px 30px 0px;
|
||||
|
||||
}
|
||||
.languages p.language-title{
|
||||
font-size: 1.8rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main section form div label {
|
||||
margin-right:10px;
|
||||
border-radius: 5px;
|
||||
|
||||
}
|
||||
|
||||
main section form div:last-of-type input {
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
|
||||
}
|
||||
footer {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
grid-template-columns:1fr;
|
||||
|
||||
}
|
||||
footer ul li a {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
main section h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
main div h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
main section h2 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
main section h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
main div p{
|
||||
line-height: 160%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import registerServiceWorker from './registerServiceWorker';
|
||||
|
||||
|
||||
|
||||
ReactDOM.render(
|
||||
<App />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
registerServiceWorker();
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
// In production, we register a service worker to serve assets from local cache.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||
// cached resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||
// This link also includes instructions on opting out of this behavior.
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
|
||||
export default function register() {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Lets check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl);
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log(
|
||||
'This web app is being served cache-first by a service ' +
|
||||
'worker. To learn more, visit https://goo.gl/SC7cgQ'
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Is not local host. Just register service worker
|
||||
registerValidSW(swUrl);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the old content will have been purged and
|
||||
// the fresh content will have been added to the cache.
|
||||
// It's the perfect time to display a "New content is
|
||||
// available; please refresh." message in your web app.
|
||||
console.log('New content is available; please refresh.');
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl)
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
if (
|
||||
response.status === 404 ||
|
||||
response.headers.get('content-type').indexOf('javascript') === -1
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
'No internet connection found. App is running in offline mode.'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
const manageTranslations = require('react-intl-translations-manager').default;
|
||||
|
||||
manageTranslations({
|
||||
messagesDirectory: 'src/i18n/messages/',
|
||||
translationsDirectory: 'src/i18n/locales/',
|
||||
languages: ['en', 'ko'] // any language you need
|
||||
});
|
||||
Loading…
Reference in New Issue