modulos_internal/contracts/generator

Generator Readme

Running it online

You can run the generator online:

• Generate a contract online →

Downloading and running the generator on your own server (4 options)

Alternatively, you can download the generator as a small app written in vanilla Javascript:

• Download generator.zip

…and transfer it to your own server.

If running the generator locally, a local server will need to be started (eg: using the Five Server extension in VS Code) in order for the generator to work (browsers block ES Javascript imports from being used locally).

Optional build step

(for bundling styles and using postcss)

Based on the level of control you need over the styles for the generator and the contract itself, you can go with one of the following 3 options:

Option 1: No build setp

The generator can be used without any build step, with the existing contract styles (in regular/vanilla css) already compiled in data/style.min.css.

---

Option 2: Docker

Build your own docker image or use the latest image from Docker hub

Deploy with the latest image

To run the image as a standalone container, use the following commands:

docker pull sarangcr03/nonsalant-contract:latest

docker run -p 9090:80 sarangcr03/nonsalant-contract:latest

For those who prefer Docker Compose, below is a simple docker-compose.yml example that sets up the service:

version: '3.8'
services:
  web:
    image: sarangcr03/nonsalant-contract:latest
    ports:
      - "9090:80"

Start the service using:

docker-compose up

Deploy with nginx proxy manager for reverse proxy and SSL

With this method you are not mapping an internal port to a host port in docker, so you must add a proxy host pointing to "http://contract-app:80" in the nginx proxy manager admin panel which will be located at http://localhost:81/ (replace localhost with the ip address or hostname of the docker host)

docker-compose.yml example:

version: '3.8'

services:
  nginx-proxy-manager:
    image: jc21/nginx-proxy-manager:latest
    restart: unless-stopped
    ports:
      - '80:80'   # HTTP
      - '81:81'   # Admin interface
      - '443:443' # HTTPS
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt
    networks:
      - contract-net

  contract-app:
    image: sarangcr03/nonsalant-contract:latest
    restart: unless-stopped
    networks:
      - contract-net

networks:
  contract-net:
    driver: bridge

Start the service using:

docker-compose up

---

Option 3: Build step for the contract styles

(in 📁data/more-data/css)

The styles for the contract use postcss for:

• importing multiple CSS files into a single minified file
• enabling use of selector nesting

To edit the uncompilled postcss, a build step is needed with the following commands to “build” or “watch” (re-build on every change) the contract styles:

npm run postcss:build 

npm run postcss:watch

FYI

All the CSS for the contract styles (all files in the 📁data/more-data/css folder, coming in through the main.css entrypoint) will be compilled from postcss to regular CSS (in data/style.min.css).

All CSS for the generator styles (all files in the 📁styles folder, coming in through the main.css entrypoint) are currently written in regular CSS and loaded using CSS @imports.

The contract's data/style.min.css is also imported in the generator's main.css entry point using a regular CSS @import.

Postcss configuration can be found in postcss.config.js

---

Option 4: Enabling postcss for the generator styles

(in 📁styles)

If you intend to write postcss in the generator's styles too (in addition to the contract styles mentioned above, where postcss is enabled by default), you will need a separate watch command to process the postcss:

postcss:watch-generator

...and the following files will need to be edited accordingly:

Inside the package.json file

replace:

  "scripts": {
    "postcss:watch": "postcss data/more-data/css/main.css -o data/style.min.css -w",
    "postcss:build": "postcss data/more-data/css/main.css -o data/style.min.css"
  },

with:

  "scripts": {
    "postcss:watch": "postcss data/more-data/css/main.css -o data/style.min.css -w",
    "postcss:watch-generator": "postcss styles/main.css -o styles/style.min.css -w",
    "postcss:build": "postcss data/more-data/css/main.css -o data/style.min.css & postcss styles/main.css -o style.min.css"
  },

Inside the edit.html file:

replace:

    <link rel="stylesheet" href="styles/main.css">
    <!-- <link rel="stylesheet" href="styles/style.min.css"> -->

with:

    <!-- <link rel="stylesheet" href="/styles/main.css"> -->
    <link rel="stylesheet" href="/style.min.css">

FYI

All the generator styles (all files in the 📁styles folder, coming in through the main.css entrypoint) will now be compiled from postcss to regular CSS (in styles/style.min.css).

The styles for the contract itself (data/style.min.css mentioned above) are imported in the generator styles using a regular CSS @import.

Postcss configuration can be found in postcss.config.js