{"id":22481616,"url":"https://github.com/anct-cartographie-nationale/client-application","last_synced_at":"2025-08-02T16:30:59.573Z","repository":{"id":37408099,"uuid":"485857196","full_name":"anct-cartographie-nationale/client-application","owner":"anct-cartographie-nationale","description":"💻 Client pour l'affichage de la cartographie nationale de l’offre de médiation numérique dans un navigateur web.","archived":false,"fork":false,"pushed_at":"2024-10-17T16:08:32.000Z","size":16474,"stargazers_count":3,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-17T04:36:35.772Z","etag":null,"topics":["anct","angular","betagouv","client","gouvernement","mediation-numerique"],"latest_commit_sha":null,"homepage":"https://cartographie.societenumerique.gouv.fr","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anct-cartographie-nationale.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-26T16:05:05.000Z","updated_at":"2024-10-11T07:37:11.000Z","dependencies_parsed_at":"2023-09-26T17:32:42.522Z","dependency_job_id":"f4daca0a-b6a2-4b93-b7fd-758f3620eebe","html_url":"https://github.com/anct-cartographie-nationale/client-application","commit_stats":{"total_commits":1023,"total_committers":14,"mean_commits":73.07142857142857,"dds":0.6422287390029325,"last_synced_commit":"fa3500176dbc86c5ad8b47de50003e76ec991cd9"},"previous_names":[],"tags_count":61,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anct-cartographie-nationale%2Fclient-application","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anct-cartographie-nationale%2Fclient-application/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anct-cartographie-nationale%2Fclient-application/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anct-cartographie-nationale%2Fclient-application/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anct-cartographie-nationale","download_url":"https://codeload.github.com/anct-cartographie-nationale/client-application/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228491965,"owners_count":17928719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["anct","angular","betagouv","client","gouvernement","mediation-numerique"],"created_at":"2024-12-06T16:14:38.999Z","updated_at":"2025-08-02T16:30:59.555Z","avatar_url":"https://github.com/anct-cartographie-nationale.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Client pour la cartographie nationale de l’offre de médiation numérique\n\n## À propos\n\nCe client permet l'affichage de la [cartographie nationale de l’offre de médiation numérique](https://cartographie.societenumerique.gouv.fr) dans un navigateur web, il est construit à partir des éléments présents dans la bibliothèque pour la cartographie de l’offre de médiation numérique.\n\n## Table des matières\n\n- 🪧 [À propos](#à-propos)\n- 📦 [Prérequis](#prérequis)\n- 🚀 [Installation](#installation)\n- 🛠️ [Utilisation](#utilisation)\n- 🤝 [Contribution](#contribution)\n- 🏗️ [Construit avec](#construit-avec)\n- 📚 [Documentation](#documentation)\n- 🏷️ [Gestion des versions](#gestion-des-versions)\n- 📝 [Licence](#licence)\n\n## Prérequis\n\n- [Git](https://git-scm.com/) : Système de contrôle de versions distribué d'un ensemble de fichiers\n- [Node](https://nodejs.org/) : Environnement d'exécution pour Javascript\n- [Yarn](https://yarnpkg.com/) : Gestionnaire de paquets pour les produits développés dans des environnements Node\n\n\u003e Node et Yarn peuvent être installés via [nvm](https://github.com/nvm-sh/nvm) qui permet d'obtenir et d'utiliser rapidement différentes versions de Node via la ligne de commande.\n\n## Installation\n\n### Mise en place des sources\n\nCe projet a été construit dans un espace de travail Angular, pour fonctionner correctement, il est nécessaire de le cloner dans l'environnement prévu à cet effet :\n\n- Suivre la procédure d'installation du projet [Client Base](https://github.com/anct-cartographie-nationale/client-base)\n- Puis cloner le dépôt en local dans le dossier `projects` : `git clone git@github.com:anct-cartographie-nationale/client-application.git`\n\n### Installer Husky\n\n[Husky](https://typicode.github.io/husky) est un outil de gestion des hooks git pour effectuer des tâches automatiques\n\nMise en place de Husky dans le dossier du projet `projects/client-application` :\n\n```bash\nnpx husky install\n```\n\nRendre exécutable les fichiers qui contiennent les hooks :\n\n```bash\nchmod a+x .husky/commit-msg\nchmod a+x .husky/pre-commit\n```\n\n## Utilisation\n\nCes commandes servent dans un contexte de développement de l'application et doivent être exécutées depuis la racine de l'espace de travail, c'est-à-dire depuis le dossier parent du dossier `projects`.\n\n### Lancement\n\nExécuter `yarn start`, puis naviguer vers `http://localhost:4200/`.\n\n### Construction\n\nExécuter `yarn build client-application` pour construire le projet. Les fichiers de sortie sont écrits dans le dossier `dist/`.\n\n### Test\n\nExécuter `yarn test client-application` pour tester le projet.\n\n### ESLint\n\nExécuter `yarn lint client-application` pour une analyse statique des fichiers `.ts` du projet.\n\n### StyleLint\n\nExécuter `yarn stylelint \"projects/client-application/**/*.scss\"` pour une analyse statique des fichiers `.scss` du projet.\n\n### Commit lint\n\nExécuter `yarn commitlint --from HEAD~1` pour valider la syntaxe du dernier commit.\n\n### Prettier\n\nExécuter `yarn prettier` pour mettre à niveau la syntaxe de l'ensemble des fichiers du projet.\n\n### Ajouter des icônes au projet\n\n- Aller sur [Remixicon](https://remixicon.com/)\n- Cliquer sur le dossier à droite de la barre de recherche, puis importer la [collection du projet](./src/assets/fonts/remixicon/collection.remixicon) en cliquant sur la flèche vers le bas dans la modale.\n- Rechercher et sélectionner les icônes à ajouter\n- Une fois les ajouts terminés\n  - Cliquer sur le dossier à droite de la barre de recherche pour télécharger le nouveau fichier de collection en cliquant sur la flèche vers le haut, le renommer `collection.remixicon`, puis remplacer l'ancienne version [dans le dossier des fonts](./src/assets/fonts/remixicon/)\n  - Sans quitter la modale qui affiche la collection, télécharger les fonts en cliquant sur le bouton correspondant en bas à droite, puis extraire les fichiers de l'archive pour les copier [dans le dossier des fonts](./src/assets/fonts/remixicon/) excepté les fichiers `remixicon.css` et `remixicon.less`\n  - Ajouter les nouveaux `codepoint` à la fin du fichier [icons.scss](./src/scss/components/_icons.scss) disponibles dans le fichier `remixicon.css`\n  - Relancer le serveur pour appliquer les changements\n\n## Contribution\n\n### Nommage des branches\n\n- Avant de créer une nouvelle branche de travail, récupérer les dernières modifications disponibles sur la branche `main`\n- La nouvelle branche de travail doit ête préfixée par `build/`, `chore/`, `ci/`, `docs/`, `feat/`, `fix/`, `perf/`, `refactor/`, `revert/`, `style/` ou `test/` en fonction du type de modification prévu, pour plus de détails à ce sujet, consulter [Conventional Commits cheat sheet](https://kapeli.com/cheat_sheets/Conventional_Commits.docset/Contents/Resources/Documents/index)\n- La branche portant la version à publier est `publish` aucun commit ne doit être fait sur cette branche.\n\n### Commits\n\n#### Convention\n\nLes commits de ce repository doivent respecter la syntaxe décrite par la spécification des [Commits Conventionnels](https://www.conventionalcommits.org/fr)\n\n#### Signature\n\nLa branche `main`, ainsi que l'ensemble des branches de travail avec un préfixe valide requièrent que les commits soient signés :\n\n- La documentation de GitHub indique comment [configurer la signature des commits](https://docs.github.com/en/enterprise-server@3.5/authentication/managing-commit-signature-verification/about-commit-signature-verification)\n- Les utilisateurs de [keybase](https://keybase.io/) peuvent [signer leurs commits avec leur clé GPG sur Keybase](https://stephenreescarter.net/signing-git-commits-with-a-keybase-gpg-key/)\n\n### Publier sur la branche principale\n\n- La branche principale est `main`, il n'est pas possible de publier en faisant un `push` depuis un dépôt local\n- Il faut forcément créer une nouvelle branche de travail avec l'un préfixe autorisé\n- À chaque publication sur une branche de travail, le workflow `Validate feature` sur [github actions](https://github.com/anct-cartographie-nationale/client-application/actions) vérifie\n  - Qu'il est possible de créer un build sans erreur\n  - Que la syntaxe correspond bien à ce qui est [défini par Prettier](https://github.com/anct-cartographie-nationale/client-base/blob/main/.prettierrc.json)\n  - Que le code écrit en TypeScript respecte les conventions décrites par les [règles ESLint](https://github.com/anct-cartographie-nationale/client-base/blob/main/.eslintrc.json)\n  - Que le style écrit en SCSS respecte les conventions décrites par les [règles Standard](https://github.com/anct-cartographie-nationale/client-base/blob/main/.stylelintrc.json)\n  - Que les messages des commits suivent le standard établi par [Conventional Commits](https://www.conventionalcommits.org/fr)\n- Une fois les développements terminés, il faut créer une [pull request](https://github.com/anct-cartographie-nationale/client-application/pulls) avec la banche de travail comme origin et la branche `main` comme destination.\n- La pull request ne peut être fusionné que si :\n  - Les étapes du workflow `Validate feature` sont valides\n  - Les fichiers modifiés ont été revus par au moins une personne\n  - Les commits ajoutés sont signés\n- La branche de travail est supprimée automatiquement une fois qu'elle a été fusionnée\n\n### Déployer\n\n#### Sur l'environnement de production\n\nLorsqu'une branche est fusionnée avec `main`, cela déclenche automatiquement la publication du build sur l'espace dédié à la production ainsi que l'invalidation du cache sur le CDN.\n\n#### Sur le registre npm\n\nPour publier une nouvelle version sur le registre npm, il faut que le numéro de version cible soit mis à jour dans le fichier `package.json`, que le commit de la version à publier porte un tag de la forme `vX.Y.Z` correspondant au numéro de version présent dans `package.json`, et que le changlog soit publier dans une release associé au tag de la version avant de procéder à la publication sur le registre [@gouvfr-anct/cartographie-nationale](https://www.npmjs.com/package/@gouvfr-anct/cartographie-nationale).\n\nCe processus est automatisé par l'utilitaire `semantic-release` exécuté par le workflow `release-and-publish`, pour le déclencher avec la bonne version à publier, il faut :\n\n- Récupérer la version à publier depuis la branche `main`\n- Récupérer ou créer la branche `publish`\n- Faire un merge de `main` dans `publish` : ceci permet de mettre à jour la branche `publish` tout en concervant les tags qui ont été produits sur la branche `publish` lors du processus de publication.\n- Pousser la branche `publish` `git push origin publish` conduit à l'exécution du workflow `release-and-publish` et donc à la publication d'une nouvelle version via l'utilitaire `semantic-release`\n\n## Construit avec\n\n### langages \u0026 Frameworks\n\n- [TypeScript](https://www.typescriptlang.org/) est un langage open source construit à partir de JavaScript\n- [Angular](https://angular.io/) est une boîte à outils open source pour construire des clients web\n- [Remixicon](https://remixicon.com/) est un ensemble de symboles open-source élaborés pour les designers et les développeurs.\n\n### Outils\n\n#### CLI\n\n- [Jest](https://jestjs.io/) est une boîte à outils pour écrire des tests automatisés en JavaScript\n- [Eslint](https://eslint.org/) est un analyseur statique de JavaScript\n- [Stylelint](https://stylelint.io/) est un analyseur statique de fichiers de style (css, scss, etc.)\n- [Prettier](https://prettier.io/) est un magnificateur de code source en JavaScript\n\n#### CI\n\n- [Github Actions](https://docs.github.com/en/actions) est l'outil d'intégration et de déploiement continu intégré à GitHub\n  - L'historique des déploiements est disponible [sous l'onglet Actions](https://github.com/anct-cartographie-nationale/client-application/actions/)\n- Secrets du dépôt :\n  - `AWS_ACCESS_KEY_ID` : Clé d'accès AWS du compte `cartographie-nationale.client.ci`\n  - `AWS_SECRET_ACCESS_KEY` : Secret associé à la clé d'accès à AWS du compte `cartographie-nationale.client.ci`\n  - `AWS_S3_BUCKET` : Identifiant de l'espace sur AWS S3 dans lequel est publié le build du projet pour un accès public\n  - `AWS_CLOUDFRONT_DISTRIBUTION_ID` : Identifiant de la distribution CloudFront qui est le CDN par lequel le site est exposé sur internet\n  - `NODE_AUTH_TOKEN` : Clé d'accès NPM pour publier sur l'organisation [@gouvfr-anct](https://www.npmjs.com/org/gouvfr-anct)\n  - `TF_API_TOKEN` : Clé d'accès Terraform (Team API Token) pour publier les environments éphémères gérés par Terraform\n\n#### Déploiement\n\n##### Sur l'environnement de production\n\n- L'infrastructure de déploiement est décrite avec Terraform dans les dépôts :\n  - [Client Infrastructure](https://github.com/anct-cartographie-nationale/client-infrastructure)\n  - [Network Infrastructure](https://github.com/anct-cartographie-nationale/network-infrastructure)\n- [AWS](https://aws.amazon.com/) est la plateforme de services Cloud proposée par Amazon.\n  - Compte de déploiement : `cartographie-nationale.client.ci`\n  - Groupe : `publisher.client`\n  - Environnement cible : https://cartographie.societenumerique.gouv.fr\n\n##### Sur le registre npm\n\n- [npm](https://www.npmjs.com/) est le registre de référence pour les paquets Node.\n  - Organisation : [@gouvfr-anct](https://www.npmjs.com/org/gouvfr-anct)\n  - Paquet : [@gouvfr-anct/cartographie-nationale](https://www.npmjs.com/package/@gouvfr-anct/cartographie-nationale)\n\n## Documentation\n\n### Table des matières\n\n- [Intégration dans une page HTML](#intégration-dans-une-page-HTML)\n- [Personnalisation](#personnalisation)\n- [Utilisation partielle](#utilisation-partielle)\n\n### Intégration dans une page HTML\n\nLa Cartographie Nationale intègre dès le début de sa conception la possibilité d'être intégrée dans n'importe quelle page HTML en 4 étapes.\n\nL'éditeur en ligne de [w3schools](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro) permet de tester cela facilement :\n\n1. Mise en place du chemin de référence\n\n```html\n...\n\u003chead\u003e\n  \u003ctitle\u003ePage Title\u003c/title\u003e\n  \u003cbase href=\"/\" /\u003e\n\u003c/head\u003e\n...\n```\n\n2. Lien vers le style `css` pour la mise en forme\n\n```html\n...\n\u003chead\u003e\n  \u003ctitle\u003ePage Title\u003c/title\u003e\n  \u003cbase href=\"/\" /\u003e\n  \u003clink href=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/styles.css\" rel=\"stylesheet\" /\u003e\n\u003c/head\u003e\n...\n```\n\n3. Liens vers les scripts `js` pour l'interactivité\n\n```html\n...\n\u003cbody\u003e\n  \u003ch1\u003eMy First Heading\u003c/h1\u003e\n  \u003cp\u003eMy first paragraph.\u003c/p\u003e\n\n  \u003cscript\n    src=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/mediation-numerique.js\"\n    type=\"module\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n...\n```\n\n4. Affichage avec les éléments `\u003cfr-mediation-numerique-conteneur\u003e` et `\u003cfr-mediation-numerique\u003e`\n\n```html\n...\n\u003cbody\u003e\n  \u003cfr-mediation-numerique-conteneur\u003e\n    \u003cfr-mediation-numerique\n      source=\"https://cartographie.societenumerique.gouv.fr/api/v0/lieux-inclusion-numerique?adresse[beginsWith][code_insee]=14,27,50,61,76\"\u003e\u003c/fr-mediation-numerique\u003e\n  \u003c/fr-mediation-numerique-conteneur\u003e\n\n  \u003cscript\n    src=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/mediation-numerique.js\"\n    type=\"module\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n...\n```\n\nEn indiquant la source, il est possible de filtrer les lieux de médiation numérique, dans cet exemple, seuls les lieux des départements 14, 27, 50, 61 et 76 sont affichés, ce qui correspond aux lieux de médiation numérique de Normandie.\n\nLa version finale devrait ressembler à celà :\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003ePage Title\u003c/title\u003e\n    \u003cbase href=\"/\" /\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/styles.css\" rel=\"stylesheet\" /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cfr-mediation-numerique-conteneur\u003e\n      \u003cfr-mediation-numerique\n        source=\"https://cartographie.societenumerique.gouv.fr/api/v0/lieux-inclusion-numerique?adresse[beginsWith][code_insee]=14,27,50,61,76\"\u003e\u003c/fr-mediation-numerique\u003e\n    \u003c/fr-mediation-numerique-conteneur\u003e\n\n    \u003cscript\n      src=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/mediation-numerique.js\"\n      type=\"module\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nCliquez sur `Run \u003e` pour voir la cartographie s'afficher.\n\n### Personnalisation\n\n#### Titre et logo\n\nExemple :\n\n```html\n\u003cfr-mediation-numerique-conteneur titre=\"Hub B\" logo=\"https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo.svg\"\u003e\n  \u003cfr-mediation-numerique\n    source=\"https://cartographie.societenumerique.gouv.fr/api/v0/lieux-inclusion-numerique?adresse[beginsWith][code_insee]=14,27,50,61,76\"\u003e\u003c/fr-mediation-numerique\u003e\n\u003c/fr-mediation-numerique-conteneur\u003e\n```\n\n#### Illustration svg orientation\n\nIl est possible d'afficher l'illustration correspondante à sa région.\n\nLes valeurs disponibles sont :\n\n- antille-guyane\n- auvergne-rhone-alpe\n- bourgogne-franche-conte\n- bretagne\n- centre-val-de-loire\n- corse\n- france-et-outremer\n- grand-ouest\n- hauts-de-france\n- ile-de-france\n- normandie\n- nouvelle-aquitaine\n- occitanie\n- paca\n- pays-de-la-loire\n- st-martin-guadeloupe-martinique\n\nLa valeur par défaut est `france-et-outremer`.\n\nExemple:\n\n```html\n\u003cfr-mediation-numerique-conteneur\u003e\n  \u003cfr-mediation-numerique\n    illustration=\"france-et-outremer\"\n    source=\"https://cartographie.societenumerique.gouv.fr/api/v0/lieux-inclusion-numerique?adresse[beginsWith][code_insee]=14,27,50,61,76\"\u003e\u003c/fr-mediation-numerique\u003e\n\u003c/fr-mediation-numerique-conteneur\u003e\n```\n\n#### Source de données\n\nPour utiliser une autre source, il faut préciser une url qui fournit les données conformes au [schéma de données des lieux de médiation numérique](https://lamednum.coop/schema-de-donnees-des-lieux-de-mediation-numerique), nous publions régulièrement des données compatibles sur [data.gouv, dans l'organisation _Cartographie Nationale des lieux de médiation numérique_](https://www.data.gouv.fr/fr/organizations/cartographie-nationale-des-lieux-de-mediation-numerique/). N'hésitez pas à nous contacter pour faire apparaître vos données dans cette liste.\n\nExemple avec les données du hub Hinaura récupérées depuis data.gouv :\n\n```html\n\u003cfr-mediation-numerique-conteneur\u003e\n  \u003cfr-mediation-numerique\n    source=\"https://www.data.gouv.fr/fr/datasets/r/55eea24c-be8c-47f9-9c4a-77399d346fbd\"\u003e\u003c/fr-mediation-numerique\u003e\n\u003c/fr-mediation-numerique-conteneur\u003e\n```\n\n#### Localisation initiale\n\nPar défaut la carte est centrée sur le milieu de la France avec un niveau de zoom qui permet d'afficher le territoire métropolitain, il est possible de préciser la latitude et la longitude sur laquelle la carte doit être centrée ainsi que le niveau de zoom.\n\nExemple :\n\n```html\n\u003cfr-mediation-numerique-conteneur\u003e\n  \u003cfr-mediation-numerique latitude=\"45.515833\" longitude=\"4.538056\" zoom=\"8\"\u003e\u003c/fr-mediation-numerique\u003e\n\u003c/fr-mediation-numerique-conteneur\u003e\n```\n\n- Il est possible de récupérer la latitude et la longitude sur [openStreetMap](https://www.openstreetmap.org/node/3228260561) en recherchant une localité\n- Le zoom doit être une valeur entière comprise entre 0 et 20\n- Aussitôt affichée, la carte part de cette position initiale pour encadrer les marqueurs affichés issue de la source de donnée\n\n#### Couleur\n\nIl est possible de changer certaines couleurs utilisées par la cartographie, pour cela il faut remplacer le style par une alternative comprenant les modifications des couleurs, notre outil disponible sur [GitHub](https://github.com/) permet de faire cela :\n\n- [Créer un compte GitHub](https://github.com/signup?ref_cta=Sign+up) si besoin\n- Récupérer les sources de la cartographie [avec l'aide d'un `Fork`](https://github.com/anct-cartographie-nationale/client-application/fork) puis cliquer sur le bouton vert pour créer le `Fork`\n- Une fois l'opération terminée, cliquer sur l'onglet `Actions` en haut de la page\n- Autoriser l'utilisation des `Workflows`, c'est cela qui va permettre de modifier le fichier de style\n- Cliquer sur `Generate custom style` dans la liste à gauche\n- Cliquer sur le bouton `Run workflow` à droite, vous devez entrer une valeur pour `Primary Color` avant de cliquer sur le bouton `Run workflow` vert, la valeur de la couleur doit avoir cette forme : `#712cf9`, sans oublier le `#`\n- Patienter quelques instants puis cliquer sur la tâche nommée `Generate custom style` dès qu'elle apparaît\n- Le fichier est généré au bout de quelques minutes, lorsque c'est terminé, un `Artifact` nommé `build` apparaît dans la liste en bas, cliquer dessus pour le télécharger puis décompresser l'archive `build.zip`, qui contient uniquement le fichier `style.css`\n- Idéalement il faudrait héberger correctement le fichier `style.css` avec le reste des fichiers du site, par exemple dans un dossier `assets/`, il faudrait alors remplacer le contenu de `\u003clink /\u003e` vers ce chemin :\n  ```html\n  \u003chead\u003e\n    \u003ctitle\u003ePage Title\u003c/title\u003e\n    \u003cbase href=\"/\" /\u003e\n    \u003clink href=\"/assets/style.css\" rel=\"stylesheet\" /\u003e\n  \u003c/head\u003e\n  ```\n  Mais pour aller au bout de cet exemple, une autre méthode permet de renseigner directement le style dans la page html que nous sommes en train d'éditer, pour cela il faut ouvrir le fichier `style.css` avec le programme `notepad` sur Windows, copier l'intégralité du contenu et le coller dans l'emplacement `\u003cstyle\u003e\u003c/style\u003e`\n  ```html\n  \u003chead\u003e\n    \u003ctitle\u003ePage Title\u003c/title\u003e\n    \u003cbase href=\"/\" /\u003e\n    \u003cstyle\u003e\n      Remplacer ce texte par le contenu du fichier style.css (@charset \"UTF-8\" etc.)\n    \u003c/style\u003e\n  \u003c/head\u003e\n  ```\n\n#### Exemple complet de personnalisation\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003ePage Title\u003c/title\u003e\n    \u003cbase href=\"/\" /\u003e\n    \u003cstyle\u003e\n      @charset \"UTF-8\";:root{...\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cfr-mediation-numerique-conteneur\n      titre=\"Médiation numérique à Bessenay\"\n      logo=\"https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo.svg\"\u003e\n      \u003cfr-mediation-numerique\n        source=\"https://www.data.gouv.fr/fr/datasets/r/55eea24c-be8c-47f9-9c4a-77399d346fbd\"\n        latitude=\"45.77647396140311\"\n        longitude=\"4.55431157343317\"\n        zoom=\"12\"\u003e\u003c/fr-mediation-numerique\u003e\n    \u003c/fr-mediation-numerique-conteneur\u003e\n    \u003cscript\n      src=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/mediation-numerique.js\"\n      type=\"module\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Utilisation partielle\n\nIl est également possible de n'utiliser que certains sous-ensembles : en enlevant la barre de navigation et le pied de page, en utilisant seulement la cartographie ou seulement l'orientation. Cela peut demander un effort technique supplémentaire, mais permet une meilleure intégration dans un environnement déjà existant.\n\n#### Enlever la barre de navigation et le pied de page\n\nL'élément `\u003cfr-mediation-numerique-conteneur\u003e` gère l'affichage de la barre de navigation et du pied de page, mais également l'affichage en plein écran. En enlevant cet élément la barre de navigation et le pied de page disparaissent, mais il faut compenser le plein écran en ajoutant `class=\"vh-100\"` sur l'élément `\u003cbody\u003e` :\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003ePage Title\u003c/title\u003e\n    \u003cbase href=\"/\" /\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/styles.css\" rel=\"stylesheet\" /\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"vh-100\"\u003e\n    \u003cfr-mediation-numerique\n      titre=\"Médiation numérique à Bessenay\"\n      logo=\"https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo.svg\"\u003e\u003c/fr-mediation-numerique\u003e\n\n    \u003cscript\n      src=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/mediation-numerique.js\"\n      type=\"module\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nEn l'absence de l'élément `\u003cfr-mediation-numerique-conteneur\u003e`, les configurations `titre` et `logo` peuvent être reportées sur l'élément `\u003cfr-mediation-numerique\u003e` (ces informations apparaissent dans le parcours d'orientation) :\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003ePage Title\u003c/title\u003e\n    \u003cbase href=\"/\" /\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/styles.css\" rel=\"stylesheet\" /\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"vh-100\"\u003e\n    \u003cfr-mediation-numerique\u003e\u003c/fr-mediation-numerique\u003e\n\n    \u003cscript\n      src=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/mediation-numerique.js\"\n      type=\"module\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### Utiliser seulement la cartographie\n\nPour n'importer que les sources strictement nécessaires à ce mode, il faut remplacer le script `mediation-numerique.js` par `cartographie.js` :\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003ePage Title\u003c/title\u003e\n    \u003cbase href=\"/\" /\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/styles.css\" rel=\"stylesheet\" /\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"vh-100\"\u003e\n    \u003cscript\n      src=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/cartographie.js\"\n      type=\"module\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIl est alors possible d'utiliser l'élément `\u003cfr-mediation-numerique-cartographie\u003e\u003c/fr-mediation-numerique-cartographie\u003e` :\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003ePage Title\u003c/title\u003e\n    \u003cbase href=\"/\" /\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/styles.css\" rel=\"stylesheet\" /\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"vh-100\"\u003e\n    \u003cfr-mediation-numerique-cartographie\u003e\u003c/fr-mediation-numerique-cartographie\u003e\n    \u003cscript\n      src=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/cartographie.js\"\n      type=\"module\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nLes attributs de personnalisations suivants, présentés dans la section précédente sont disponibles : `zoom`, `latitude`, `longitude`, `source` :\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003ePage Title\u003c/title\u003e\n    \u003cbase href=\"/\" /\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/styles.css\" rel=\"stylesheet\" /\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"vh-100\"\u003e\n    \u003cfr-mediation-numerique-cartographie\n      source=\"https://api.conseiller-numerique.gouv.fr/permanences\"\n      latitude=\"45.77647396140311\"\n      longitude=\"4.55431157343317\"\n      zoom=\"12\"\u003e\u003c/fr-mediation-numerique-cartographie\u003e\n    \u003cscript\n      src=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/cartographie.js\"\n      type=\"module\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nS'il existe une autre page dans laquelle un outil capable d'effectuer un parcours d'orientation est disponible, il est possible d'activer le bouton `Modifier les critères d'orientation` en fournissant un lien avec l'attribut `lien-orientation` :\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003ePage Title\u003c/title\u003e\n    \u003cbase href=\"/\" /\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/styles.css\" rel=\"stylesheet\" /\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"vh-100\"\u003e\n    \u003cfr-mediation-numerique-cartographie\n      source=\"https://api.conseiller-numerique.gouv.fr/permanences\"\n      latitude=\"45.77647396140311\"\n      longitude=\"4.55431157343317\"\n      zoom=\"12\"\n      lien-orientation=\"https://cartographie.societenumerique.gouv.fr/orientation\"\u003e\u003c/fr-mediation-numerique-cartographie\u003e\n    \u003cscript\n      src=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/cartographie.js\"\n      type=\"module\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nLes paramètres sélectionnés lors du parcours d'orientation sont fournis sous forme de paramètre d'url, par exemple `?date_ouverture=2022-08-17\u0026ouvert_actuellement=true`.\n\n\u003e Il n'est pas possible d'utiliser la barre de navigation dans ce mode\n\n#### Utiliser seulement l'orientation\n\nPour n'importer que les sources strictement nécessaires à ce mode, il faut remplacer le script `mediation-numerique.js` par `orientation.js` :\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003ePage Title\u003c/title\u003e\n    \u003cbase href=\"/\" /\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/styles.css\" rel=\"stylesheet\" /\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"vh-100\"\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/orientation.js\" type=\"module\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIl est alors possible d'utiliser l'élément `\u003cfr-mediation-numerique-orientation\u003e\u003c/fr-mediation-numerique-orientation\u003e` :\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003ePage Title\u003c/title\u003e\n    \u003cbase href=\"/\" /\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/styles.css\" rel=\"stylesheet\" /\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"vh-100\"\u003e\n    \u003cfr-mediation-numerique-orientation\u003e\u003c/fr-mediation-numerique-orientation\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/orientation.js\" type=\"module\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nLes attributs de personnalisations suivants, présentés dans la section précédente sont disponibles : `logo`, `titre`, `source`, `illustration` :\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003ePage Title\u003c/title\u003e\n    \u003cbase href=\"/\" /\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/styles.css\" rel=\"stylesheet\" /\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"vh-100\"\u003e\n    \u003cfr-mediation-numerique-orientation\n      source=\"https://api.conseiller-numerique.gouv.fr/permanences\"\n      titre=\"Médiation numérique à Bessenay\"\n      logo=\"https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo.svg\"\n      illustration=\"grand-ouest\"\u003e\u003c/fr-mediation-numerique-orientation\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/orientation.js\" type=\"module\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nS'il existe une autre page dans laquelle un outil capable d'effectuer un parcours d'orientation est disponible, il est possible d'activer le bouton `Afficher les résultats sur la cartographie` en fournissant un lien avec l'attribut `lien-cartographie` :\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003ePage Title\u003c/title\u003e\n    \u003cbase href=\"/\" /\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/styles.css\" rel=\"stylesheet\" /\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"vh-100\"\u003e\n    \u003cfr-mediation-numerique-orientation\n      source=\"https://api.conseiller-numerique.gouv.fr/permanences\"\n      titre=\"Médiation numérique à Bessenay\"\n      logo=\"https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo.svg\"\n      lien-cartographie=\"https://cartographie.societenumerique.gouv.fr/cartographie\"\u003e\u003c/fr-mediation-numerique-orientation\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/@gouvfr-anct/cartographie-nationale@5.25.0/orientation.js\" type=\"module\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nLes paramètres sélectionnés lors du parcours d'orientation sont fournis sous forme de paramètre d'url, par exemple `?date_ouverture=2022-08-17\u0026ouvert_actuellement=true`.\n\n\u003e Il n'est pas possible d'utiliser la barre de navigation dans ce mode\n\n## Gestion des versions\n\nAfin de maintenir un cycle de publication clair et de favoriser la rétrocompatibilité, la dénomination des versions suit la spécification décrite par la [Gestion sémantique de version](https://semver.org/lang/fr/)\n\nLes versions disponibles ainsi que les journaux décrivant les changements apportés sont disponibles depuis [la page des Releases](https://github.com/anct-cartographie-nationale/client-application/releases).\n\n## Licence\n\nVoir le fichier [LICENSE.md](./LICENSE.md) du dépôt.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanct-cartographie-nationale%2Fclient-application","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanct-cartographie-nationale%2Fclient-application","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanct-cartographie-nationale%2Fclient-application/lists"}