better graphs

package.json

@@ -9,7 +9,7 @@
         "@jest/globals": "^29.6.4",
         "@twirl/book-builder": "0.0.28",
         "@types/jest": "^29.5.4",
-        "express": "^4.18.2",
+        "express": "^4.19.2",
         "jest": "^29.6.4",
         "jest-environment-jsdom": "^29.6.4",
         "jest-mock-extended": "^3.0.5",

scripts/build-graphs.mjs

@@ -3,17 +3,15 @@ import { existsSync } from 'node:fs';
 import { resolve, basename } from 'path';
 import puppeteer from 'puppeteer';
 import { templates } from '../src/templates.mjs';
+import express from 'express';
 
 const args = process.argv.slice(2);
+const port = process.env.PORT ?? 3030;
 const dir = process.cwd();
 const langs = (args[0] || 'en,ru').split(',');
 const target = args[1];
 
-async function buildGraphs(langs, target, srcDir, dstDir, tmpDir) {
-    if (!existsSync(tmpDir)) {
-        await mkdir(tmpDir);
-    }
-
+async function buildGraphs(langs, target, srcDir, dstDir, urlBuilder) {
     for (const lang of langs) {
         const graphDir = resolve(srcDir, lang, 'graphs');
         const targets = target
@@ -25,7 +23,7 @@ async function buildGraphs(langs, target, srcDir, dstDir, tmpDir) {
         );
 
         for (const t of targets) {
-            await buildGraph(lang, t, dstDir, tmpDir);
+            await buildGraph(lang, t, dstDir, urlBuilder(t));
         }
     }
 }
@@ -41,15 +39,9 @@ async function getGraphList(srcDir) {
     return result;
 }
 
-async function buildGraph(lang, target, dstDir, tmpDir) {
+async function buildGraph(lang, target, dstDir, url) {
     const targetName = basename(target);
-    console.log(
-        `Processing ${target}, basename: ${targetName} dst: ${dstDir}, tmp: ${tmpDir}`
-    );
-    const tmpFileName = resolve(tmpDir, `${targetName}.${lang}.html`);
-    const graph = await readFile(target, 'utf-8');
-    await writeFile(tmpFileName, templates.graphHtmlTemplate(graph));
-    console.log(`Tmp file ${tmpFileName} written`);
+    console.log(`Processing ${target}, basename: ${targetName} dst: ${dstDir}`);
     const browser = await puppeteer.launch({
         headless: 'new',
         product: 'chrome',
@@ -64,28 +56,65 @@ async function buildGraph(lang, target, dstDir, tmpDir) {
         `${targetName.replace('.mermaid', '')}.${lang}.png`
     );
     const page = await browser.newPage();
-    await page.goto(tmpFileName, {
+    await page.goto(url, {
         waitUntil: 'networkidle0'
     });
+    console.log(`URL ${url} loaded`);
     const $canvas = await page.$('svg');
     const bounds = await $canvas.boundingBox();
-    const body = await page.$('body');
-    await body.screenshot({
+    // const body = await page.$('body');
+    await $canvas.screenshot({
         path: outFile,
         type: 'png',
         captureBeyondViewport: true,
         clip: bounds
     });
     await browser.close();
+    console.log(`File ${outFile} saved`);
 }
 
-buildGraphs(
-    langs,
-    target,
-    resolve(dir, 'src'),
-    resolve(dir, 'src', 'img', 'graphs'),
-    resolve(dir, '.tmp')
-)
+async function main() {
+    const app = express();
+    app.use('/src', express.static('src'))
+        .use('/docs', express.static('docs'))
+        .get('/graph', async (req, res, next) => {
+            try {
+                const file = req.query.file;
+                console.log(`Reading file "${file}"`);
+                const html = templates.graphHtmlTemplate(
+                    (await readFile(file)).toString('utf-8')
+                );
+                res.status(200);
+                res.end(html);
+            } catch (e) {
+                next(e);
+            }
+        })
+        .use((req, res, error, next) => {
+            res.status(500);
+            res.end(error.toString());
+            throw error;
+        });
+
+    app.listen(port, () => {
+        console.log(`Graph server started at localhost:${port}`);
+    });
+
+    await buildGraphs(
+        langs,
+        target,
+        resolve(dir, 'src'),
+        resolve(dir, 'src', 'img', 'graphs'),
+        (file) =>
+            `http://localhost:${port}/graph?file=${encodeURIComponent(file)}`
+    );
+
+    console.log('All graphs built successfully');
+
+    await new Promise((r) => setTimeout(() => r(), 60 * 60 * 1000));
+}
+
+main()
     .catch((e) => {
         console.error(e);
     })

src/templates.mjs

@@ -323,6 +323,7 @@ export const templates = {
     graphHtmlTemplate: (graph) => `<!DOCTYPE html>
 <html>
     <head>
+        <meta charset="utf-8"/>
         <link rel="stylesheet" type="text/css" href="../docs/assets/fonts.css"/>
         <style>
             html, body {