JSON schema file compiler for generating an interactive model of website navigation.
This compiler accepts custom files or files generated by the captor script containing the JSON schema format. Consequently, generate a series of HTML files that represent a simulation of the navigation on a web site.
npm install @opentech-ux/lom-compiler// Using Node.js `require()`
const { LomCompiler } = require('@opentech-ux/lom-compiler');
// Using ES6 imports
import { LomCompiler } from '@opentech-ux/lom-compiler';-
Initial project folder structure
Project folder/ ├─ build/ │ ├─ test-output/ ├─ data/ │ ├─ json/ │ │ ├─ basic-lom/ │ │ │ ├─ basic.lom.json │ │ ├─ multi-lom/ │ │ │ ├─ basic.lom.json │ │ │ ├─ script.lom.json │ │ ├─ script-lom/ │ │ │ ├─ script.lom.json ├─ index.js
-
Use examples in a JS file
// index.js const BASE_DIR = 'build/test-output'; const folderName = 'basic-lom'; // Base directory is the executing file directory new LomCompiler() // Source file path .source('data/json/basic-lom/basic.lom.json') // Directory path where to save the result (folder will be created in case of needed) .outputDir(`${BASE_DIR}/${folderName}`) .compile();
// index.js const BASE_DIR = 'build/test-output'; const folderName = 'script-lom'; // Base directory defined new LomCompiler(BASE_DIR) // Source file path relative to base directory .source('../../data/json/script-lom/script.lom.json') // Folder name used inside the base directory .outputDir(folderName) .compile();
// index.js const BASE_DIR = 'build/test-output'; const folderName = 'multi-lom'; // Base directory defined new LomCompiler(BASE_DIR) // Source files directory path relative to base directory .source('../../data/json/multi-lom') // Folder name used inside the base directory .outputDir(folderName) .compile();
-
Project folder structure after executing the examples
Project folder/ ├─ build/ │ ├─ test-output/ │ │ ├─ basic-lom/ │ │ │ ├─ otherPage/ │ │ │ │ ├─ index.html │ │ │ ├─ index.html │ │ ├─ script-lom/ │ │ │ ├─ about/ │ │ │ │ ├─ index.html │ │ │ ├─ contact/ │ │ │ │ ├─ index.html │ │ │ ├─ index.html │ │ ├─ multi-lom/ │ │ │ ├─ about/ │ │ │ │ ├─ index.html │ │ │ ├─ contact/ │ │ │ │ ├─ index.html │ │ │ ├─ otherPage/ │ │ │ │ ├─ index.html │ │ │ ├─ index.html ├─ data/ │ ├─ json/ │ │ ├─ basic-lom/ │ │ │ ├─ basic.lom.json │ │ ├─ multi-lom/ │ │ │ ├─ basic.lom.json │ │ │ ├─ script.lom.json │ │ ├─ script-lom/ │ │ │ ├─ script.lom.json ├─ index.js