mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-09-08 12:49:13 +02:00
* 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 4d78ad9b0e
.
Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: 6543 <6543@obermui.de>
2.2 KiB
2.2 KiB
date | title | slug | weight | toc | draft | menu | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
2021-10-13T16:00:00+02:00 | Guidelines for Frontend Development | guidelines-frontend | 20 | false | false |
|
Guidelines for Frontend Development
Table of Contents
{{< toc >}}
Background
Gitea uses Less CSS, Fomantic-UI (based on jQuery) and Vue2 for its frontend.
The HTML pages are rendered by Go HTML Template
General Guidelines
We recommend Google HTML/CSS Style Guide and Google JavaScript Style Guide
Gitea specific guidelines:
- Every feature (Fomantic-UI/jQuery module) should be put in separate files/directories.
- HTML ids and classes should use kebab-case.
- 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. - jQuery events across different features should use their own namespaces.
- 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. - The backend can pass complex data to the frontend by using
ctx.PageData["myModuleData"] = map[]{}
- 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.