aboutsummaryrefslogtreecommitdiffstats
path: root/webpack.config.js
Commit message (Collapse)AuthorAgeFilesLines
* Add webpack EnvironmentPlugin (#32661)silverwind2024-11-281-1/+5
| | | | | | Fixes: https://github.com/go-gitea/gitea/issues/32660 Environment vars in Webpack need to be declared in the config, otherwise they will not be elimininated during compilation.
* Add back esbuild-loader for .js files (#31585)silverwind2024-07-091-0/+13
| | | | | | | | | | The build currently seems to work fine without this, but in theory it should fail because Fomantic is JavaScript. I feel more comfortable having this loader declared. Note: I did try using the [combined loader config](https://github.com/privatenumber/esbuild-loader#-quick-setup) but when I did that, vue files could not load, so I think this is the best option.
* Convert frontend code to typescript (#31559)silverwind2024-07-071-8/+8
| | | | | | | | | | | None of the frontend js/ts files was touched besides these two commands (edit: no longer true, I touched one file in https://github.com/go-gitea/gitea/pull/31559/commits/61105d0618e285d97e95044bfb64415f364a4526 because of a deprecation that was not showing before the rename). `tsc` currently reports 778 errors, so I have disabled it in CI as planned. Everything appears to work fine.
* Bump htmx to 2.0.0 (#31413)Yarden Shoham2024-06-201-4/+1
| | | | | | | | | Tested Subscribe, Follow, Star, Watch, and System Status. --------- Signed-off-by: Yarden Shoham <git@yardenshoham.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: silverwind <me@silverwind.io>
* replace jquery-minicolors with coloris (#30055)silverwind2024-03-291-7/+0
| | | | | | | | | | | | | | | | | | 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">
* Update JS any PY dependencies, remove workarounds (#30085)silverwind2024-03-261-1/+0
| | | | | | | | - Update dependencies via `make update-js update-py svg` - Remove `postcss` workaround - https://github.com/postcss/postcss/issues/1914 - Remove `happy-dom` workaround - https://github.com/capricorn86/happy-dom/pull/1365. - Tested Katex and Asciinema
* Enforce trailing comma in JS on multiline (#30002)silverwind2024-03-221-3/+3
| | | | | | | | 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.
* Upgrade `htmx` to v1.9.11 (#29821)Yarden Shoham2024-03-151-3/+2
| | | | | | | | | 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>
* Add `<overflow-menu>`, rename webcomponents (#29400)silverwind2024-03-151-1/+18
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 1. Add `<overflow-menu>` web component 2. Rename `<gitea-origin-url>` to `<origin-url>` and make filenames match. <img width="439" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/2fbe4ca4-110b-4ad2-8e17-c1e116ccbd74"> <img width="444" alt="Screenshot 2024-03-02 at 21 36 52" src="https://github.com/go-gitea/gitea/assets/115237/aa8f786e-dc8c-4030-b12d-7cfb74bdfd6e"> <img width="537" alt="Screenshot 2024-03-03 at 03 05 06" src="https://github.com/go-gitea/gitea/assets/115237/fddd50aa-adf1-4b4b-bd7f-caf30c7b2245"> ![image](https://github.com/go-gitea/gitea/assets/115237/0f43770c-834c-4a05-8e3d-d30eb8653786) ![image](https://github.com/go-gitea/gitea/assets/115237/4b4c6bd7-843f-4f49-808f-6b3aed5e9f9a) TODO: - [x] Check if removal of `requestAnimationFrame` is possible to avoid flash of content. Likely needs a `MutationObserver`. - [x] Hide tippy when button is removed from DOM. - [x] ~~Implement right-aligned items (https://github.com/go-gitea/gitea/pull/28976)~~. Not going to do it. - [x] Clean up CSS so base element has no background and add background via tailwind instead. - [x] Use it for org and user page. --------- Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* enable tailwind nesting (#29746)Rafael Heard2024-03-141-1/+7
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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>
* Add tailwindcss (#29357)silverwind2024-02-251-0/+11
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | This will get tailwindcss working on a basic level. It provides only the utility classes, e.g. no tailwind base which we don't need because we have our own CSS reset. Without the base, we also do not have their CSS variables so a small amount of features do not work and I removed the generated classes for them. ***Note for future developers: This currently uses a `tw-` prefix, so we use it like `tw-p-3`.*** <details> <summary>Currently added CSS, all false-positives</summary> ``` .\!visible{ visibility: visible !important } .visible{ visibility: visible } .invisible{ visibility: hidden } .collapse{ visibility: collapse } .static{ position: static } .\!fixed{ position: fixed !important } .absolute{ position: absolute } .relative{ position: relative } .sticky{ position: sticky } .left-10{ left: 2.5rem } .isolate{ isolation: isolate } .float-right{ float: right } .float-left{ float: left } .mr-2{ margin-right: 0.5rem } .mr-3{ margin-right: 0.75rem } .\!block{ display: block !important } .block{ display: block } .inline-block{ display: inline-block } .inline{ display: inline } .flex{ display: flex } .inline-flex{ display: inline-flex } .\!table{ display: table !important } .inline-table{ display: inline-table } .table-caption{ display: table-caption } .table-cell{ display: table-cell } .table-column{ display: table-column } .table-column-group{ display: table-column-group } .table-footer-group{ display: table-footer-group } .table-header-group{ display: table-header-group } .table-row-group{ display: table-row-group } .table-row{ display: table-row } .flow-root{ display: flow-root } .inline-grid{ display: inline-grid } .contents{ display: contents } .list-item{ display: list-item } .\!hidden{ display: none !important } .hidden{ display: none } .flex-shrink{ flex-shrink: 1 } .shrink{ flex-shrink: 1 } .flex-grow{ flex-grow: 1 } .grow{ flex-grow: 1 } .border-collapse{ border-collapse: collapse } .select-all{ user-select: all } .resize{ resize: both } .flex-wrap{ flex-wrap: wrap } .overflow-visible{ overflow: visible } .rounded{ border-radius: 0.25rem } .border{ border-width: 1px } .text-justify{ text-align: justify } .uppercase{ text-transform: uppercase } .lowercase{ text-transform: lowercase } .capitalize{ text-transform: capitalize } .italic{ font-style: italic } .text-red{ color: var(--color-red) } .text-shadow{ color: var(--color-shadow) } .underline{ text-decoration-line: underline } .overline{ text-decoration-line: overline } .line-through{ text-decoration-line: line-through } .outline{ outline-style: solid } .ease-in{ transition-timing-function: cubic-bezier(0.4, 0, 1, 1) } .ease-in-out{ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) } .ease-out{ transition-timing-function: cubic-bezier(0, 0, 0.2, 1) } ``` </details> --------- Co-authored-by: Giteabot <teabot@gitea.io>
* Auto-update the system status in admin dashboard (#29163)Yarden Shoham2024-02-161-0/+4
| | | | | | | | | | | | | | | | | | | | | | | - 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>
* Avoid vue warning in dev mode (#29188)silverwind2024-02-161-0/+1
| | | | | | | | `vue` currently outputs a warning for this undefined variable during development, which is apparently caused by a bug in `vue-cli`. Workaround by setting this variable. Ref: https://github.com/vuejs/vue-cli/pull/7443 Ref: https://stackoverflow.com/a/77765007/808699
* Remove lightningcss (#29070)silverwind2024-02-071-10/+1
| | | | | | | | 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
* Pass es2020 to esbuild-loader as well (#29027)silverwind2024-02-021-1/+1
| | | | | Followup https://github.com/go-gitea/gitea/pull/28977. I forgot to pass the updated option to esbuild-loader, e.g. previously it was only passed to the minifier.
* Update JS and PY dependencies, build for `es2020` browsers (#28977)silverwind2024-02-021-1/+1
| | | | | | | | | - Update all JS dependencies minus @mcaptcha/vanilla-glue - Fix new lint errors - Regenerate SVGs - Switch to maintained stylelint stylistic plugin - Tested Mermaid, Citation, Swagger, sorting - Raise ESBuild target to `es2020` as dictated by `pretty-ms` dependency.
* Introduce htmx and use it to avoid full page load on `Subscribe` and ↵Yarden Shoham2024-01-301-0/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | `Follow` (#28908) - 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>
* Revert adding htmx until we finaly decide to add it (#28879)65432024-01-211-1/+0
|
* Don't do a full page load when clicking the subscribe button (#28871)Yarden Shoham2024-01-201-0/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | - 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>
* Enable production source maps for index.js, fix CSS sourcemaps (#27291)silverwind2023-09-261-7/+14
| | | | | | | | | | | 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.
* Vendor `jquery.are-you-sure` with strict mode fixes (#26901)silverwind2023-09-061-1/+0
| | | | | | | | | | | | | | Extract from https://github.com/go-gitea/gitea/pull/25940 and because https://github.com/go-gitea/gitea/pull/26743 does seem to need more work. This will be required if we are to run our JS in [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode). Previously, the two variables `$fields` and `$dirtyForms` polluted `window`: <img width="1145" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/e0270a0e-b881-4ed7-9cc4-e9ab25c0a2bc">
* Move licenses.txt to /assets directory (#26866)silverwind2023-09-011-3/+3
| | | | | | | | | 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>
* Use case-insensitive regex for all webpack assets (#26867)silverwind2023-09-011-6/+6
| | | | | 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.
* Fall back to esbuild for css minify (#26445)silverwind2023-08-111-3/+8
| | | | | | | | 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 asset files to the proper directory (#25907)wxiaoguang2023-07-181-2/+2
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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>
* Minify CSS with Lightning CSS (#25754)silverwind2023-07-071-1/+3
| | | | | | | | | | | | | | 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.
* Add toasts to UI (#25449)silverwind2023-06-271-0/+6
| | | | | Fixes https://github.com/go-gitea/gitea/issues/24353 In some case like async success/error, it is useful to show toasts in UI.
* Update JS dependencies, remove space after emoji completion (#25266)silverwind2023-06-181-1/+1
| | | | | | | | | | | | | | | | | - 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 webpack sourcemaps in dev build, disable all in prod build (#25089)silverwind2023-06-061-9/+13
| | | | | | | | | | | | | | | - 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.
* Remove the service worker (#25010)silverwind2023-05-311-8/+1
| | | | | | | | | | | | | 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. ## :warning: BREAKING You can remove the config `[ui].USE_SERVICE_WORKER` from your `app.ini` now.
* Remove `font-awesome` and fomantic `icon` module (#24471)silverwind2023-05-011-7/+0
| | | | Fixes https://github.com/go-gitea/gitea/issues/10410. This PR removes around 120kB of CSS.
* Introduce GiteaLocaleNumber custom element to handle number localization on ↵wxiaoguang2023-04-031-1/+1
| | | | | | | | | | | | | | | | | | | | | | | pages. (#23861) Follow #21429 & #22861 Use `<gitea-locale-number>` instead of backend `PrettyNumber`. All old `PrettyNumber` related functions are removed. A lot of code could be simplified. And some functions haven't been used for long time (dead code), so they are also removed by the way (eg: `SplitStringAtRuneN`, `Dedent`) This PR only tries to improve the `PrettyNumber` rendering problem, it doesn't touch the "plural" problem. Screenshot: ![image](https://user-images.githubusercontent.com/2114189/229290804-1f63db65-1e34-4a54-84ba-e00b44331b17.png) ![image](https://user-images.githubusercontent.com/2114189/229290911-c88dea00-b11d-48dd-accb-9f52edd73ce4.png)
* Remove worker-loader (#23548)silverwind2023-03-181-12/+0
| | | | | | | | | | | | | | | | | [`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>
* Update JS dependencies, Require Node.js 16 (#23528)silverwind2023-03-171-5/+6
| | | | | | | | | | | | - Update all JS dependencies - Require Node.js 16 as dictated by `esbuild-loader` - Regenerate SVG - Adapt to `esbuild-loader` breaking changes - Minor refactor in `webpack.config.js` - Tested build, monaco and swagger-ui --------- Co-authored-by: techknowlogick <techknowlogick@gitea.io>
* Update mini-css-extract-plugin, remove postcss (#23520)silverwind2023-03-161-13/+0
| | | | | | | | | | | | | | | Follow-up and proper fix for https://github.com/go-gitea/gitea/pull/23504 Update to [mini-css-extract-plugin@2.7.4](https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v2.7.4) which fixes our specific issue described in https://github.com/webpack-contrib/css-loader/issues/1503 and which allows us to again drop the postcss dependency. Backport of this is not necessary as I have included it in https://github.com/go-gitea/gitea/pull/23508. Co-authored-by: techknowlogick <techknowlogick@gitea.io>
* Fix theme-auto loading (#23504)silverwind2023-03-151-0/+13
| | | | | | | | | | | | | | | | | | | | | | | 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>
* Replace Less with CSS (#23481)silverwind2023-03-141-27/+4
| | | | | | | | | | | | 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
* Refactor branch/tag selector to Vue SFC (#23421)wxiaoguang2023-03-141-0/+4
| | | | | | | | | | | | | | | 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 https://github.com/go-gitea/gitea/pull/23421/commits/5f23218c851e12132f538a404c946bbf6ff38e62 , 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>
* update to mermaid v10 (#23178)techknowlogick2023-03-041-1/+1
| | | | | | | fix #23153 --------- Co-authored-by: silverwind <me@silverwind.io>
* Introduce customized HTML elements, fix incorrect AppUrl usages in templates ↵wxiaoguang2023-02-171-0/+3
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | (#22861) 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 JS dependencies and eslint (#22190)silverwind2022-12-201-3/+3
| | | | | | | - 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
* Update JS dependencies (#21881)silverwind2022-11-221-2/+3
| | | | | | | | - Update all JS deps - Regenerate SVGs - Add new eslint rules, fix issues - Tested Mermaid, Swagger, Vue, Webpack, Citation Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Fix webpack license warning (#21815)silverwind2022-11-181-1/+2
| | | | | | | | | | | | | | #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>
* chore: add webpack export type check (#21857)Percy Ma2022-11-181-0/+1
| | | | | add webpack export type check Co-authored-by: techknowlogick <techknowlogick@gitea.io>
* Update JS dependencies and eslint config (#21388)silverwind2022-10-101-1/+1
| | | | | | | | - 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>
* Refactor from Vue2 to Vue3 (#20044)André Jaenisch2022-10-011-5/+1
| | | Close #19902
* Add KaTeX rendering to Markdown. (#20571)zeripath2022-09-141-0/+4
| | | | | | | | | | | | | | | | | | | | 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>
* Rewrite go license generator in go (#21078)silverwind2022-09-071-3/+7
| | | | | | | | | | This removes the JS dependency in the checks pipeline. JSON output is different because the previous JS did indent the license data differently and a JSON key was changed, but the end result is the same as it gets re-indented by wepack. Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: zeripath <art27@cantab.net>
* Add go licenses to licenses.txt (#21034)silverwind2022-09-041-3/+10
| | | | | | | `make go-licenses` will generate `assets/go-licenses.json` which is then included in the webpack build. This step depends on both go and node being present, so unfortunately, I could not automate the generation by hooking it up to `tidy` as that target is triggered on CI where we do not have a docker image with both go an node. It should be ran from time to time, ideally after each go mod update.
* Enable contenthash in filename for dynamic assets (#20813)silverwind2022-08-231-6/+6
| | | | | 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.