1.0.6 • Published 5 months ago
drevo-shizni-html-builder v1.0.6
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
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)
}
}