Rework 'make generate-images'

Makefile

@@ -648,34 +648,8 @@ update-translations:
 
 .PHONY: generate-images
 generate-images:
-	$(eval TMPDIR := $(shell mktemp -d 2>/dev/null || mktemp -d -t 'gitea-temp'))
-	mkdir -p $(TMPDIR)/images
-	inkscape -f $(PWD)/assets/logo.svg -w 880 -h 880 -e $(PWD)/public/img/gitea-lg.png
-	inkscape -f $(PWD)/assets/logo.svg -w 512 -h 512 -e $(PWD)/public/img/gitea-512.png
-	inkscape -f $(PWD)/assets/logo.svg -w 192 -h 192 -e $(PWD)/public/img/gitea-192.png
-	inkscape -f $(PWD)/assets/logo.svg -w 120 -h 120 -jC -i layer1 -e $(TMPDIR)/images/sm-1.png
-	inkscape -f $(PWD)/assets/logo.svg -w 120 -h 120 -jC -i layer2 -e $(TMPDIR)/images/sm-2.png
-	composite -compose atop $(TMPDIR)/images/sm-2.png $(TMPDIR)/images/sm-1.png $(PWD)/public/img/gitea-sm.png
-	inkscape -f $(PWD)/assets/logo.svg -w 200 -h 200 -e $(PWD)/public/img/avatar_default.png
-	inkscape -f $(PWD)/assets/logo.svg -w 180 -h 180 -e $(PWD)/public/img/favicon.png
-	inkscape -f $(PWD)/assets/logo.svg -w 128 -h 128 -e $(TMPDIR)/images/128-raw.png
-	inkscape -f $(PWD)/assets/logo.svg -w 64 -h 64 -e $(TMPDIR)/images/64-raw.png
-	inkscape -f $(PWD)/assets/logo.svg -w 32 -h 32 -jC -i layer1 -e $(TMPDIR)/images/32-1.png
-	inkscape -f $(PWD)/assets/logo.svg -w 32 -h 32 -jC -i layer2 -e $(TMPDIR)/images/32-2.png
-	composite -compose atop $(TMPDIR)/images/32-2.png $(TMPDIR)/images/32-1.png $(TMPDIR)/images/32-raw.png
-	inkscape -f $(PWD)/assets/logo.svg -w 16 -h 16 -jC -i layer1 -e $(TMPDIR)/images/16-raw.png
-	zopflipng -m -y $(TMPDIR)/images/128-raw.png $(TMPDIR)/images/128.png
-	zopflipng -m -y $(TMPDIR)/images/64-raw.png $(TMPDIR)/images/64.png
-	zopflipng -m -y $(TMPDIR)/images/32-raw.png $(TMPDIR)/images/32.png
-	zopflipng -m -y $(TMPDIR)/images/16-raw.png $(TMPDIR)/images/16.png
-	rm -f $(TMPDIR)/images/*-*.png
-	convert $(TMPDIR)/images/16.png $(TMPDIR)/images/32.png \
-					$(TMPDIR)/images/64.png $(TMPDIR)/images/128.png \
-					$(PWD)/public/img/favicon.ico
-	convert -flatten $(PWD)/public/img/favicon.png $(PWD)/public/img/apple-touch-icon.png
-
-	rm -rf $(TMPDIR)/images
-	$(foreach file, $(shell find public/img -type f -name '*.png' ! -name 'loading.png'),zopflipng -m -y $(file) $(file);)
+	npm install --no-save --no-package-lock xmldom svg2img imagemin-zopfli
+	node build/generate-images.js
 
 .PHONY: pr\#%
 pr\#%: clean-all

build/generate-images.js

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+'use strict';
+
+const imageminZopfli = require('imagemin-zopfli'); // eslint-disable-line import/no-unresolved
+const svg2img = require('svg2img'); // eslint-disable-line import/no-unresolved
+const {DOMParser, XMLSerializer} = require('xmldom'); // eslint-disable-line import/no-unresolved
+const {promisify} = require('util');
+const {readFile, writeFile} = require('fs').promises;
+const {resolve} = require('path');
+
+function exit(err) {
+  if (err) console.error(err);
+  process.exit(err ? 1 : 0);
+}
+
+async function generate(svg, outputFile, {size, bg, removeDetail} = {}) {
+  const parser = new DOMParser();
+  const serializer = new XMLSerializer();
+  const document = parser.parseFromString(svg);
+
+  if (bg) {
+    const rect = parser.parseFromString('<rect width="100%" height="100%" fill="white"/>');
+    document.documentElement.insertBefore(rect, document.documentElement.firstChild);
+  }
+
+  if (removeDetail) {
+    for (const el of Array.from(document.getElementsByTagName('g') || [])) {
+      for (const attribute of Array.from(el.attributes || [])) {
+        if (attribute.name === 'class' && attribute.value === 'detail-remove') {
+          el.parentNode.removeChild(el);
+        }
+      }
+    }
+  }
+
+  const processedSvg = serializer.serializeToString(document);
+  const png = await promisify(svg2img)(processedSvg, {
+    width: size,
+    height: size,
+    preserveAspectRatio: 'xMidYMid meet',
+  });
+
+  const optimizedPng = await imageminZopfli({more: true})(png);
+  await writeFile(outputFile, optimizedPng);
+}
+
+async function main() {
+  const svg = await readFile(resolve(__dirname, '../assets/logo.svg'), 'utf8');
+  await generate(svg, resolve(__dirname, '../public/img/gitea-lg.png'), {size: 880});
+  await generate(svg, resolve(__dirname, '../public/img/gitea-512.png'), {size: 512});
+  await generate(svg, resolve(__dirname, '../public/img/gitea-192.png'), {size: 192});
+  await generate(svg, resolve(__dirname, '../public/img/gitea-sm.png'), {size: 120});
+  await generate(svg, resolve(__dirname, '../public/img/avatar_default.png'), {size: 200});
+  await generate(svg, resolve(__dirname, '../public/img/favicon.png'), {size: 180, removeDetail: true});
+  await generate(svg, resolve(__dirname, '../public/img/apple-touch-icon.png'), {size: 180, bg: true});
+}
+
+main().then(exit).catch(exit);
+

docs/content/doc/advanced/hacking-on-gitea.en-us.md

@@ -155,10 +155,9 @@ Note: When working on frontend code, set `USE_SERVICE_WORKER` to `false` in `app
 
 SVG icons are built using the `make svg` target which compiles the icon sources defined in `build/generate-svg.js` into the output directory `public/img/svg`. Custom icons can be added in the `web_src/svg` directory.
 
-### Building Images
+### Building the Logo
 
-To build the images, ImageMagick, `inkscape` and `zopflipng` binaries must be available in
-your `PATH` to run `make generate-images`.
+The PNG versions of the logo are built from a single SVG source file `assets/logo.svg` using the `make generate-images` target. To run it, Node.js and npm must be available. The same process can also be used to generate a custom logo PNGs from a SVG source file.
 
 ### Updating the API