Make your exported HTML page usable

This packages modifies the exported html of your family tree from Древо Жизни app to make it usable in a browser:

• adds zoom and drag functionality
• allows you to copy a link to a specific tree area
• fixes some css issues

Demo

• The original exported page
• The modified page

Basic usage

1. Export your tree in "interactive html" format from the app

As a result you will have your project looking like:

project_root
└── src
    ├── tree.html.files
    └── tree.html

2. Create a config file

Create a html-builder.config.json file in the project root:

{
  "entry": "src/tree.html",
  "output": "dist"
}

Now you have the following project structure:

project_root
├── src
│   ├── tree.html.files
│   │   └── ...
│   └── tree.html
└── html-builder.config.json

3. Install and run the package

Execute the following commands in the project root:

npm install drevo-zhizni-html-builder

npm exec drevo-shizni-html-builder

As a result you will have your project looking like:

project_root
├── dist                      // generated result
│   ├── tree.html.files
│   │   ├── popup-custom.css
│   │   └── ...
│   ├── tree.html
│   └── index.js   
├── src
│   ├── tree.html.files
│   │   └── ...
│   └── tree.html
├── package.json              // generated by npm install
├── package-lock.json         // generated by npm install
└── html-builder.config.json

Create a config file:

All config options

{
  "entry": "src/tree.html",   // source html file
  "output": "html/dist",      // output directory
  "favicon": "favicon.png",   // [optional] favicon file
  "robots_noindex": true,     // [optional] add <meta name="robots" content="noindex"> to 
                              //            the output html files
  "page": {                   // [optional] page behavior options
    "min_zoom": 0.1,          //     [optional] min zoom value (default = 0.1)
    "max_zoom": 4,            //     [optional] max zoom value (default = 4)
    "zoom_step": 0.1,         //     [optional] zoom sensitivity (default = 0.1)
    "use_anchor_state": true  //     [optional] use anchor state to store current zoom and 
                              //                position (default = true)
  }
}