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} + /> +
    this.handleLoad()}> { onChange={(e) => this.handleUrlChange(e)} ref={(ref) => (this.inputRef = ref!)} /> -

    - Data from the URL will be loaded through{' '} - - cors-anywhere.herokuapp.com - {' '} - to avoid CORS issues. +

    + + cors-anywhere.herokuapp.com + + ), + }} + />

    - + ); @@ -124,7 +143,10 @@ export class TopBar extends React.Component { this.handleLoadFromUrl()}> - Load from URL + {