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
This commit is contained in:
Kyle D 2020-12-18 20:17:27 -05:00 committed by GitHub
parent e25e7b9598
commit 4cd94e3689
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 52 additions and 25 deletions

View File

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

View File

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

View File

@ -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 For example, a file `image.png` stored in `custom/public/`, can be accessed with
the url `http://gitea.domain.tld/image.png`. 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 ## Changing the default avatar
Place the png image at the following path: `custom/public/img/avatar_default.png` Place the png image at the following path: `custom/public/img/avatar_default.png`

View File

@ -185,7 +185,9 @@ SVG icons are built using the `make svg` target which compiles the icon sources
### Building the Logo ### 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 ### Updating the API

1
public/img/gitea.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M395.9 484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12z" fill="#fff"/><g fill="#609926"><path d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6zM125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1zm300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1z"/><path d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8-1.9 8 2 16.3 9.1 20 7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3 7.8 4 17.4 1.7 22.5-5.3 5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8l-24.6 50.4z"/></g></svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
public/img/logo-192.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

1
public/img/logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M395.9 484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12z" fill="#fff"/><g fill="#609926"><path d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6zM125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1zm300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1z"/><path d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8-1.9 8 2 16.3 9.1 20 7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3 7.8 4 17.4 1.7 22.5-5.3 5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8l-24.6 50.4z"/></g></svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -6,7 +6,7 @@ description: |
an independent binary distribution across ALL platforms that Go supports, an independent binary distribution across ALL platforms that Go supports,
including Linux, Mac OS X, Windows and ARM. including Linux, Mac OS X, Windows and ARM.
icon: public/img/gitea-lg.png icon: public/img/logo-lg.png
confinement: strict confinement: strict
base: core18 base: core18
adopt-info: gitea adopt-info: gitea

View File

@ -11,7 +11,7 @@
{{end}} {{end}}
<div class="ui right"> <div class="ui right">
{{if eq .HookType "gitea"}} {{if eq .HookType "gitea"}}
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/gitea-sm.png"> <img width="26" height="26" src="{{StaticUrlPrefix}}/img/gitea.svg">
{{else if eq .HookType "gogs"}} {{else if eq .HookType "gogs"}}
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/gogs.ico"> <img width="26" height="26" src="{{StaticUrlPrefix}}/img/gogs.ico">
{{else if eq .HookType "slack"}} {{else if eq .HookType "slack"}}

View File

@ -60,8 +60,8 @@
</script> </script>
<link rel="icon" href="{{StaticUrlPrefix}}/img/favicon.svg" type="image/svg+xml"> <link rel="icon" href="{{StaticUrlPrefix}}/img/favicon.svg" type="image/svg+xml">
<link rel="alternate icon" href="{{StaticUrlPrefix}}/img/favicon.png" type="image/png"> <link rel="alternate icon" href="{{StaticUrlPrefix}}/img/favicon.png" type="image/png">
<link rel="mask-icon" href="{{StaticUrlPrefix}}/img/gitea-safari.svg" color="#609926"> <link rel="mask-icon" href="{{StaticUrlPrefix}}/img/logo-safari.svg" color="#609926">
<link rel="fluid-icon" href="{{StaticUrlPrefix}}/img/gitea-lg.png" title="{{AppName}}"> <link rel="fluid-icon" href="{{StaticUrlPrefix}}/img/logo-lg.png" title="{{AppName}}">
{{if .RequireSimpleMDE}} {{if .RequireSimpleMDE}}
<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/easymde.css?v={{MD5 AppVer}}"> <link rel="stylesheet" href="{{StaticUrlPrefix}}/css/easymde.css?v={{MD5 AppVer}}">
{{end}} {{end}}
@ -104,7 +104,7 @@
{{else}} {{else}}
<meta property="og:title" content="{{AppName}}"> <meta property="og:title" content="{{AppName}}">
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:image" content="{{StaticUrlPrefix}}/img/gitea-lg.png" /> <meta property="og:image" content="{{StaticUrlPrefix}}/img/logo-lg.png" />
<meta property="og:url" content="{{AppUrl}}" /> <meta property="og:url" content="{{AppUrl}}" />
<meta property="og:description" content="{{MetaDescription}}"> <meta property="og:description" content="{{MetaDescription}}">
{{end}} {{end}}

View File

@ -1,7 +1,7 @@
<div class="ui container" id="navbar"> <div class="ui container" id="navbar">
<div class="item brand" style="justify-content: space-between;"> <div class="item brand" style="justify-content: space-between;">
<a href="{{AppSubUrl}}/"> <a href="{{AppSubUrl}}/">
<img class="ui mini image" src="{{StaticUrlPrefix}}/img/gitea-sm.png"> <img class="ui mini image" src="{{StaticUrlPrefix}}/img/logo.svg">
</a> </a>
<div class="ui basic icon button mobile-only" id="navbar-expand-toggle"> <div class="ui basic icon button mobile-only" id="navbar-expand-toggle">
<i class="sidebar icon"></i> <i class="sidebar icon"></i>

View File

@ -3,7 +3,7 @@
<div class="ui stackable middle very relaxed page grid"> <div class="ui stackable middle very relaxed page grid">
<div class="sixteen wide center aligned centered column"> <div class="sixteen wide center aligned centered column">
<div> <div>
<img class="logo" src="{{StaticUrlPrefix}}/img/gitea-lg.png" /> <img class="logo" src="{{StaticUrlPrefix}}/img/logo.svg" />
</div> </div>
<div class="hero"> <div class="hero">
<h1 class="ui icon header title"> <h1 class="ui icon header title">

View File

@ -10,7 +10,7 @@
{{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}} {{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}
<div class="ui right"> <div class="ui right">
{{if eq .HookType "gitea"}} {{if eq .HookType "gitea"}}
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/gitea-sm.png"> <img width="26" height="26" src="{{StaticUrlPrefix}}/img/gitea.svg">
{{else if eq .HookType "gogs"}} {{else if eq .HookType "gogs"}}
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/gogs.ico"> <img width="26" height="26" src="{{StaticUrlPrefix}}/img/gogs.ico">
{{else if eq .HookType "slack"}} {{else if eq .HookType "slack"}}

View File

@ -3,22 +3,22 @@
"name": "Gitea - Git with a cup of tea", "name": "Gitea - Git with a cup of tea",
"icons": [ "icons": [
{ {
"src": "{{StaticUrlPrefix}}/img/gitea-lg.png", "src": "{{StaticUrlPrefix}}/img/logo-lg.png",
"type": "image/png", "type": "image/png",
"sizes": "880x880" "sizes": "880x880"
}, },
{ {
"src": "{{StaticUrlPrefix}}/img/gitea-sm.png", "src": "{{StaticUrlPrefix}}/img/logo-sm.png",
"type": "image/png", "type": "image/png",
"sizes": "120x120" "sizes": "120x120"
}, },
{ {
"src": "{{StaticUrlPrefix}}/img/gitea-512.png", "src": "{{StaticUrlPrefix}}/img/logo-512.png",
"type": "image/png", "type": "image/png",
"sizes": "512x512" "sizes": "512x512"
}, },
{ {
"src": "{{StaticUrlPrefix}}/img/gitea-192.png", "src": "{{StaticUrlPrefix}}/img/logo-192.png",
"type": "image/png", "type": "image/png",
"sizes": "192x192" "sizes": "192x192"
} }

View File

@ -6,7 +6,7 @@
<div class="ui blue tiny button">{{.i18n.Tr "repo.settings.add_webhook"}}</div> <div class="ui blue tiny button">{{.i18n.Tr "repo.settings.add_webhook"}}</div>
<div class="menu"> <div class="menu">
<a class="item" href="{{.BaseLink}}/gitea/new"> <a class="item" href="{{.BaseLink}}/gitea/new">
<img width="20" height="20" src="{{StaticUrlPrefix}}/img/gitea-sm.png">Gitea <img width="20" height="20" src="{{StaticUrlPrefix}}/img/gitea.svg">Gitea
</a> </a>
<a class="item" href="{{.BaseLink}}/gogs/new"> <a class="item" href="{{.BaseLink}}/gogs/new">
<img width="20" height="20" src="{{StaticUrlPrefix}}/img/gogs.ico">Gogs <img width="20" height="20" src="{{StaticUrlPrefix}}/img/gogs.ico">Gogs

View File

@ -8,7 +8,7 @@
{{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}} {{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}
<div class="ui right"> <div class="ui right">
{{if eq .HookType "gitea"}} {{if eq .HookType "gitea"}}
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/gitea-sm.png"> <img width="26" height="26" src="{{StaticUrlPrefix}}/img/gitea.svg">
{{else if eq .HookType "gogs"}} {{else if eq .HookType "gogs"}}
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/gogs.ico"> <img width="26" height="26" src="{{StaticUrlPrefix}}/img/gogs.ico">
{{else if eq .HookType "slack"}} {{else if eq .HookType "slack"}}