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
									
								
							
							
						
						| @@ -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
									
								
							
							
						
						| 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
									
								
							
							
						
						| @@ -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 | 
| @@ -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"}} | ||||
|   | ||||
 Kyle D
					Kyle D