This PR follows:
* #21986
* #22831
This PR also introduce customized HTML elements, which would also help
problems like:
* #17760
* #21429
* #21440
With customized HTML elements, there won't be any load-search-replace
operations, and it can avoid page flicking (which @silverwind cares a
lot).
Browser support:
https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements
# FAQ
## Why the component has the prefix?
As usual, I would strongly suggest to add prefixes for our own/private
names. The dedicated prefix will avoid conflicts in the future, and it
makes it easier to introduce various 3rd components, like GitHub's
`relative-time` component. If there is no prefix, it's impossible to
introduce another public component with the same name in the future.
## Why the `custcomp.js` is loaded before HTML body? The `index.js` is
after HTML body.
Customized components must be registered before the content loading.
Otherwise there would be still some flicking.
`custcomp.js` should have its own dependencies and should be very light,
so it won't affect the page loading time too much.
## Why use `data-url` attribute but not use the `textContent`?
According to the standard, the `connectedCallback` occurs on the
tag-opening moment. The element's children are not ready yet.
## Why not use `{{.GuessCurrentOrigin $.ctx ...}}` to let backend decide
the absolute URL?
It's difficult for backend to guess the correct protocol(scheme)
correctly with zero configuration. Generating the absolute URL from
frontend can guarantee that the URL is 100% correct -- since the user is
visiting it.
# Screenshot
<details>
</details>
This should solve the main problem of dynamic assets getting stale after
a version upgrade. Everything not affected will use query-string based
cache busting, which includes files loaded via HTML or worker scripts.
* Refactor `i18n` to `locale`
- Currently we're using the `i18n` variable naming for the `locale`
struct. This contains locale's specific information and cannot be used
for general i18n purpose, therefore refactoring it to `locale` makes
more sense.
- Ref: https://github.com/go-gitea/gitea/pull/20096#discussion_r906699200
* Update routers/install/install.go
This changes the CSS output of webpack to output to the public/css
directory instead of inling CSS in JS. This enables CSS minification and
autoprefixer based on browserslist which would otherwise not be
possible.
The result of this change is two new output files currently:
- public/css/swagger.css
- public/css/gitgraph.css
Co-authored-by: techknowlogick <matti@mdranta.net>
Created a second webpack output file for swagger-ui which is loaded on
the /api/swagger route. One notable difference is the absence of the
swagger favicon that was previously used which is now the gitea icon. I
see no easy way to restore that favicon, so I decided to not keep it.
* static url
* add cors support for static resources
* [assets] work on the migration to configurable url for assets
Signed-off-by: Jakob Ackermann <das7pad@outlook.com>
* [misc] fix whitespace
Signed-off-by: Jakob Ackermann <das7pad@outlook.com>
* [assets] fix the loading of the manifest.json
It is generated dynamically, and as such can not be served by the cdn.
Signed-off-by: Jakob Ackermann <das7pad@outlook.com>
* Revert "add cors support for static resources"
This reverts commit 42f964fd181dbb8b139808b9be623470d4f0e40f
Signed-off-by: Jakob Ackermann <das7pad@outlook.com>
* [docs] add the STATIC_URL_PREFIX option
Signed-off-by: Jakob Ackermann <das7pad@outlook.com>
* [docs] reverse-proxy: nginx: add two setups for STATIC_URL_PREFIX
Signed-off-by: Jakob Ackermann <das7pad@outlook.com>
* [assets] migrate the url of a new asset to the static url prefix
REF: f2a3abc683ad4b2177b7c7c6160a2c0b4316120a
Signed-off-by: Jakob Ackermann <das7pad@outlook.com>
