- `elkjs` is a library that's imported by `mermaid`, although they have
seperated this package to it's own mermaid
package (https://github.com/mermaid-js/mermaid/pull/5654), the stable
version doesn't have this patch.
- `elkjs` is licensed under the EPL-2.0 license (copyleft), which isn't
compatible with GPL unless the license author explcitly allow this via a
so called "secondary license". At the end of the day it cannot be
released under a MIT or GPL license.
- Use webpack's `externals` option to avoid bundling `elkjs` and instead
leave it as a `require` code.
- This is a 'dirty' way to ensure elkjs isn't bundled and has to be
tested manually to ensure this for every release (via the
`webpack-bundle-analyzer` plugin). If someone tries to use the elkjs
render, it will result in a non-descriptive error being shown.
- The current way of detecting javascript licenses relies on
`license-checker-webpack-plugin`, which gets it information from
Webpack. However this isn't quite acurate as libraries might bundle
their dependencies into a output file, at which point Webpack no longer
sees that such dependency is used. For example, `vue-bar-graph` did
this which bundled `GSAP`.
- The new approach uses `license-checker-rseidelsohn`, which simply
scans all non-development (determined by `package.json`) packages and
read their LICENSE information, this might result in extra dependencies
being included into `license.txt` which aren't used in the final output
file (for example they would've been tree-shaken out by webpack), but
this takes a better safe than sorry approach as currently licenses are
missing from dependencies that are being bundled into Forgejo's
javascript code.
Get rid of one more jQuery dependant and have a nicer color picker as
well.
Now there is only a single global color picker init because that is all
that's necessary because the elements are present on the page when the
init code runs. The init is slightly weird because the module only takes
a selector instead of DOM elements directly.
The label modals now also perform form validation because previously it
was possible to trigger a 500 error `Color cannot be empty.` by clearing
out the color value on labels.
<img width="867" alt="Screenshot 2024-03-25 at 00 21 05"
src="https://github.com/go-gitea/gitea/assets/115237/71215c39-abb1-4881-b5c1-9954b4a89adb">
<img width="860" alt="Screenshot 2024-03-25 at 00 20 48"
src="https://github.com/go-gitea/gitea/assets/115237/a12cb68f-c38b-4433-ba05-53bbb4b1023e">
(cherry picked from commit dd8dde2be89921b2b1497c6cc5eafdde213429cb)
To keep blame info accurate and to avoid [changes like
this](https://github.com/go-gitea/gitea/pull/29977/files#diff-c3422631a14edbe1e508c4b22f0c718db318be08a6e889427802f9b6165d88d6R359),
it's good to always have a trailing comma, so let's enforce it in JS.
This rule is completely automatically fixable with `make lint-js-fix`
and that's what I did here.
(cherry picked from commit 3d751b6ec18e57698ce86b79866031d2c80c2071)
Conflicts:
web_src/js/components/DashboardRepoList.vue
trivial context conflict because of '3b7b899afa fix commit_status'
Also added BSD Zero Clause License to the list of allowed licenses in
webpack.
Tested various `htmx` operations. Nothing broke.
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit c00633971a4e66835fffe7cfcea0f427689cf550)
Currently, if you implement native CSS nesting within a Vue component a
warning will appear in the terminal. It states
`Nested CSS was detected, but CSS nesting has not been configured
correctly.
Please enable a CSS nesting plugin *before* Tailwind in your
configuration.` To fix this error we need to enable the built-in
[tailwinds nesting
config](https://tailwindcss.com/docs/using-with-preprocessors#nesting).
Example code to trigger the warning within a vue component:
```CSS
<style>
.example {
&:hover,
&:focus-visible {
color: var(--color-text);
}
& svg {
margin-right: 0.78rem;
}
}
</style>
```
---------
Co-authored-by: rafh <rafaelheard@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit 03753cbc0ff68cc4eee0a65b556e6d86a8f1c63f)
- Refactor the system status list into its own template
- Change the backend to return only the system status if htmx initiated
the request
- `hx-get="{{$.Link}}/system_status`: reuse the backend handler
- `hx-swap="innerHTML"`: replace the `<div>`'s innerHTML (essentially
the new template)
- `hx-trigger="every 5s"`: call every 5 seconds
- `hx-indicator=".divider"`: the `is-loading` class shouldn't be added
to the div during the request, so set it on an element it has no effect
on
- Render "Since Last GC Time" with `<relative-time>`, so we send a
timestamp
# Auto-update in action GIF
![action](https://github.com/go-gitea/gitea/assets/20454870/c6e1f220-f0fb-4460-ac3b-59f315e30e29)
---------
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit c70f65e83bc1876fb368fd117d342573ff18a9e8)
Remove lightningcss and minify with esbuild again. The size of output
CSS will increase by around 1.4%, but I think it's worth it to allow
building gitea in more cases like the one in the linked issue. We can
reconsider once lightningcss becomes more stable.
Fixes: https://github.com/go-gitea/gitea/issues/29058
(cherry picked from commit 5849d4fde347cd1e47f2243b3239724c73b1261d)
(cherry picked from commit 20b56692693e054bb3c04b4ef12b29b0715b4530)
(cherry picked from commit 1574643a6a9634e5b92c033a4bfb69062a86bd05)
Update semantic version according to specification
(cherry picked from commit 22510f41306f9c133a7e99b61f9c38dabfd4b810)
Mise à jour de 'Makefile'
(cherry picked from commit c3d85d8409f1bb18a45659a167cf1ffee057f3b6)
(cherry picked from commit 5ea23098513c068444226af41faf9be9c4c998e6)
(cherry picked from commit ec5217b9d1b94bb04e34ce8c27eecbdc6f3a247a)
(cherry picked from commit 14f08e364b2ad7e3176b45d3ec8da5f5605b4315)
(cherry picked from commit b4465c67b8737aed9fd79a43046aa3795a298e68)
[API] [SEMVER] replace number with version
(cherry picked from commit fba48e64977a75e77c9c6cf8e3f8a679a5e7b733)
(cherry picked from commit 532ec5d8782703b62d7d02312764e50637cd016e)
[API] [SEMVER] [v1.20] less is replaced by css
(cherry picked from commit 01ca3a4f4291cf4c62df42cbd12a00638f3cdc70)
(cherry picked from commit 1d928c3ab2e1fda6082e1400d89ea96d6605ebaa)
(cherry picked from commit a39dc804cd1da86444ed709455857f069475e7db)
Conflicts:
webpack.config.js
(cherry picked from commit adc68578b3eb41215338125edfca91804706f8a1)
(cherry picked from commit 9b8d98475fd7efcc15bf0d91b0af6ef3aff64508)
(cherry picked from commit 25161039745a63282257eded9616390241af8013)
(cherry picked from commit 18e6287963a0e1863cd08fd514a4e732a1904a68)
(cherry picked from commit e9694e67ab93ad74f7eae3152d88d95e8493e739)
(cherry picked from commit a9763edaf002c8009a2cca4115cb8b926f8cdc85)
(cherry picked from commit e2b550f4fba144f9637a212b56bfe30cac1adb3b)
(cherry picked from commit 2edac36701e8fa1ff67f87dccfa34cfc00ab66de)
[API] Forgejo API /api/forgejo/v1 (squash)
Update semver as v1.20 is entering release candidate mode
(cherry picked from commit 4995098ec3c6eee19a7ad7bc956b71c6e937c04c)
(cherry picked from commit 578ccfdd27d7a280050bdf61d497d07decf98f2f)
(cherry picked from commit 1bf6ac09520490f0a56b9b55d7836c2d8ea5d22c)
(cherry picked from commit 2fe16b2bfed62c0386d0bfe104f7dcc621d1c3be)
(cherry picked from commit 7cd9d027eec5a2b328d06a47f34545943560fe1b)
(cherry picked from commit eaed4be2ae88055a15dcc96564440c301a13ba8e)
(cherry picked from commit cc94f3115f844a0f16064e49e5eb719d33bc4441)
(cherry picked from commit d7a77e35ccfd2d0fc2ba98932296ab7354edd2db)
(cherry picked from commit cd8eb68ab7b3e2eaacf78d370c762f43cc19fd6a)
(cherry picked from commit 68487ac95f742837e7ff38df902834b6173cd9ab)
(cherry picked from commit 616dceb565456d6fac6f58b1c4de43e9d3254090)
(cherry picked from commit 545fe5975b47d2eab348a57b87c6fd4590f33442)
(cherry picked from commit c042cf8eda2dea805138bd64daa7fbe07865ed5a)
(cherry picked from commit ae5e5a7468aa66312055a26841f658574a9b0dd7)
(cherry picked from commit 8034ef5fa2648a127f8c84c572bec02a1ff6bb9f)
(cherry picked from commit aaf0293034468505449d33ab1483ae65b4175754)
(cherry picked from commit daafa8ce58e5e6077da585b13e5190856228a4a3)
(cherry picked from commit 7ca3681d3e2ed5ec1ae44364cba476d642e2b557)
(cherry picked from commit 39f72cba71ff3f9d2cbb05c88031b34933573a8c)
(cherry picked from commit 60a591713097384935ba0ac51a5cd4793f7544a8)
(cherry picked from commit 4853bd9e16bc8986ba8159349e93bc3093dc8ab9)
[API] Move forgejo api file (squash)
- Move the file to accommodate faa28b5a44
(cherry picked from commit bce89351d251bfa18c677b30bc7da80856d919fb)
(cherry picked from commit 11ae7f6e85395b287c6f4108c531aa1a81fd964c)
(cherry picked from commit 25e96cfcb28859406329090eb0c7990bea4e73eb)
(cherry picked from commit 6d8d19b39156a7f8b4db5022915590593df94f1f)
(cherry picked from commit 5afc5c454b7d70f95b83e6c3b4c9e2cb6e2d0ef5)
(cherry picked from commit 86d07b4c249211bdb77c0520f99f2c8e5d89b516)
(cherry picked from commit e54d869fdae44811faaa80f3757efbc93bf0bce4)
(cherry picked from commit ab31ef1bba3bc5188e0f3ce5e5fa33335877cf47)
(cherry picked from commit 511cbca2f3799646edf8eae00464b87f43ca280f)
(cherry picked from commit 333916fea874509063f9449f07d79e4cafbcf06f)
(cherry picked from commit 3802bcd7c9865b77151ef454c0bdc2ce32157a41)
(cherry picked from commit 5d0fa034f77388ed21735a22cf1a2a23562245c3)
(cherry picked from commit d15627aa0dfb4ffc2eb7ab0ce99b7c5b2bf06dcf)
(cherry picked from commit ba0b21b9305b6fecf23aeec213f1a95d96ce72fb)
(cherry picked from commit 39ade66aac7f8cccd980d1f435b92465a50be032)
- Closes https://github.com/go-gitea/gitea/issues/28880
This change introduces htmx with the hope we could use it to make Gitea
more reactive while keeping our "HTML rendered on the server" approach.
- Add `htmx.js` that imports `htmx.org` and initializes error toasts
- Place `hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}'` on the
`<body>` tag so every request that htmx sends is authenticated
- Place `hx-swap="outerHTML"` on the `<body>` tag so the response of
each htmx request replaces the tag it targets (as opposed to its inner
content)
- Place `hx-push-url="false"` on the `<body>` tag so no changes to the
URL happen in `<form>` tags
- Add the `is-loading` class during request
### Error toasts in action
![errors](https://github.com/go-gitea/gitea/assets/20454870/181a1beb-1cb8-4858-abe8-fa1fc3f5b8f3)
## Don't do a full page load when clicking the subscribe button
- Refactor the form around the subscribe button into its own template
- Use htmx to perform the form submission
- `hx-boost="true"` to prevent the default form submission behavior of a
full page load
- `hx-sync="this:replace"` to replace the current request (in case the
button is clicked again before the response is returned)
- `hx-target="this"` to replace the form tag with the new form tag
- Change the backend response to return a `<form>` tag instead of a
redirect to the issue page
### Before
![subscribe_before](https://github.com/go-gitea/gitea/assets/20454870/cb2439a2-c3c0-425c-8d3c-5d646b1cdc28)
### After
![subscribe_after](https://github.com/go-gitea/gitea/assets/20454870/6fcd77d8-7b11-40b0-af4f-b152aaad787c)
## Don't do a full page load when clicking the follow button
- Use htmx to perform the button request
- `hx-post="{{.ContextUser.HomeLink}}?action=follow"` to send a POST
request to follow the user
- `hx-target="#profile-avatar-card"` to target the card div for
replacement
- `hx-indicator="#profile-avatar-card"` to place the loading indicator
on the card
- Change the backend response to return a `<div>` tag (the card) instead
of a redirect to the user page
### Before
![follow_before](https://github.com/go-gitea/gitea/assets/20454870/a210b643-6e74-4ff9-8e61-d658c62edf1f)
### After
![follow_after](https://github.com/go-gitea/gitea/assets/20454870/5bb19ae9-0d59-4ae3-b538-4c83334e4722)
---------
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: 6543 <m.huber@kithara.com>
Co-authored-by: Giteabot <teabot@gitea.io>
- Refactor the form around the subscribe button into its own template
- Use htmx to perform the form submission
- `hx-boost="true"` to prevent the default form submission behavior of a
full page load
- `hx-sync="this:replace"` to replace the current request (in case the
button is clicked again before the response is returned)
- `hx-target="this"` to replace the form tag with the new form tag
- `hx-push-url="false"` to disable a change to the URL
- `hx-swap="show:no-scroll"` to preserve the scroll position
- Change the backend response to return a `<form>` tag instead of a
redirect to the issue page
- Include `htmx.org` in javascript imports
This change introduces htmx with the hope we could use it to make Gitea
more reactive while keeping our "HTML rendered on the server" approach.
# Before
![before](https://github.com/go-gitea/gitea/assets/20454870/4ec3e81e-4dbf-4338-9968-b0655c276d4c)
# After
![after](https://github.com/go-gitea/gitea/assets/20454870/8c8841af-9bfe-40b2-b1cd-cd1f3c90ba4d)
---------
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Previously, the production build never output sourcemaps. Now we emit
one file for `index.js` because it is the most likely one where we need
to be able to better debug reported issues like
https://github.com/go-gitea/gitea/issues/27213. This will currently
increase the binary size of gitea by around 700kB which is what the
gzipped source map file has.
Also, I fixed the CSS sourcemap generation which was broken since the
introduction of lightningcss.
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>
Previously, only some of these regex had the `i` flag and while we can
likely ensure case for our files, these regexes are also used for
third-party files, so it's better to always match insensitively.
Fixes https://github.com/go-gitea/gitea/issues/26439.
The minification result is not ideal with esbuild, but it's better than
failing competely.
Co-authored-by: Giteabot <teabot@gitea.io>
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>
Replace esbuild's rudimentary CSS minifier with [Lightning
CSS](https://github.com/parcel-bundler/lightningcss), which results in
around 4% smaller CSS bundle size, index.css goes from 608K to 584K.
The module is quite new but has active use in the Parcel bundler, and as
of yesterday is also under experimental support in Vite, so I trust it
that bugs will be sorted out quickly.
Before: `assets by path css/*.css 959 KiB`
After: `assets by path css/*.css 933 KiB`
I did give this a cursory test and everything seems to be in order.
- Update all JS dependencies
- Enable stylint
[`media-feature-name-value-no-unknown`](https://stylelint.io/user-guide/rules/media-feature-name-value-no-unknown)
- Make use of new features in webpack and text-expander-element
- Tested Swagger and Mermaid
To explain the `text-expander-element` change: Before this version, the
element added a unavoidable space after emoji completion. Now that
https://github.com/github/text-expander-element/pull/36 is in, we gain
control over this space and I opted to remove it for emoji completion
and retain it for `@` mentions.
---------
Co-authored-by: Giteabot <teabot@gitea.io>
- Enable all source maps in dev build
- Disable all source maps in prod build
- Provide `ENABLE_SOURCEMAP` env var to override it.
I think the strange error seen in
https://github.com/go-gitea/gitea/issues/24784 is sourcemap related, so
if we enable/disable them all, it might go away. But it's most
definitely a Safari bug.
With all sourcemaps disabled, binary size goes down by around 1-2 MB,
with all enabled it goes up by around 12MB. If +12MB is acceptable, we
could also always enable them by default as fully source maps do have
some debugging benefits.
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.
[`worker-loader`](https://github.com/webpack-contrib/worker-loader) is
deprecated since webpack 5 which can load workers without it now, so
remove it. I think it was already dysfunctional because the regex does
not match our current worker scripts:
```
web_src/js/features/eventsource.sharedworker.js
web_src/js/features/serviceworker.js
web_src/js/serviceworker.js
```
I did confirm that eventsource worker still loads via simple
`console.log` inside the script.
Co-authored-by: delvh <leon@kske.dev>
Fix regression from https://github.com/go-gitea/gitea/pull/23481.
The conditional on the CSS import was being stripped away by webpack's
`css-loader`, resulting in the dark theme always loading. The old syntax
with `@import` nested inside `@media` also did not work as `css-loader`
(rightfully) ignores such non-standard `@import` syntax that was
previously supported by Less.
Unfortunately, we have to re-introduce postcss to the CSS pipeline to
fix this and I loaded only the minimal plugins to make it work.
There is one variant of the fix that does work without postcss, which is
to exclude the file from transpilation but I did not consider it as it
would have meant the `@import` was being done without a version suffix
in the URL, which would have caused cache issue.
Related: https://github.com/webpack-contrib/css-loader/issues/1503
---------
Co-authored-by: John Olheiser <john.olheiser@gmail.com>
Ran most of the Less files through the Less compiler and Prettier and
then followed up with a round of manual fixes.
The Less compiler had unfortunately stripped all `//` style comments
that I had to restore (It did preserve `/* */` comments). Other fixes
include duplicate selector removal which were revealed after the
transpilation and which weren't caught by stylelint before but now are.
Fixes: https://github.com/go-gitea/gitea/issues/15565
Follow #23394
There were many bad smells in old code. This PR only moves the code into
Vue SFC, doesn't touch the unrelated logic.
update: after
5f23218c85
, there should be no usage of the vue-rumtime-compiler anymore
(hopefully), so I think this PR could close#19851
---------
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
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>
![image](https://user-images.githubusercontent.com/2114189/218256757-a267c8ba-3108-4755-9ae5-329f1b08f615.png)
</details>
- Update all JS dependencies to latest version
- Enable unicorn/prefer-node-protocol and autofix issues
- Regenerate SVGs
- Add some comments to eslint rules
- Tested build, Mermaid and Katex rendering
#19999 introduced a indirect dependency with a license that was not on
our allowlist yet which produced this warning during webpack:
````
WARNING in License: citeproc@2.4.62 has disallowed license CPAL-1.0 OR AGPL-1.0
````
I've added both licenses to the allowed list and made it so webpack will
now abort on such license errors so that we don't miss those next time.
Co-authored-by: John Olheiser <john.olheiser@gmail.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
- Update all JS dependencies and playwright image
- Add new eslint rules, enable a few more, fix issues
- Regenerate SVGs
- Tested Vue and Swagger
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This PR adds mathematical rendering with KaTeX.
The first step is to add a Goldmark extension that detects the latex
(and tex) mathematics delimiters.
The second step to make this extension only run if math support is
enabled.
The second step is to then add KaTeX CSS and JS to the head which will
load after the dom is rendered.
Fix#3445
Signed-off-by: Andrew Thornton <art27@cantab.net>
Signed-off-by: Andrew Thornton <art27@cantab.net>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>