From 4cd94e3689b256b6578da3c35ad52872bcea634f Mon Sep 17 00:00:00 2001 From: Kyle D Date: Fri, 18 Dec 2020 20:17:27 -0500 Subject: [PATCH] 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 --- Makefile | 2 +- build/generate-images.js | 37 +++++++++++++----- .../doc/advanced/customizing-gitea.en-us.md | 4 ++ .../doc/developers/hacking-on-gitea.en-us.md | 4 +- public/img/gitea.svg | 1 + public/img/logo-192.png | Bin 0 -> 4756 bytes public/img/{gitea-512.png => logo-512.png} | Bin public/img/{gitea-lg.png => logo-lg.png} | Bin .../img/{gitea-safari.svg => logo-safari.svg} | 0 public/img/{gitea-sm.png => logo-sm.png} | Bin public/img/logo.svg | 1 + snap/snapcraft.yaml | 2 +- templates/admin/hook_new.tmpl | 2 +- templates/base/head.tmpl | 6 +-- templates/base/head_navbar.tmpl | 2 +- templates/home.tmpl | 2 +- templates/org/settings/hook_new.tmpl | 2 +- templates/pwa/manifest_json.tmpl | 8 ++-- templates/repo/settings/webhook/list.tmpl | 2 +- templates/repo/settings/webhook/new.tmpl | 2 +- 20 files changed, 52 insertions(+), 25 deletions(-) create mode 100644 public/img/gitea.svg create mode 100644 public/img/logo-192.png rename public/img/{gitea-512.png => logo-512.png} (100%) rename public/img/{gitea-lg.png => logo-lg.png} (100%) rename public/img/{gitea-safari.svg => logo-safari.svg} (100%) rename public/img/{gitea-sm.png => logo-sm.png} (100%) create mode 100644 public/img/logo.svg diff --git a/Makefile b/Makefile index bb2f181d2..e3057d99e 100644 --- a/Makefile +++ b/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 diff --git a/build/generate-images.js b/build/generate-images.js index c7f58f61d..9bd40641e 100755 --- a/build/generate-images.js +++ b/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); diff --git a/docs/content/doc/advanced/customizing-gitea.en-us.md b/docs/content/doc/advanced/customizing-gitea.en-us.md index 118d5f2e6..be6512a45 100644 --- a/docs/content/doc/advanced/customizing-gitea.en-us.md +++ b/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` diff --git a/docs/content/doc/developers/hacking-on-gitea.en-us.md b/docs/content/doc/developers/hacking-on-gitea.en-us.md index 875a4818e..516a33d2a 100644 --- a/docs/content/doc/developers/hacking-on-gitea.en-us.md +++ b/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 diff --git a/public/img/gitea.svg b/public/img/gitea.svg new file mode 100644 index 000000000..38ab3c31a --- /dev/null +++ b/public/img/gitea.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/logo-192.png b/public/img/logo-192.png new file mode 100644 index 0000000000000000000000000000000000000000..08baff19e1906a5bd3d58e8cd3298aa6bf3e0193 GIT binary patch literal 4756 zcmV;F5^L>=P)qr#8noU;qFB0000000000000000000000000000000000$5u6=!fRbzn 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 is;a80s;a80s;U5reJfhQI2Ee^0000 \ No newline at end of file diff --git a/snap/snapcraft.yaml b/snap/snapcraft.yaml index 55bd03b09..223fdde8d 100644 --- a/snap/snapcraft.yaml +++ b/snap/snapcraft.yaml @@ -6,7 +6,7 @@ description: | an independent binary distribution across ALL platforms that Go supports, including Linux, Mac OS X, Windows and ARM. -icon: public/img/gitea-lg.png +icon: public/img/logo-lg.png confinement: strict base: core18 adopt-info: gitea diff --git a/templates/admin/hook_new.tmpl b/templates/admin/hook_new.tmpl index dabd568f9..c6f02ee20 100644 --- a/templates/admin/hook_new.tmpl +++ b/templates/admin/hook_new.tmpl @@ -11,7 +11,7 @@ {{end}}
{{if eq .HookType "gitea"}} - + {{else if eq .HookType "gogs"}} {{else if eq .HookType "slack"}} diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl index 953654504..7d35664c7 100644 --- a/templates/base/head.tmpl +++ b/templates/base/head.tmpl @@ -60,8 +60,8 @@ - - + + {{if .RequireSimpleMDE}} {{end}} @@ -104,7 +104,7 @@ {{else}} - + {{end}} diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl index 979e4d548..5ce07ff8c 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -1,7 +1,7 @@