- The `<title>` element that lives inside the `<head>` element is an important element that gives browsers and search engine crawlers the title of the webpage, hence the element name. It's therefor important that this title is accurate.
- Currently there are three issues with titles on repositories. It doesn't use the `FullName` and instead only uses the repository name, this doesn't distinguish which user or organisation the repository is on. It doesn't show the full treepath in the title when visiting an file inside a directory and instead only uses the latest path in treepath. It can show the repository name twice if the `.Title` variable also included the repository name such as on the repository homepage.
- Use the repository's fullname (which include which user the repository is on) instead of just their name.
- Display the repository's fullname if it isn't already in `.Title`.
- Use the full treepath in the repository code view instead of just the
last path.
- Adds integration tests.
- Adds a new repository (`repo59`) that has 3 depths for folders, which
wasn't in any other fixture repository yet, so the full treepath for
could be properly tested.
- Resolves https://codeberg.org/forgejo/forgejo/issues/1276
(cherry picked from commit ff9a6a2cda)
(cherry picked from commit 76dffc8621)
(cherry picked from commit ff0615b9d0)
(cherry picked from commit 8712eaa394)
(cherry picked from commit 0c11587582)
(cherry picked from commit 3cbd9fb792)
Conflicts:
tests/integration/repo_test.go
https://codeberg.org/forgejo/forgejo/pulls/1512
(cherry picked from commit fbfdba8ae9)
Conflicts:
models/fixtures/release.yml
https://codeberg.org/forgejo/forgejo/pulls/1550
(cherry picked from commit 8b2bf0534c)
(cherry picked from commit d706d9e222)
(cherry picked from commit 6d46261a3f)
(cherry picked from commit 87e8ad2307)
(cherry picked from commit f728a5e89d)
(cherry picked from commit 97534cd4a1)
[GITEA] Improve HTML title on repositories (squash) do not double escape
(cherry picked from commit 22882fe25c)
(cherry picked from commit 63e99df3d1)
(cherry picked from commit b65d777bc7)
(cherry picked from commit 2961f4f632)
(cherry picked from commit f7f723628c)
(cherry picked from commit 9ed7915826)
(cherry picked from commit 6d83f86cf0)
(cherry picked from commit 525f95cf1a)
(cherry picked from commit b68aebe0f5)
(cherry picked from commit c7c12904ba)
As the docs of codeberg refer to the strings printed by the Forgejo
ssh servers, this is user-facing and is nice to update to the new
product name.
(cherry picked from commit 103991d73f)
(cherry picked from commit 2a0d3f85f1)
(cherry picked from commit eb2b4ce388)
(cherry picked from commit 0998b51716)
[BRANDING] forgejo log message
(cherry picked from commit d51a046ebe)
(cherry picked from commit d66e1c7b6e)
(cherry picked from commit b5bffe4ce8)
(cherry picked from commit 3fa776d856)
(cherry picked from commit 18d064f472)
(cherry picked from commit c95094e355)
(cherry picked from commit 5784290bc4)
(cherry picked from commit aee336886b)
(cherry picked from commit ec2f60b516)
(cherry picked from commit 7af742a284)
(cherry picked from commit f279e2a264)
(cherry picked from commit fd38cfb14e)
(cherry picked from commit 64c8226618)
(cherry picked from commit b546fb2304)
(cherry picked from commit ad10202177)
(cherry picked from commit c89cab9c2b)
(cherry picked from commit 9579322ec2)
(cherry picked from commit 16b44ad18d)
(cherry picked from commit 2571ff703b)
(cherry picked from commit ad61d9ce9b)
(cherry picked from commit 9b2c45d4d3)
(cherry picked from commit ed01b79a59)
(cherry picked from commit d040b66427)
(cherry picked from commit ffe0bbea48)
(cherry picked from commit 4c1b2c409b)
(cherry picked from commit 3d8338ed10)
(cherry picked from commit a92f044ea9)
[BRANDING] link to forgejo.org/docs instead of docs.gitea.io
(cherry picked from commit 3efafd0e08)
(cherry picked from commit 148185e34b)
(cherry picked from commit 834e264698)
(cherry picked from commit e72fa6eb1e)
[BRANDING] link to forgejo.org/docs instead of docs.gitea.io
Fix the link that was 404.
(cherry picked from commit ae515d7258)
(cherry picked from commit facc2367f0)
(cherry picked from commit 25784b9f21)
(cherry picked from commit 2efc6138d9)
(cherry picked from commit b9d0871631)
(cherry picked from commit f0446e51b9)
(cherry picked from commit 1638aa67fb)
(cherry picked from commit 290db6a018)
(cherry picked from commit 89b87cf542)
(cherry picked from commit 656ed94962)
(cherry picked from commit 036f879f96)
(cherry picked from commit 69eea35f81)
(cherry picked from commit b72e3f4a92)
(cherry picked from commit af606b8574)
(cherry picked from commit 7e47f8135c)
(cherry picked from commit 0e5218cc53)
(cherry picked from commit 7c2a20a528)
(cherry picked from commit 4e94006363)
(cherry picked from commit e47cdfc43f)
(cherry picked from commit 1dcb3e1da4)
(cherry picked from commit 67367c4e0f)
(cherry picked from commit 252087d1ff)
(cherry picked from commit f5977a43e5)
Conflicts:
templates/base/head_navbar.tmpl
https://codeberg.org/forgejo/forgejo/pulls/1351
(cherry picked from commit 594938eb15)
(cherry picked from commit 0257d038a7)
(cherry picked from commit 72821dd140)
[BRANDING] s/gitea/forgejo/ in HTML placeholders
Replaced Gitea branding with Forgejo for input placeholders
Closes: #686
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/752
(cherry picked from commit 6160d37ca9)
(cherry picked from commit df61138c7e)
(cherry picked from commit 1f30566c3f)
(cherry picked from commit 539bb825f5)
(cherry picked from commit bee0f66c86)
(cherry picked from commit 60ad005c95)
(cherry picked from commit 282e26222e)
(cherry picked from commit f9ca551f3d)
(cherry picked from commit b2e04b04c3)
(cherry picked from commit c8f395a03c)
(cherry picked from commit 0d58ce49ae)
(cherry picked from commit c602ddf91e)
(cherry picked from commit 029e37271e)
(cherry picked from commit fdaa96b3cc)
(cherry picked from commit 515d99e27d)
(cherry picked from commit da73274ba1)
(cherry picked from commit ce90b696a0)
(cherry picked from commit b6bf98763b)
(cherry picked from commit 5b380d22d7)
[BRANDING] How to start a runner: URL to Actions admin documentation
(cherry picked from commit da91799e6f)
(cherry picked from commit 28231663b6)
(cherry picked from commit 533a90345b)
(cherry picked from commit 6a0e4e55dd)
(cherry picked from commit f47cd611c6)
(cherry picked from commit 001264b784)
(cherry picked from commit e4099e9bb9)
(cherry picked from commit 3a1885649f)
(cherry picked from commit c42802c710)
(cherry picked from commit a611ce8d6d)
(cherry picked from commit a3d7d10a80)
(cherry picked from commit 52adde671f)
(cherry picked from commit c9a3820fef)
(cherry picked from commit dce40997c9)
(cherry picked from commit 312a6b92f3)
[BRANDING] package templates & links
- Change Gitea to Forgejo where necessary.
- Point all documentation to Forgejo's documentation.
- Resolves#992
(cherry picked from commit d0b78a6ede)
(cherry picked from commit e2382f30ba)
(cherry picked from commit c41cf05a33)
(cherry picked from commit 797e598ae7)
(cherry picked from commit 970031a1c2)
(cherry picked from commit 0c1180e2e1)
Conflicts:
templates/package/content/alpine.tmpl
templates/package/content/cargo.tmpl
templates/package/content/chef.tmpl
templates/package/content/composer.tmpl
templates/package/content/conan.tmpl
templates/package/content/conda.tmpl
templates/package/content/container.tmpl
templates/package/content/cran.tmpl
templates/package/content/debian.tmpl
templates/package/content/generic.tmpl
templates/package/content/go.tmpl
templates/package/content/helm.tmpl
templates/package/content/maven.tmpl
templates/package/content/npm.tmpl
templates/package/content/nuget.tmpl
templates/package/content/pub.tmpl
templates/package/content/pypi.tmpl
templates/package/content/rpm.tmpl
templates/package/content/rubygems.tmpl
templates/package/content/swift.tmpl
templates/package/content/vagrant.tmpl
https://codeberg.org/forgejo/forgejo/pulls/1351
(cherry picked from commit 42ac9ff2ab)
(cherry picked from commit e390000bce)
(cherry picked from commit 56a437b29b)
Conflicts:
templates/package/content/cargo.tmpl
https://codeberg.org/forgejo/forgejo/pulls/1466
[BRANDING] s/Gitea/Forgejo/ in user visible help & comments
- Modify the README of the docker directory to point to the relevant
docker files and documentation for Forgejo.
(cherry picked from commit aca6371215)
(cherry picked from commit 0ba96b1bc4)
(cherry picked from commit 5c8e6b53f1)
Conflicts:
docker/README.md
https://codeberg.org/forgejo/forgejo/pulls/1351
(cherry picked from commit b3121c8004)
(cherry picked from commit 607f870416)
(cherry picked from commit 191d96afe4)
[BRANDING] healthcheck/check.go
(cherry picked from commit d703a236ce)
(cherry picked from commit d84ce3ff20)
(cherry picked from commit 2dbb844606)
(cherry picked from commit 14d3ae7e3a)
[BRANDING] s/Gitea/Forgejo/g in CLI output
(cherry picked from commit 7543c126bb)
(cherry picked from commit b66f422fc3)
(cherry picked from commit a81e4e46f3)
[BRANDING] Gitea->Forgejo in mailer code
(cherry picked from commit b91afea4ff)
(cherry picked from commit 5d7428167c)
(cherry picked from commit ed8101ba6c)
[BRANDING] use 'Forgejo' for Discord, Packagist, and Slack webhooks
Refs: https://codeberg.org/forgejo/forgejo/issues/1387
(cherry picked from commit 7dc3a05f5b)
(cherry picked from commit 133f2fc6cc)
[BRANDING] cmd/manager.go
(cherry picked from commit d1dba2c79d)
[BRANDING] pyproject.toml
(cherry picked from commit 7e8c868db2)
(cherry picked from commit 2395995c8b)
(cherry picked from commit dd6fbbf332)
Conflicts:
templates/package/content/cargo.tmpl
https://codeberg.org/forgejo/forgejo/pulls/1548
(cherry picked from commit 6f9a5d5cab)
(cherry picked from commit d0635c4a07)
(cherry picked from commit 5d3b4594df)
(cherry picked from commit 6da3b43eff)
(cherry picked from commit b60dfaba10)
(cherry picked from commit bcb9bb4dee)
(cherry picked from commit d5301b6a24)
Backport #27227 by @denyskon
Throughout the Gitea codebase, you can meet some weird constructions to
make `locale.Tr` work in subtemplates.
Since we now have `ctx.Locale.Tr` which solves that problem, clean up
various templates which pass `locale` through `dict` or use some weird
constructions like `$.root.locale`
Going on, it would be great to replace every case of `$.locale.Tr` and
`.locale.Tr` with `ctx.Locale.Tr`, but that needs to be done with
patience.
Co-authored-by: Denys Konovalov <kontakt@denyskon.de>
1. The `og:description` should be "a one to two sentence description of
your object"
* It shouldn't output all the user inputted content -- it would be
pretty huge.
* Maybe it only needs at most 300 bytes.
2. Do not render commit message as HTML
Add more useful Open Graph metadata for commit and file URLs:
- Set `og:title` to the page title, which is a concise summary in both
cases (`<commit message> · <commit hash>` and `<filename> at <branch>`,
respectively)
- Set `og:description` to the commit message body, if available
- Set `og:url` to the relevant URLs instead of the repo URL
Also move the relevant meta tags into a separate template as they now
take up the majority of the base head template.
Now that we have the `/assets` directory, we can put`licenses.txt`
directly into it instead of incorrect `/js` path which was previously
only done to avoid reserving a username.
---------
Co-authored-by: Giteabot <teabot@gitea.io>
In GitHub, we can not rerun jobs if the workflow is disabled.
---------
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Before:
* `{{.locale.Tr ...}}`
* `{{$.locale.Tr ...}}`
* `{{$.root.locale.Tr ...}}`
* `{{template "sub" .}}`
* `{{template "sub" (dict "locale" $.locale)}}`
* `{{template "sub" (dict "root" $)}}`
* .....
With context function: only need to `{{ctx.Locale.Tr ...}}`
The "ctx" could be considered as a super-global variable for all
templates including sub-templates.
To avoid potential risks (any bug in the template context function
package), this PR only starts using "ctx" in "head.tmpl" and
"footer.tmpl" and it has a "DataRaceCheck". If there is anything wrong,
the code can be fixed or reverted easily.
So I found this [linter](https://github.com/Riverside-Healthcare/djlint)
which features a mode for go templates, so I gave it a try and it did
find a number of valid issue, like unbalanced tags etc. It also has a
number of bugs, I had to disable/workaround many issues.
Given that this linter is written in python, this does add a dependency
on `python` >= 3.8 and `poetry` to the development environment to be
able to run this linter locally.
- `e.g.` prefixes on placeholders are removed because the linter had a
false-positive on `placeholder="e.g. cn=Search"` for the `attr=value`
syntax and it's not ideal anyways to write `e.g.` into a placeholder
because a placeholder is meant to hold a sample value.
- In `templates/repo/settings/options.tmpl` I simplified the logic to
not conditionally create opening tags without closing tags because this
stuff confuses the linter (and possibly the reader as well).
Clarify the "link-action" behavior:
> // A "link-action" can post AJAX request to its "data-url"
> // Then the browser is redirect to: the "redirect" in response, or
"data-redirect" attribute, or current URL by reloading.
And enhance the "link-action" to support showing a modal dialog for
confirm. A similar general approach could also help PRs like
https://github.com/go-gitea/gitea/pull/22344#discussion_r1062883436
> // If the "link-action" has "data-modal-confirm(-html)" attribute, a
confirm modal dialog will be shown before taking action.
And a lot of duplicate code can be removed now. A good framework design
can help to avoid code copying&pasting.
---------
Co-authored-by: silverwind <me@silverwind.io>
It's been disabled by default since 1.17
(https://github.com/go-gitea/gitea/pull/18914), and it never really
delivered any benefit except being another cache layer that has its own
unsolved invalidation issues. HTTP cache works, we don't need two cache
layers at the browser for assets.
## ⚠️ BREAKING
You can remove the config `[ui].USE_SERVICE_WORKER` from your `app.ini`
now.
As discussed in
https://github.com/go-gitea/gitea/pull/24953#issuecomment-1565630156.
## ⚠️ BREAKING ⚠️
1. The `ui.THEME_COLOR_META_TAG` setting has been removed. If you still
need to set the `theme-color` meta tag, add it via
`$GITEA_CUSTOM/templates/custom/header.tmpl` instead.
2. The non-standard `default-theme` meta-tag added in
https://github.com/go-gitea/gitea/pull/13809 has been removed. Third
party code that needs to obtain the currently loaded theme should use
the `theme-<name>` class on the `<html>` node instead, which reflect the
currently active theme.
The 500 page was not loading theme CSS, so always appeared in light
theme. This extracts the stylesheets into a shared template used by all
pages.
<img width="1262" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/72222b8d-a523-40d0-aa91-b9db32e5625d">
Small related rant: I think there should only be one `<head>` in all of
the templates, but I see it was deliberatly done that the 500 page has
its own `<head>` because "it should only depend the minimal template
functions", but I disagree because we are missing a lot of things that
are in the regular `<head>`.
When `<!DOCTYPE html>` is present, the default (and only valid) charset
it `utf-8` so it does not need to be specified.
Also we do serve with HTML with `Content-Type: text/html;
charset=utf-8`, so it is duplicate info anyways.
Partially for #24457
Major changes:
1. The old `signedUserNameStringPointerKey` is quite hacky, use
`ctx.Data[SignedUser]` instead
2. Move duplicate code from `Contexter` to `CommonTemplateContextData`
3. Remove incorrect copying&pasting code `ctx.Data["Err_Password"] =
true` in API handlers
4. Use one unique `RenderPanicErrorPage` for panic error page rendering
5. Move `stripSlashesMiddleware` to be the first middleware
6. Install global panic recovery handler, it works for both `install`
and `web`
7. Make `500.tmpl` only depend minimal template functions/variables,
avoid triggering new panics
Screenshot:
<details>
</details>
The `SHOW_FOOTER_BRANDING` came from year 2015, and it seems nobody ever
uses it. It only shows an GitHub icon which seems unrelated to Gitea, it
doesn't do what document says. So, remove it.
## ⚠️ Breaking
Users can now remove the key `[other].SHOW_FOOTER_BRANDING` from their
app.ini.
Although it seems that some different purposes are mixed in this PR,
however, they are all related, and can be tested together, so I put them
together to save everyone's time.
Diff: `+79 −84`, everything becomes much better.
### Improve the dropdown settings.
Move all fomantic-init related code into our `fomantic.js`
Fine-tune some dropdown global settings, see the comments.
Also help to fix the first problem in #23625 , cc: @yp05327
The "language" menu has been simplified, and it works with small-height
window better.
### Use SVG instead of `<i class="delete icon">`
It's also done by `$.fn.dropdown.settings.templates.label` , cc:
@silverwind
### Remove incorrect `tabable` CSS class
It doesn't have CSS styles, and it was only in Vue. So it's totally
unnecessary, remove it by the way.
### Improve the Repo Topic Edit form
* Simplify the code
* Add a "Cancel" button
* Align elements
Before:
<details>
</details>
After:
Follow:
* #23574
* Remove all ".tooltip[data-content=...]"
Major changes:
* Remove "tooltip" class, use "[data-tooltip-content=...]" instead of
".tooltip[data-content=...]"
* Remove legacy `data-position`, it's dead code since last Fomantic
Tooltip -> Tippy Tooltip refactoring
* Rename reaction attribute from `data-content` to
`data-reaction-content`
* Add comments for some `data-content`: `{{/* used by the form */}}`
* Remove empty "ui" class
* Use "text color" for SVG icons (a few)
This PR follows #22599 and #23450
The major improvements:
1. The `aria-*.js` are totally transparent now, no need to call
`attachDropdownAria` explicitly anymore.
* It hooks the `$.fn.checkbox` and `$.fn.dropdown`, then our patch
works.
* It makes all dynamically generated checkbox/dropdown work with a11y
without any change
* eg: the `conversation.find('.dropdown').dropdown();` in `repo-diff.js`
2. Since it's totally transparent now, it could be easier to modify or
remove in the future.
3. It handles all selection labels as well (by onLabelCreate), so it
supports "multiple selection dropdown" now.
* It partially completes one of my TODOs: `TODO: multiple selection is
not supported yet.`
4. The code structure is clearer, code blocks are splitted into
different functions.
* The old `attachOneDropdownAria` was splitted into separate functions.
* It makes it easier to add more fine tunes in the future, and co-work
with contributors.
6. The code logic is similar as before, only two new parts:
1. the `ariaCheckboxFn` and `ariaDropdownFn` functions
2. the `onLabelCreate` and `updateSelectionLabel` functions
In `aria-dropdown.js` I had to mix jQuery and Vanilla JS somewhat, I
think the code is still understandable, otherwise the code would be much
more complex to read.
Thanks to fsologureng for the idea about "improving the 'delete icon'
with aria attributes".
If there is anything unclear or incorrect, feel free to ask and discuss,
or propose new PRs for it.
Furthermore improved/deleted some comments in the template.
The appearance did not change.
---------
Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This PR is extracted from #23346 to address some unclear (I don't
understand) code-belonging concerns.
This PR needs to be backported, otherwise the `aria.js` is too buggy in
some cases. Since there would be two minor conflicts, I will do the
backport manually.
Before: the `aria.js` is still buggy in some cases.
After: tested with AppleVoice, Android TalkBack
* Fix incorrect dropdown init code
* Fix incorrect role element (the menu role should be on the `$menu`
element, but not on the `$focusable`)
* Fix the focus-show-click-hide problem on mobile. Now the language menu
works as expected
* Fix incorrect dropdown template function setting
* Clarify the logic in aria.js
* Hide item's tippy after menu gets hidden
* Fix incorrect tippy `setProps` after `destroy`
* Fix UI lag problem when page gets redirected during menu hiding
animation with screen reader
* Improve comments
* Implement the layout proposed by #19861
<details>
d74a7efb60/web_src/js/features/aria.md (L38-L47)
</details>
This improves a lot of accessibility shortcomings.
Every possible instance of `<div class="button">` matching the command
`ag '<[^ab].*?class=.*?[" ]button[ "]' templates/ | grep -v 'dropdown'`
has been converted when possible.
divs with the `dropdown` class and their children were omitted as
1. more analysis must be conducted whether the dropdowns still work as
intended when they are a `button` instead of a `div`.
2. most dropdowns have `div`s as children. The HTML standard disallows
`div`s inside `button`s.
3. When a dropdown child that's part of the displayed text content is
converted to a `button`, the dropdown can be focused twice
Further changes include that all "gitea-managed" buttons with JS code
received an `e.preventDefault()` so that they don't accidentally submit
an underlying form, which would execute instead of cancel the action.
Lastly, some minor issues were fixed as well during the refactoring.
## Future improvements
As mentioned in
https://github.com/go-gitea/gitea/pull/23337#discussion_r1127277391,
`<a>`s without `href` attribute are not focusable.
They should later on be converted to `<button>`s.
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
## TLDR
* Fix the broken page / broken image problem when click "Install"
* Close#20089
* Fix the Password Hash Algorithm display problem for #22942
* Close#23183
* Close#23184
## Details
### The broken page / broken image problem when click "Install"
(Redirect failed after install gitea #23184)
Before: when click "install", all new requests will fail, because the
server has been restarted. Users just see a broken page with broken
images, sometimes the server is not ready but the user would have been
redirect to "/user/login" page, then the users see a new broken page
(connection refused or something wrong ...)
After: only check InstallLock=true for necessary handlers, and sleep for
a while before restarting the server, then the browser has enough time
to load the "post-install" page. And there is a script to check whether
"/user/login" is ready, the user will only be redirected to the login
page when the server is ready.
### During new instance setup make 'Gitea Base URL' filled from
window.location.origin #20089
If the "app_url" input contains `localhost` (the default value from
config), use current window's location href as the `app_url` (aka
ROOT_URL)
### Fix the Password Hash Algorithm display problem for "Provide the
ability to set password hash algorithm parameters #22942"
Before: the UI shows `pbkdf2$50000$50`
<details>
</details>
After: the UI shows `pbkdf2`
<details>
</details>
### GET data: net::ERR_INVALID_URL #23183
Cause by empty `data:` in `<link rel="manifest"
href="data:{{.ManifestData}}">`
---------
Co-authored-by: Jason Song <i@wolfogre.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This PR is trying to add accessibility to the menu as mentioned in
#23053 so the menu can be accessed using keyboard (A quick demo is added
below), with a reference to
[PR2612](https://github.com/go-gitea/gitea/pull/22612). The goal is to
make the menu accessible merely using keyboard like shown below. And
this PR might need confirmation from developers using screen readers.
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>
