ImagineUI for Foliant¶
ImagineUI is a tool that supports developing wireframes in a localized human-readable format.
This preprocessor allows using
<imagineui> macros in Foliant
Before using ImagineUI, you need to install Node.js.
$ pip install foliantcontrib.imagineui
ImagineUI uses Puppeteer for rendering in background, which is a huge dependency, so to avoid downloading Chrome every time this preprocessor applies, it's advised to install
$ npm i -g imagineui-cli
To enable the preprocessor, add
preprocessors section in the project config:
preprocessors: - imagineui
The preprocessor has a number of options with the following default values:
preprocessors: - imagineui: version: global cache_dir: !path .imagineuicache
- Version of the
imagineui-clipackage in NPM. "global" (default) will skip and will use either the version already installed globally or the latest version, which speeds up NPX significantly.
- Directory to store downloaded and resized images.
To insert a wireframe image rendered by ImagineUI into your documentation, use
<imagineui>...</imagineui> tags in Markdown source:
<imagineui> Page: "Welcome screen" Block: "Header" Header "Mockup poetry" Block: "Flowers" Two columns Image "Roses are red," Image "Violets are blue." Image "Your mockups are awesome," Image "And so are you!" Block: "Footer" One row Button "Try ImagineUI" Button "Subscribe" Button "Contribute" </imagineui>
ImagineUI preprocessor will replace such blocks with local image references.
BindSympli preprocessor was used as a starting point