Skip to content

Commit 86fdac2

Browse files
FlorianCassayreFlorianCassayre
committed
Added an "about" page and fixed the layout
1 parent dbce427 commit 86fdac2

File tree

17 files changed

+196
-20
lines changed

17 files changed

+196
-20
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
# browse-gedcom
22

33
A modern Gedcom file viewer app built in the browser.
4+
5+
**[Live demo](https://mon.arbre.app)**

‎src/i18n/locales/en.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,23 @@
88
"footer.version": "Version {version}",
99
"page.common.head.description": "View your genealogy in your browser.",
1010
"page.common.loading": "Loading...",
11+
"page.about.head.title": "About",
12+
"page.about.about.title": "About",
13+
"page.about.about.description": "This app is being developed by {name} as a free-time hobby, with the hope that it will be useful to some.",
14+
"page.about.contact.title": "Contact",
15+
"page.about.contact.description": "Write us at: {email}",
16+
"page.about.contribute.title": "Contribute",
17+
"page.about.contribute.thank_you": "Thank you for your interest! Contributions include, without limitation:",
18+
"page.about.contribute.suggestions_bugs": "Suggestions and bug reports",
19+
"page.about.contribute.translations": "Translations",
20+
"page.about.contribute.development": "Development",
21+
"page.about.contribute.contact": "Please get in touch with the author using the above contact address.",
22+
"page.about.developers.title": "Developers",
23+
"page.about.developers.description": "While the app aims to become a final product, it relies on sub-packages that were developed for the occasion. These packages are meant to be reusable in other projects.",
24+
"page.about.developers.read_gedcom": "{name}: a high-level, fast JavaScript Gedcom file reading API. It is at the core of the application and abstracts away the parsing, indexing and traversal processes.",
25+
"page.about.developers.genealogy_visualizations": "{name}: a format agnostic JavaScript API to build genealogical data visualizations. It is used by the printer module. The input data does not need to come from a Gedcom file.",
26+
"page.about.developers.public_gedcoms": "{name}: a curated list of public Gedcom files to be used for testing or demo purposes.",
27+
"page.about.developers.browse_gedcom": "And of course {name} being this very app. It can be used as a package for customization purposes.",
1128
"page.load.head.title": "Load a file",
1229
"page.load.title": "Load a file",
1330
"page.load.select_file": "Select a Gedcom file...",

‎src/i18n/locales/fr.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,23 @@
88
"footer.version": "Version {version}",
99
"page.common.head.description": "Consultez votre généalogie depuis votre navigateur.",
1010
"page.common.loading": "Chargement...",
11+
"page.about.head.title": "À propos",
12+
"page.about.about.title": "À propos",
13+
"page.about.about.description": "Cette application est développée par {name} pendant son temps libre, dans l'espoir qu'elle sera utile à certains.",
14+
"page.about.contact.title": "Contact",
15+
"page.about.contact.description": "Écrivez-nous à : {email}",
16+
"page.about.contribute.title": "Contribuer",
17+
"page.about.contribute.thank_you": "Merci pour votre intérêt ! Les contributions incluent, sans s'y limiter :",
18+
"page.about.contribute.suggestions_bugs": "Suggestions et rapport de bugs",
19+
"page.about.contribute.translations": "Traduction",
20+
"page.about.contribute.development": "Développement",
21+
"page.about.contribute.contact": "Merci de vous adresser à l'auteur depuis l'adresse de contact ci-dessus.",
22+
"page.about.developers.title": "Développeurs",
23+
"page.about.developers.description": "Cette application a pour vocation d'être un produit en elle-même, cependant elle dépend de différent paquets qui ont été développés pour l'occasion. Ces paquets ont été pensés pour être réutilisables dans d'autres projets.",
24+
"page.about.developers.read_gedcom": "{name} : une API JavaScript haut-niveau pour la lecture de fichiers Gedcom. Elle est au centre de l'application et s'occupe du traitement, de l'indexation et du parcours des données.",
25+
"page.about.developers.genealogy_visualizations": "{name} : une API JavaScript agnostique au format qui permet de construire des visualisations de données généalogiques. Elle est utilisée par le module d'impression. Les données en entrées ne doivent pas nécessairement provenir d'un fichier Gedcom.",
26+
"page.about.developers.public_gedcoms": "{name} : une liste de fichiers Gedcom publics à vocation d'essai ou de démonstration.",
27+
"page.about.developers.browse_gedcom": "Et {name} qui est cette application même. Il peut être utilisé comme un paquet dans le but de le personnaliser.",
1128
"page.load.head.title": "Charger un fichier",
1229
"page.load.title": "Charger un fichier",
1330
"page.load.select_file": "Sélectionner un fichier Gedcom...",

‎src/pages/MenuBase.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import PropTypes from 'prop-types';
22
import React, { Component } from 'react';
3+
import { FormattedMessage } from 'react-intl';
34
import { LinkContainer } from 'react-router-bootstrap';
45
import { Container, Nav, Navbar } from 'react-bootstrap';
56
import { ChooseLanguage } from '../components/ChooseLanguage';
@@ -19,9 +20,12 @@ export class MenuBase extends Component {
1920
<Navbar.Collapse id="basic-navbar-nav">
2021
<Nav className="mr-auto">
2122
{left}
23+
<LinkContainer to={AppRoutes.about}>
24+
<Nav.Link><FormattedMessage id="menu.about"/></Nav.Link>
25+
</LinkContainer>
2226
</Nav>
2327
{right}
24-
<ChooseLanguage className="ml-2"/>
28+
<ChooseLanguage className="ml-lg-2 mt-lg-0 mt-2"/>
2529
</Navbar.Collapse>
2630
</Container>
2731
</Navbar>

‎src/pages/mixed/MixedLayout/MixedLayout.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import PropTypes from 'prop-types';
2+
import React, { Component } from 'react';
3+
import { Nav } from 'react-bootstrap';
4+
import { FormattedMessage } from 'react-intl';
5+
import { AppRoutes } from '../../../routes';
6+
import { Content } from '../../Content';
7+
import { Footer } from '../../Footer';
8+
import { HelmetBase } from '../../HelmetBase';
9+
import { MenuBase } from '../../MenuBase';
10+
import { LinkContainer } from 'react-router-bootstrap';
11+
import { PrivateLayout } from '../../private';
12+
import { PublicLayout } from '../../public';
13+
14+
export class MixedLayout extends Component {
15+
render() {
16+
const { children, isFileLoaded } = this.props;
17+
return isFileLoaded ? (
18+
<PrivateLayout>
19+
{children}
20+
</PrivateLayout>
21+
) : (
22+
<PublicLayout>
23+
{children}
24+
</PublicLayout>
25+
);
26+
}
27+
}
28+
29+
MixedLayout.propTypes = {
30+
children: PropTypes.any,
31+
/* Redux */
32+
isFileLoaded: PropTypes.bool.isRequired,
33+
};
34+
35+
MixedLayout.defaultProps = {
36+
children: null,
37+
};

‎src/pages/mixed/MixedLayout/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { connect } from 'react-redux';
2+
import { MixedLayout as MixedLayoutComponent } from './MixedLayout';
3+
4+
const mapStateToProps = state => ({
5+
isFileLoaded: !!state.gedcomFile.data,
6+
});
7+
8+
export const MixedLayout = connect(
9+
mapStateToProps,
10+
null,
11+
)(MixedLayoutComponent);

‎src/pages/mixed/PageAbout/PageAbout.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import React, { Component } from 'react';
2+
import { Card } from 'react-bootstrap';
3+
import { Code, CodeSlash, Envelope, InfoCircle, People, QuestionCircle } from 'react-bootstrap-icons';
4+
import { FormattedMessage } from 'react-intl';
5+
import { HelmetBase } from '../../HelmetBase';
6+
import { MixedLayout } from '../MixedLayout';
7+
import { name } from '../../../../package.json';
8+
9+
export class PageAbout extends Component {
10+
renderContactEmail = () => {
11+
// Stupid method that prevents scrapers from accessing the address
12+
const email = [...window.atob('cHBhLmVyYnJhQHRjYXRub2M=')].reverse().join('');
13+
return <strong><a href={`mailto:${email}`} target="_blank" rel="noreferrer">{email}</a></strong>;
14+
};
15+
16+
render() {
17+
return (
18+
<MixedLayout>
19+
<FormattedMessage id="page.about.head.title">
20+
{title => <HelmetBase title={title} />}
21+
</FormattedMessage>
22+
<Card>
23+
<Card.Body>
24+
<Card.Title>
25+
<InfoCircle className="icon mr-2"/>
26+
<FormattedMessage id="page.about.about.title"/>
27+
</Card.Title>
28+
<p>
29+
<FormattedMessage id="page.about.about.description" values={{ name: <strong><a href="https://florian.cassayre.me" target="_blank" rel="noreferrer">Florian Cassayre</a></strong> }}/>
30+
</p>
31+
32+
<Card.Title>
33+
<Envelope className="icon mr-2"/>
34+
<FormattedMessage id="page.about.contact.title"/>
35+
</Card.Title>
36+
<p>
37+
<FormattedMessage id="page.about.contact.description" values={{ email: this.renderContactEmail() }}/>
38+
</p>
39+
<Card.Title>
40+
<People className="icon mr-2"/>
41+
<FormattedMessage id="page.about.contribute.title"/>
42+
</Card.Title>
43+
<p>
44+
<FormattedMessage id="page.about.contribute.thank_you"/>
45+
</p>
46+
<ul>
47+
<li>
48+
<FormattedMessage id="page.about.contribute.suggestions_bugs"/>
49+
</li>
50+
<li>
51+
<FormattedMessage id="page.about.contribute.translations"/>
52+
</li>
53+
<li>
54+
<FormattedMessage id="page.about.contribute.development"/>
55+
</li>
56+
</ul>
57+
<p>
58+
<FormattedMessage id="page.about.contribute.contact"/>
59+
</p>
60+
61+
<Card.Title>
62+
<CodeSlash className="icon mr-2" />
63+
<FormattedMessage id="page.about.developers.title"/>
64+
</Card.Title>
65+
<p>
66+
<FormattedMessage id="page.about.developers.description"/>
67+
</p>
68+
<ul>
69+
<li>
70+
<FormattedMessage id="page.about.developers.read_gedcom" values={{ name: <a href="https://github.com/arbre-app/read-gedcom" target="_blank" rel="noreferrer">read-gedcom</a> }}/>
71+
</li>
72+
<li>
73+
<FormattedMessage id="page.about.developers.genealogy_visualizations" values={{ name: <a href="https://github.com/arbre-app/genealogy-visualizations" target="_blank" rel="noreferrer">genealogy-visualizations</a> }}/>
74+
</li>
75+
<li>
76+
<FormattedMessage id="page.about.developers.public_gedcoms" values={{ name: <a href="https://github.com/arbre-app/public-gedcoms" target="_blank" rel="noreferrer">public-gedcoms</a> }}/>
77+
</li>
78+
<li>
79+
<FormattedMessage id="page.about.developers.browse_gedcom" values={{ name: <a href="https://github.com/arbre-app/browse-gedcom" target="_blank" rel="noreferrer">{name}</a> }}/>
80+
</li>
81+
</ul>
82+
</Card.Body>
83+
</Card>
84+
</MixedLayout>
85+
);
86+
}
87+
}

‎src/pages/mixed/PageAbout/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { PageAbout } from './PageAbout';

src/pages/public/PageNotFound/PageNotFound.js renamed to src/pages/mixed/PageNotFound/PageNotFound.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import React, { Component } from 'react';
22
import { FormattedMessage } from 'react-intl';
33
import { HelmetBase } from '../../HelmetBase';
4-
import { PublicLayout } from '../PublicLayout';
4+
import { MixedLayout } from '../MixedLayout';
55

66
export class PageNotFound extends Component {
77
render() {
88
return (
9-
<PublicLayout>
9+
<MixedLayout>
1010
<FormattedMessage id="page.not_found.head.title">
1111
{([title]) => <HelmetBase title={title} />}
1212
</FormattedMessage>
1313
<FormattedMessage id="page.not_found.not_found"/>
14-
</PublicLayout>
14+
</MixedLayout>
1515
);
1616
}
1717
}

src/pages/public/PageNotFound/index.js renamed to src/pages/mixed/PageNotFound/index.js

File renamed without changes.

0 commit comments

Comments
 (0)