Frontend refactor: move Vue related code from `index.js` to `components` dir, and remove unused codes. (#17301)

* frontend refactor

* Apply suggestions from code review

Co-authored-by: delvh <dev.lh@web.de>

* Update templates/base/head.tmpl

Co-authored-by: delvh <dev.lh@web.de>

* Update docs/content/doc/developers/guidelines-frontend.md

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

* fix typo

* fix typo

* refactor PageData to pageData

* Apply suggestions from code review

Co-authored-by: delvh <dev.lh@web.de>

* Simply for the visual difference.

Co-authored-by: delvh <dev.lh@web.de>

* Revert "Apply suggestions from code review"

This reverts commit 4d78ad9b0e96ca180e0823de17659a2e0814c099.

Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: 6543 <6543@obermui.de>

2 files changed, 61 insertions, 1 deletions

diff --git a/docs/content/doc/developers/guidelines-frontend.md b/docs/content/doc/developers/guidelines-frontend.md
new file mode 100644
index 0000000000..86286127aa
--- /dev/null
+++ b/docs/content/doc/developers/guidelines-frontend.md
@@ -0,0 +1,51 @@
+---
+date: "2021-10-13T16:00:00+02:00"
+title: "Guidelines for Frontend Development"
+slug: "guidelines-frontend"
+weight: 20
+toc: false
+draft: false
+menu:
+  sidebar:
+    parent: "developers"
+    name: "Guidelines for Frontend"
+    weight: 20
+    identifier: "guidelines-frontend"
+---
+
+# Guidelines for Frontend Development
+
+**Table of Contents**
+
+{{< toc >}}
+
+## Background
+
+Gitea uses [Less CSS](https://lesscss.org), [Fomantic-UI](https://fomantic-ui.com/introduction/getting-started.html) (based on [jQuery](https://api.jquery.com)) and [Vue2](https://vuejs.org/v2/guide/) for its frontend.
+
+The HTML pages are rendered by [Go HTML Template](https://pkg.go.dev/html/template)
+
+## General Guidelines
+
+We recommend [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) and [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html)
+
+### Gitea specific guidelines:
+
+1. Every feature (Fomantic-UI/jQuery module) should be put in separate files/directories.
+2. HTML ids and classes should use kebab-case.
+3. HTML ids and classes used in JavaScript should be unique for the whole project, and should contain 2-3 feature related keywords. We recommend to use the `js-` prefix for classes that are only used in JavaScript.
+4. jQuery events across different features should use their own namespaces.
+5. CSS styling for classes provided by frameworks should not be overwritten. Always use new class-names to overwrite framework styles. We recommend to use the `us-` prefix for user defined styles.  
+6. The backend can pass complex data to the frontend by using `ctx.PageData["myModuleData"] = map[]{}`
+7. Simple pages and SEO-related pages use Go HTML Template render to generate static Fomantic-UI HTML output. Complex pages can use Vue2 (or Vue3 in future).
+
+## Legacy Problems and Solutions
+
+### Too much code in `web_src/index.js`
+
+Previously, most JavaScript code was written into `web_src/index.js` directly, making the file unmaintainable.
+Try to keep this file small by creating new modules instead. These modules can be put in the `web_src/js/features` directory for now.
+
+### Vue2/Vue3 and JSX
+
+Gitea is using Vue2 now, we plan to upgrade to Vue3. We decided not to introduce JSX to keep the HTML and the JavaScript code separated.
diff --git a/docs/content/doc/developers/hacking-on-gitea.en-us.md b/docs/content/doc/developers/hacking-on-gitea.en-us.md
index 23e3b37680..d91d80e626 100644
--- a/docs/content/doc/developers/hacking-on-gitea.en-us.md
+++ b/docs/content/doc/developers/hacking-on-gitea.en-us.md
@@ -132,7 +132,14 @@ See `make help` for all available `make` targets. Also see [`.drone.yml`](https:
 To run and continuously rebuild when source files change:
 
 ```bash
+# for both frontend and backend
 make watch
+
+# or: watch frontend files (html/js/css) only
+make watch-frontend
+
+# or: watch backend files (go) only
+make watch-backend
 ```
 
 On macOS, watching all backend source files may hit the default open files limit which can be increased via `ulimit -n 12288` for the current shell or in your shell startup file for all future shells.
@@ -167,7 +174,9 @@ make revive vet misspell-check
 
 ### Working on JS and CSS
 
-Either use the `watch-frontend` target mentioned above or just build once:
+Frontend development should follow [Guidelines for Frontend Development](./guidelines-frontend.md)
+
+To build with frontend resources, either use the `watch-frontend` target mentioned above or just build once:
 
 ```bash
 make build && ./gitea