metajelo-web

Web tools to display metajelo packages.

Usage

Installing CSS

PureCSS

Pure CSS is used for responsive web design, but, you can use something else: custom CSS or Bootstrap. Or, you can even omit it entirely, though this is not generally recommended.

See the "Add Pure to Your Page " and "Add the Viewport Meta Element" for how to install it under Get Started, or check the test/index.htmlfile in this repository for how this is done.

Default or Custom CSS Styles

By default, CSS files are retrieved from a separate repository using scripts/getcss; the file css/style.css contains some default styles used in our examples. Feel free to include it, or modify it (renaming the file is also possible):

<link rel="stylesheet" href="css/style.css">

Rather than buidling metajelo-web to get the JavaScript code, you can retrieve the latest build that is running on github-pages:

wget -r -np -k https://labordynamicsinstitute.github.io/metajelo-web/

You can then modify the retrieved index.html to use the custom CSS; it will by default be using a minified CSS file which might have a name like prod.80f5279b.css.

Creating the application element

Here we make use of PureCSS's responsive grid: you can use an alternative grid system instead, e.g. Bootstrap, but PureCSS was lighter weight and fit our needs.

<div class= "pure-g">
  <div class="pure-u-1-1">
    <div id="metajelo_root"></div>
  </div>
</div>

Building

If you have the relevant build tools intalled (npm, spago, pulp, etc.), you can build using npm run build && npm run prod. For a more convient approach, see the section on Docker below, and for complete build commands used in CI, see scripts/dist_build_commands.sh.

Docker

• Run ./psc.sh <command>, e.g. ./psc.sh npm run prod. This will run npm run prod the command in the container with the CWD mounted and then exit. Alternatively if you want to issue multiple commands in the container quickly, you can run ./psc.sh bash.

API Documentation

API docs are available on Pursuit.