Remove redundant readme-images.htm file
This commit is contained in:
David Evans
parent
5e47790efd
commit
f5b1271647
|
|
@ -37,9 +37,6 @@
|
|||
<FileRef
|
||||
location = "container:package.json">
|
||||
</FileRef>
|
||||
<FileRef
|
||||
location = "container:readme-images.htm">
|
||||
</FileRef>
|
||||
<FileRef
|
||||
location = "container:README.md">
|
||||
</FileRef>
|
||||
|
|
|
|||
|
|
@ -29,8 +29,6 @@ several pages:
|
|||
the main editor, using non-minified sources (good for development)
|
||||
* [http://localhost:8080/library.htm](http://localhost:8080/library.htm):
|
||||
the library sample page (uses minified sources)
|
||||
* [http://localhost:8080/readme-images.htm](http://localhost:8080/readme-images.htm):
|
||||
image generation page for the readme file
|
||||
|
||||
**NOTE**: This project uses web modules, which are only supported by
|
||||
recent browsers. In particular, note that FireFox 59 does not support
|
||||
|
|
@ -161,15 +159,13 @@ variety of ways.
|
|||
### Screenshots
|
||||
|
||||
If your changes affect any of the screenshots in README.md, you can
|
||||
use [readme-images](http://localhost:8080/readme-images.htm), which
|
||||
will automatically extract all sample blocks from the README.md file
|
||||
and generate downloadable PNGs for them with the correct filenames.
|
||||
These should replace the files in the `screenshots/` directory.
|
||||
use `npm run generate-screenshots`, which will automatically extract
|
||||
all sample blocks from the README.md file and update their
|
||||
corresponding images in the `screenshots/` directory.
|
||||
|
||||
(I like to aditionally run the screenshots through
|
||||
[pngcrush](https://pmt.sourceforge.io/pngcrush/) using the flags
|
||||
`pngcrush -rem allb -brute -l 9 "<filename>"` to reduce the sizes by
|
||||
about half).
|
||||
Note: to use this command, you will need
|
||||
[pngcrush](https://pmt.sourceforge.io/pngcrush/) installed on your
|
||||
system. On MacOS you can install it with `brew install pngcrush`.
|
||||
|
||||
The samples in
|
||||
[http://localhost:8080/library.htm](http://localhost:8080/library.htm)
|
||||
|
|
|
|||
|
|
@ -6,5 +6,5 @@ Checklist: (tick with [x])
|
|||
- [ ] Tests are passing (`npm test`).
|
||||
- [ ] No dead code is left behind.
|
||||
- [ ] (optional): `npm run minify` has been run.
|
||||
- [ ] (optional): Any relevant screenshots have been updated.
|
||||
- [ ] (optional): `npm run generate-screenshots` has been run.
|
||||
- [ ] I agree to release my code under the license of this project (LGPL-3.0).
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
"minify-lib": "rollup --config scripts/rollup.config.js && uglifyjs --compress --mangle --warn --output lib/sequence-diagram-web.min.js -- lib/sequence-diagram-web.js",
|
||||
"minify-web": "rollup --config web/rollup.config.js && uglifyjs --compress --mangle --warn --output weblib/editor.min.js -- weblib/editor.js",
|
||||
"minify": "npm run minify-lib && npm run minify-web",
|
||||
"prepublishOnly": "npm run minify-lib",
|
||||
"prepublishOnly": "npm run minify-lib && npm run generate-screenshots && npm test",
|
||||
"start": "http-server",
|
||||
"test": "npm run unit-test && npm run web-test && npm run lint && echo 'PASSED :)'",
|
||||
"unit-test": "rollup --config spec/support/rollup.config.js && node -r source-map-support/register node_modules/.bin/jasmine --config=spec/support/jasmine.json",
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="content-security-policy" content="
|
||||
base-uri 'self';
|
||||
default-src 'none';
|
||||
script-src 'self';
|
||||
connect-src 'self';
|
||||
style-src 'self'
|
||||
'sha256-s7UPtBgvov5WNF9C1DlTZDpqwLgEmfiWha5a5p/Zn7E='
|
||||
;
|
||||
font-src 'self' data:;
|
||||
img-src 'self' blob:;
|
||||
form-action 'none';
|
||||
">
|
||||
|
||||
<title>Readme Image Generator</title>
|
||||
<link rel="icon" href="favicon.png">
|
||||
<link rel="apple-touch-icon" href="apple-touch-icon.png">
|
||||
|
||||
<link rel="stylesheet" href="styles/readmeImages.css">
|
||||
<script src="web/readmeImages.mjs" type="module"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<noscript>This tool requires Javascript!</noscript>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
import SequenceDiagram from '../scripts/sequence/SequenceDiagram.mjs';
|
||||
|
||||
function makeText(text = '') {
|
||||
return document.createTextNode(text);
|
||||
}
|
||||
|
||||
function makeNode(type, attrs = {}, children = []) {
|
||||
const o = document.createElement(type);
|
||||
for(const k in attrs) {
|
||||
if(Object.prototype.hasOwnProperty.call(attrs, k)) {
|
||||
o.setAttribute(k, attrs[k]);
|
||||
}
|
||||
}
|
||||
for(const c of children) {
|
||||
o.appendChild(c);
|
||||
}
|
||||
return o;
|
||||
}
|
||||
|
||||
const RESOLUTION = 4;
|
||||
|
||||
const FAVICON_SRC = (
|
||||
'theme chunky\n' +
|
||||
'define ABC as A, DEF as B\n' +
|
||||
'A -> B\n' +
|
||||
'B -> ]\n' +
|
||||
'] -> B\n' +
|
||||
'B -> A\n' +
|
||||
'terminators fade'
|
||||
);
|
||||
|
||||
const SAMPLE_REGEX = new RegExp(
|
||||
/<img src="([^"]*)"[^>]*>[\s]*```(?!shell).*\n([^]+?)```/g
|
||||
);
|
||||
|
||||
function findSamples(content) {
|
||||
SAMPLE_REGEX.lastIndex = 0;
|
||||
const results = [];
|
||||
for(;;) {
|
||||
const match = SAMPLE_REGEX.exec(content);
|
||||
if(!match) {
|
||||
break;
|
||||
}
|
||||
results.push({
|
||||
code: match[2],
|
||||
file: match[1],
|
||||
});
|
||||
}
|
||||
results.push({
|
||||
code: FAVICON_SRC,
|
||||
file: 'favicon.png',
|
||||
size: {height: 16, width: 16},
|
||||
});
|
||||
return results;
|
||||
}
|
||||
|
||||
function filename(path) {
|
||||
const p = path.lastIndexOf('/');
|
||||
if(p === -1) {
|
||||
return path;
|
||||
} else {
|
||||
return path.substr(p + 1);
|
||||
}
|
||||
}
|
||||
|
||||
const statusText = makeText('Loading\u2026');
|
||||
const status = makeNode('div', {'class': 'status'}, [statusText]);
|
||||
document.body.appendChild(status);
|
||||
|
||||
function renderSample({file, code, size}) {
|
||||
const diagram = new SequenceDiagram(code);
|
||||
|
||||
const raster = makeNode('img', {
|
||||
'class': 'raster',
|
||||
'src': '',
|
||||
'title': 'new',
|
||||
});
|
||||
|
||||
const downloadPNG = makeNode('a', {
|
||||
'download': filename(file),
|
||||
'href': '#',
|
||||
}, [makeText('Download PNG')]);
|
||||
|
||||
document.body.appendChild(makeNode('div', {'class': 'hold'}, [
|
||||
diagram.dom(),
|
||||
raster,
|
||||
makeNode('img', {
|
||||
'class': 'original',
|
||||
'src': file,
|
||||
'title': 'original',
|
||||
}),
|
||||
downloadPNG,
|
||||
]));
|
||||
|
||||
diagram.getPNG({resolution: RESOLUTION, size}).then(({url}) => {
|
||||
raster.setAttribute('src', url);
|
||||
downloadPNG.setAttribute('href', url);
|
||||
});
|
||||
}
|
||||
|
||||
(fetch('README.md')
|
||||
.then((response) => response.text())
|
||||
.then(findSamples)
|
||||
.then((samples) => {
|
||||
samples.forEach(renderSample);
|
||||
})
|
||||
.then(() => {
|
||||
document.body.removeChild(status);
|
||||
})
|
||||
.catch((e) => {
|
||||
statusText.nodeValue = 'Error: ' + e;
|
||||
})
|
||||
);
|
||||
Loading…
Reference in New Issue