mirror of
https://github.com/go-gitea/gitea.git
synced 2024-11-29 06:04:36 +01:00
3e8414179c
- 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>
94 lines
2.8 KiB
JSON
94 lines
2.8 KiB
JSON
{
|
|
"type": "module",
|
|
"engines": {
|
|
"node": ">= 18.0.0"
|
|
},
|
|
"dependencies": {
|
|
"@citation-js/core": "0.7.1",
|
|
"@citation-js/plugin-bibtex": "0.7.2",
|
|
"@citation-js/plugin-csl": "0.7.2",
|
|
"@citation-js/plugin-software-formats": "0.6.1",
|
|
"@claviska/jquery-minicolors": "2.3.6",
|
|
"@github/markdown-toolbar-element": "2.2.1",
|
|
"@github/relative-time-element": "4.3.1",
|
|
"@github/text-expander-element": "2.6.1",
|
|
"@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
|
|
"@primer/octicons": "19.8.0",
|
|
"@webcomponents/custom-elements": "1.6.0",
|
|
"add-asset-webpack-plugin": "2.0.1",
|
|
"ansi_up": "6.0.2",
|
|
"asciinema-player": "3.6.3",
|
|
"clippie": "4.0.6",
|
|
"css-loader": "6.8.1",
|
|
"dropzone": "6.0.0-beta.2",
|
|
"easymde": "2.18.0",
|
|
"esbuild-loader": "4.0.2",
|
|
"escape-goat": "4.0.0",
|
|
"fast-glob": "3.3.2",
|
|
"htmx.org": "1.9.10",
|
|
"jquery": "3.7.1",
|
|
"katex": "0.16.9",
|
|
"license-checker-webpack-plugin": "0.2.1",
|
|
"lightningcss-loader": "2.1.0",
|
|
"mermaid": "10.6.1",
|
|
"mini-css-extract-plugin": "2.7.6",
|
|
"minimatch": "9.0.3",
|
|
"monaco-editor": "0.45.0",
|
|
"monaco-editor-webpack-plugin": "7.1.0",
|
|
"pdfobject": "2.2.12",
|
|
"pretty-ms": "8.0.0",
|
|
"sortablejs": "1.15.1",
|
|
"swagger-ui-dist": "5.10.5",
|
|
"throttle-debounce": "5.0.0",
|
|
"tinycolor2": "1.6.0",
|
|
"tippy.js": "6.3.7",
|
|
"toastify-js": "1.12.0",
|
|
"tributejs": "5.1.3",
|
|
"uint8-to-base64": "0.2.0",
|
|
"vue": "3.3.13",
|
|
"vue-bar-graph": "2.0.0",
|
|
"vue-loader": "17.3.1",
|
|
"vue3-calendar-heatmap": "2.0.5",
|
|
"webpack": "5.89.0",
|
|
"webpack-cli": "5.1.4",
|
|
"wrap-ansi": "9.0.0"
|
|
},
|
|
"devDependencies": {
|
|
"@eslint-community/eslint-plugin-eslint-comments": "4.1.0",
|
|
"@playwright/test": "1.40.1",
|
|
"@stoplight/spectral-cli": "6.11.0",
|
|
"@stylistic/eslint-plugin-js": "1.5.1",
|
|
"@vitejs/plugin-vue": "4.5.2",
|
|
"eslint": "8.56.0",
|
|
"eslint-plugin-array-func": "4.0.0",
|
|
"eslint-plugin-i": "2.29.1",
|
|
"eslint-plugin-jquery": "1.5.1",
|
|
"eslint-plugin-no-jquery": "2.7.0",
|
|
"eslint-plugin-no-use-extend-native": "0.5.0",
|
|
"eslint-plugin-regexp": "2.1.2",
|
|
"eslint-plugin-sonarjs": "0.23.0",
|
|
"eslint-plugin-unicorn": "49.0.0",
|
|
"eslint-plugin-vitest": "0.3.18",
|
|
"eslint-plugin-vitest-globals": "1.4.0",
|
|
"eslint-plugin-vue": "9.19.2",
|
|
"eslint-plugin-vue-scoped-css": "2.6.1",
|
|
"eslint-plugin-wc": "2.0.4",
|
|
"jsdom": "23.0.1",
|
|
"markdownlint-cli": "0.38.0",
|
|
"postcss-html": "1.5.0",
|
|
"stylelint": "15.11.0",
|
|
"stylelint-declaration-block-no-ignored-properties": "2.7.0",
|
|
"stylelint-declaration-strict-value": "1.9.2",
|
|
"stylelint-stylistic": "0.4.3",
|
|
"svgo": "3.1.0",
|
|
"updates": "15.0.4",
|
|
"vite-string-plugin": "1.1.2",
|
|
"vitest": "1.1.0"
|
|
},
|
|
"browserslist": [
|
|
"defaults",
|
|
"not ie > 0",
|
|
"not ie_mob > 0"
|
|
]
|
|
}
|