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
2
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
|
||||
|
@ -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);
|
||||
|
@ -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`
|
||||
|
@ -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
|
||||
|
||||
|
1
public/img/gitea.svg
Normal file
After Width: | Height: | Size: 2.0 KiB |
BIN
public/img/logo-192.png
Normal file
After Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
1
public/img/logo.svg
Normal file
After Width: | Height: | Size: 2.0 KiB |
@ -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
|
||||
|
@ -11,7 +11,7 @@
|
||||
{{end}}
|
||||
<div class="ui right">
|
||||
{{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"}}
|
||||
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/gogs.ico">
|
||||
{{else if eq .HookType "slack"}}
|
||||
|
@ -60,8 +60,8 @@
|
||||
</script>
|
||||
<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="mask-icon" href="{{StaticUrlPrefix}}/img/gitea-safari.svg" color="#609926">
|
||||
<link rel="fluid-icon" href="{{StaticUrlPrefix}}/img/gitea-lg.png" title="{{AppName}}">
|
||||
<link rel="mask-icon" href="{{StaticUrlPrefix}}/img/logo-safari.svg" color="#609926">
|
||||
<link rel="fluid-icon" href="{{StaticUrlPrefix}}/img/logo-lg.png" title="{{AppName}}">
|
||||
{{if .RequireSimpleMDE}}
|
||||
<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/easymde.css?v={{MD5 AppVer}}">
|
||||
{{end}}
|
||||
@ -104,7 +104,7 @@
|
||||
{{else}}
|
||||
<meta property="og:title" content="{{AppName}}">
|
||||
<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:description" content="{{MetaDescription}}">
|
||||
{{end}}
|
||||
|
@ -1,7 +1,7 @@
|
||||
<div class="ui container" id="navbar">
|
||||
<div class="item brand" style="justify-content: space-between;">
|
||||
<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>
|
||||
<div class="ui basic icon button mobile-only" id="navbar-expand-toggle">
|
||||
<i class="sidebar icon"></i>
|
||||
|
@ -3,7 +3,7 @@
|
||||
<div class="ui stackable middle very relaxed page grid">
|
||||
<div class="sixteen wide center aligned centered column">
|
||||
<div>
|
||||
<img class="logo" src="{{StaticUrlPrefix}}/img/gitea-lg.png" />
|
||||
<img class="logo" src="{{StaticUrlPrefix}}/img/logo.svg" />
|
||||
</div>
|
||||
<div class="hero">
|
||||
<h1 class="ui icon header title">
|
||||
|
@ -10,7 +10,7 @@
|
||||
{{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}
|
||||
<div class="ui right">
|
||||
{{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"}}
|
||||
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/gogs.ico">
|
||||
{{else if eq .HookType "slack"}}
|
||||
|
@ -3,22 +3,22 @@
|
||||
"name": "Gitea - Git with a cup of tea",
|
||||
"icons": [
|
||||
{
|
||||
"src": "{{StaticUrlPrefix}}/img/gitea-lg.png",
|
||||
"src": "{{StaticUrlPrefix}}/img/logo-lg.png",
|
||||
"type": "image/png",
|
||||
"sizes": "880x880"
|
||||
},
|
||||
{
|
||||
"src": "{{StaticUrlPrefix}}/img/gitea-sm.png",
|
||||
"src": "{{StaticUrlPrefix}}/img/logo-sm.png",
|
||||
"type": "image/png",
|
||||
"sizes": "120x120"
|
||||
},
|
||||
{
|
||||
"src": "{{StaticUrlPrefix}}/img/gitea-512.png",
|
||||
"src": "{{StaticUrlPrefix}}/img/logo-512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
},
|
||||
{
|
||||
"src": "{{StaticUrlPrefix}}/img/gitea-192.png",
|
||||
"src": "{{StaticUrlPrefix}}/img/logo-192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
}
|
||||
|
@ -6,7 +6,7 @@
|
||||
<div class="ui blue tiny button">{{.i18n.Tr "repo.settings.add_webhook"}}</div>
|
||||
<div class="menu">
|
||||
<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 class="item" href="{{.BaseLink}}/gogs/new">
|
||||
<img width="20" height="20" src="{{StaticUrlPrefix}}/img/gogs.ico">Gogs
|
||||
|
@ -8,7 +8,7 @@
|
||||
{{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}
|
||||
<div class="ui right">
|
||||
{{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"}}
|
||||
<img width="26" height="26" src="{{StaticUrlPrefix}}/img/gogs.ico">
|
||||
{{else if eq .HookType "slack"}}
|
||||
|