chore: Release 2.0.0

.gitlab-ci.yml

@@ -1,62 +1,14 @@
-image: node:14.15.5-stretch-slim
-
 variables:
-  GIT_DEPTH: 0
+  MODULE_DIRS: lang styles
-  GIT_STRATEGY: fetch
+  MODULE_ZIP_DIRS: elements lang styles
 
-stages:
+include:
-  - build
+  - project: '$CI_PROJECT_ROOT_NAMESPACE/ci-tools/pipeline/ci-tools-pipeline-release'
-  - release
+    ref: 1.0.0
-
+    file: '/release-common.yml'
-build:
+  - project: '$CI_PROJECT_ROOT_NAMESPACE/ci-tools/pipeline/ci-tools-pipeline-release-node'
-  stage: build
+    ref: 1.0.2
-  before_script:
+    file: '/release-node.yml'
-    - apt update
+  - project: '$CI_PROJECT_ROOT_NAMESPACE/ci-tools/pipeline/ci-tools-pipeline-project-foundry-module'
-    - apt install -y zip
+    ref: 1.0.1
-  script:
+    file: '/pipeline-foundry-module.yml'
-    - npm ci
-    - npm run build
-    - mkdir -p dist/lang
-    - mkdir -p dist/styles
-    - cp lang/* dist/lang/
-    - cp styles/* dist/styles/
-    - cp module.json dist
-    - cd dist
-    - zip wfrp4e-actor-sheet-print.zip -r *.* elements lang styles -x ".*"
-  artifacts:
-    name: wfrp4e-actor-sheet-print
-    when: on_success
-    paths:
-      - dist/wfrp4e-actor-sheet-print.zip
-      - dist/module.json
-    expire_in: 1 day
-  only:
-    - tags
-    - master
-
-release:
-  stage: release
-  image: registry.gitlab.com/gitlab-org/release-cli:latest
-  script:
-    - echo 'Running the release job.'
-  artifacts:
-    name: wfrp4e-actor-sheet-print
-    when: on_success
-    paths:
-      - dist/wfrp4e-actor-sheet-print.zip
-      - dist/module.json
-    expire_in: never
-  release:
-    tag_name: $CI_COMMIT_TAG
-    name: 'Release $CI_COMMIT_TAG'
-    description: './CHANGELOG.md'
-    assets:
-      links:
-        - name: 'module'
-          url: 'https://greenskin-foundryvtt.gitlab.io/-/wfrp4-actor-sheet-print/-/jobs/$CI_JOB_ID/artifacts/dist/wfrp4e-actor-sheet-print.zip'
-          link_type: package
-        - name: 'manifest'
-          url: 'https://greenskin-foundryvtt.gitlab.io/-/wfrp4-actor-sheet-print/-/jobs/$CI_JOB_ID/artifacts/dist/module.json'
-          link_type: package
-  only:
-    - tags

CHANGELOG.md

@@ -1,5 +1,16 @@
 ## In development
 
+## 1.2.0
+
+### New features
+
+- HTML Responsive Export Characters sheet
+- Add contextual menu to actor to HTML responsive Export Characters sheet
+
+## 1.1.0
+
+- Add contextual menu to actor to PDF Export Characters sheet
+
 ## 1.0.0
 
 ### New features

README.md

@@ -1,6 +1,6 @@
 # WFRP 4 Actor Sheet Print
 
-This module allow to export characters sheet on a friendly print pdf.
+This module allow to export characters sheet on a friendly print pdf or a responsive html.
 
 # Authors
 
@@ -28,12 +28,8 @@ A print buton is added on top of sheet to export as pdf
 
 ![Print button](media/actor-sheet-print-button.png)
 
+A Contextual menu is added on Actor menu, one for pdf, an other for html
+
+![Actor button](media/actor-sheet-print-actor-button.png)
+
 ## Comming soon
-
-## Module link
-
-https://raw.githubusercontent.com/mcailleaux/WFRP4-FoundryVTT-wfrp4e-actor-sheet-print/dist/module.json
-
-## Module Beta link
-
-https://raw.githubusercontent.com/mcailleaux/WFRP4-FoundryVTT-wfrp4e-actor-sheet-print/dist-beta/module-beta.json

lang/en.json

@@ -1 +1,4 @@
-{}
+{
+  "WFRP4SHEETPRINT.export.pdf": "Export to PDF",
+  "WFRP4SHEETPRINT.export.html": "Export to Html"
+}

lang/fr.json

@@ -1 +1,4 @@
-{}
+{
+  "WFRP4SHEETPRINT.export.pdf": "Exporter en PDF",
+  "WFRP4SHEETPRINT.export.html": "Exporter en Html"
+}

local-deploy.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+set -e
+
+cp -r ./dist/* $LOCAL_FOUNDRY
+
+

module.json

@@ -1,30 +1,50 @@
 {
-  "name": "wfrp4e-actor-sheet-print",
+  "id": "wfrp4e-actor-sheet-print",
   "title": "[WFRP4] Actor Sheet Print",
   "description": "Functions to print actor sheet",
-  "version": "1.0.2",
+  "version": "${MODULE_VERSION}",
-  "minimumCoreVersion": "0.8.0",
+  "compatibility": {
-  "compatibleCoreVersion": "0.8.9",
+    "minimum": "10",
-  "author": "Skeroujvapluvit",
+    "verified": "10.287",
-  "systems": ["wfrp4e"],
+    "maximum": "10"
-  "dependencies": [],
+  },
+  "authors": [
+    {
+      "name": "Skeroujvapluvit",
+      "flags": {}
+    }
+  ],
+  "relationships": {
+    "systems": [
+      {
+        "id": "wfrp4e",
+        "type": "system",
+        "compatibility": {
+          "verified": "6.1.4"
+        }
+      }
+    ],
+    "requires": []
+  },
   "esmodules": ["main.js"],
   "languages": [
     {
       "lang": "en",
       "name": "English",
-      "path": "lang/en.json"
+      "path": "lang/en.json",
+      "flags": {}
     },
     {
       "lang": "fr",
       "name": "Français",
-      "path": "lang/fr.json"
+      "path": "lang/fr.json",
+      "flags": {}
     }
   ],
   "styles": ["./styles/main.css"],
-  "url": "https://github.com/mcailleaux/WFRP4-FoundryVTT-wfrp4e-actor-sheet-print",
+  "url": "https://gitlab.com/greenskin-foundryvtt/wfrp4-actor-sheet-print",
-  "download": "https://github.com/mcailleaux/WFRP4-FoundryVTT-wfrp4e-actor-sheet-print/blob/dist/dist/wfrp4e-actor-sheet-print.zip?raw=true",
+  "download": "https://gitlab.com/greenskin-foundryvtt/wfrp4-actor-sheet-print/-/releases/${MODULE_VERSION}/downloads/dist/wfrp4-actor-sheet-print.zip",
-  "manifest": "https://raw.githubusercontent.com/mcailleaux/WFRP4-FoundryVTT-wfrp4e-actor-sheet-print/dist/module.json",
+  "manifest": "https://gitlab.com/greenskin-foundryvtt/wfrp4-actor-sheet-print/-/releases/${MODULE_VERSION}/downloads/dist/module.json",
-  "readme": "https://raw.githubusercontent.com/mcailleaux/WFRP4-FoundryVTT-wfrp4e-actor-sheet-print/dist/README.md",
+  "readme": "https://gitlab.com/greenskin-foundryvtt/wfrp4-actor-sheet-print/-/raw/${MODULE_VERSION}/README.md",
-  "changelog": "https://raw.githubusercontent.com/mcailleaux/WFRP4-FoundryVTT-wfrp4e-actor-sheet-print/dist/CHANGELOG.md"
+  "changelog": "https://gitlab.com/greenskin-foundryvtt/wfrp4-actor-sheet-print/-/raw/${MODULE_VERSION}/CHANGELOG.md"
 }

package-lock.json

@@ -1,6 +1,7 @@
 {
-  "requires": true,
+  "version": "2.0.0",
   "lockfileVersion": 1,
+  "requires": true,
   "dependencies": {
     "@babel/code-frame": {
       "version": "7.15.8",
@@ -89,15 +90,15 @@
       }
     },
     "@discoveryjs/json-ext": {
-      "version": "0.5.5",
+      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.5.tgz",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz",
-      "integrity": "sha512-6nFkfkmSeV/rqSaS4oWHgmpnYw194f6hmWF5is6b0J1naJZoiD0NTc9AiUwPHvWsowkjuHErCZT1wa0jg+BLIA==",
+      "integrity": "sha512-ws57AidsDvREKrZKYffXddNkyaF14iHNHm8VQnZH6t99E8gczjNN0GpvcGny0imC80yQ0tHz1xVUKk/KFQSUyA==",
       "dev": true
     },
     "@league-of-foundry-developers/foundry-vtt-types": {
-      "version": "0.8.8-8",
+      "version": "0.8.9-9",
-      "resolved": "https://registry.npmjs.org/@league-of-foundry-developers/foundry-vtt-types/-/foundry-vtt-types-0.8.8-8.tgz",
+      "resolved": "https://registry.npmjs.org/@league-of-foundry-developers/foundry-vtt-types/-/foundry-vtt-types-0.8.9-9.tgz",
-      "integrity": "sha512-DjWRdl9PHh5CrnqmQBw19Swe/W1asmD5PjU0arMHL1Ni7Zo91o7eHoHqciOAU0M/Nu1BK0CH/Q+nXpNY9dsr3Q==",
+      "integrity": "sha512-CLpFu5XY6BnxVNou28MKZcvmjWWzv+UYLZ21QL+9OxFegMr5iE15pqyNHcTuJPhmJwnBD2WYUzl+vsAMjUfLLg==",
       "dev": true,
       "requires": {
         "@types/jquery": "~3.5.6",
@@ -106,8 +107,7 @@
         "pixi-particles": "4.3.1",
         "pixi.js": "5.3.4",
         "socket.io-client": "4.1.2",
-        "tinymce": "5.8.1",
+        "tinymce": "5.8.1"
-        "typescript": "^4.3.5"
       }
     },
     "@pixi/accessibility": {
@@ -488,15 +488,15 @@
       }
     },
     "@types/component-emitter": {
-      "version": "1.2.10",
+      "version": "1.2.11",
-      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz",
+      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz",
-      "integrity": "sha512-bsjleuRKWmGqajMerkzox19aGbscQX5rmmvvXl3wlIp5gMG1HgkiwPxsN5p070fBDKTNSPgojVbuY1+HWMbFhg==",
+      "integrity": "sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ==",
       "dev": true
     },
     "@types/eslint": {
-      "version": "7.28.1",
+      "version": "8.2.1",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.1.tgz",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.2.1.tgz",
-      "integrity": "sha512-XhZKznR3i/W5dXqUhgU9fFdJekufbeBd5DALmkuXoeFcjbQcPk+2cL+WLHf6Q81HWAnM2vrslIHpGVyCAviRwg==",
+      "integrity": "sha512-UP9rzNn/XyGwb5RQ2fok+DzcIRIYwc16qTXse5+Smsy8MOIccCChT15KAwnsgQx4PzJkaMq4myFyZ4CL5TjhIQ==",
       "dev": true,
       "requires": {
         "@types/estree": "*",
@@ -504,9 +504,9 @@
       }
     },
     "@types/eslint-scope": {
-      "version": "3.7.1",
+      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.2.tgz",
-      "integrity": "sha512-SCFeogqiptms4Fg29WpOTk5nHIzfpKCemSN63ksBQYKTcXoJEmJagV+DhVmbapZzY4/5YaOV1nZwrsU79fFm1g==",
+      "integrity": "sha512-TzgYCWoPiTeRg6RQYgtuW7iODtVoKu3RVL72k3WohqhjfaOLK5Mg2T4Tg1o2bSfu0vPkoI48wdQFv5b/Xe04wQ==",
       "dev": true,
       "requires": {
         "@types/eslint": "*",
@@ -519,10 +519,16 @@
       "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
       "dev": true
     },
+    "@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "@types/jquery": {
-      "version": "3.5.7",
+      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.7.tgz",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.11.tgz",
-      "integrity": "sha512-Why+9t1KuqWtIqYKtbk6wgWbE1PjyXJOyGkpmTUh0RX5p4HL7nnRuBkjAO9P2r9tGQP6bLWxl77jRLew3V5xXg==",
+      "integrity": "sha512-lYZGdfOtUa0XFjIATQgiogqeTY5PNNMOmp3Jq48ghmJALL8t/IqABRqlEwdHfuUdA8iIE1uGD1HoI4a7Tiy6OA==",
       "dev": true,
       "requires": {
         "@types/sizzle": "*"
@@ -541,9 +547,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "16.10.4",
+      "version": "17.0.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.10.4.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.5.tgz",
-      "integrity": "sha512-EITwVTX5B4nDjXjGeQAfXOrm+Jn+qNjDmyDRtWoD+wZsl/RDPRTFRKivs4Mt74iOFlLOrE5+Kf+p5yjyhm3+cA==",
+      "integrity": "sha512-w3mrvNXLeDYV1GKTZorGJQivK6XLCoGwpnyJFbJVK/aTBQUxOCaa/GlFAAN3OTDFcb7h5tiFG+YXCO2By+riZw==",
       "dev": true
     },
     "@types/parse-json": {
@@ -753,9 +759,9 @@
       "dev": true
     },
     "acorn": {
-      "version": "8.5.0",
+      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-      "integrity": "sha512-yXbYeFy+jUuYd3/CDcg2NkIYE991XYX/bje7LmjJigUciaeO1JR4XxXgCIV1/Zc/dRuFEyw1L0pbA+qynJkW5Q==",
+      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
       "dev": true
     },
     "acorn-import-assertions": {
@@ -852,15 +858,15 @@
       }
     },
     "browserslist": {
-      "version": "4.17.4",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.4.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
-      "integrity": "sha512-Zg7RpbZpIJRW3am9Lyckue7PLytvVxxhJj1CaJVlCWENsGEAOlnlt8X0ZxGRPp7Bt9o8tIRM5SEXy4BCPMJjLQ==",
+      "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001265",
+        "caniuse-lite": "^1.0.30001286",
-        "electron-to-chromium": "^1.3.867",
+        "electron-to-chromium": "^1.4.17",
         "escalade": "^3.1.1",
-        "node-releases": "^2.0.0",
+        "node-releases": "^2.0.1",
         "picocolors": "^1.0.0"
       }
     },
@@ -882,9 +888,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001267",
+      "version": "1.0.30001293",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001267.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001293.tgz",
-      "integrity": "sha512-r1mjTzAuJ9W8cPBGbbus8E0SKcUP7gn03R14Wk8FlAlqhH9hroy9nLqmpuXlfKEw/oILW+FGz47ipXV2O7x8lg==",
+      "integrity": "sha512-A4I5fB8Kxo0p/H3aXlaOkBp9mD0GspKmXfWHXOzcl0iHLi07EEVJdJeQPT4Yv3/dffRnrwluYZyXvMjbr6WhIA==",
       "dev": true
     },
     "canvg": {
@@ -1029,9 +1035,9 @@
       }
     },
     "debug": {
-      "version": "4.3.2",
+      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+      "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
       "dev": true,
       "requires": {
         "ms": "2.1.2"
@@ -1050,9 +1056,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.868",
+      "version": "1.4.28",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.868.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.28.tgz",
-      "integrity": "sha512-kZYCHqwJ1ctGrYDlOcWQH+/AftAm/KD4lEnLDNwS0kKwx1x6dU4zv+GuDjsPPOGn/2TjnKBaZjDyjXaoix0q/A==",
+      "integrity": "sha512-Gzbf0wUtKfyPaqf0Plz+Ctinf9eQIzxEqBHwSvbGfeOm9GMNdLxyu1dNiCUfM+x6r4BE0xUJNh3Nmg9gfAtTmg==",
       "dev": true
     },
     "end-of-stream": {
@@ -1159,9 +1165,9 @@
       },
       "dependencies": {
         "estraverse": {
-          "version": "5.2.0",
+          "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
           "dev": true
         }
       }
@@ -1224,6 +1230,11 @@
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
       "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -1482,9 +1493,9 @@
       "dev": true
     },
     "jest-worker": {
-      "version": "27.2.5",
+      "version": "27.4.5",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.4.5.tgz",
-      "integrity": "sha512-HTjEPZtcNKZ4LnhSp02NEH4vE+5OpJ0EsOWYvGQpHgUMLngydESAAMH5Wd/asPf29+XUDQZszxpLg1BkIIA2aw==",
+      "integrity": "sha512-f2s8kEdy15cv9r7q4KkzGXvlY0JTcmCbMHZBfSQDwW77REr45IDWwd0lksDFeVHH2jJ5pqb90T77XscrjeGzzg==",
       "dev": true,
       "requires": {
         "@types/node": "*",
@@ -1595,18 +1606,18 @@
       }
     },
     "mime-db": {
-      "version": "1.50.0",
+      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.50.0.tgz",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz",
-      "integrity": "sha512-9tMZCDlYHqeERXEHO9f/hKfNXhre5dK2eE/krIvUjZbS2KPcqGDfNShIWS1uW9XOTKQKqK6qbeOci18rbfW77A==",
+      "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==",
       "dev": true
     },
     "mime-types": {
-      "version": "2.1.33",
+      "version": "2.1.34",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.33.tgz",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz",
-      "integrity": "sha512-plLElXp7pRDd0bNZHw+nMd52vRYjLwQjygaNg7ddJ2uJtTlmnTCjWuPKxVu6//AdaRuME84SvLW91sIkBqGT0g==",
+      "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==",
       "dev": true,
       "requires": {
-        "mime-db": "1.50.0"
+        "mime-db": "1.51.0"
       }
     },
     "mimic-fn": {
@@ -1668,9 +1679,9 @@
       "dev": true
     },
     "node-releases": {
-      "version": "2.0.0",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
-      "integrity": "sha512-aA87l0flFYMzCHpTM3DERFSYxc6lv/BltdbRTOMZuxZ0cwZCD3mejE5n9vLhSJCN++/eOqr77G1IO5uXxlQYWA==",
+      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
       "dev": true
     },
     "npm-run-path": {
@@ -2171,9 +2182,9 @@
       "dev": true
     },
     "source-map-support": {
-      "version": "0.5.20",
+      "version": "0.5.21",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.20.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha512-n1lZZ8Ve4ksRqizaBQgxXDgKwttHDhyfQjA6YZZn8+AroHbsIz+JjwxQDxbp+7y5OYCI8t1Yk7etjD9CRd2hIw==",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "dev": true,
       "requires": {
         "buffer-from": "^1.0.0",
@@ -2214,9 +2225,9 @@
       "dev": true
     },
     "terser": {
-      "version": "5.9.0",
+      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
-      "integrity": "sha512-h5hxa23sCdpzcye/7b8YqbE5OwKca/ni0RQz1uRX3tGh8haaGHqcuSqbGRybuAKNdntZ0mDgFNXPJ48xQ2RXKQ==",
+      "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
       "dev": true,
       "requires": {
         "commander": "^2.20.0",
@@ -2233,13 +2244,12 @@
       }
     },
     "terser-webpack-plugin": {
-      "version": "5.2.4",
+      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.0.tgz",
-      "integrity": "sha512-E2CkNMN+1cho04YpdANyRrn8CyN4yMy+WdFKZIySFZrGXZxJwJP6PMNGGc/Mcr6qygQHUUqRxnAPmi0M9f00XA==",
+      "integrity": "sha512-LPIisi3Ol4chwAaPP8toUJ3L4qCM1G0wao7L3qNv57Drezxj6+VEyySpPw4B1HSO2Eg/hDY/MNF5XihCAoqnsQ==",
       "dev": true,
       "requires": {
-        "jest-worker": "^27.0.6",
+        "jest-worker": "^27.4.1",
-        "p-limit": "^3.1.0",
         "schema-utils": "^3.1.1",
         "serialize-javascript": "^6.0.0",
         "source-map": "^0.6.1",
@@ -2283,15 +2293,15 @@
       }
     },
     "typescript": {
-      "version": "4.3.5",
+      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz",
-      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
+      "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==",
       "dev": true
     },
     "uglify-js": {
-      "version": "3.14.2",
+      "version": "3.14.5",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.2.tgz",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.5.tgz",
-      "integrity": "sha512-rtPMlmcO4agTUfz10CbgJ1k6UAoXM2gWb3GoMPPZB/+/Ackf8lNWk11K4rYi2D0apgoFRLtQOZhb+/iGNJq26A==",
+      "integrity": "sha512-qZukoSxOG0urUTvjc2ERMTcAy+BiFh3weWAkeurLwjrCba73poHmG3E36XEjd/JGukMzwTL7uCxZiAexj8ppvQ==",
       "dev": true,
       "optional": true
     },
@@ -2339,16 +2349,10 @@
         }
       }
     },
-    "v8-compile-cache": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
-      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
-      "dev": true
-    },
     "watchpack": {
-      "version": "2.2.0",
+      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
-      "integrity": "sha512-up4YAn/XHgZHIxFBVCdlMiWDj6WaLKpwVeGQk2I5thdYxF/KmF0aaz6TfJZ/hfl1h/XlcDr7k1KH7ThDagpFaA==",
+      "integrity": "sha512-x0t0JuydIo8qCNctdDrn1OzH/qDzk2+rdCOC3YzumZ42fiMqmQ7T3xQurykYMhYfHaPHTp4ZxAx2NfUo1K6QaA==",
       "dev": true,
       "requires": {
         "glob-to-regexp": "^0.4.1",
@@ -2356,9 +2360,9 @@
       }
     },
     "webpack": {
-      "version": "5.58.2",
+      "version": "5.65.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.58.2.tgz",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.65.0.tgz",
-      "integrity": "sha512-3S6e9Vo1W2ijk4F4PPWRIu6D/uGgqaPmqw+av3W3jLDujuNkdxX5h5c+RQ6GkjVR+WwIPOfgY8av+j5j4tMqJw==",
+      "integrity": "sha512-Q5or2o6EKs7+oKmJo7LaqZaMOlDWQse9Tm5l1WAfU/ujLGN5Pb0SqGeVkN/4bpPmEqEP5RnVhiqsOtWtUVwGRw==",
       "dev": true,
       "requires": {
         "@types/eslint-scope": "^3.7.0",
@@ -2383,14 +2387,14 @@
         "schema-utils": "^3.1.0",
         "tapable": "^2.1.1",
         "terser-webpack-plugin": "^5.1.3",
-        "watchpack": "^2.2.0",
+        "watchpack": "^2.3.1",
-        "webpack-sources": "^3.2.0"
+        "webpack-sources": "^3.2.2"
       }
     },
     "webpack-cli": {
-      "version": "4.9.0",
+      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.1.tgz",
-      "integrity": "sha512-n/jZZBMzVEl4PYIBs+auy2WI0WTQ74EnJDiyD98O2JZY6IVIHJNitkYp/uTXOviIOMfgzrNvC9foKv/8o8KSZw==",
+      "integrity": "sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==",
       "dev": true,
       "requires": {
         "@discoveryjs/json-ext": "^0.5.0",
@@ -2404,7 +2408,6 @@
         "import-local": "^3.0.2",
         "interpret": "^2.2.0",
         "rechoir": "^0.7.0",
-        "v8-compile-cache": "^2.2.0",
         "webpack-merge": "^5.7.3"
       },
       "dependencies": {
@@ -2456,9 +2459,9 @@
       }
     },
     "webpack-sources": {
-      "version": "3.2.1",
+      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.2.tgz",
-      "integrity": "sha512-t6BMVLQ0AkjBOoRTZgqrWm7xbXMBzD+XDq2EZ96+vMfn3qKgsvdXZhbPZ4ElUOpdv4u+iiGe+w3+J75iy/bYGA==",
+      "integrity": "sha512-cp5qdmHnu5T8wRg2G3vZZHoJPN14aqQ89SyQ11NpGH5zEMDCclt49rzo+MaRazk7/UeILhAI+/sEtcM+7Fr0nw==",
       "dev": true
     },
     "which": {

package.json

@@ -2,17 +2,20 @@
   "scripts": {
     "old-build": "tsc -p tsconfig.json && cp -r ./src ./dist",
     "package": "sh ./package.sh",
-    "build": "webpack"
+    "build": "webpack",
+    "local-deploy": "npm run package && sh ./local-deploy.sh"
   },
+  "version": "2.0.0",
   "devDependencies": {
-    "@league-of-foundry-developers/foundry-vtt-types": "0.8.8-8",
+    "@league-of-foundry-developers/foundry-vtt-types": "0.8.9-9",
     "husky": "4.3.7",
     "prettier": "2.2.1",
     "pretty-quick": "3.1.0",
-    "typescript": "4.3.5",
+    "typescript": "4.5.4",
     "ts-loader": "9.2.6",
-    "webpack": "5.58.2",
+    "webpack": "5.65.0",
-    "webpack-cli": "4.9.0"
+    "webpack-cli": "4.9.1",
+    "@types/file-saver": "2.0.5"
   },
   "husky": {
     "hooks": {
@@ -20,6 +23,7 @@
     }
   },
   "dependencies": {
-    "jspdf": "2.4.0"
+    "jspdf": "2.4.0",
+    "file-saver": "2.0.5"
   }
 }

package.sh

@@ -1,6 +1,8 @@
+#!/bin/bash
+set -e
+
+rm -fr dist
 npm run build
-mkdir -p ./dist/lang
+cp -r $MODULE_DIRS dist/
-mkdir -p ./dist/styles
+export MODULE_VERSION=$(jq ".version" package.json | sed -r 's/["]+//g')
-cp ./lang/* ./dist/lang/
+envsubst '${MODULE_VERSION}' < ./module.json > ./dist/module.json
-cp ./styles/* ./dist/styles/
-cp module.json ./dist/module.json

src/abstract-builder.ts

@@ -0,0 +1,14 @@
+import { AbstractElement } from './elements/abstract-element';
+import { GenerateTypeEnum } from './elements/generate-type.enum';
+
+export abstract class AbstractBuilder {
+  public abstract build(elements: AbstractElement[]);
+
+  public abstract getLabelledRowHeight(): number;
+
+  public abstract save(name: string);
+
+  public abstract getImageScale(): number;
+
+  public abstract getGenerateType(): GenerateTypeEnum;
+}

src/constants.ts

@@ -1,7 +1,11 @@
 export const i18n = () => (<any>game).i18n;
 export const i18nLocalize = (id: string) => i18n().localize(id);
 export const i18nFormat = (id: string, data?: any) => i18n().format(id, data);
+export const user = () => (<any>game).user;
+export const isGM = () => user()?.isGM ?? false;
 
 export const TEXT_SIZE = 8;
 export const LABEL_SIZE = 6;
+export const HTML_TEXT_SIZE = 1;
+export const HTML_LABEL_SIZE = 0.75;
 export const MARGINS = { top: 10, left: 10, bottom: 10, right: 10 };

src/elements/abstract-container-element.ts

@@ -0,0 +1,38 @@
+import { AbstractElement } from './abstract-element';
+import { IContext } from './context';
+import { GenerateTypeEnum } from './generate-type.enum';
+
+export abstract class AbstractContainerElement extends AbstractElement {
+  public pdfElements: AbstractElement[] = [];
+  public htmlElements: AbstractElement[] = [];
+  public contextElements: AbstractElement[] = [];
+
+  constructor(
+    globalType: GenerateTypeEnum,
+    x: number,
+    y: number,
+    maxWidth: number | undefined,
+    elements: AbstractElement[] = [],
+    context: Partial<IContext> = AbstractElement.DEFAULT_CONTEXT
+  ) {
+    super(globalType, x, y, maxWidth, context);
+    this.htmlElements = this.context.isHtml
+      ? elements.filter((el) => el.context.isHtml)
+      : [];
+    this.pdfElements = this.context.isPdf
+      ? elements.filter((el) => el.context.isPdf)
+      : [];
+    this.contextElements =
+      this.globalType === GenerateTypeEnum.HTML
+        ? this.htmlElements
+        : this.pdfElements;
+  }
+
+  public getElements(): AbstractElement[] {
+    const elements: AbstractElement[] = [];
+    for (const element of this.contextElements) {
+      elements.push(...element.getElements());
+    }
+    return elements;
+  }
+}

src/elements/abstract-element.ts

@@ -1,15 +1,36 @@
 import jsPDF from 'jspdf';
 import { MARGINS } from '../constants';
+import { IContext } from './context';
+import { GenerateTypeEnum } from './generate-type.enum';
 
 export abstract class AbstractElement {
+  public static readonly DEFAULT_CONTEXT: IContext = {
+    isHtml: true,
+    isPdf: true,
+    name: 'element',
+  };
+
+  public globalType: GenerateTypeEnum;
   public x: number;
   public y: number;
   public maxWidth?: number;
+  public context: IContext = AbstractElement.DEFAULT_CONTEXT;
 
-  constructor(x: number, y: number, maxWidth?: number | undefined) {
+  constructor(
+    globalType: GenerateTypeEnum,
+    x: number,
+    y: number,
+    maxWidth?: number | undefined,
+    context: Partial<IContext> = AbstractElement.DEFAULT_CONTEXT
+  ) {
+    this.globalType = globalType;
     this.x = x >= MARGINS.left ? x : MARGINS.left;
     this.y = y >= MARGINS.top ? y : MARGINS.top;
     this.maxWidth = maxWidth;
+    this.context = {
+      ...this.context,
+      ...context,
+    };
   }
 
   public getHeightFromPx(doc: jsPDF, size: number) {
@@ -28,6 +49,13 @@ export abstract class AbstractElement {
 
   public abstract render(doc: jsPDF, maxWidth?: number): jsPDF;
 
+  public abstract renderHtml(
+    doc: Document,
+    parent: HTMLElement,
+    cssRules: string[],
+    sheet: HTMLStyleElement
+  ): Document;
+
   public abstract getHeight(doc?: jsPDF): number;
 
   public abstract getCheckNewPageHeight(doc?: jsPDF): number;

src/elements/blank.ts

@@ -1,14 +1,23 @@
 import { AbstractElement } from './abstract-element';
 import jsPDF from 'jspdf';
 import { Box } from './box';
+import { IContext } from './context';
+import { GenerateTypeEnum } from './generate-type.enum';
 
 export class Blank extends Box {
-  constructor(x: number, y: number, w: number, h: number) {
+  constructor(
-    super(x, y, w, h);
+    globalType: GenerateTypeEnum,
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    context: Partial<IContext> = AbstractElement.DEFAULT_CONTEXT
+  ) {
+    super(globalType, x, y, w, h, context);
   }
 
-  public static heightBlank(h: number) {
+  public static heightBlank(globalType: GenerateTypeEnum, h: number) {
-    return new Blank(0, 0, 0, h);
+    return new Blank(globalType, 0, 0, 0, h);
   }
 
   public getCheckNewPageHeight(doc?: jsPDF): number {

src/elements/box.ts

@@ -1,12 +1,21 @@
 import { AbstractElement } from './abstract-element';
 import jsPDF from 'jspdf';
+import { IContext } from './context';
+import { GenerateTypeEnum } from './generate-type.enum';
 
 export class Box extends AbstractElement {
   public w: number;
   public h: number;
 
-  constructor(x: number, y: number, w: number, h: number) {
+  constructor(
-    super(x, y, w);
+    globalType: GenerateTypeEnum,
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    context: Partial<IContext> = AbstractElement.DEFAULT_CONTEXT
+  ) {
+    super(globalType, x, y, w, context);
     this.w = w;
     this.h = h;
   }
@@ -20,6 +29,34 @@ export class Box extends AbstractElement {
     return doc;
   }
 
+  public renderHtml(
+    doc: Document,
+    parent: HTMLElement,
+    cssRules: string[],
+    sheet: HTMLStyleElement
+  ): Document {
+    const div = doc.createElement('div');
+    const css = `box-${this.w ?? 0}-${this.h ?? 0}`;
+    div.classList.add(`box`);
+    div.classList.add(css);
+    div.classList.add(this.context.name);
+    if (!cssRules.includes(css)) {
+      cssRules.push(css);
+      let rule = 'width: 100%;';
+      if (this.w > 0) {
+        rule += `max-width: ${this.w}px;`;
+        rule += `min-width: ${this.w}px;`;
+      }
+      if (this.h > 0) {
+        rule += `max-height: ${this.h}px;`;
+        rule += `min-height: ${this.h}px;`;
+      }
+      sheet.innerHTML += ` .${css} { ${rule} }`;
+    }
+    parent.append(div);
+    return doc;
+  }
+
   public getHeight(_doc): number {
     return this.h;
   }

src/elements/column.ts

@@ -1,16 +1,22 @@
 import { AbstractElement } from './abstract-element';
 import jsPDF from 'jspdf';
+import { IContext } from './context';
+import { AbstractContainerElement } from './abstract-container-element';
+import { GenerateTypeEnum } from './generate-type.enum';
 
-export class Column extends AbstractElement {
+export class Column extends AbstractContainerElement {
-  public elements: AbstractElement[] = [];
+  constructor(
-
+    globalType: GenerateTypeEnum,
-  constructor(x: number, y: number, elements: AbstractElement[]) {
+    x: number,
-    super(x, y);
+    y: number,
-    this.elements = elements;
+    elements: AbstractElement[],
+    context: Partial<IContext> = AbstractElement.DEFAULT_CONTEXT
+  ) {
+    super(globalType, x, y, undefined, elements, context);
   }
 
   public prepareRender(doc: jsPDF, _maxWidth?: number): jsPDF {
-    const elements = this.elements ?? [];
+    const elements = this.pdfElements ?? [];
 
     let currentY = this.y;
     for (let i = 0; i < elements.length; i++) {
@@ -29,9 +35,27 @@ export class Column extends AbstractElement {
     return doc;
   }
 
+  public renderHtml(
+    doc: Document,
+    parent: HTMLElement,
+    cssRules: string[],
+    sheet: HTMLStyleElement
+  ): Document {
+    const div = doc.createElement('div');
+    div.classList.add(`column`);
+    div.classList.add(this.context.name);
+    const elements = this.htmlElements ?? [];
+    for (let i = 0; i < elements.length; i++) {
+      const element = elements[i];
+      element.renderHtml(doc, div, cssRules, sheet);
+    }
+    parent.append(div);
+    return doc;
+  }
+
   public getHeight(doc): number {
-    return this.elements.length > 0
+    return this.pdfElements.length > 0
-      ? this.elements
+      ? this.pdfElements
           .map((e) => e.getHeight(doc))
           .reduce((p, c, i) => {
             if (i === 0) {
@@ -43,20 +67,8 @@ export class Column extends AbstractElement {
   }
 
   public getCheckNewPageHeight(doc?: jsPDF): number {
-    return this.elements.length > 0
+    return this.pdfElements.length > 0
-      ? this.elements[0].getCheckNewPageHeight(doc)
+      ? this.pdfElements[0].getCheckNewPageHeight(doc)
       : 0;
   }
-
-  public getElements(): AbstractElement[] {
-    const elements: AbstractElement[] = [];
-    for (const element of this.elements) {
-      elements.push(...element.getElements());
-    }
-    return elements;
-  }
-
-  public isEmpty(): boolean {
-    return this.elements.length === 0;
-  }
 }

src/elements/context.ts

@@ -0,0 +1,5 @@
+export interface IContext {
+  name: string;
+  isHtml: boolean;
+  isPdf: boolean;
+}

src/elements/generate-type.enum.ts

@@ -0,0 +1,4 @@
+export enum GenerateTypeEnum {
+  PDF = 'PDF',
+  HTML = 'HTML',
+}

src/elements/image.ts

@@ -1,12 +1,22 @@
 import { Box } from './box';
 import jsPDF from 'jspdf';
 import { AbstractElement } from './abstract-element';
+import { IContext } from './context';
+import { GenerateTypeEnum } from './generate-type.enum';
 
 export class Image extends Box {
   public imageData: string;
 
-  constructor(x: number, y: number, w: number, h: number, imageData: string) {
+  constructor(
-    super(x, y, w, h);
+    globalType: GenerateTypeEnum,
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    imageData: string,
+    context: Partial<IContext> = AbstractElement.DEFAULT_CONTEXT
+  ) {
+    super(globalType, x, y, w, h, context);
     this.imageData = imageData;
   }
 
@@ -21,6 +31,32 @@ export class Image extends Box {
     return doc;
   }
 
+  public renderHtml(
+    doc: Document,
+    parent: HTMLElement,
+    cssRules: string[],
+    sheet: HTMLStyleElement
+  ): Document {
+    const img = doc.createElement('img');
+    img.src = this.imageData;
+    const css = `img-${this.w ?? 0}`;
+    img.classList.add(`img`);
+    img.classList.add(css);
+    img.classList.add(this.context.name);
+    if (!cssRules.includes(css)) {
+      cssRules.push(css);
+      let rule = '';
+      if (this.w > 0) {
+        rule += `width: ${this.w}px;`;
+      }
+      if (rule.length > 0) {
+        sheet.innerHTML += ` .${css} { ${rule} }`;
+      }
+    }
+    parent.append(img);
+    return doc;
+  }
+
   public getElements(): AbstractElement[] {
     return [this];
   }

src/elements/labelled-text.ts

@@ -1,21 +1,31 @@
 import jsPDF, { TextOptionsLight } from 'jspdf';
 import { Text } from './text';
-import { i18nLocalize, LABEL_SIZE, TEXT_SIZE } from '../constants';
+import {
+  HTML_LABEL_SIZE,
+  HTML_TEXT_SIZE,
+  i18nLocalize,
+  LABEL_SIZE,
+  TEXT_SIZE,
+} from '../constants';
 import { AbstractElement } from './abstract-element';
+import { IContext } from './context';
+import { GenerateTypeEnum } from './generate-type.enum';
 
 export class LabelledText extends Text {
   public label: string;
   public labelOptions?: TextOptionsLight;
 
   constructor(
+    globalType: GenerateTypeEnum,
     x: number,
     y: number,
     label: string,
     text: string,
     textOptions?: TextOptionsLight,
-    labelOptions?: TextOptionsLight
+    labelOptions?: TextOptionsLight,
+    context: Partial<IContext> = AbstractElement.DEFAULT_CONTEXT
   ) {
-    super(x, y, text, textOptions);
+    super(globalType, x, y, text, textOptions, context);
     this.label = label;
     this.labelOptions = labelOptions;
     const textMaxWidth = this.textOptions?.maxWidth ?? 0;
@@ -40,6 +50,40 @@ export class LabelledText extends Text {
     return doc;
   }
 
+  public renderHtml(
+    doc: Document,
+    parent: HTMLElement,
+    cssRules: string[],
+    sheet: HTMLStyleElement
+  ): Document {
+    const div = doc.createElement('div');
+    div.classList.add(`column`);
+    div.classList.add(`labelled-text`);
+    div.classList.add(this.context.name);
+    const label = doc.createElement('p');
+    const text = doc.createElement('p');
+    const labelCss = `label-${LABEL_SIZE}`;
+    const textCss = `text-${TEXT_SIZE}`;
+    label.classList.add(labelCss);
+    text.classList.add(textCss);
+    if (!cssRules.includes(labelCss)) {
+      cssRules.push(labelCss);
+      sheet.innerHTML += ` .${labelCss} { font-size: ${HTML_LABEL_SIZE}rem; margin: 0; }`;
+    }
+    if (!cssRules.includes(textCss)) {
+      cssRules.push(textCss);
+      sheet.innerHTML += ` .${textCss} { font-size: ${HTML_TEXT_SIZE}rem; margin-top: 0.5rem; margin-bottom: 0.5rem; }`;
+      sheet.innerHTML += ` .labelled-text { margin-top: 0.5rem; margin-bottom: 0.5rem; }`;
+      sheet.innerHTML += ` .labelled-text > .${textCss} { font-size: ${HTML_TEXT_SIZE}rem; margin: 0; }`;
+    }
+    label.innerHTML = i18nLocalize(this.label);
+    text.innerHTML = i18nLocalize(this.text);
+    div.append(label);
+    div.append(text);
+    parent.append(div);
+    return doc;
+  }
+
   protected updateMaxWidth(maxWidth?: number) {
     if (maxWidth != null && maxWidth > 0) {
       this.maxWidth = maxWidth;

src/elements/labelled-value.ts

@@ -1,32 +1,52 @@
 import { Row } from './row';
 import { Text } from './text';
 import { MultilineText } from './multiline-text';
+import { IContext } from './context';
+import { AbstractElement } from './abstract-element';
+import { GenerateTypeEnum } from './generate-type.enum';
 
 export class LabelledValue extends Row {
   public label: string;
   public value: number;
 
   constructor(
+    globalType: GenerateTypeEnum,
     label: string,
     value: number,
     widthPercents?: number[],
     multiline = false,
-    maxWidth?: number
+    maxWidth?: number,
+    context: Partial<IContext> = AbstractElement.DEFAULT_CONTEXT
   ) {
     super(
+      globalType,
       0,
       0,
       [
-        multiline ? new MultilineText(0, 0, label) : new Text(0, 0, label),
+        multiline
-        new Text(0, 0, value.toString(), {
+          ? new MultilineText(globalType, 0, 0, label)
+          : new Text(globalType, 0, 0, label),
+        new Text(globalType, 0, 0, value.toString(), {
           align: 'right',
         }),
       ],
       maxWidth,
       widthPercents,
-      []
+      [],
+      context
     );
     this.label = label;
     this.value = value;
   }
+
+  public renderHtml(
+    doc: Document,
+    parent: HTMLElement,
+    cssRules: string[],
+    sheet: HTMLStyleElement
+  ): Document {
+    const resultDoc = super.renderHtml(doc, parent, cssRules, sheet);
+    parent.lastElementChild?.classList?.add('labelled-value');
+    return resultDoc;
+  }
 }

src/elements/labelled-values.ts

@@ -3,19 +3,24 @@ import { Column } from './column';
 import { LabelledValue } from './labelled-value';
 import jsPDF from 'jspdf';
 import { MARGINS } from '../constants';
+import { IContext } from './context';
+import { AbstractElement } from './abstract-element';
+import { GenerateTypeEnum } from './generate-type.enum';
 
 export class LabelledValues extends Row {
   public labelledValues: { label: string; value: number }[];
   public nbrOfCol: number;
 
   constructor(
+    globalType: GenerateTypeEnum,
     x: number,
     y: number,
     labelledValues: { label: string; value: number }[],
     nbrOfCol?: number,
-    multiline = false
+    multiline = false,
+    context: Partial<IContext> = AbstractElement.DEFAULT_CONTEXT
   ) {
-    super(x, y, []);
+    super(globalType, x, y, [], undefined, undefined, undefined, context);
     this.labelledValues = labelledValues;
     this.nbrOfCol = nbrOfCol ?? 3;
     if (this.nbrOfCol > 3) {
@@ -35,7 +40,9 @@ export class LabelledValues extends Row {
           rest > 2 ? nbrPerCol + 1 : nbrPerCol,
         ];
         for (let i = 0; i < this.nbrOfCol; i++) {
-          this.elements[i] = new Column(0, 0, []);
+          this.contextElements[i] = new Column(globalType, 0, 0, [], {
+            name: `${this.context.name}-column`,
+          });
         }
         for (let i = 0; i < labelledValues.length; i++) {
           if (i < nbrPerCols[0]) {
@@ -45,8 +52,9 @@ export class LabelledValues extends Row {
           } else {
             currentIndex = 2;
           }
-          (<Column>this.elements[currentIndex]).elements.push(
+          (<Column>this.contextElements[currentIndex]).contextElements.push(
             new LabelledValue(
+              globalType,
               labelledValues[i].label,
               labelledValues[i].value,
               widthPercent,
@@ -55,19 +63,24 @@ export class LabelledValues extends Row {
           );
         }
       } else {
-        this.elements.push(
+        this.contextElements.push(
           new Column(
+            globalType,
             0,
             0,
             labelledValues.map(
               (libelledValue) =>
                 new LabelledValue(
+                  globalType,
                   libelledValue.label,
                   libelledValue.value,
                   widthPercent,
                   multiline
                 )
-            )
+            ),
+            {
+              name: `${this.context.name}-column`,
+            }
           )
         );
       }
@@ -77,8 +90,8 @@ export class LabelledValues extends Row {
   public prepareRender(doc: jsPDF, maxWidth?: number): jsPDF {
     const pageWidth = doc.internal.pageSize.width;
     const rowWidth = pageWidth - this.x - MARGINS.right;
-    for (const column of this.elements) {
+    for (const column of this.pdfElements) {
-      for (const labelledValue of (<Column>column).elements) {
+      for (const labelledValue of (<Column>column).pdfElements) {
         labelledValue.maxWidth = rowWidth / this.nbrOfCol;
       }
     }

src/elements/multiline-text.ts

@@ -1,18 +1,22 @@
 import { AbstractElement } from './abstract-element';
 import jsPDF, { TextOptionsLight } from 'jspdf';
-import { i18nLocalize, TEXT_SIZE } from '../constants';
+import { HTML_TEXT_SIZE, i18nLocalize, TEXT_SIZE } from '../constants';
 import { Text } from './text';
+import { IContext } from './context';
+import { GenerateTypeEnum } from './generate-type.enum';
 
 export class MultilineText extends Text {
   private nbrLine = 1;
 
   constructor(
+    globalType: GenerateTypeEnum,
     x: number,
     y: number,
     text: string,
-    textOptions?: TextOptionsLight
+    textOptions?: TextOptionsLight,
+    context: Partial<IContext> = AbstractElement.DEFAULT_CONTEXT
   ) {
-    super(x, y, text, textOptions);
+    super(globalType, x, y, text, textOptions, context);
   }
 
   public prepareRender(doc: jsPDF, maxWidth?: number): jsPDF {
@@ -32,6 +36,27 @@ export class MultilineText extends Text {
     return doc;
   }
 
+  public renderHtml(
+    doc: Document,
+    parent: HTMLElement,
+    cssRules: string[],
+    sheet: HTMLStyleElement
+  ): Document {
+    const text = doc.createElement('p');
+    const css = `text-${TEXT_SIZE}`;
+    text.classList.add(`multiline-text`);
+    text.classList.add(css);
+    text.classList.add(this.context.name);
+    if (!cssRules.includes(css)) {
+      cssRules.push(css);
+      sheet.innerHTML += ` .${css} { font-size: ${HTML_TEXT_SIZE}rem }`;
+      sheet.innerHTML += ` .labelled-text > .${css} { font-size: ${HTML_TEXT_SIZE}rem; margin: 0; }`;
+    }
+    text.innerHTML = i18nLocalize(this.text);
+    parent.append(text);
+    return doc;
+  }
+
   public getHeight(doc): number {
     return this.getHeightFromPx(doc, TEXT_SIZE) * this.nbrLine;
   }

src/elements/row.ts

@@ -1,28 +1,31 @@
 import { AbstractElement } from './abstract-element';
 import jsPDF from 'jspdf';
 import { MARGINS } from '../constants';
+import { IContext } from './context';
+import { AbstractContainerElement } from './abstract-container-element';
+import { GenerateTypeEnum } from './generate-type.enum';
 
-export class Row extends AbstractElement {
+export class Row extends AbstractContainerElement {
-  public elements: AbstractElement[] = [];
   public widthPercents?: number[];
   public maxWidths?: number[];
 
   constructor(
+    globalType: GenerateTypeEnum,
     x: number,
     y: number,
     elements: AbstractElement[],
     maxWidth?: number | undefined,
     widthPercents?: number[],
-    maxWidths?: number[]
+    maxWidths?: number[],
+    context: Partial<IContext> = AbstractElement.DEFAULT_CONTEXT
   ) {
-    super(x, y, maxWidth);
+    super(globalType, x, y, maxWidth, elements, context);
-    this.elements = elements ?? [];
     this.widthPercents = widthPercents ?? [];
     this.maxWidths = maxWidths ?? [];
   }
 
   public prepareRender(doc: jsPDF, maxWidth?: number): jsPDF {
-    const elements = this.elements ?? [];
+    const elements = this.pdfElements ?? [];
     let maxWidths = this.maxWidths ?? [];
     let widthPercents = this.widthPercents ?? [];
 
@@ -60,9 +63,27 @@ export class Row extends AbstractElement {
     return doc;
   }
 
+  public renderHtml(
+    doc: Document,
+    parent: HTMLElement,
+    cssRules: string[],
+    sheet: HTMLStyleElement
+  ): Document {
+    const div = doc.createElement('div');
+    div.classList.add(`row`);
+    div.classList.add(this.context.name);
+    const elements = this.htmlElements ?? [];
+    for (let i = 0; i < elements.length; i++) {
+      const element = elements[i];
+      element.renderHtml(doc, div, cssRules, sheet);
+    }
+    parent.append(div);
+    return doc;
+  }
+
   public getHeight(doc?: jsPDF): number {
     let maxHeight = 0;
-    for (const element of this.elements) {
+    for (const element of this.pdfElements) {
       maxHeight = Math.max(maxHeight, element.getHeight(doc));
     }
     return maxHeight;
@@ -70,21 +91,9 @@ export class Row extends AbstractElement {
 
   public getCheckNewPageHeight(doc?: jsPDF): number {
     let maxHeight = 0;
-    for (const element of this.elements) {
+    for (const element of this.pdfElements) {
       maxHeight = Math.max(maxHeight, element.getCheckNewPageHeight(doc));
     }
     return maxHeight;
   }
-
-  public getElements(): AbstractElement[] {
-    const elements: AbstractElement[] = [];
-    for (const element of this.elements) {
-      elements.push(...element.getElements());
-    }
-    return elements;
-  }
-
-  public isEmpty(): boolean {
-    return this.elements.length === 0;
-  }
 }

src/elements/separator.ts

@@ -1,10 +1,18 @@
 import { AbstractElement } from './abstract-element';
 import jsPDF from 'jspdf';
 import { MARGINS } from '../constants';
+import { IContext } from './context';
+import { GenerateTypeEnum } from './generate-type.enum';
 
 export class Separator extends AbstractElement {
-  constructor(x: number, y: number, maxWidth?: number | undefined) {
+  constructor(
-    super(x, y, maxWidth);
+    globalType: GenerateTypeEnum,
+    x: number,
+    y: number,
+    maxWidth?: number | undefined,
+    context: Partial<IContext> = AbstractElement.DEFAULT_CONTEXT
+  ) {
+    super(globalType, x, y, maxWidth, context);
   }
 
   public getHeight(_doc?: jsPDF): number {
@@ -33,6 +41,19 @@ export class Separator extends AbstractElement {
     return doc;
   }
 
+  public renderHtml(
+    doc: Document,
+    parent: HTMLElement,
+    _cssRules: string[],
+    _sheet: HTMLStyleElement
+  ): Document {
+    const div = doc.createElement('div');
+    div.classList.add(`separator`);
+    div.classList.add(this.context.name);
+    parent.append(div);
+    return doc;
+  }
+
   public getElements(): AbstractElement[] {
     return [this];
   }

src/elements/text.ts

@@ -1,18 +1,22 @@
 import { AbstractElement } from './abstract-element';
 import jsPDF, { TextOptionsLight } from 'jspdf';
-import { i18nLocalize, TEXT_SIZE } from '../constants';
+import { HTML_TEXT_SIZE, i18nLocalize, TEXT_SIZE } from '../constants';
+import { IContext } from './context';
+import { GenerateTypeEnum } from './generate-type.enum';
 
 export class Text extends AbstractElement {
   public text: string;
   public textOptions?: TextOptionsLight;
 
   constructor(
+    globalType: GenerateTypeEnum,
     x: number,
     y: number,
     text: string,
-    textOptions?: TextOptionsLight
+    textOptions?: TextOptionsLight,
+    context: Partial<IContext> = AbstractElement.DEFAULT_CONTEXT
   ) {
-    super(x, y, textOptions?.maxWidth);
+    super(globalType, x, y, textOptions?.maxWidth, context);
     this.text = text;
     this.textOptions = textOptions;
   }
@@ -36,6 +40,27 @@ export class Text extends AbstractElement {
     return doc;
   }
 
+  public renderHtml(
+    doc: Document,
+    parent: HTMLElement,
+    cssRules: string[],
+    sheet: HTMLStyleElement
+  ): Document {
+    const text = doc.createElement('p');
+    const css = `text-${TEXT_SIZE}`;
+    text.classList.add(`ellipsis`);
+    text.classList.add(css);
+    text.classList.add(this.context.name);
+    text.innerHTML = i18nLocalize(i18nLocalize(this.text));
+    if (!cssRules.includes(css)) {
+      cssRules.push(css);
+      sheet.innerHTML += ` .${css} { font-size: ${HTML_TEXT_SIZE}rem }`;
+      sheet.innerHTML += ` .labelled-text > .${css} { font-size: ${HTML_TEXT_SIZE}rem; margin: 0; }`;
+    }
+    parent.append(text);
+    return doc;
+  }
+
   protected updateMaxWidth(maxWidth?: number) {
     if (maxWidth != null && maxWidth > 0) {
       this.maxWidth = maxWidth;

src/elements/texts.ts

@@ -4,19 +4,24 @@ import jsPDF from 'jspdf';
 import { MARGINS } from '../constants';
 import { Text } from './text';
 import { MultilineText } from './multiline-text';
+import { IContext } from './context';
+import { AbstractElement } from './abstract-element';
+import { GenerateTypeEnum } from './generate-type.enum';
 
 export class Texts extends Row {
   public texts: string[];
   public nbrOfCol: number;
 
   constructor(
+    globalType: GenerateTypeEnum,
     x: number,
     y: number,
     texts: string[],
     nbrOfCol?: number,
-    multiline = false
+    multiline = false,
+    context: Partial<IContext> = AbstractElement.DEFAULT_CONTEXT
   ) {
-    super(x, y, []);
+    super(globalType, x, y, [], undefined, undefined, undefined, context);
     this.texts = texts;
     this.nbrOfCol = nbrOfCol ?? 4;
     if (this.nbrOfCol > 4) {
@@ -34,7 +39,7 @@ export class Texts extends Row {
           rest > 3 ? nbrPerCol + 1 : nbrPerCol,
         ];
         for (let i = 0; i < this.nbrOfCol; i++) {
-          this.elements[i] = new Column(0, 0, []);
+          this.contextElements[i] = new Column(this.globalType, 0, 0, []);
         }
         for (let i = 0; i < texts.length; i++) {
           if (i < nbrPerCols[0]) {
@@ -46,25 +51,26 @@ export class Texts extends Row {
           } else {
             currentIndex = 3;
           }
-          (<Column>this.elements[currentIndex]).elements.push(
+          (<Column>this.contextElements[currentIndex]).contextElements.push(
-            new Row(0, 0, [
+            new Row(this.globalType, 0, 0, [
               multiline
-                ? new MultilineText(0, 0, texts[i])
+                ? new MultilineText(this.globalType, 0, 0, texts[i])
-                : new Text(0, 0, texts[i]),
+                : new Text(this.globalType, 0, 0, texts[i]),
             ])
           );
         }
       } else {
-        this.elements.push(
+        this.contextElements.push(
           new Column(
+            this.globalType,
             0,
             0,
             texts.map(
               (text) =>
-                new Row(0, 0, [
+                new Row(this.globalType, 0, 0, [
                   multiline
-                    ? new MultilineText(0, 0, text)
+                    ? new MultilineText(this.globalType, 0, 0, text)
-                    : new Text(0, 0, text),
+                    : new Text(this.globalType, 0, 0, text),
                 ])
             )
           )
@@ -76,8 +82,8 @@ export class Texts extends Row {
   public prepareRender(doc: jsPDF, maxWidth?: number): jsPDF {
     const pageWidth = doc.internal.pageSize.width;
     const rowWidth = pageWidth - this.x - MARGINS.right;
-    for (const column of this.elements) {
+    for (const column of this.pdfElements) {
-      for (const labelledValue of (<Column>column).elements) {
+      for (const labelledValue of (<Column>column).pdfElements) {
         labelledValue.maxWidth = rowWidth / this.nbrOfCol;
       }
     }

src/html-builder.ts

@@ -0,0 +1,94 @@
+import { AbstractElement } from './elements/abstract-element';
+import { AbstractBuilder } from './abstract-builder';
+import { saveAs } from 'file-saver';
+import {
+  HTML_LABEL_SIZE,
+  HTML_TEXT_SIZE,
+  i18n,
+  LABEL_SIZE,
+  TEXT_SIZE,
+} from './constants';
+import { GenerateTypeEnum } from './elements/generate-type.enum';
+
+export class HtmlBuilder extends AbstractBuilder {
+  public doc: Document;
+  public styleSheet: HTMLStyleElement;
+
+  constructor() {
+    super();
+    this.doc = document.implementation.createHTMLDocument();
+    const style = document.createElement('style');
+    style.innerHTML = '.column { display: flex; flex-direction: column; }';
+    style.innerHTML += ' .main-column { align-items: center; }';
+    style.innerHTML += ' .row { display: flex; flex-direction: row }';
+    style.innerHTML += ' .row:not(.labelled-value) { gap: 5em; }';
+    style.innerHTML +=
+      ' .row.labelled-value { gap: 10px; justify-content: space-between; }';
+    style.innerHTML +=
+      ' .separator { border: 1px solid; width: 100%; height: 0px }';
+    style.appendChild(document.createTextNode(''));
+    this.doc.head.appendChild(style);
+    this.styleSheet = style;
+    const meta1 = document.createElement('meta');
+    meta1.setAttribute('charset', 'UTF-8');
+    this.doc.head.appendChild(meta1);
+    const meta2 = document.createElement('meta');
+    meta2.setAttribute('name', 'viewport');
+    meta2.setAttribute(
+      'content',
+      'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes'
+    );
+    this.doc.head.appendChild(meta2);
+  }
+
+  public getLabelledRowHeight(): number {
+    return 0;
+  }
+
+  public save(name: string) {
+    this.doc.title = name;
+    const blob = new Blob(
+      [
+        `<html lang="${i18n().lang}">
+    ${this.doc.documentElement.innerHTML}
+    </html>`,
+      ],
+      { type: 'text/html;charset=utf-8' }
+    );
+    saveAs(blob, `${name}.html`);
+  }
+
+  public build(elements: AbstractElement[]) {
+    const cssList: string[] = [];
+    for (const element of elements.filter((el) => el.context.isHtml)) {
+      element.renderHtml(this.doc, this.doc.body, cssList, this.styleSheet);
+    }
+    // Mobile start
+    this.styleSheet.innerHTML += ' @media screen and (max-width: 959px) {';
+    this.styleSheet.innerHTML += ` .text-${TEXT_SIZE} { font-size: ${
+      2 * HTML_TEXT_SIZE
+    }rem; }`;
+    this.styleSheet.innerHTML += ` .labelled-text > .text-${TEXT_SIZE} { font-size: ${
+      2 * HTML_TEXT_SIZE
+    }rem; margin: 0; }`;
+    this.styleSheet.innerHTML += ` .label-${LABEL_SIZE} { font-size: ${
+      2 * HTML_LABEL_SIZE
+    }rem; }`;
+    this.styleSheet.innerHTML +=
+      ' .main-column { align-items: stretch; overflow-x: hidden; }';
+    this.styleSheet.innerHTML +=
+      ' .row:not(.labelled-value) { flex-wrap: wrap; gap: 0 5em; }';
+    this.styleSheet.innerHTML += ' .skills { width: 100%; }';
+    this.styleSheet.innerHTML += ' .skills-column { width: 100%; }';
+    this.styleSheet.innerHTML += ' }';
+    // Mobile end
+  }
+
+  public getImageScale(): number {
+    return 4;
+  }
+
+  public getGenerateType(): GenerateTypeEnum {
+    return GenerateTypeEnum.HTML;
+  }
+}

src/pdf-builder.ts

@@ -1,17 +1,29 @@
 import jsPDF, { jsPDFOptions } from 'jspdf';
 import { AbstractElement } from './elements/abstract-element';
-import { MARGINS } from './constants';
+import { LABEL_SIZE, MARGINS, TEXT_SIZE } from './constants';
+import { AbstractBuilder } from './abstract-builder';
+import { Util } from './util';
+import { GenerateTypeEnum } from './elements/generate-type.enum';
 
-export class PdfBuilder {
+export class PdfBuilder extends AbstractBuilder {
   public doc: jsPDF;
 
   constructor(options: jsPDFOptions) {
+    super();
     this.doc = new jsPDF(options);
   }
 
+  public getLabelledRowHeight(): number {
+    return Util.getHeightFromPx(this.doc, TEXT_SIZE + LABEL_SIZE) + 1;
+  }
+
+  public save(name: string) {
+    this.doc.save(`${name}.pdf`);
+  }
+
   public build(elements: AbstractElement[]) {
     const finalElements: AbstractElement[] = [];
-    for (const element of elements) {
+    for (const element of elements.filter((el) => el.context.isPdf)) {
       element.prepareRender(this.doc);
       finalElements.push(...element.getElements());
     }
@@ -58,4 +70,12 @@ export class PdfBuilder {
       }
     }
   }
+
+  public getImageScale(): number {
+    return 1;
+  }
+
+  public getGenerateType(): GenerateTypeEnum {
+    return GenerateTypeEnum.PDF;
+  }
 }