Add "single tree mode" when building

This commit is contained in:
Przemek Więch 2023-08-28 23:08:19 +02:00
parent bd6f6a845b
commit 5836ea2133
2 changed files with 44 additions and 7 deletions

View File

@ -101,6 +101,21 @@ https://github.com/PeWu/topola-viewer/archive/refs/heads/gh-pages.zip
These are the exact files that are hosted on GitHub pages. These are the exact files that are hosted on GitHub pages.
### Build for your own data only
You can run Topola Viewer in a "single tree mode" that displays only the GEDCOM you specify. Specify the URL to a GEDCOM file in the `REACT_APP_STATIC_URL` environment variable when building and running the application.
Run locally with the specified data URL:
```
REACT_APP_STATIC_URL=https://example.org/sample.ged npm start
```
Build with the specified data URL:
```
REACT_APP_STATIC_URL=https://example.org/sample.ged npm run build
```
The `build/` folder will contain files that can be hosted on a Web server.
### Alternative build ### Alternative build
The [topola-webpack](https://github.com/develancer/topola-webpack) tool can build a Topola Genealogy Viewer package bundled together with a GEDCOM file. The [topola-webpack](https://github.com/develancer/topola-webpack) tool can build a Topola Genealogy Viewer package bundled together with a GEDCOM file.

View File

@ -48,6 +48,14 @@ import {
WikiTreeSourceSpec, WikiTreeSourceSpec,
} from './datasource/wikitree'; } from './datasource/wikitree';
/**
* Load GEDCOM URL from REACT_APP_STATIC_URL environment variable.
*
* If this environment variable is provided, the viewer is switched to
* single-tree mode without the option to load other data.
*/
const staticUrl = process.env.REACT_APP_STATIC_URL;
/** Shows an error message in the middle of the screen. */ /** Shows an error message in the middle of the screen. */
function ErrorMessage(props: {message?: string}) { function ErrorMessage(props: {message?: string}) {
return ( return (
@ -135,7 +143,13 @@ function getArguments(location: H.Location<any>): Arguments {
const url = getParam('url'); const url = getParam('url');
const embedded = getParam('embedded') === 'true'; // False by default. const embedded = getParam('embedded') === 'true'; // False by default.
var sourceSpec: DataSourceSpec | undefined = undefined; var sourceSpec: DataSourceSpec | undefined = undefined;
if (getParam('source') === 'wikitree') { if (staticUrl) {
sourceSpec = {
source: DataSourceEnum.GEDCOM_URL,
url: staticUrl,
handleCors: false,
};
} else if (getParam('source') === 'wikitree') {
sourceSpec = { sourceSpec = {
source: DataSourceEnum.WIKITREE, source: DataSourceEnum.WIKITREE,
authcode: getParam('authcode'), authcode: getParam('authcode'),
@ -170,7 +184,7 @@ function getArguments(location: H.Location<any>): Arguments {
chartType: chartTypes.get(view) || ChartType.Hourglass, chartType: chartTypes.get(view) || ChartType.Hourglass,
showSidePanel: getParam('sidePanel') !== 'false', // True by default. showSidePanel: getParam('sidePanel') !== 'false', // True by default.
standalone: getParam('standalone') !== 'false' && !embedded, standalone: getParam('standalone') !== 'false' && !embedded && !staticUrl,
showWikiTreeMenus: getParam('showWikiTreeMenus') !== 'false', // True by default. showWikiTreeMenus: getParam('showWikiTreeMenus') !== 'false', // True by default.
freezeAnimation: getParam('freeze') === 'true', // False by default freezeAnimation: getParam('freeze') === 'true', // False by default
config: argsToConfig(search), config: argsToConfig(search),
@ -559,11 +573,19 @@ export function App() {
/> />
)} )}
/> />
<Switch> {staticUrl ? (
<Route exact path="/" component={Intro} /> <Switch>
<Route exact path="/view" render={renderMainArea} /> <Route exact path="/view" render={renderMainArea} />
<Redirect to={'/'} /> <Redirect to={'/view'} />
</Switch> </Switch>
) : (
<Switch>
<Route exact path="/" component={Intro} />
<Route exact path="/view" render={renderMainArea} />
<Redirect to={'/'} />
</Switch>
)}
</> </>
); );
} }