diff --git a/package.json b/package.json
index 9de3e95..8ce1b63 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
"query-string": "^6.2.0",
"react": "latest",
"react-dom": "latest",
+ "react-intl": "^2.8.0",
"react-router-dom": "^4.3.1",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.84.0",
@@ -22,6 +23,7 @@
"@types/query-string": "^6.2.0",
"@types/react": "*",
"@types/react-dom": "*",
+ "@types/react-intl": "^2.3.15",
"@types/react-router-dom": "^4.3.1",
"@types/jest": "*",
"@types/node": "*",
@@ -35,7 +37,7 @@
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
- "prettier": "prettier --write src/**/*.{ts,tsx}",
+ "prettier": "prettier --write src/**/*.{ts,tsx,json}",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
diff --git a/src/index.tsx b/src/index.tsx
index 5f4939f..51ad9c2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,21 +1,35 @@
+import * as locale_en from 'react-intl/locale-data/en';
+import * as locale_pl from 'react-intl/locale-data/pl';
+import * as messages_pl from './translations/pl.json';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
+import {addLocaleData} from 'react-intl';
import {ChartView} from './chart_view';
import {HashRouter as Router, Route, Switch} from 'react-router-dom';
+import {IntlProvider} from 'react-intl';
import {Intro} from './intro';
import {TopBar} from './top_bar';
-import 'semantic-ui-css/semantic.min.css';
import './index.css';
+import 'semantic-ui-css/semantic.min.css';
+
+addLocaleData([...locale_en, ...locale_pl]);
+
+const messages = {
+ pl: messages_pl,
+};
+const language = navigator.language && navigator.language.split(/[-_]/)[0];
ReactDOM.render(
-
-
-
-
-
-
-
-
- ,
+
+
+
+
+
+
+
+
+
+
+ ,
document.querySelector('#root'),
);
diff --git a/src/intro.tsx b/src/intro.tsx
index c574a0d..c022519 100644
--- a/src/intro.tsx
+++ b/src/intro.tsx
@@ -1,6 +1,7 @@
import * as queryString from 'query-string';
import * as React from 'react';
import {Card} from 'semantic-ui-react';
+import {FormattedMessage} from 'react-intl';
import {Link} from 'react-router-dom';
/** Link that loads a GEDCOM file from URL. */
@@ -18,25 +19,49 @@ function GedcomLink(props: {url: string; text: string}) {
export function Intro() {
return (
-
+
+
+
+
+
- Topola Genealogy is a genealogy tree viewer that lets you browse the
- structure of the family.
+
- Use the LOAD FROM URL or LOAD FROM FILE buttons above to load a GEDCOM
- file. You can export a GEDCOM file from most of the existing genealogy
- programs and web sites.
+
+
+
+
-
Here are some examples from the web that you can view:
{' '}
- (from{' '}
+ ({' '}
GENPOL
@@ -47,7 +72,7 @@ export function Intro() {
url="https://webtreeprint.com/tp_downloader.php?path=famous_gedcoms/shakespeare.ged"
text="Shakespeare"
/>{' '}
- (from{' '}
+ ({' '}
webtreeprint.com
@@ -58,7 +83,7 @@ export function Intro() {
url="http://genealogyoflife.com/tng/gedcom/HarryPotter.ged"
text="Harry Potter"
/>{' '}
- (from{' '}
+ ({' '}
Famous Family Trees
diff --git a/src/top_bar.tsx b/src/top_bar.tsx
index 73a23b8..cfbed40 100644
--- a/src/top_bar.tsx
+++ b/src/top_bar.tsx
@@ -1,6 +1,7 @@
import * as md5 from 'md5';
import * as queryString from 'query-string';
import * as React from 'react';
+import {FormattedMessage} from 'react-intl';
import {Link} from 'react-router-dom';
import {RouteComponentProps} from 'react-router-dom';
import {
@@ -86,7 +87,14 @@ export class TopBar extends React.Component {
onClose={() => this.handleClose()}
centered={false}
>
-
+
+
+ txt}
+ />
+
-
);
@@ -124,7 +143,10 @@ export class TopBar extends React.Component {
this.handleLoadFromUrl()}>
- Load from URL
+
{