Package: udata-front
Udata customizations for data.gouv.fr made by EtalabNotes on this repoCompatibilityInstallationTheme development🚀 Getting started🐍 Python development🧱 Installing the python dependencies🚩 Starting the python development server☕ Javascript development🏗 Installing the javascript dependencies💪 Starting the javascript development server👀 Other dev commands🏰 General architecture🚜 Jinja2 templates🚲 Javascript🖼️ Style🛠️ Build tools🏭 Javascript architecture🏔️ Vue mounting👩‍🔬 Tests📖 Read moreNotes on this repoThis is a new version ofudata-gouvfrThis is audataextension, you should read theudata documentationfirst.Compatibilityudata-frontrequires Python 3.7+ andudata.InstallationInstalludata.Remain in the same Python virtual environment
and installudata-front:pipinstalludata-frontCreate a local configuration fileudata.cfgin yourudatadirectory
(or where your UDATA_SETTINGS point out) or modify an existing one as following:PLUGINS=['front']THEME='gouvfr'Theme developmentThe front-end theme for the public facing website, is split into two parts :TheJinjatemplates are located insideudata_front/theme/gouvfr/templates.TheLess,Vue& other sourcefiles for the front-end are located intheme.🚀 Getting startedBefore you start your developper journey, you have to setup your python and/or javascript development tools.It is recommended to have a workspace with the following layout:$WORKSPACE├──fs
├──udata
│├──...
│└──setup.py
├──udata-front
│├──...
│└──setup.py
└──udata.cfgModify your localudata.cfgconfiguration file as following:PLUGINS=['front']THEME='gouvfr'🐍 Python development🧱 Installing the python dependenciesPrepare audata development environment.Note that we're usingpip-toolson this repository too.The following steps use the same Python virtual environment asudata.Installudata-frontin development mode:cdudata-front
pre-commitinstall
pipinstall-e.-rrequirements/test.pip-rrequirements/develop.pipNB: theudata.(in|pip)files are used by the CI to stay in sync withudatarequirements. 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.🚩 Starting the python development serverSimply run the udata project with udata-front loaded as a plugin:cdudata
invserve☕ Javascript development🏗 Installing the javascript dependenciesFirst, you need to useNode(version 16+) on your platform. You should considerinstalling NVMwhich uses the existing .nvmrc.cdudata-front

nvminstall
nvmuse

npminstallAnd voilà ! ✨🆕 Start the storybook serverIf you want to work on Vue or Less files, you can start the storybook server with this command :npmrunstorybookIt allows you to work on the front-end only and evenmocks the back-end responses.You can visit their website tolearn more about storybookandhow to use it.💪 Starting the javascript development serverSimply run this command in the project directory :npmstartThis will start a development server that will listen to changes and automatically rebuild the project when needed.
Note that a webserver is started by Vite (default port is1234), however we will not be using it as our CSS and JS files will be served by Jinja instead. More on that later.👀 Other dev commandsFinally, we have a bunch of commands to make your life a tad easier.You can executeudata-frontspecific tasks from theudata-frontdirectory withinvoke. You can list available development commands with:inv-lExample commands:i18n: Extract translatable stringsi18nc: Compile translationsqa: Run a quality reporttest: Run tests suiteAdditionally, you can run javascript-related commands throughnpm run.build: Builds the final CSS/JS files. You should probably use this one 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 filesstart: Get to coding with live reload and things. Same asnpm run devtest: Runs the Cypress tests. More on that in theTests sectionof this README.If you encounter any merge conflict with your package-lock.json, you can fix it with NPM:npminstall--package-lock-only🏰 General architecture🚜 Jinja2 templatesBecauseudatais written in Python, its templating engine is Jinja 2.
This means that the HTML received by clients is built at runtime, for each request, using templates with{% block %}tags and includes.Those template are responsible for building the pages using layouts and blocks. Here are a few to get started (inudata_front/theme/gouvfr/templates), from less specific to more specific :raw.html: contains the general html structure exposing abodyblock where we can write our page's body. This template is also responsible for including the CSS and JS files.base.html: contains some extra html structure exposing acontentblock for our page's content, and wraps it around the header and footer.header.htmlandfooter.html: standard header and footer block that will appear on each pagehome.html: the home page template (duh)🚲 JavascriptIn order to add some interactivity to the project, we are usingVue 3and some good old VanillaJS.
The JS assets are compiled in a singleindex.jsfile that includes everything for every page. If the bundle size starts to grow a little bit too much, you might need to think about splitting it into separate files for each page.🖼️ StyleWe are using theDSFRto build our front-end components.In addition we have a nice litle set of CSS Utilities to quickly build custom components, inspired by bootstrap, most of its documentation
lives in the css located intheme/less/.Whenever a components needs some special styling, you can find their corresponding definitions insidetheme/less/specific/<component>,
it's best if we can avoid having too much specific styling, but sometimes you just really need it.🛠️ Build toolsThis project usesViteto build and transform our source files into nice bundles for browsers.
Its config can be found in thevite.config.jsfile.Vile does multiple custom things in this project :Transform the.jsfiles into modern Javascript for browsersTransform thelessfiles into modern CSS usingPostCSSCopy the static assets when they change (config is in thevite.config.js)Vite uses package.json version to name files and udata-front uses its version to load the correct one.
If you're udata-front version doesn't match the one loaded in the theme, you may have to do apip install -e .to update the package information.🏭 Javascript architecture🏔️ Vue mountingWe are using the full build of VueJS that includes the compiler in order to compile templates directly in the browser.There is a single VueJS app (inindex.js) that contains every component and plugins.
However, this app is mounted multiple times, on each DOM node containing avuejsclass.This allows us to mount the app only where it's needed, because each subsequent mount is more DOM to compile and thus has an impact on performance. Moreover, mounting to the smallest possible HTML allows us to prevent accidental XSS vulnerability by forbidding users to compile their content with the Vue engine.In order to allow inter-component communication, a global event bus is available in the global app, under the$busvariable.
You can emit events by using$bus.emit('event')and components can listen to events by using$bus.on('event').👩‍🔬 TestsTests are run in a headless browser usingCypress. Test definitions are located in thecypress/integrationdirectory.Writing tests is very easy thanks to its syntax :it("Displays the page title",()=>{cy.get("h1").should("be.visible");});Then, tests can be run using the following command :npmruntestCypress also comes withcypress-axeto allow for accessibility automated testing.Changelog3.5.3 (2024-02-22)Show a map of datasets' spatial coverage#354Fix redirect user to auth page#357Fix tests factories forHarvestSource,backendis now requiredudata#2962Fix schema is not longer adict#361udata#29493.5.2 (2024-02-15)Show a button to mark as no spam a discussion or a message#3523.5.1 (2024-02-05)Fix vue runtime errors#343New featured topic : agriculture#344Create data.gouv.fr-components NPM package and move somegouvfrcomponents to it#324#350Setup storybook for data.gouv.fr-components#3463.5.0, 3.4.0 and 3.3.0 (2024-01-23)ImportantThese versions contain an invalid js build and areyankedfrom pypi.
The update to the next version is mandatory to have a valid js build.Fix dependencies according to udata's Flask-Babel migration#300User pages are back#3383.2.12 (2023-12-15)Fix support menu link#3353.2.11 (2023-12-08)Remove parents, children, etc. from territory views#328Add publishing form#266dependabot/36#331New featured topics : culture and education#332Fix territory sitemap#334Add header-case to validation url#3333.2.10 (2023-12-01)Ignore another ResizeObserver error#321Fixed ol not appearing in descriptions#322Fix copy discussion link#323Add text-transform-none style and use lowercase k as unit#3253.2.9 (2023-11-21)Update build dependencies#309Add read-more to discussions#310New footer with newsletter#311#316Add metric components and hooks#260#313#314Add raise_for_status on captchetat request#3183.2.8 (2023-10-26)Add German translations files and French latest translations#3073.2.7 (2023-10-26)Update testing dependenciesdependabot/30dependabot/22dependabot/23#297#298Fix translate links in footer#301Track participez clicks#302Fix datasets search on the organization page#303Add discoverability indicator form#3043.2.6 (2023-09-01)Add missing quality criterion (all_resources_available)#287Replace linkedin link in footer#292Use the word file instead of resource#291Update certified icon#288Add guides to the menu#290Add resource permalink#286#295Update read-more height ondetailstoggle#294Fix preview style discrepancies#2893.2.5 (2023-07-19)Fix reuse page padding for discussions and reuses section#270Fix dataset oembed links#271Hide CaptchEtat icon loader#272Update guide links#276Redirectpageswhen missing trailing slash#278Add feedback link to header and footer#275Fix actions with scroll inside full-page tabs (e.g. dataset page)#281Add data search form to search#274Upgrade pyyaml dependency to 6.0.1 in deps tree#283Set confirmed_at when creating user in MonComptePro auth#2843.2.4 (2023-06-19)Fix word-wrap for dataset description#254Fiximgfolder not copied#255Add breadcrumbs to pages#258Remove cache around dataset, reuse and organization modify button#256Fix display temporal coverage on dataset page#261Fix tooltip accessibility#259Compute unavailability based on check:available instead of status logic#267Fixdependabot/17anddependabot/18#264. These aren't udata-front vulnerabilities but only impact vite dev server (unused ingouvfrtheme).Update DSFR to 1.9#249Fix tab sequence on dataset page#265Fix button to show closed discussion#253Replace housing venti button by agricultural topic#268Fix header search#2693.2.3 (2023-05-16)NoteThis renames thethemeroot folder toassetsand moves it inside gouvfr theme.
This also updates most references ofudata_front/theme/gouvfrtheme to*to ease the usage of other themes.Movethemetoudata_front/theme/gouvfr#244#252MonComptePro SSO integration#237:New button on login and register pageWhen loging in, the datastore will seek for a coresponding user on udata. If such user does not exist, she will be created.Created user during SSO will not have a password. To use the user without SSO, a password reset procedure must be used.Handle previous format of link to discussions, e.g. from e-mails#241Addlast_updatesort in datasets page#242Fix.fr-btnin.markdown#243Add Matomo event tracking#246New scope for Captchetat piste OAuth#250Usedatetime.utcnowto make sure to handle utc datetimes#2513.2.2 (2023-04-18)New organization page#230#233Update the login form after Flask-Security and WTForms upgrade#224Align reuse sidebar with image#234Show relative date on dataset and resource cards#231Add version in chunk file names for cache invalidation#239Fix RGAA criterion 8.9#1743.2.1 (2023-03-28)Front modifications to display resources schema url field#220Update ventti button url#223Dataset page fixes#219#229Fix "informations" throughout the repo#218fix RGAA criterion 9.3#222New reuse page#210Fixdependabot/10#228Fix links color#2323.2.0 (2023-03-07)Upgrading packages following Flask upgrade to 2.1.2 in udata#207Use feedgenerator for AtomFeed instead of Werkzeug deprecated helpercontextfunctionandcontextfilterfrom Jinja is deprecated and replaced bypass_contextMoveFlask-Themes2dep from udata to udata-front and upgrade to 1.0.0Fix@background-contrast-blue-cumulusLESS variable#2173.1.3 (2023-03-02)WarningRefactor of breadcrumb macro to be easier to use.toolbar_class,breadcrum_class,toolbar_containerandbreadcrumb_baroptions are now removed.
Refactor of dataset components names to match new sizes : XS (previously card), SM, MD, LG (previously search-result).dataset.display.after-descriptionhook is now really after the description. Use newdataset.display.after-fileshook for previous position.Make newsletter url configurable#205Show a warning notice when JavaScript is disabled or failed to execute#206Update lighthouse to fix security issues#211New dataset page#181Update vue-toaster dependency to avoid reported vulnerabilities#2153.1.2 (2023-02-06)Use brand color for button styletertiary-no-outline#199Use computed dates for resources and datasets#201Fix setuptools version used in CI#202Move Pagination to@etalab/udata-front-plugin-helpersand add tests#2003.1.1 (2023-01-20)Fix vanilla js scripts#196Remove useless published date in resource model#1983.1.0 (2023-01-18)NoteThis changes the build system from Parcel to Vite.
This also adds a way for udata plugin to register their own vue components
and to display them in places chosen by the current themeAdd resource exploration preview#169#180#183Fix RGAA criterion 9.2#178Add i18n on size suffix#184Add theme view for mail change#1923.0.1 (2022-12-15)Fix Api Representation for media after CaptchEtat integration#173Add archived and private badges to dataset search results and update card style#170Fix banner links underlined twice#171Fix margins for dataset cards#176Fix text for datasets button in org page#172Add Portuguese translations#167Add email address to shared data on oauth authorize page#1753.0.0 (2022-11-14):warning:Breaking changeUse and display harvest metadata introduced in udata 5#168Improve search history#1622.0.13 (2022-11-02)Switch fromFlask-restplusto its forkFlask-rest-x#165Add CaptchEtat integration#159new environment variables : CAPTCHETAT_BASE_URL, CAPTCHETAT_OAUTH_BASE_URL, CAPTCHETAT_CLIENT_ID and CAPTCHETAT_CLIENT_SECRETFix lighthouse reported errors#1582.0.12 (2022-10-19)Fix i18n errors for/es#156Update API card#160Create new search results component#157Remove quality score banner#163Add energy on home venti button#164Cache behavior changes#154:Organization and Reuse display page are now cached.Cache keys now embed thelast_modifiedobject attribute. This automatically invalidates the cache when modifying the object.2.0.11 (2022-09-02)Fix discussions text wrap#145Update Venti buttons#146:warning: @blue-470 and @blue-500 are removedFix z-index value in dataset search-result template#153#155Fix RGAA criterion 8.2#1472.0.10 (2022-08-11)Fix dataset search result link to organization#1502.0.9 (2022-08-10)Fix selected tag with wrong color#1492.0.8 (2022-08-09)Add lighthouse in CircleCI#108Fix RGAA criterion 8.2#130Add quality score#1352.0.7 (2022-07-20)Fix window.dsfr.register error#138Fix featured toggle#137Iterate on search results and cards#1362.0.6 (2022-07-08)Fix RGAA criterion 7.5#118Remove map related stuff#124Fix clear button now shown on multiselect#125Add aria-current to breadcumbs#121Add missing default og:image#127Fix 500 on favicon in admin#126Update search results#110#134Fix test error with long reuse title#133Removed manifest logic#1292.0.5 (2022-06-14)Add new menu items and change edito pages slug#113#120Replace news by release notes in footer#117Use DSFR container and remove custom ones#1112.0.4 (2022-06-09)Add accessibility compliance status in footer#114Fix SVG display issue#1162.0.3 (2022-06-03)Update search pages#95Add support for HTML in posts#106Fix RGAA criterion 1.1#104Fix RGAA criterion 10.4#103Add geographical page on home venti button#109Fix RGAA criterion 11.10#102Update DSFR to 1.5.1#107:warning: SVG in JS must usebundle-text:prefix now2.0.2 (2022-04-11)Add harvest catalog view#100Add elections on home venti button#1012.0.1 (2022-04-05)Add support for HTML static pages and more DSFR components#96Fix mobile bugs after header changes#99Fix organizationCertified error when organization is null#982.0.0 (2022-03-30)Breaking change:warning: Use refactored search endpoints from udata#601.2.5 (2022-03-29)Add a transport banner hook#94Add button on organization page to see all of its datasets#93Format home page numbers#90Let browsers decide what cursor to use#89Replace see more button on home page with link#91Replace Suggest with accessible combobox#881.2.4 (2022-03-01)Deprecation: Topics are now deprecated and will be removed in upcoming releases.Fix<read-more>component height when it contains<img>#65#85Add featured button component back for sysadmin#79Update reuse style#52#81Add banner to broken user page#76:warning: Button changes#75Remove underline from button hover.btn,.btn-secondaryand.btn-secondaryare removed. Use DSFR and.fr-btn--secondary-{color}instead..tagsand.tagare removed. Use DSFR ones instead..dropdownis removed. Use DSFR select instead.Fix duplicate request on dataset search#7086Add banner for harvested dataset#73Change github footer link to the tickets repository#80Remove banner for the new search beta on datasets search page#83Fix RGAA criterion 7.3#82Use avatar_url for owner#84Update resources style#781.2.3 (2022-01-27)Fix modals not working#71Fix auth messages not shown from query parameter#68Fix RGAA criterion 10.14#72Fix thread header wrapped when title is too long#641.2.2 (2022-01-21)Fix latest modification date for dataset and resources on dataset page#62Fix hidden datasets shown on Home and Reuses#67Add temporal coverage back to dataset page#63:warning: @bg-beige is remove, use @background-contrast-grey insteadUpdate colors to fix accessibility issues#56Fix missing checkbox using DSFR checkboxes#691.2.1 (2022-01-11)Change urls in Participate banner to relevant etalab guides#53Add topic information on reuse metadata and add a filter by topic on reuse search page#50Update DSFR to v1.2.1#45:warning:.btn-tabis removed, use.fr-taginstead571.2.0 (2021-12-10)Add a banner for the new search beta on datasets search page#43:warning: Remove Issues logic in accordance with udata#42:warning: @grey-100 is now#e5e5e5Standardize organization page similar to dataset and reuse pages#40Fix RGAA criterion 10.7 Each element focusable has a visible focus#46Fix Stylemark generation to include JS files and properly include other assets#33Redirect about page to "ressources" page in menu#48Standardize article discussions and quick fixes to discussions#41#51Fix error on search request cancelation#441.1.2 (2021-11-23)Standardize reuse page similar to dataset page navigation quickfixes#31Move template hook logic to udata and add oauth hooks#29Add resources pagination dataset page and use DSFR pagination#30#37Style oauth page#34Fix horizontal scroll on mobile#38Fix gouvfr static path#391.1.1 (2021-10-22)Update README to reflect front changes#17Add Participate banner in the footer#24Fix min-height used in posts images to center them#23Update dataset page with navigation quickfixes and add DSFR components#18Implement feedbacks on quickfixes#261.1.0 (2021-10-12)Add Cypress front-end tests stub#9Add read only mode back on frontend#10Fix RGAA criterion 1.2 Each decorative image is ignored by assistive technologies.#13Add a request membership action on organization page#12Unset vue delimiters used in html templates to prevent injections#11Fix temporal coverage order in search results metadata#14VueJS multiple mount points with a global event bus#15#19Fix RGAA criterion 12.6 Block of contents from multiple pages can be reached or skipped#211.0.0 (2021-09-16):warning:breaking change: Package renaming and new repository#1:udata-gouvfr is now udata-frontUpdate feedparser following setuptools 58.0.2 release that drops support foruse_2to3#6Show correct number of latest reuses on homepage#3Fix next value on login to prevent infinite loop#4#8Previous udata-gouvfr changelogIf you're migrating from udata-gouvfr, see previous changeloghere