books/The-API-Book
1
0
Fork 0
mirror of https://github.com/twirl/The-API-Book.git synced 2025-01-05 10:20:22 +02:00
Code Issues Releases Activity

graph builder

Browse Source
This commit is contained in:
Sergey Konstantinov 2022-07-18 00:08:54 +03:00
parent 429fafe3f7
commit 900d3759a5
8 changed files with 195 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
build-graphs.mjs Normal file
View File

@ -0,0 +1,77 @@
import { readFileSync, writeFileSync, readdirSync } from 'fs';
import { resolve } from 'path';
import { pathToFileURL } from 'url';
import puppeteer from 'puppeteer';
const args = process.argv.slice(2);
const dir = process.cwd();
if (args[0] == 'l10n') {
buildL10N(dir, (args[1] || 'en,ru').split(','));
} else {
buildGraphs(dir, (args[0] || 'en,ru').split(','), args[1]);
}
async function buildL10N(dir, langs) {
const l10n = langs.reduce((l10n, lang) => {
const l10nFile = resolve(dir, 'src', lang, 'l10n.json');
const contents = JSON.parse(readFileSync(l10nFile).toString('utf-8'));
l10n[lang] = JSON.stringify(contents);
return l10n;
}, {});
writeFileSync(
resolve(dir, 'src', 'graphs', 'l10n.js'),
`(function(global){global.l10n={${Object.entries(l10n)
.map(
([lang, content]) =>
`${lang}:JSON.parse(${JSON.stringify(content)})`
)
.join(',\n')}}})(this)`
);
}
async function buildGraphs(dir, langs, source) {
const srcDir = resolve(dir, 'src', 'graphs');
const sources = source
? [source]
: readdirSync(srcDir)
.filter((file) => file.slice(-3) == '.js' && file != 'l10n.js')
.map((file) => file.slice(0, file.length - 3))
.sort();
const indexFileUrl = pathToFileURL(
resolve(dir, 'src', 'graphs', 'index.html')
);
for (const source of sources) {
console.log(`Building ${source}…`);
for (const lang of langs) {
const inFile = `${indexFileUrl}?graph=${source}&lang=${lang}`;
console.log(` Open ${inFile}`);
const browser = await puppeteer.launch({
headless: true,
product: 'chrome',
defaultViewport: {
deviceScaleFactor: 2,
width: 1000,
height: 1000
}
});
const outFile = resolve(dir, 'src', 'img', `graph-${source}.png`);
const page = await browser.newPage();
await page.goto(inFile, {
waitUntil: 'networkidle0'
});
const body = await page.$('body');
await body.screenshot({
path: outFile,
type: 'png',
captureBeyondViewport: true
});
console.log(` ${outFile} saved`);
await browser.close();
}
}
}

6
package.json
View File

@ -6,10 +6,12 @@
"repository": "github.com:twirl/The-API-Book", "repository": "github.com:twirl/The-API-Book",
"devDependencies": { "devDependencies": {
"@twirl/book-builder": "0.0.12", "@twirl/book-builder": "0.0.12",
"html-docx-js": "^0.3.1" "html-docx-js": "^0.3.1",
"puppeteer": "^13.1.2"
}, },
"scripts": { "scripts": {
"build": "node build.mjs", "build": "node build.mjs",
"build-docx": "node build-docx.mjs" "build-docx": "node build-docx.mjs",
"build-graphs": "node build-graphs.mjs"
} }
} }

16
src/css/graph.css Normal file
View File

@ -0,0 +1,16 @@
html, body {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
@font-face {
font-family: local-monospace;
src: url(../fonts/RobotoMono-Regular.ttf);
}
* {
font-family: local-monospace, monospace !important;
white-space: nowrap !important;
}

5
src/en/l10n.json
View File

@ -81,5 +81,8 @@
"Managing Expectations" "Managing Expectations"
] ]
} }
] ],
"graphs": {
"topLevel": "Top-Level Objects"
}
} }

40
src/graphs/index.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.4.4/joint.css"
/>
<link rel="stylesheet" type="text/css" href="../css/graph.css" />
</head>
<body>
<!-- content -->
<div id="content"></div>
<!-- dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.4.4/joint.js"></script>
<!-- code -->
<script type="text/javascript" src="l10n.js"></script>
<script type="text/javascript" src="lib/lib.js"></script>
<script type="text/javascript">
const params = document.location.href
.split('?', 2)[1]
.split('&')
.reduce((params, str) => {
const [key, value] = str.split('=');
params[key] = decodeURIComponent(value);
return params;
}, {});
document.write(
`<script type="text/javascript" src="${params.graph}.js">\<\/script>`
);
window.onload = () => render(lib, l10n[params.lang]);
</script>
</body>
</html>

2
src/graphs/l10n.js Normal file
View File

File diff suppressed because one or more lines are too long

35
src/graphs/lib/lib.js Normal file
View File

@ -0,0 +1,35 @@
(function (global) {
global.lib = {};
global.lib.paper = ({ height, width, id = 'content' }) => {
const graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });
const paper = new joint.dia.Paper({
el: document.getElementById(id),
model: graph,
width,
height,
gridSize: 1,
cellViewNamespace: joint.shapes
});
return { paper, graph };
};
global.lib.group = ({
graph,
height = 200,
width = 800,
title,
left,
top
}) => {
return new joint.shapes.standard.HeaderedRectangle()
.resize(height, width)
.position(left, top)
.attr('root/title', title)
.attr('headerText/text', title)
.rotate(-90, true, { x: left + height / 2, y: top + height / 2 })
.addTo(graph);
};
})(this);

17
src/graphs/top-level-i.js Normal file
View File

@ -0,0 +1,17 @@
(function (global) {
global.render = (lib, l10n) => {
const { graph } = lib.paper({
width: 1000,
height: 320
});
lib.group({
graph,
left: 10,
top: 10,
width: 980,
height: 300,
title: l10n.graphs.topLevel
});
};
})(this);