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 bb2f181d29..e3057d99ee 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 c7f58f61d0..9bd40641e4 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 118d5f2e68..be6512a450 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 875a4818e1..516a33d2ad 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 0000000000..38ab3c31ae --- /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 zcmaKwRag^_!-Y3e7>$&4NDk=^VU$yPfYM4yhp>U

_%q-6KTl8YL(pAf1xZF+xHZ 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 \ No newline at end of file diff --git a/snap/snapcraft.yaml b/snap/snapcraft.yaml index 55bd03b097..223fdde8dd 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 dabd568f93..c6f02ee20e 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 9536545041..7d35664c7b 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 979e4d5488..5ce07ff8c5 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -1,7 +1,7 @@