1
0
mirror of https://github.com/twirl/The-API-Book.git synced 2025-06-30 22:43:38 +02:00

better graphs

This commit is contained in:
Sergey Konstantinov
2024-08-18 19:38:17 +03:00
parent a0b45c09e3
commit 5c7e5b190c
14 changed files with 62 additions and 32 deletions

View File

@ -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);
})