diff options
author | silverwind <me@silverwind.io> | 2020-07-26 11:47:51 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-07-26 17:47:51 +0800 |
commit | 7cf23399a0b97cb8211e8e7b00020e9b1a5fdac1 (patch) | |
tree | a517c074455b1fcaf2eaf0373c059e31f1333ba9 | |
parent | ea1ed802a308698f6b30dd695d0b97251d552775 (diff) | |
download | gitea-7cf23399a0b97cb8211e8e7b00020e9b1a5fdac1.tar.gz gitea-7cf23399a0b97cb8211e8e7b00020e9b1a5fdac1.zip |
Rework 'make generate-images' (#12316)
* Rework 'make generate-images'
- Remove external dependencies and replace it with a node script that
does does the same.
- Move detail removal from gitea-sm.png to favicon.png
- Remove favicon.ico and its generation, it is unused and we already serve
favicon.png in its place.
Fixes: https://github.com/go-gitea/gitea/issues/12314
* use proper centering value for preserveAspectRatio
* fix lint
* use fabric
* better linting fix
* fix typo
* mention detail-remove class in docs
-rw-r--r-- | .eslintrc | 4 | ||||
-rw-r--r-- | Makefile | 30 | ||||
-rw-r--r-- | assets/logo.svg | 3 | ||||
-rwxr-xr-x | build/generate-images.js | 80 | ||||
-rw-r--r-- | docs/content/doc/advanced/hacking-on-gitea.en-us.md | 5 | ||||
-rw-r--r-- | public/img/apple-touch-icon.png | bin | 5399 -> 5648 bytes | |||
-rw-r--r-- | public/img/avatar_default.png | bin | 6237 -> 6226 bytes | |||
-rw-r--r-- | public/img/favicon.ico | bin | 90022 -> 0 bytes | |||
-rw-r--r-- | public/img/favicon.png | bin | 5576 -> 4873 bytes | |||
-rw-r--r-- | public/img/gitea-192.png | bin | 5886 -> 5866 bytes | |||
-rw-r--r-- | public/img/gitea-512.png | bin | 17692 -> 17709 bytes | |||
-rw-r--r-- | public/img/gitea-lg.png | bin | 33872 -> 33868 bytes | |||
-rw-r--r-- | public/img/gitea-sm.png | bin | 3365 -> 3694 bytes |
13 files changed, 90 insertions, 32 deletions
@@ -33,6 +33,10 @@ overrides: worker: true rules: no-restricted-globals: [2, addEventListener, blur, close, closed, confirm, defaultStatus, defaultstatus, error, event, external, find, focus, frameElement, frames, history, innerHeight, innerWidth, isFinite, isNaN, length, location, locationbar, menubar, moveBy, moveTo, name, onblur, onerror, onfocus, onload, onresize, onunload, open, opener, opera, outerHeight, outerWidth, pageXOffset, pageYOffset, parent, print, removeEventListener, resizeBy, resizeTo, screen, screenLeft, screenTop, screenX, screenY, scroll, scrollbars, scrollBy, scrollTo, scrollX, scrollY, status, statusbar, stop, toolbar, top] + - files: ["build/generate-images.js"] + rules: + import/no-unresolved: [0] + import/no-extraneous-dependencies: [0] rules: accessor-pairs: [2] @@ -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 fabric imagemin-zopfli + node build/generate-images.js .PHONY: pr\#% pr\#%: clean-all diff --git a/assets/logo.svg b/assets/logo.svg index ac1594adb8..bfd50a0c90 100644 --- a/assets/logo.svg +++ b/assets/logo.svg @@ -115,6 +115,7 @@ <g inkscape:groupmode="layer" id="layer3" + class="detail-remove" inkscape:label="Layer 3" style="display:inline"> <g @@ -157,4 +158,4 @@ style="fill:none;stroke:#609926;stroke-width:2.68000007;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> </g> </g> -</svg> +</svg>
\ No newline at end of file diff --git a/build/generate-images.js b/build/generate-images.js new file mode 100755 index 0000000000..7a00395a5b --- /dev/null +++ b/build/generate-images.js @@ -0,0 +1,80 @@ +#!/usr/bin/env node +'use strict'; + +const imageminZopfli = require('imagemin-zopfli'); +const {fabric} = require('fabric'); +const {DOMParser, XMLSerializer} = require('xmldom'); +const {readFile, writeFile} = require('fs').promises; +const {resolve} = require('path'); + +function exit(err) { + if (err) console.error(err); + process.exit(err ? 1 : 0); +} + +function loadSvg(svg) { + return new Promise((resolve) => { + fabric.loadSVGFromString(svg, (objects, options) => { + resolve({objects, options}); + }); + }); +} + +async function generate(svg, outputFile, {size, bg, removeDetail} = {}) { + const parser = new DOMParser(); + const serializer = new XMLSerializer(); + const document = parser.parseFromString(svg); + + 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); + } + } + } + } + + svg = serializer.serializeToString(document); + + const {objects, options} = await loadSvg(svg); + const canvas = new fabric.Canvas(); + canvas.setDimensions({width: size, height: size}); + const ctx = canvas.getContext('2d'); + ctx.scale(options.width ? (size / options.width) : 1, options.height ? (size / options.height) : 1); + + if (bg) { + canvas.add(new fabric.Rect({ + left: 0, + top: 0, + height: size * (1 / (size / options.height)), + width: size * (1 / (size / options.width)), + fill: 'white', + })); + } + + canvas.add(fabric.util.groupSVGElements(objects, options)); + canvas.renderAll(); + + let png = Buffer.from([]); + for await (const chunk of canvas.createPNGStream()) { + png = Buffer.concat([png, chunk]); + } + + png = await imageminZopfli({more: true})(png); + await writeFile(outputFile, png); +} + +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); + diff --git a/docs/content/doc/advanced/hacking-on-gitea.en-us.md b/docs/content/doc/advanced/hacking-on-gitea.en-us.md index e6ffe908e9..5c3f199944 100644 --- a/docs/content/doc/advanced/hacking-on-gitea.en-us.md +++ b/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. It's possible to remove parts of the SVG logo for the favicon build by adding a `detail-remove` class to the SVG nodes to be removed. ### Updating the API diff --git a/public/img/apple-touch-icon.png b/public/img/apple-touch-icon.png Binary files differindex d2def0bdc7..e23ba5999d 100644 --- a/public/img/apple-touch-icon.png +++ b/public/img/apple-touch-icon.png diff --git a/public/img/avatar_default.png b/public/img/avatar_default.png Binary files differindex 455155db10..346edb4bbe 100644 --- a/public/img/avatar_default.png +++ b/public/img/avatar_default.png diff --git a/public/img/favicon.ico b/public/img/favicon.ico Binary files differdeleted file mode 100644 index 681d76d33a..0000000000 --- a/public/img/favicon.ico +++ /dev/null diff --git a/public/img/favicon.png b/public/img/favicon.png Binary files differindex 30d3313594..5ad5af21bf 100644 --- a/public/img/favicon.png +++ b/public/img/favicon.png diff --git a/public/img/gitea-192.png b/public/img/gitea-192.png Binary files differindex 12caba8d5d..05bf6d6de7 100644 --- a/public/img/gitea-192.png +++ b/public/img/gitea-192.png diff --git a/public/img/gitea-512.png b/public/img/gitea-512.png Binary files differindex 456abfa0c0..7b32fb33b6 100644 --- a/public/img/gitea-512.png +++ b/public/img/gitea-512.png diff --git a/public/img/gitea-lg.png b/public/img/gitea-lg.png Binary files differindex 682ceaf7be..e50c6cf4d1 100644 --- a/public/img/gitea-lg.png +++ b/public/img/gitea-lg.png diff --git a/public/img/gitea-sm.png b/public/img/gitea-sm.png Binary files differindex 405f40f170..0ae375c5c6 100644 --- a/public/img/gitea-sm.png +++ b/public/img/gitea-sm.png |