docs: update frontend docs

This commit is contained in:
Nicolas Giard 2022-04-25 17:19:56 -04:00 committed by GitHub
parent 8ea883cb7e
commit abfdd2d82d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -23,7 +23,14 @@
- [Docker Dev Environment](docker/README.md) - [Docker Dev Environment](docker/README.md)
- [Database & Assets](#database--assets) - [Database & Assets](#database--assets)
- [Old Datatracker Branches](https://github.com/ietf-tools/old-datatracker-branches/branches/all) - [Old Datatracker Branches](https://github.com/ietf-tools/old-datatracker-branches/branches/all)
- [Bootstrap 5 Upgrade](#bootstrap-5-upgrade) - [Frontend Development](#frontend-development)
- [Intro](#intro)
- [Bootstrap](#bootstrap)
- [Serving Static Files via CDN](#serving-static-files-via-cdn)
- [Handling of External Javascript and CSS Components](#handling-of-external-javascript-and-css-components)
- [Handling of Internal Static Files](#handling-of-internal-static-files)
- [Changes to Template Files](#changes-to-template-files)
- [Deployment](#deployment)
--- ---
@ -67,15 +74,9 @@ https://www.ietf.org/lib/dt/sprint/ietf_utf8.sql.gz
> Note that this link is provided as reference only. To update the database in your dev environment to the latest version, you should instead run the `docker/cleandb` script! > Note that this link is provided as reference only. To update the database in your dev environment to the latest version, you should instead run the `docker/cleandb` script!
### Frontend Development
--- #### Intro
# Bootstrap 5 Upgrade
An upgrade of the UI to use Bootstrap 5 is under way. The following notes describe this work-in-progress and should
be integrated with the rest of the document as the details and processes become final.
## Intro
We now use `yarn` to manage assets for the Datatracker, and `parcel` to package them. `yarn` maintains its `node` packages under the `.yarn` directory. We now use `yarn` to manage assets for the Datatracker, and `parcel` to package them. `yarn` maintains its `node` packages under the `.yarn` directory.
@ -90,7 +91,7 @@ yarn build
This will create packages under `ietf/static/dist/ietf`, which are then served by the Django development server, and which must be uploaded to the CDN. This will create packages under `ietf/static/dist/ietf`, which are then served by the Django development server, and which must be uploaded to the CDN.
## Use Bootstrap Whenever You Can #### Bootstrap
The "new" datatracker uses Twitter Bootstrap for the UI. The "new" datatracker uses Twitter Bootstrap for the UI.
@ -109,13 +110,11 @@ Some ground rules:
block of that template. block of that template.
- Javascript that is used by multiple templates goes into - Javascript that is used by multiple templates goes into
static/js/ietf.js or a new js file. static/js/ietf.js or a new js file.
- Every template includes jquery, so write jquery code and not plain
Javascript. It's shorter and often faster.
- Avoid CSS, HTML styling or Javascript in the python code! - Avoid CSS, HTML styling or Javascript in the python code!
## Serving Static Files via CDN #### Serving Static Files via CDN
### Production Mode ##### Production Mode
If resources served over a CDN and/or with a high max-age don't have If resources served over a CDN and/or with a high max-age don't have
different URLs for different versions, then any component upgrade which different URLs for different versions, then any component upgrade which
@ -145,7 +144,7 @@ The result is that all static files collected via the `collectstatic`
command will be placed in a location served via CDN, with the release command will be placed in a location served via CDN, with the release
version being part of the URL. version being part of the URL.
### Development Mode ##### Development Mode
In development mode, `STATIC_URL` is set to `/static/`, and Django's In development mode, `STATIC_URL` is set to `/static/`, and Django's
`staticfiles` infrastructure makes the static files available under that `staticfiles` infrastructure makes the static files available under that
@ -164,13 +163,13 @@ location from which it is served, the mapping is as follows:
| localhost:8000/static/ietf/* | ietf/static/ietf/* | | localhost:8000/static/ietf/* | ietf/static/ietf/* |
| localhost:8000/static/secr/* | ietf/secr/static/secr/*| | localhost:8000/static/secr/* | ietf/secr/static/secr/*|
## Handling of External Javascript and CSS Components #### Handling of External Javascript and CSS Components
In order to make it easy to keep track of and upgrade external In order to make it easy to keep track of and upgrade external
components, these are now handled by a tool called `npm` via the components, these are now handled by a tool called `npm` via the
configuration in `package.json`. configuration in `package.json`.
## Handling of Internal Static Files #### Handling of Internal Static Files
Previous to this release, internal static files were located under Previous to this release, internal static files were located under
`static/`, mixed together with the external components. They are now `static/`, mixed together with the external components. They are now
@ -180,7 +179,7 @@ static files associated with a particular app will be handled the same
way (which means that all `admin/` static files automatically will be way (which means that all `admin/` static files automatically will be
handled correctly, too). handled correctly, too).
## Changes to Template Files #### Changes to Template Files
In order to make the template files refer to the correct versioned CDN In order to make the template files refer to the correct versioned CDN
URL (as given by the STATIC_URL root) all references to static files in URL (as given by the STATIC_URL root) all references to static files in
@ -190,7 +189,7 @@ serving static files from the right place in development mode, and
referring to the correct versioned URL in production mode and the referring to the correct versioned URL in production mode and the
simpler `/static/` URLs in development mode. simpler `/static/` URLs in development mode.
## Deployment #### Deployment
During deployment, it is now necessary to run the management command: During deployment, it is now necessary to run the management command: