udata customizations for Etalab / Data.gouv.fr.
This is a new version of udata-gouvfr This is a udata extension, you should read the udata documentation first.
udata-front requires Python 3.7+ and udata.
Install udata.
Remain in the same Python virtual environment and install udata-front:
pip install udata-front
Create a local configuration file udata.cfg
in your udata directory
(or where your UDATA_SETTINGS point out) or modify an existing one as following:
PLUGINS = ['front']
THEME = 'gouvfr'
Prepare a udata development environment.
Note that we're using pip-tools on this repository too.
It is recommended to have a workspace with the following layout:
$WORKSPACE
├── fs
├── udata
│ ├── ...
│ └── setup.py
├── udata-front
│ ├── ...
│ └── setup.py
└── udata.cfg
The following steps use the same Python virtual environment
and the same version of npm (for JS) as udata
.
Clone the udata-front
repository into your workspace
and install it in development mode:
git clone https://github.com/etalab/udata-front.git
cd udata-front
pre-commit install
pip install -e . -r requirements/test.pip -r requirements/develop.pip
NB: the
udata.(in|pip)
files are used by the CI to stay in sync withudata
requirements. You shouldn't need to tinker with them on your local environment, but they might be updated by the CI when you make a Pull Request.
Modify your local udata.cfg
configuration file as following:
PLUGINS = ['front']
THEME = 'gouvfr'
You can execute udata-front
specific tasks from the udata-front
directory.
ex: Build the assets:
cd udata-front
npm install
inv assets-build
You can list available development commands with:
inv -l
The front-end theme for the public facing website, is split into two parts :
- The Jinja templates are located inside
udata_front/theme/templates
. - The Less & other sourcefiles for the are located in
theme
.
In addition we have a nice litle set of CSS Utilities to quickly build front end components, inspired by bootstrap, most of its documentation
lives in the css located in theme/less/
and is built using Stylemark, you can read the live documentation
in udata_front/theme/stylemark/
after building it using npm run build-stylemark
.
When building pages, here are a few templates to look out for in udata_front/theme/gouvfr/templates
:
home.html
: well, duh.header.html
andfooter.html
: same idea.raw.html
: contains the general html structure exposing abody
block where we can write our page's body.base.html
: contains some extra html structure exposing acontent
block for our page's content.subnav-large.html
,publish-action-modal.html
andcarousel.html
: TODO
Here are our reusable components :
dataset
: datasets listings used in many pages.reuse
: cards for displaying dataset reused in the real world.participez
: is the large blue callout seen on multiple pages.macros
: TODOsvg
: contains SVG assets to be included in our pages.
Front docs todo :
- Parcel 2 architecture
- Static copy
- Stylemark build
- VueJS compiler mode
- VanillaJS IIFE architecture
- Vue 3 architecture
- Modals
- I18n
- Config plugin
- Components Back docs todo :
- CSS/JS file inclusion
- Static route for UI-Kit
Whenever a components needs some special styling, you can find their corresponding definitions inside theme/less/specific/<component>
,
it's best if we can avoid having too much specific styling, but sometimes you just really need it.
Finally, we have a bunch of commands to make your life a tad easier, that you can run through npm run
.
build
: Builds the final CSS/JS files and the UI-Kit Documentation. You should probably use this one.build:app
: Builds the final CSS/JS files without the UI-Kitbuild:stylemark
: Builds the UI-Kit files and also the CSS/JS files but unminifed (do not use those static files in production)i18n:report
: Generates a report of the i18n missing and unused keysi18n:extract
: Same as above, but also automatically adds missing keys to translation filesclean
: Cleans Parcel cache. Use this if you stumble upon weird bugs to start anew.start
: Get to coding with live reload and things