From 7af64ae3ca62e0f8e978fc4790138b6734168047 Mon Sep 17 00:00:00 2001
From: Lucas Crostarosa <lcrostar@gmail.com>
Date: Thu, 30 Jun 2022 13:37:14 -0600
Subject: [PATCH] add dockerfile, update deps and docks

---
 Dockerfile   |  9 +++++++++
 README.md    | 29 +++++++++++++++++++++++------
 package.json |  2 +-
 3 files changed, 33 insertions(+), 7 deletions(-)
 create mode 100644 Dockerfile

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 000000000..1521c2226
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,9 @@
+FROM node:lts
+
+RUN apt-get update -y && apt-get update -y && apt-get install yarn build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev -y
+WORKDIR /app
+COPY ./ /app
+RUN npm audit fix
+RUN npm install
+RUN npm run build
+CMD bash
\ No newline at end of file
diff --git a/README.md b/README.md
index 98a393c2e..56bb2650e 100644
--- a/README.md
+++ b/README.md
@@ -42,8 +42,14 @@ Alternatively you can run this command if you have node installed.
 npm install
 ```
 
+
+### Canvas Prerequisites
+Canvas requires Cairo and Pango (which are OS level dependencies) to be installed before
+Please refer to the latest installation instructions for canvas [located here](https://www.npmjs.com/package/canvas)
+_Note: running your generation script in docker will automatically do this for you_
 ## Usage ℹ️
 
+### Configuration
 Create your different layers as folders in the 'layers' directory, and add all the layer assets in these directories. You can name the assets anything as long as it has a rarity weight attached in the file name like so: `example element#70.png`. You can optionally change the delimiter `#` to anything you would like to use in the variable `rarityDelimiter` in the `src/config.js` file.
 
 Once you have all your layers, go into `src/config.js` and update the `layerConfigurations` objects `layersOrder` array to be your layer folders name in order of the back layer to the front layer.
@@ -177,7 +183,7 @@ const MODE = {
   luminosity: "luminosity",
 };
 ```
-
+### NPM Commands
 When you are ready, run the following command and your outputted art will be in the `build/images` directory and the json in the `build/json` directory:
 
 ```sh
@@ -229,6 +235,17 @@ const extraMetadata = {};
 
 That's it, you're done.
 
+### Docker usage
+You can run all of the above commands in a docker container to speed up installation and execution process
+```sh
+docker build -t generator . 
+docker run -it --name generator generator bash
+# New terminal tab
+# cd to directory you want files to go or add to path at end
+docker cp generator:/app/build ./
+open .
+```
+
 ## Utils
 
 ### Updating baseUri for IPFS and description
@@ -262,7 +279,7 @@ If you want to change the ratio of the pixelation then you can update the ratio
 
 ```js
 const pixelFormat = {
-  ratio: 5 / 128,
+    ratio: 5 / 128,
 };
 ```
 
@@ -274,10 +291,10 @@ Setting the `repeat: -1` will produce a one time render and `repeat: 0` will loo
 
 ```js
 const gif = {
-  export: true,
-  repeat: 0,
-  quality: 100,
-  delay: 500,
+    export: true,
+    repeat: 0,
+    quality: 100,
+    delay: 500,
 };
 ```
 
diff --git a/package.json b/package.json
index 141abf44e..251e08696 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
   "author": "Daniel Eugene Botha (HashLips)",
   "license": "MIT",
   "dependencies": {
-    "canvas": "^2.8.0",
+    "canvas": "^2.9.3",
     "gif-encoder-2": "^1.0.5",
     "sha1": "^1.1.1"
   }