udata customizations for data.gouv.fr
⚙️ Udata customizations for data.gouv.fr made by Etalab ⚙️
Notes on this repo
udata-front requires Python 3.7+ and 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-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
udata.(in|pip)files are used by the CI to stay in sync with
udatarequirements. 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
ex: Build the assets:
cd udata-front npm install inv assets-build
You can list available development commands with:
The front-end theme for the public facing website, is split into two parts :
- The Jinja templates are located inside
- The Less & other sourcefiles for the are located in
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
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
home.html: well, duh.
footer.html: same idea.
raw.html: contains the general html structure exposing a
bodyblock where we can write our page's body.
base.html: contains some extra html structure exposing a
contentblock for our page's content.
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.
svg: 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
- 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
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
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-Kit
build: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 keys
i18n:extract: Same as above, but also automatically adds missing keys to translation files
clean: Cleans Parcel cache. Use this if you stumble upon weird bugs to start anew.
start: Get to coding with live reload and things
Current (in progress)
- Add Cypress front-end tests stub #9
- Add read only mode back on frontend #10
- Fix RGAA criterion 1.2 Each decorative image is ignored by assistive technologies. #13
- Add a request membership action on organization page #12
- Unset vue delimiters used in html templates to prevent injections #11
- Fix temporal coverage order in search results metadata #14
- VueJS multiple mount points with a global event bus #15 #19
- Fix RGAA criterion 12.6 Block of contents from multiple pages can be reached or skipped #21
- :warning: breaking change: Package renamming and new repository #1:
- udata-gouvfr is now udata-front
- Update feedparser following setuptools 58.0.2 release that drops support for
- Show correct number of latest reuses on homepage #3
- Fix next value on login to prevent infinite loop #4 #8
Previous udata-gouvfr changelog
If you're migrating from udata-gouvfr, see previous changelog here
Release history Release notifications | RSS feed
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Hashes for udata_front-1.0.1.dev659-py2.py3-none-any.whl