diff --git a/.eslintrc b/.eslintrc index cfe653c2b8..7c6e734d9a 100644 --- a/.eslintrc +++ b/.eslintrc @@ -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] diff --git a/Makefile b/Makefile index 4ee3e9b704..3ab86245c5 100644 --- a/Makefile +++ b/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 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 @@ - + \ 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 index d2def0bdc7..e23ba5999d 100644 Binary files a/public/img/apple-touch-icon.png and b/public/img/apple-touch-icon.png differ diff --git a/public/img/avatar_default.png b/public/img/avatar_default.png index 455155db10..346edb4bbe 100644 Binary files a/public/img/avatar_default.png and b/public/img/avatar_default.png differ diff --git a/public/img/favicon.ico b/public/img/favicon.ico deleted file mode 100644 index 681d76d33a..0000000000 Binary files a/public/img/favicon.ico and /dev/null differ diff --git a/public/img/favicon.png b/public/img/favicon.png index 30d3313594..5ad5af21bf 100644 Binary files a/public/img/favicon.png and b/public/img/favicon.png differ diff --git a/public/img/gitea-192.png b/public/img/gitea-192.png index 12caba8d5d..05bf6d6de7 100644 Binary files a/public/img/gitea-192.png and b/public/img/gitea-192.png differ diff --git a/public/img/gitea-512.png b/public/img/gitea-512.png index 456abfa0c0..7b32fb33b6 100644 Binary files a/public/img/gitea-512.png and b/public/img/gitea-512.png differ diff --git a/public/img/gitea-lg.png b/public/img/gitea-lg.png index 682ceaf7be..e50c6cf4d1 100644 Binary files a/public/img/gitea-lg.png and b/public/img/gitea-lg.png differ diff --git a/public/img/gitea-sm.png b/public/img/gitea-sm.png index 405f40f170..0ae375c5c6 100644 Binary files a/public/img/gitea-sm.png and b/public/img/gitea-sm.png differ