gitea png to logo (#13974)

* gitea png to logo.svg

* gitea safari svg to logo

* minify svgs

* Update english docs

* Update missing section on customizing logo

Author: kdumontnu

Makefile

@@ -699,7 +699,7 @@ generate-gitignore:
 .PHONY: generate-images
 generate-images:
 	npm install --no-save --no-package-lock fabric imagemin-zopfli
-	node build/generate-images.js
+	node build/generate-images.js $(TAGS)
 
 .PHONY: pr\#%
 pr\#%: clean-all

build/generate-images.js

@@ -7,6 +7,8 @@ const {readFile, writeFile} = require('fs').promises;
 const {resolve} = require('path');
 const Svgo = require('svgo');
 
+const logoFile = resolve(__dirname, '../assets/logo.svg');
+
 function exit(err) {
   if (err) console.error(err);
   process.exit(err ? 1 : 0);
@@ -39,6 +41,12 @@ async function generateSvgFavicon(svg, outputFile) {
   await writeFile(outputFile, data);
 }
 
+async function generateSvg(svg, outputFile) {
+  const svgo = new Svgo();
+  const {data} = await svgo.optimize(svg);
+  await writeFile(outputFile, data);
+}
+
 async function generate(svg, outputFile, {size, bg}) {
   const {objects, options} = await loadSvg(svg);
   const canvas = new fabric.Canvas();
@@ -69,15 +77,26 @@ async function generate(svg, outputFile, {size, bg}) {
 }
 
 async function main() {
-  const svg = await readFile(resolve(__dirname, '../assets/logo.svg'), 'utf8');
-  await generateSvgFavicon(svg, resolve(__dirname, '../public/img/favicon.svg'));
-  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});
-  await generate(svg, resolve(__dirname, '../public/img/apple-touch-icon.png'), {size: 180, bg: true});
+  const gitea = process.argv.slice(2).includes('gitea');
+
+  const svg = await readFile(logoFile, 'utf8');
+  await Promise.all([
+    generateSvgFavicon(svg, resolve(__dirname, '../public/img/favicon.svg')),
+    generateSvg(svg, resolve(__dirname, '../public/img/logo.svg')),
+    generate(svg, resolve(__dirname, '../public/img/logo-lg.png'), {size: 880}),
+    generate(svg, resolve(__dirname, '../public/img/logo-512.png'), {size: 512}),
+    generate(svg, resolve(__dirname, '../public/img/logo-192.png'), {size: 192}),
+    generate(svg, resolve(__dirname, '../public/img/logo-sm.png'), {size: 120}),
+    generate(svg, resolve(__dirname, '../public/img/avatar_default.png'), {size: 200}),
+    generate(svg, resolve(__dirname, '../public/img/favicon.png'), {size: 180}),
+    generate(svg, resolve(__dirname, '../public/img/apple-touch-icon.png'), {size: 180, bg: true}),
+  ]);
+  if (gitea) {
+    await Promise.all([
+      generateSvg(svg, resolve(__dirname, '../public/img/gitea.svg')),
+      generate(svg, resolve(__dirname, '../public/img/gitea-192.png'), {size: 192}),
+    ]);
+  }
 }
 
 main().then(exit).catch(exit);

docs/content/doc/advanced/customizing-gitea.en-us.md

@@ -57,6 +57,10 @@ To make Gitea serve custom public files (like pages and images), use the folder
 For example, a file `image.png` stored in `custom/public/`, can be accessed with
 the url `http://gitea.domain.tld/image.png`.
 
+## Changing the default logo
+
+To automatically update custom logo png and svg files replace `assets/logo.svg` and run `make generate-images`. This will update the user-designated logo files served in `public/img`. Alternatively, you can manually update each `logo-X.png` and `logo.svg` file in `public/img`.
+
 ## Changing the default avatar
 
 Place the png image at the following path: `custom/public/img/avatar_default.png`

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

@@ -185,7 +185,9 @@ SVG icons are built using the `make svg` target which compiles the icon sources
 
 ### Building the Logo
 
-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.
+The PNG and SVG versions of the gitea logo are built from a single SVG source file `assets/logo.svg` using the `TAGS="gitea" make generate-images` target. To run it, Node.js and npm must be available. 
+
+The same process can also be used to generate custom logo PNGs from a SVG source file by updating `assets/logo.svg` and running `make generate-images`. Omitting the `gitea` tag will update only the user-designated logo files.
 
 ### Updating the API