feat: create a script to build help (#223)

* feat: create a script to build help

* chore: use native base64

* chore: fix eslint

* chore: fix prettier in build_help

* chore: add help.html in prettier ignore

.prettierignore

@@ -7,3 +7,4 @@
 /lib/canvas_editor/cursors_24px.js
 /openchemlib
 /war
+/help.html

eslint.config.mjs

@@ -54,7 +54,7 @@ export default [
     },
   },
   {
-    files: ['scripts/**'],
+    files: ['scripts/**/*.js'],
     languageOptions: {
       globals: {
         ...globals.node,
@@ -65,6 +65,18 @@ export default [
       'unicorn/no-process-exit': 'off',
     },
   },
+  {
+    files: ['scripts/**/*.mjs'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+      sourceType: 'module',
+    },
+    rules: {
+      'unicorn/no-process-exit': 'off',
+    },
+  },
   {
     files: ['tests/**'],
     rules: {

package.json

@@ -25,6 +25,7 @@
     "build-esm-bundle-export": "npm run build-esm-bundle && node scripts/build_esm_bundle_types.js",
     "build-esm-bundle-types": "node scripts/esm_bundle_types.js",
     "build-esm-bundle-watch": "npm run build-esm-bundle -- --watch",
+    "build-help": "node scripts/build_help.mjs",
     "build-full-pretty": "npm run build:pretty -- -m full",
     "build-minimal": "npm run build:min -- -m minimal",
     "eslint": "eslint .",
@@ -77,6 +78,7 @@
   "homepage": "https://github.com/cheminfo/openchemlib-js",
   "devDependencies": {
     "@types/jest": "^29.5.12",
+    "@types/node": "^22.0.0",
     "autoprefixer": "^10.4.19",
     "benchmark": "^2.1.4",
     "esbuild": "^0.23.0",

scripts/build_help.mjs

@@ -0,0 +1,37 @@
+/* eslint-disable no-await-in-loop */
+import { readdir, readFile, writeFile } from 'node:fs/promises';
+
+const homedir = new URL(
+  '../openchemlib/src/main/resources/html/',
+  import.meta.url,
+);
+
+// loading the images
+const pngNames = await readdir(new URL('editor', homedir)).then((files) =>
+  files.filter((file) => file.endsWith('.png')),
+);
+const images = {};
+for (const pngName of pngNames) {
+  const blob = await readFile(new URL(`editor/${pngName}`, homedir), 'base64');
+  const encoded = toBase64URL(blob, 'image/png');
+  images[pngName] = encoded;
+}
+
+// loading the html file
+let html = await readFile(new URL('editor/editor.html', homedir), 'utf8');
+for (const [pngName, encoded] of Object.entries(images)) {
+  html = html.replaceAll(`src="${pngName}"`, `src="${encoded}"`);
+}
+
+// loading css
+let css = await readFile(new URL('styles.css', homedir), 'utf8');
+html = html.replace(
+  '<link type="text/css" href="../styles.css" rel="stylesheet">',
+  `<style>${css}</style>`,
+);
+
+await writeFile(new URL('../help.html', import.meta.url), html);
+
+function toBase64URL(base64, type) {
+  return `data:${type};base64,${base64}`;
+}