Skip to content

Commit 50f6aeb

Browse files
wxiaoguangwxiaoguang
committed
frontend refactor
1 parent 429258c commit 50f6aeb

18 files changed

+714
-629
lines changed

‎.eslintrc

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ reportUnusedDisableDirectives: true
33

44
ignorePatterns:
55
- /web_src/js/vendor
6-
- /templates/repo/activity.tmpl
7-
- /templates/repo/view_file.tmpl
86

97
parserOptions:
108
sourceType: module

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ _test
99

1010
# IntelliJ
1111
.idea
12+
# Goland's output filename can not be set manually
13+
/go_build_*
1214

1315
# MS VSCode
1416
.vscode

‎docs/content/doc/developers/guidelines-frontend.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
date: "2021-10-13T16:00:00+02:00"
3+
title: "Guidelines for Frontend Development"
4+
slug: "guidelines-frontend"
5+
weight: 20
6+
toc: false
7+
draft: false
8+
menu:
9+
sidebar:
10+
parent: "developers"
11+
name: "Guidelines for Frontend"
12+
weight: 20
13+
identifier: "guidelines-frontend"
14+
---
15+
16+
# Guidelines for Frontend Development
17+
18+
**Table of Contents**
19+
20+
{{< toc >}}
21+
22+
## Background
23+
24+
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.
25+
26+
The HTML pages are rendered by [Go Text Template](https://pkg.go.dev/text/template)
27+
28+
## General Guidelines
29+
30+
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)
31+
32+
Guidelines specialized for Gitea:
33+
34+
1. Every feature (Fomantic-UI/jQuery module) should be put in separated files/directories.
35+
2. HTML id/css-class-name should use kebab-case.
36+
3. HTML id/css-class-name used by JavaScript top-level selector should be unique in whole project,
37+
and should contain 2-3 feature related keywords. Recommend to use `js-` prefix for CSS names for JavaScript usage only.
38+
4. jQuery events across different features should use their own namespaces.
39+
5. CSS styles provided by frameworks should not be overwritten by framework's selectors globally.
40+
Always use new defined CSS names to overwrite framework styles. Recommend to use `us-` prefix for user defined styles.
41+
6. Backend can pass data to frontend (JavaScript) by `ctx.PageData["myModuleData"] = map{}`
42+
7. Simple pages and SEO-related pages use Go Text Template render to generate static Fomantic-UI HTML output. Complex pages can use Vue2 (or Vue3 in future).
43+
44+
## Legacy Problems and Solutions
45+
46+
### Too many codes in `web_src/index.js`
47+
48+
In history, many JavaScript codes are written into `web_src/index.js` directly, which becomes too big to maintain.
49+
We should split this file into small modules, the separated files can be put in `web_src/js/features` for the first step.
50+
51+
### Vue2/Vue3 and JSX
52+
53+
Gitea is using Vue2 now, we have plan to upgrade to Vue3. We decide not to introduce JSX now to make sure the HTML and JavaScript codes are not mixed together.

‎docs/content/doc/developers/hacking-on-gitea.en-us.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,14 @@ See `make help` for all available `make` targets. Also see [`.drone.yml`](https:
132132
To run and continuously rebuild when source files change:
133133

134134
```bash
135+
# for both frontend and backend
135136
make watch
137+
138+
# or: watch frontend files (html/js/css) only
139+
make watch-frontend
140+
141+
# or: watch backend files (go) only
142+
make watch-backend
136143
```
137144

138145
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
167174

168175
### Working on JS and CSS
169176

170-
Either use the `watch-frontend` target mentioned above or just build once:
177+
Frontend development should follow [Guidelines for Frontend Development](./guidelines-frontend.md)
178+
179+
To build with frontend resources, either use the `watch-frontend` target mentioned above or just build once:
171180

172181
```bash
173182
make build && ./gitea

‎modules/context/context.go

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -645,6 +645,7 @@ func Contexter() func(next http.Handler) http.Handler {
645645
"CurrentURL": setting.AppSubURL + req.URL.RequestURI(),
646646
"PageStartTime": startTime,
647647
"Link": link,
648+
"IsProd": setting.IsProd(),
648649
},
649650
}
650651
// PageData is passed by reference, and it will be rendered to `window.config.PageData` in `head.tmpl` for JavaScript modules

‎routers/web/repo/activity.go

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ func Activity(ctx *context.Context) {
6060
return
6161
}
6262

63-
if ctx.Data["ActivityTopAuthors"], err = models.GetActivityStatsTopAuthors(ctx.Repo.Repository, timeFrom, 10); err != nil {
63+
if ctx.PageData["repoActivityTopAuthors"], err = models.GetActivityStatsTopAuthors(ctx.Repo.Repository, timeFrom, 10); err != nil {
6464
ctx.ServerError("GetActivityStatsTopAuthors", err)
6565
return
6666
}

‎routers/web/user/home.go

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,10 @@ func Dashboard(ctx *context.Context) {
106106
ctx.Data["Title"] = ctxUser.DisplayName() + " - " + ctx.Tr("dashboard")
107107
ctx.Data["PageIsDashboard"] = true
108108
ctx.Data["PageIsNews"] = true
109-
ctx.Data["SearchLimit"] = setting.UI.User.RepoPagingNum
109+
110+
ctx.PageData["dashboardRepoList"] = map[string]interface{}{
111+
"searchLimit": setting.UI.User.RepoPagingNum,
112+
}
110113

111114
if setting.Service.EnableUserHeatmap {
112115
data, err := models.GetUserHeatmapDataByUserTeam(ctxUser, ctx.Org.Team, ctx.User)

‎templates/base/head.tmpl

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<!DOCTYPE html>
22
<html lang="{{.Lang}}" class="theme-{{.SignedUser.Theme}}">
3-
<head data-suburl="{{AppSubUrl}}">
43
<meta charset="utf-8">
54
<meta name="viewport" content="width=device-width, initial-scale=1">
65
<title>{{if .Title}}{{.Title | RenderEmojiPlain}} - {{end}} {{if .Repository.Name}}{{.Repository.Name}} - {{end}}{{AppName}} </title>
@@ -12,15 +11,6 @@
1211
<meta name="keywords" content="{{MetaKeywords}}">
1312
<meta name="referrer" content="no-referrer" />
1413
<meta name="_csrf" content="{{.CsrfToken}}" />
15-
{{if .IsSigned}}
16-
<meta name="_uid" content="{{.SignedUser.ID}}" />
17-
{{end}}
18-
{{if .ContextUser}}
19-
<meta name="_context_uid" content="{{.ContextUser.ID}}" />
20-
{{end}}
21-
{{if .SearchLimit}}
22-
<meta name="_search_limit" content="{{.SearchLimit}}" />
23-
{{end}}
2414
{{if .GoGetImport}}
2515
<meta name="go-import" content="{{.GoGetImport}} git {{.CloneLink.HTTPS}}">
2616
<meta name="go-source" content="{{.GoGetImport}} _ {{.GoDocDirectory}} {{.GoDocFile}}">
@@ -31,6 +21,7 @@
3121
AppVer: '{{AppVer}}',
3222
AppSubUrl: '{{AppSubUrl}}',
3323
AssetUrlPrefix: '{{AssetUrlPrefix}}',
24+
IsProd: {{.IsProd}},
3425
CustomEmojis: {{CustomEmojis}},
3526
UseServiceWorker: {{UseServiceWorker}},
3627
csrf: '{{.CsrfToken}}',

‎templates/repo/activity.tmpl

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -108,11 +108,8 @@
108108
{{.i18n.Tr "repo.activity.git_stats_and_deletions" }}
109109
<strong class="text red">{{.i18n.Tr (TrN .i18n.Lang .Activity.Code.Deletions "repo.activity.git_stats_deletion_1" "repo.activity.git_stats_deletion_n") .Activity.Code.Deletions }}</strong>.
110110
</div>
111-
<div class="ui attached segment" id="app">
112-
<script type="text/javascript">
113-
var ActivityTopAuthors = {{Json .ActivityTopAuthors | SafeJS}};
114-
</script>
115-
<activity-top-authors :data="activityTopAuthors" />
111+
<div class="ui attached segment">
112+
<div id="repo-activity-top-authors-chart"></div>
116113
</div>
117114
</div>
118115
{{end}}
@@ -126,7 +123,7 @@
126123
<div class="list">
127124
{{range .Activity.PublishedReleases}}
128125
<p class="desc">
129-
<div class="ui green label">{{$.i18n.Tr "repo.activity.published_release_label"}}</div>
126+
<span class="ui green label">{{$.i18n.Tr "repo.activity.published_release_label"}}</span>
130127
{{.TagName}}
131128
{{if not .IsTag}}
132129
<a class="title" href="{{$.RepoLink}}/src/{{.TagName | EscapePound}}">{{.Title | RenderEmoji}}</a>
@@ -145,7 +142,7 @@
145142
<div class="list">
146143
{{range .Activity.MergedPRs}}
147144
<p class="desc">
148-
<div class="ui purple label">{{$.i18n.Tr "repo.activity.merged_prs_label"}}</div>
145+
<span class="ui purple label">{{$.i18n.Tr "repo.activity.merged_prs_label"}}</span>
149146
#{{.Index}} <a class="title" href="{{$.RepoLink}}/pulls/{{.Index}}">{{.Issue.Title | RenderEmoji}}</a>
150147
{{TimeSinceUnix .MergedUnix $.Lang}}
151148
</p>
@@ -161,7 +158,7 @@
161158
<div class="list">
162159
{{range .Activity.OpenedPRs}}
163160
<p class="desc">
164-
<div class="ui green label">{{$.i18n.Tr "repo.activity.opened_prs_label"}}</div>
161+
<span class="ui green label">{{$.i18n.Tr "repo.activity.opened_prs_label"}}</span>
165162
#{{.Index}} <a class="title" href="{{$.RepoLink}}/pulls/{{.Index}}">{{.Issue.Title | RenderEmoji}}</a>
166163
{{TimeSinceUnix .Issue.CreatedUnix $.Lang}}
167164
</p>
@@ -177,7 +174,7 @@
177174
<div class="list">
178175
{{range .Activity.ClosedIssues}}
179176
<p class="desc">
180-
<div class="ui red label">{{$.i18n.Tr "repo.activity.closed_issue_label"}}</div>
177+
<span class="ui red label">{{$.i18n.Tr "repo.activity.closed_issue_label"}}</span>
181178
#{{.Index}} <a class="title" href="{{$.RepoLink}}/issues/{{.Index}}">{{.Title | RenderEmoji}}</a>
182179
{{TimeSinceUnix .ClosedUnix $.Lang}}
183180
</p>
@@ -193,7 +190,7 @@
193190
<div class="list">
194191
{{range .Activity.OpenedIssues}}
195192
<p class="desc">
196-
<div class="ui green label">{{$.i18n.Tr "repo.activity.new_issue_label"}}</div>
193+
<span class="ui green label">{{$.i18n.Tr "repo.activity.new_issue_label"}}</span>
197194
#{{.Index}} <a class="title" href="{{$.RepoLink}}/issues/{{.Index}}">{{.Title | RenderEmoji}}</a>
198195
{{TimeSinceUnix .CreatedUnix $.Lang}}
199196
</p>
@@ -212,7 +209,7 @@
212209
<div class="list">
213210
{{range .Activity.UnresolvedIssues}}
214211
<p class="desc">
215-
<div class="ui green label">{{$.i18n.Tr "repo.activity.unresolved_conv_label"}}</div>
212+
<span class="ui green label">{{$.i18n.Tr "repo.activity.unresolved_conv_label"}}</span>
216213
#{{.Index}}
217214
{{if .IsPull}}
218215
<a class="title" href="{{$.RepoLink}}/pulls/{{.Index}}">{{.Title | RenderEmoji}}</a>

‎templates/repo/view_file.tmpl

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -131,13 +131,3 @@
131131
</div>
132132
</div>
133133
</div>
134-
135-
<script>
136-
function submitDeleteForm() {
137-
var message = prompt("{{.i18n.Tr "repo.delete_confirm_message"}}\n\n{{.i18n.Tr "repo.delete_commit_summary"}}", "Delete '{{.TreeName}}'");
138-
if (message != null) {
139-
$("#delete-message").val(message);
140-
$("#delete-file-form").submit()
141-
}
142-
}
143-
</script>

‎templates/user/dashboard/repolist.tmpl

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
<div id="app" class="six wide column">
1+
<div id="dashboard-repo-list" class="six wide column">
22
<repo-search
33
:search-limit="searchLimit"
4-
:suburl="suburl"
5-
:uid="uid"
4+
:sub-url="subUrl"
65
{{if .Team}}
76
:team-id="{{.Team.ID}}"
87
{{end}}
@@ -31,7 +30,7 @@
3130
{{.i18n.Tr "home.my_repos"}}
3231
<span class="ui grey label ml-3">${reposTotalCount}</span>
3332
</div>
34-
<a class="poping up" :href="suburl + '/repo/create'" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
33+
<a class="poping up" :href="subUrl + '/repo/create'" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
3534
{{svg "octicon-plus"}}
3635
<span class="sr-only">{{.i18n.Tr "new_repo"}}</span>
3736
</a>
@@ -122,7 +121,7 @@
122121
<div v-if="repos.length" class="ui attached table segment rounded-bottom">
123122
<ul class="repo-owner-name-list">
124123
<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}">
125-
<a class="repo-list-link df ac sb" :href="suburl + '/' + repo.full_name">
124+
<a class="repo-list-link df ac sb" :href="subUrl + '/' + repo.full_name">
126125
<div class="text truncate item-name f1">
127126
<component v-bind:is="repoIcon(repo)" size="16"></component>
128127
<strong>${repo.full_name}</strong>
@@ -168,15 +167,15 @@
168167
{{.i18n.Tr "home.my_orgs"}}
169168
<span class="ui grey label ml-3">${organizationsTotalCount}</span>
170169
</div>
171-
<a v-if="canCreateOrganization" class="poping up" :href="suburl + '/org/create'" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
170+
<a v-if="canCreateOrganization" class="poping up" :href="subUrl + '/org/create'" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
172171
{{svg "octicon-plus"}}
173172
<span class="sr-only">{{.i18n.Tr "new_org"}}</span>
174173
</a>
175174
</h4>
176175
<div v-if="organizations.length" class="ui attached table segment rounded-bottom">
177176
<ul class="repo-owner-name-list">
178177
<li v-for="org in organizations">
179-
<a class="repo-list-link df ac sb" :href="suburl + '/' + org.name">
178+
<a class="repo-list-link df ac sb" :href="subUrl + '/' + org.name">
180179
<div class="text truncate item-name f1">
181180
{{svg "octicon-organization" 16 "mr-2"}}
182181
<strong>${org.name}</strong>

‎web_src/js/components/ActivityHeatmap.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,4 +70,3 @@ export default {
7070
},
7171
};
7272
</script>
73-
<style scoped/>

0 commit comments

Comments
 (0)