Move public asset files to the proper directory (#25907)

Move `public/*` to `public/assets/*`

Some old PRs (like #15219) introduced inconsistent directory system.

For example: why the local directory "public" is accessed by
`http://site/assets`? How to serve the ".well-known" files properly in
the public directory?

For convention rules, the "public" directory is widely used for the
website's root directory. It shouldn't be an exception for Gitea.

So, this PR makes the things consistent:

* `http://site/assets/foo` means `{CustomPath}/public/assets/foo`.
* `{CustomPath}/public/.well-known` and `{CustomPath}/public/robots.txt`
can be used in the future.

This PR is also a prerequisite for a clear solution for:
* #21942
* #25892 
* discourse.gitea.io: [.well-known path serving custom files behind
proxy?](https://discourse.gitea.io/t/well-known-path-serving-custom-files-behind-proxy/5445/1)

This PR is breaking for users who have custom "public" files (CSS/JS).
After getting approvals, I will update the documents.

----

## ⚠️ BREAKING ⚠️

If you have files in your "custom/public/" folder, please move them to
"custom/public/assets/".

---------

Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: Giteabot <teabot@gitea.io>

.dockerignore

@@ -75,10 +75,10 @@ cpu.out
 /yarn.lock
 /yarn-error.log
 /npm-debug.log*
-/public/js
+/public/assets/js
-/public/css
+/public/assets/css
-/public/fonts
+/public/assets/fonts
-/public/img/webpack
+/public/assets/img/webpack
 /vendor
 /web_src/fomantic/node_modules
 /web_src/fomantic/build/*

.gitattributes

@@ -1,7 +1,7 @@
 * text=auto eol=lf
 *.tmpl linguist-language=Handlebars
 /assets/*.json linguist-generated
-/public/img/svg/*.svg linguist-generated
+/public/assets/img/svg/*.svg linguist-generated
 /templates/swagger/v1_json.tmpl linguist-generated
 /vendor/** -text -eol linguist-vendored
 /web_src/fomantic/build/** linguist-generated

.gitignore

@@ -72,10 +72,10 @@ cpu.out
 /yarn.lock
 /yarn-error.log
 /npm-debug.log*
-/public/js
+/public/assets/js
-/public/css
+/public/assets/css
-/public/fonts
+/public/assets/fonts
-/public/img/webpack
+/public/assets/img/webpack
 /vendor
 /web_src/fomantic/node_modules
 /web_src/fomantic/build/*

Makefile

@@ -116,15 +116,15 @@ FOMANTIC_WORK_DIR := web_src/fomantic
 
 WEBPACK_SOURCES := $(shell find web_src/js web_src/css -type f)
 WEBPACK_CONFIGS := webpack.config.js
-WEBPACK_DEST := public/js/index.js public/css/index.css
+WEBPACK_DEST := public/assets/js/index.js public/assets/css/index.css
-WEBPACK_DEST_ENTRIES := public/js public/css public/fonts public/img/webpack
+WEBPACK_DEST_ENTRIES := public/assets/js public/assets/css public/assets/fonts public/assets/img/webpack
 
 BINDATA_DEST := modules/public/bindata.go modules/options/bindata.go modules/templates/bindata.go
 BINDATA_HASH := $(addsuffix .hash,$(BINDATA_DEST))
 
 GENERATED_GO_DEST := modules/charset/invisible_gen.go modules/charset/ambiguous_gen.go
 
-SVG_DEST_DIR := public/img/svg
+SVG_DEST_DIR := public/assets/img/svg
 
 AIR_TMP_DIR := .air
 

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://gitea.io/">
-    <img alt="Gitea" src="https://raw.githubusercontent.com/go-gitea/gitea/main/public/img/gitea.svg" width="220"/>
+    <img alt="Gitea" src="https://raw.githubusercontent.com/go-gitea/gitea/main/public/assets/img/gitea.svg" width="220"/>
   </a>
 </p>
 <h1 align="center">Gitea - Git with a cup of tea</h1>

README_ZH.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://gitea.io/">
-    <img alt="Gitea" src="https://raw.githubusercontent.com/go-gitea/gitea/main/public/img/gitea.svg" width="220"/>
+    <img alt="Gitea" src="https://raw.githubusercontent.com/go-gitea/gitea/main/public/assets/img/gitea.svg" width="220"/>
   </a>
 </p>
 <h1 align="center">Gitea - Git with a cup of tea</h1>

build/generate-images.js

@@ -69,13 +69,13 @@ async function main() {
   const faviconSvg = await readFile(new URL('../assets/favicon.svg', import.meta.url), 'utf8');
 
   await Promise.all([
-    generate(logoSvg, '../public/img/logo.svg', {size: 32}),
+    generate(logoSvg, '../public/assets/img/logo.svg', {size: 32}),
-    generate(logoSvg, '../public/img/logo.png', {size: 512}),
+    generate(logoSvg, '../public/assets/img/logo.png', {size: 512}),
-    generate(faviconSvg, '../public/img/favicon.svg', {size: 32}),
+    generate(faviconSvg, '../public/assets/img/favicon.svg', {size: 32}),
-    generate(faviconSvg, '../public/img/favicon.png', {size: 180}),
+    generate(faviconSvg, '../public/assets/img/favicon.png', {size: 180}),
-    generate(logoSvg, '../public/img/avatar_default.png', {size: 200}),
+    generate(logoSvg, '../public/assets/img/avatar_default.png', {size: 200}),
-    generate(logoSvg, '../public/img/apple-touch-icon.png', {size: 180, bg: true}),
+    generate(logoSvg, '../public/assets/img/apple-touch-icon.png', {size: 180, bg: true}),
-    gitea && generate(logoSvg, '../public/img/gitea.svg', {size: 32}),
+    gitea && generate(logoSvg, '../public/assets/img/gitea.svg', {size: 32}),
   ]);
 }
 

build/generate-svg.js

@@ -44,7 +44,7 @@ async function processFile(file, {prefix, fullName} = {}) {
     ],
   });
 
-  await writeFile(fileURLToPath(new URL(`../public/img/svg/${name}.svg`, import.meta.url)), data);
+  await writeFile(fileURLToPath(new URL(`../public/assets/img/svg/${name}.svg`, import.meta.url)), data);
 }
 
 function processFiles(pattern, opts) {
@@ -53,13 +53,13 @@ function processFiles(pattern, opts) {
 
 async function main() {
   try {
-    await mkdir(fileURLToPath(new URL('../public/img/svg', import.meta.url)), {recursive: true});
+    await mkdir(fileURLToPath(new URL('../public/assets/img/svg', import.meta.url)), {recursive: true});
   } catch {}
 
   await Promise.all([
     ...processFiles('node_modules/@primer/octicons/build/svg/*-16.svg', {prefix: 'octicon'}),
     ...processFiles('web_src/svg/*.svg'),
-    ...processFiles('public/img/gitea.svg', {fullName: 'gitea-gitea'}),
+    ...processFiles('public/assets/img/gitea.svg', {fullName: 'gitea-gitea'}),
   ]);
 }
 

custom/conf/app.example.ini

@@ -1200,11 +1200,11 @@ LEVEL = Info
 ;;
 ;; All available reactions users can choose on issues/prs and comments.
 ;; Values can be emoji alias (:smile:) or a unicode emoji.
-;; For custom reactions, add a tightly cropped square image to public/img/emoji/reaction_name.png
+;; For custom reactions, add a tightly cropped square image to public/assets/img/emoji/reaction_name.png
 ;REACTIONS = +1, -1, laugh, hooray, confused, heart, rocket, eyes
 ;;
 ;; Additional Emojis not defined in the utf8 standard
-;; By default we support gitea (:gitea:), to add more copy them to public/img/emoji/emoji_name.png and add it to this config.
+;; By default we support gitea (:gitea:), to add more copy them to public/assets/img/emoji/emoji_name.png and add it to this config.
 ;; Dont mistake it for Reactions.
 ;CUSTOM_EMOJIS = gitea, codeberg, gitlab, git, github, gogs
 ;;

docs/content/doc/administration/cmd-embedded.en-us.md

@@ -47,7 +47,7 @@ for its glob syntax. Here are some examples:
 
 - List all template files, in any virtual directory: `**.tmpl`
 - List all mail template files: `templates/mail/**.tmpl`
-- List all files inside `public/img`: `public/img/**`
+- List all files inside `public/assets/img`: `public/assets/img/**`
 
 Don't forget to use quotes for the patterns, as spaces, `*` and other characters might have
 a special meaning for your command shell.
@@ -60,8 +60,8 @@ Listing all embedded files with `openid` in their path:
 
 ```sh
 $ gitea embedded list '**openid**'
-public/img/auth/openid_connect.svg
+public/assets/img/auth/openid_connect.svg
-public/img/openid-16x16.png
+public/assets/img/openid-16x16.png
 templates/user/auth/finalize_openid.tmpl
 templates/user/auth/signin_openid.tmpl
 templates/user/auth/signup_openid_connect.tmpl

docs/content/doc/administration/config-cheat-sheet.en-us.md

@@ -224,9 +224,9 @@ The following configuration set `Content-Type: application/vnd.android.package-a
 - `MAX_DISPLAY_FILE_SIZE`: **8388608**: Max size of files to be displayed (default is 8MiB)
 - `REACTIONS`: All available reactions users can choose on issues/prs and comments
     Values can be emoji alias (:smile:) or a unicode emoji.
-    For custom reactions, add a tightly cropped square image to public/img/emoji/reaction_name.png
+    For custom reactions, add a tightly cropped square image to public/assets/img/emoji/reaction_name.png
 - `CUSTOM_EMOJIS`: **gitea, codeberg, gitlab, git, github, gogs**: Additional Emojis not defined in the utf8 standard.
-    By default, we support Gitea (:gitea:), to add more copy them to public/img/emoji/emoji_name.png and
+    By default, we support Gitea (:gitea:), to add more copy them to public/assets/img/emoji/emoji_name.png and
     add it to this config.
 - `DEFAULT_SHOW_FULL_NAME`: **false**: Whether the full name of the users should be shown where possible. If the full name isn't set, the username will be used.
 - `SEARCH_REPO_DESCRIPTION`: **true**: Whether to search within description at repository search on explore page.

docs/content/doc/administration/customizing-gitea.en-us.md

@@ -56,21 +56,22 @@ is set under the "Configuration" tab on the site administration page.
 
 To make Gitea serve custom public files (like pages and images), use the folder
 `$GITEA_CUSTOM/public/` as the webroot. Symbolic links will be followed.
+At the moment, only files in the `public/assets/` folder are served.
 
-For example, a file `image.png` stored in `$GITEA_CUSTOM/public/`, can be accessed with
+For example, a file `image.png` stored in `$GITEA_CUSTOM/public/assets/`, can be accessed with
 the url `http://gitea.domain.tld/assets/image.png`.
 
 ## Changing the logo
 
 To build a custom logo and/or favicon clone the Gitea source repository, replace `assets/logo.svg` and/or `assets/favicon.svg` and run
-`make generate-images`. `assets/favicon.svg` is used for the favicon only. This will update below output files which you can then place in `$GITEA_CUSTOM/public/img` on your server:
+`make generate-images`. `assets/favicon.svg` is used for the favicon only. This will update below output files which you can then place in `$GITEA_CUSTOM/public/assets/img` on your server:
 
-- `public/img/logo.svg` - Used for site icon, app icon
+- `public/assets/img/logo.svg` - Used for site icon, app icon
-- `public/img/logo.png` - Used for Open Graph
+- `public/assets/img/logo.png` - Used for Open Graph
-- `public/img/avatar_default.png` - Used as the default avatar image
+- `public/assets/img/avatar_default.png` - Used as the default avatar image
-- `public/img/apple-touch-icon.png` - Used on iOS devices for bookmarks
+- `public/assets/img/apple-touch-icon.png` - Used on iOS devices for bookmarks
-- `public/img/favicon.svg` - Used for favicon
+- `public/assets/img/favicon.svg` - Used for favicon
-- `public/img/favicon.png` - Used as fallback for browsers that don't support SVG favicons
+- `public/assets/img/favicon.png` - Used as fallback for browsers that don't support SVG favicons
 
 In case the source image is not in vector format, you can attempt to convert a raster image using tools like [this](https://www.aconvert.com/image/png-to-svg/).
 
@@ -102,7 +103,7 @@ Dont forget to restart your Gitea to apply the changes.
 If all you want is to add extra links to the top navigation bar or footer, or extra tabs to the repository view, you can put them in `extra_links.tmpl` (links added to the navbar), `extra_links_footer.tmpl` (links added to the left side of footer), and `extra_tabs.tmpl` inside your `$GITEA_CUSTOM/templates/custom/` directory.
 
 For instance, let's say you are in Germany and must add the famously legally-required "Impressum"/about page, listing who is responsible for the site's content:
-just place it under your "$GITEA_CUSTOM/public/" directory (for instance `$GITEA_CUSTOM/public/impressum.html`) and put a link to it in either `$GITEA_CUSTOM/templates/custom/extra_links.tmpl` or `$GITEA_CUSTOM/templates/custom/extra_links_footer.tmpl`.
+just place it under your "$GITEA_CUSTOM/public/assets/" directory (for instance `$GITEA_CUSTOM/public/assets/impressum.html`) and put a link to it in either `$GITEA_CUSTOM/templates/custom/extra_links.tmpl` or `$GITEA_CUSTOM/templates/custom/extra_links_footer.tmpl`.
 
 To match the current style, the link should have the class name "item", and you can use `{{AppSubUrl}}` to get the base URL:
 `<a class="item" href="{{AppSubUrl}}/assets/impressum.html">Impressum</a>`
@@ -132,7 +133,7 @@ The data is encoded and sent to the PlantUML server which generates the picture.
 demo server at http://www.plantuml.com/plantuml, but if you (or your users) have sensitive data you
 can set up your own [PlantUML server](https://plantuml.com/server) instead. To set up PlantUML rendering,
 copy JavaScript files from https://gitea.com/davidsvantesson/plantuml-code-highlight and put them in your
-`$GITEA_CUSTOM/public` folder. Then add the following to `custom/footer.tmpl`:
+`$GITEA_CUSTOM/public/assets/` folder. Then add the following to `custom/footer.tmpl`:
 
 ```html
 <script>
@@ -204,7 +205,7 @@ You can display STL file directly in Gitea by adding:
 
 to the file `templates/custom/footer.tmpl`
 
-You also need to download the content of the library [Madeleine.js](https://github.com/beige90/Madeleine.js) and place it under `$GITEA_CUSTOM/public/` folder.
+You also need to download the content of the library [Madeleine.js](https://github.com/beige90/Madeleine.js) and place it under `$GITEA_CUSTOM/public/assets/` folder.
 
 You should end-up with a folder structure similar to:
 
@@ -212,7 +213,8 @@ You should end-up with a folder structure similar to:
 $GITEA_CUSTOM/templates
 -- custom
     `-- footer.tmpl
-$GITEA_CUSTOM/public
+
+$GITEA_CUSTOM/public/assets/
 -- Madeleine.js
    |-- LICENSE
    |-- README.md
@@ -366,7 +368,7 @@ The list of themes a user can choose from can be configured with the `THEMES` va
 
 To make a custom theme available to all users:
 
-1. Add a CSS file to `$GITEA_CUSTOM/public/css/theme-<theme-name>.css`.
+1. Add a CSS file to `$GITEA_CUSTOM/public/assets/css/theme-<theme-name>.css`.
   The value of `$GITEA_CUSTOM` of your instance can be queried by calling `gitea help` and looking up the value of "CustomPath".
 2. Add `<theme-name>` to the comma-separated list of setting `THEMES` in `app.ini`
 

docs/content/doc/administration/external-renderers.en-us.md

@@ -191,7 +191,7 @@ And so you could write some CSS:
 }
 ```
 
-Add your stylesheet to your custom directory e.g `custom/public/css/my-style-XXXXX.css` and import it using a custom header file `custom/templates/custom/header.tmpl`:
+Add your stylesheet to your custom directory e.g `custom/public/assets/css/my-style-XXXXX.css` and import it using a custom header file `custom/templates/custom/header.tmpl`:
 
 ```html
 <link rel="stylesheet" href="{{AppSubUrl}}/assets/css/my-style-XXXXX.css" />

docs/content/doc/development/hacking-on-gitea.en-us.md

@@ -218,7 +218,7 @@ REPO_INDEXER_CONN_STR = http://elastic:changeme@localhost:9200
 
 ### Building and adding SVGs
 
-SVG icons are built using the `make svg` target which compiles the icon sources defined in `build/generate-svg.js` into the output directory `public/img/svg`. Custom icons can be added in the `web_src/svg` directory.
+SVG icons are built using the `make svg` target which compiles the icon sources defined in `build/generate-svg.js` into the output directory `public/assets/img/svg`. Custom icons can be added in the `web_src/svg` directory.
 
 ### Building the Logo
 

docs/content/doc/help/faq.en-us.md

@@ -192,7 +192,7 @@ To add your own theme, currently the only way is to provide a complete theme (no
 
 As an example, let's say our theme is `arc-blue` (this is a real theme, and can be found [in this issue](https://github.com/go-gitea/gitea/issues/6011))
 
-Name the `.css` file `theme-arc-blue.css` and add it to your custom folder in `custom/public/css`
+Name the `.css` file `theme-arc-blue.css` and add it to your custom folder in `custom/public/assets/css`
 
 Allow users to use it by adding `arc-blue` to the list of `THEMES` in your `app.ini`
 

modules/public/public.go

@@ -73,7 +73,7 @@ func setWellKnownContentType(w http.ResponseWriter, file string) {
 
 func handleRequest(w http.ResponseWriter, req *http.Request, fs http.FileSystem, file string) bool {
 	// actually, fs (http.FileSystem) is designed to be a safe interface, relative paths won't bypass its parent directory, it's also fine to do a clean here
-	f, err := fs.Open(util.PathJoinRelX(file))
+	f, err := fs.Open(util.PathJoinRelX("assets", file))
 	if err != nil {
 		if os.IsNotExist(err) {
 			return false

modules/svg/svg.go

@@ -27,7 +27,7 @@ const defaultSize = 16
 
 // Init discovers SVGs and populates the `SVGs` variable
 func Init() error {
-	files, err := public.AssetFS().ListFiles("img/svg")
+	files, err := public.AssetFS().ListFiles("assets/img/svg")
 	if err != nil {
 		return err
 	}
@@ -38,7 +38,7 @@ func Init() error {
 		if path.Ext(file) != ".svg" {
 			continue
 		}
-		bs, err := public.AssetFS().ReadFile("img/svg", file)
+		bs, err := public.AssetFS().ReadFile("assets/img/svg", file)
 		if err != nil {
 			log.Error("Failed to read SVG file %s: %v", file, err)
 		} else {