improve documentation

GeotrekCE · Feb 16, 2024 · d4b81d6 · d4b81d6
1 parent 169a56f
commit d4b81d6
Show file tree

Hide file tree

Showing 12 changed files with 69 additions and 81 deletions.
diff --git a/docs/.vitepress/config/en.ts b/docs/.vitepress/config/en.ts
@@ -26,7 +26,7 @@ function sidebar(): DefaultTheme.SidebarItem[] {
         ],
       },
       {
-        text: 'Configuration',
+        text: 'Theme',
         collapsed: true,
         items: [
           { text: 'Colors', link: '/en/documentation/theme/colors' },

diff --git a/docs/.vitepress/config/fr.ts b/docs/.vitepress/config/fr.ts
@@ -62,7 +62,7 @@ function sidebar(): DefaultTheme.SidebarItem[] {
         ],
       },
       {
-        text: 'Paramétrages',
+        text: 'Thème',
         collapsed: true,
         items: [
           { text: 'Les couleurs', link: '/documentation/theme/colors' },

diff --git a/docs/.vitepress/config/shared.ts b/docs/.vitepress/config/shared.ts
@@ -10,7 +10,15 @@ export const shared = defineConfig({
   },
   title: 'Geotrek rando widget',
   description: 'Geotrek web components',
-  head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
+  head: [
+    [
+      'link',
+      {
+        rel: 'icon',
+        href: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyNi43cHgiIGhlaWdodD0iMTI2LjdweCIgdmlld0JveD0iMCAwIDEyNi43IDEyNi43IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjYuNyAxMjYuNyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8ZGVmcz4NCgkJPHBhdGggaWQ9IlNWR0lEXzFfIiBkPSJNMTYuOCw2Mi4zYzAsMjUuNDYxLDIwLjY0LDQ2LjEsNDYuMSw0Ni4xUzEwOSw4Ny43NjEsMTA5LDYyLjNTODguMzYsMTYuMiw2Mi45LDE2LjJTMTYuOCwzNi44MzksMTYuOCw2Mi4zDQoJCQkiLz4NCgk8L2RlZnM+DQoJPGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+DQoJCTx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzFfIiAgb3ZlcmZsb3c9InZpc2libGUiLz4NCgk8L2NsaXBQYXRoPg0KCTxyZWN0IGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiNCNENDMUIiIHdpZHRoPSIxMjYuNyIgaGVpZ2h0PSIxMjYuNyIvPg0KCTxwYXRoIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiMxMTQ4MTQiIGQ9Ik0zMy45LDUxLjVjMC01LjQsNC05LjEsOS41LTkuMWMyLjMsMCwzLjgsMC41LDUuMywxLjN2My42DQoJCWMtMS43LTEuMS0zLjMtMS41LTUtMS41Yy0zLjYsMC02LDIuMy02LDUuOGMwLDMuNiwyLjYsNS43LDUuNyw1LjdjMS4zLDAsMi42LTAuMywzLjUtMS4ydi02aDMuNnY3LjdjLTEuNCwxLjUtNCwyLjgtNy4xLDIuOA0KCQlDMzgsNjAuNiwzMy45LDU2LjksMzMuOSw1MS41Ii8+DQoJPHBvbHlnb24gY2xpcC1wYXRoPSJ1cmwoI1NWR0lEXzJfKSIgZmlsbD0iIzExNDgxNCIgcG9pbnRzPSI1Ni4yLDQyLjcgNjksNDIuNyA2OSw0NiA1OS43LDQ2IDU5LjcsNDkuNCA2Ny4yLDQ5LjQgNjcuMiw1Mi42IA0KCQk1OS43LDUyLjYgNTkuNyw1NyA2OS4yLDU3IDY5LjIsNjAuMiA1Ni4yLDYwLjIgCSIvPg0KCTxwYXRoIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiMxMTQ4MTQiIGQ9Ik03My43LDUxLjVjMC01LjEsMy44LTkuMSw5LjEtOS4xYzUuMywwLDkuMSw0LjEsOS4xLDkuMXMtMy44LDkuMS05LjEsOS4xDQoJCUM3Ny41LDYwLjYsNzMuNyw1Ni41LDczLjcsNTEuNSBNODguMiw1MS41YzAtMy4zLTIuMy01LjctNS40LTUuN3MtNS40LDIuNC01LjQsNS43YzAsMy4zLDIuMyw1LjcsNS40LDUuN1M4OC4yLDU0LjgsODguMiw1MS41Ii8+DQoJPHBvbHlnb24gY2xpcC1wYXRoPSJ1cmwoI1NWR0lEXzJfKSIgZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSIzOS4zLDY5LjIgMzMuOSw2OS4yIDMzLjksNjcuNSA0Ni41LDY3LjUgNDYuNSw2OS4yIDQxLjEsNjkuMiANCgkJNDEuMSw4My4zIDM5LjMsODMuMyAJIi8+DQoJPHBhdGggY2xpcC1wYXRoPSJ1cmwoI1NWR0lEXzJfKSIgZmlsbD0iI0ZGRkZGRiIgZD0iTTQ5LjUsNjcuNmg3LjFjMy4yLDAsNSwxLjgsNSw0LjNjMCwyLjItMS4zLDMuOC0zLjcsNC4ybDUuMSw3LjJoLTIuMmwtNC45LTcNCgkJaC00LjZ2N2gtMS44VjY3LjYgTTU2LjQsNzQuN2MyLjEsMCwzLjMtMSwzLjMtMi43cy0xLjItMi43LTMuMy0yLjdoLTUuMXY1LjRINTYuNCIvPg0KCTxwb2x5Z29uIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNjYsNjcuNiA3Ni45LDY3LjYgNzYuOSw2OS4zIDY3LjksNjkuMyA2Ny45LDc0IDc1LjMsNzQgNzUuMyw3NS43IA0KCQk2Ny45LDc1LjcgNjcuOSw4MS42IDc3LjMsODEuNiA3Ny4zLDgzLjMgNjYsODMuMyAJIi8+DQoJPHBvbHlsaW5lIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iODIuMiw3NC4zIDg5LjMsNjcuNiA5MS43LDY3LjYgODQuMSw3NC44IDkyLjksODMuMyA5MC40LDgzLjMgDQoJCTgyLjIsNzUuNCA4Mi4yLDgzLjMgODAuNCw4My4zIDgwLjQsNjcuNiA4Mi4yLDY3LjYgODIuMiw3NC4zIAkiLz4NCgk8cG9seWdvbiBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjREFEQURBIiBwb2ludHM9Ijk0LjcsMzguMyA4MC43LDQ4LjggNzEuMyw2My4xIDg2LjIsNTMuOSAJIi8+DQoJPHBvbHlnb24gY2xpcC1wYXRoPSJ1cmwoI1NWR0lEXzJfKSIgZmlsbD0iI0VENkM0QiIgcG9pbnRzPSI4NS4xLDUyLjggODAuNyw0OC44IDk0LjcsMzguMyAJIi8+DQoJPHBvbHlnb24gY2xpcC1wYXRoPSJ1cmwoI1NWR0lEXzJfKSIgZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSI4NS4xLDUyLjggNzEuMyw2My4xIDgwLjcsNDguOCAJIi8+DQoJPHBvbHlnb24gY2xpcC1wYXRoPSJ1cmwoI1NWR0lEXzJfKSIgZmlsbD0iI0VERUNFOCIgcG9pbnRzPSI4MC43LDQ4LjggNzEuMyw2My4xIDgzLDUwLjggCSIvPg0KCTxwb2x5Z29uIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiNGNUFBOEQiIHBvaW50cz0iODMsNTAuOCA5NC43LDM4LjMgODUuMSw1Mi44IAkiLz4NCjwvZz4NCjwvc3ZnPg0K',
+      },
+    ],
+  ],
   themeConfig: {
     i18nRouting: true,
     logo: '/assets/logo.svg',

diff --git a/docs/documentation/components/grw-app.md b/docs/documentation/components/grw-app.md
@@ -2,35 +2,35 @@
 
 Le widget se présente sous la forme d'un tag HTML embarquant toutes les configurations nécessaires, par exemple :
 
-```js
+```html
 <grw-app
-	api="https://geotrek-admin.portcros-parcnational.fr/api/v2/"
-    name-layer="IGN,OpenStreetMap"
-    url-layer="https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&STYLE=normal&FORMAT=image/png&TILEMATRIXSET=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x},https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-    attribution-layer="<a target='_blank' href='https://ign.fr/'>IGN</a>,OpenStreetMap"
-    touristic-contents="true"
-    touristic-events="true" 
-    weather="true"
-    rounded="false"
-    color-primary-app="#0043AE"
-    color-on-primary="#ffffff"
-    color-surface="#0043AE"
-    color-on-surface="#000000"
-    color-surface-variant="#0043AE"
-    color-on-surface-variant="#000000"
-    color-primary-container="#0043AE"
-    color-on-primary-container="#FFFFFF"
-    color-secondary-container="#B3C3DA"
-    color-on-secondary-container="#0043AE"
-    color-background="#ffffff"
-    color-surface-container-high="#0043AE"
-    color-surface-container-low="#ffffff"
-    fab-background-color="#C9AE75"
-    fab-color="#000000"
-    color-sensitive-area="#F1F6FB"
-    color-poi-icon="#0043AE"
-    color-trek-line="#0043AE"
-    font-family="Montserrat"
-    emergency-number="114"
+  api="https://geotrek-admin.portcros-parcnational.fr/api/v2/"
+  name-layer="IGN,OpenStreetMap"
+  url-layer="https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&STYLE=normal&FORMAT=image/png&TILEMATRIXSET=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x},https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+  attribution-layer="<a target='_blank' href='https://ign.fr/'>IGN</a>,OpenStreetMap"
+  touristic-contents="true"
+  touristic-events="true"
+  weather="true"
+  rounded="false"
+  color-primary-app="#0043AE"
+  color-on-primary="#ffffff"
+  color-surface="#0043AE"
+  color-on-surface="#000000"
+  color-surface-variant="#0043AE"
+  color-on-surface-variant="#000000"
+  color-primary-container="#0043AE"
+  color-on-primary-container="#FFFFFF"
+  color-secondary-container="#B3C3DA"
+  color-on-secondary-container="#0043AE"
+  color-background="#ffffff"
+  color-surface-container-high="#0043AE"
+  color-surface-container-low="#ffffff"
+  fab-background-color="#C9AE75"
+  fab-color="#000000"
+  color-sensitive-area="#F1F6FB"
+  color-poi-icon="#0043AE"
+  color-trek-line="#0043AE"
+  font-family="Montserrat"
+  emergency-number="114"
 ></grw-app>
 ```
diff --git a/docs/documentation/components/grw-map.md b/docs/documentation/components/grw-map.md
@@ -18,22 +18,16 @@ Les fonctionnalités du composant cartographique de **Geotrek-rando-widget** son
 
 ### Configuration de deux fonds de plan
 
-```js
+```html
 <grw-app
-	name-layer="IGN,OpenStreetMap"
-    url-layer="https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&STYLE=normal&FORMAT=image/png&TILEMATRIXSET=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x},https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-    attribution-layer="<a target='_blank' href='https://ign.fr/'>IGN</a>,OpenStreetMap"
+  name-layer="IGN,OpenStreetMap"
+  url-layer="https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&STYLE=normal&FORMAT=image/png&TILEMATRIXSET=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x},https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+  attribution-layer="<a target='_blank' href='https://ign.fr/'>IGN</a>,OpenStreetMap"
 ></grw-app>
 ```
 
 ### Personnalisation des couleurs d'objets sur la carte
 
-```js
-<grw-app
-	color-trek-line="#6b0030"
-    color-departure-icon="#006b3b"
-    color-arrival-icon="#85003b"
-    color-sensitive-area="#4974a5"
-    color-poi-icon="#974c6e"
-></grw-app>
-```
+```html
+<grw-app color-trek-line="#6b0030" color-departure-icon="#006b3b" color-arrival-icon="#85003b" color-sensitive-area="#4974a5" color-poi-icon="#974c6e"></grw-app>
+```
diff --git a/docs/documentation/components/grw-touristic-contents-list.md b/docs/documentation/components/grw-touristic-contents-list.md
@@ -22,15 +22,12 @@ Actuellement Geotrek-rando-widget ne peut pas remonter plus de de 999 éléments
 
 ## Désactiver l'affichage des services dans le widget
 
-Il est possible de paramétrer le widget de façon à valoriser une offre de contenus touristiques sans forcément mettre en avant les balades associées. 
+Il est possible de paramétrer le widget de façon à valoriser une offre de contenus touristiques sans forcément mettre en avant les balades associées.
 
 ::: info
 Par défaut, celles ci sont visibles et matérialisées par une barre de segments permettant de les filtrer séparément des autres contenus (itinéraires, évènements touristiques).
 :::
 
-
-```js
-<grw-app
-	touristic-events="false"
-></grw-app>
-```
+```html
+<grw-app touristic-events="false"></grw-app>
+```
diff --git a/docs/documentation/components/grw-touristic-events-list.md b/docs/documentation/components/grw-touristic-events-list.md
@@ -4,7 +4,6 @@
   <a title="Liste des évènements"><img src="/components/list_touristic_event.png" alt="Liste des évènements"></a>
 </center>
 
-
 ## Comportement et design
 
 - Au survol d'un évènement dans la liste, le pictogramme est agrandi sur la carte
@@ -24,15 +23,12 @@ Actuellement Geotrek-rando-widget ne peut pas remonter plus de de 999 éléments
 
 ## Désactiver l'affichage des services dans le widget
 
-Il est possible de paramétrer le widget de façon à valoriser une offre de contenus touristiques sans forcément mettre en avant les évènements associés. 
+Il est possible de paramétrer le widget de façon à valoriser une offre de contenus touristiques sans forcément mettre en avant les évènements associés.
 
 ::: info
 Par défaut, ceux-ci sont visibles et matérialisés par une barre de segments permettant de les filtrer séparément des autres contenus (itinéraires, contenus touristiques).
 :::
 
-
-```js
-<grw-app
-	touristic-contents="false"
-></grw-app>
-```
+```html
+<grw-app touristic-contents="false"></grw-app>
+```
diff --git a/docs/documentation/components/grw-trek-detail.md b/docs/documentation/components/grw-trek-detail.md
@@ -15,7 +15,6 @@ La vue détaillée est composée de trois parties :
 - Description détaillée de l'itinérance pour permettre l’affichage d’un fil de suivi avec les étapes sous forme de ronds colorés
 - Liens vers les contenus touristiques associés (services)
 
-
 ## Fiche détaillée d'une randonnée
 
 La fiche détaillée d'une randonnée comporte plusieurs sections intéragissant dynamiquement avec la carte.
@@ -53,16 +52,15 @@ Les pictogrammes des POIs s'affichent sur la carte lorsque l'utilisateur arrive
 :::
 
 En plus d'afficher les vignettes des éléments de patrimoines (POIs) situés à proximités de la randonnée (rayon de 500m par défaut), La section "Patrimoine", peut présenter des informations complémentaires comme :
+
 - le widget Météo France
 - Les accès routiers et parkings
 - Les transports en commun pour venir
 
 #### Paramétrage du widget Météo France
 
-```js
-<grw-app
-	weather="true"
-></grw-app>
+```html
+<grw-app weather="true"></grw-app>
 ```
 
 <center>
@@ -73,13 +71,12 @@ En plus d'afficher les vignettes des éléments de patrimoines (POIs) situés à
 
 La section "Recommandations" présente les recommandations sur les risques, danger ou meilleure période pour pratiquer l’itinéraire, ainsi que tout autre élément d'information utile à connaître.
 
-La section "Lieux d'informations" présente les lieux de renseignement (office du tourisme, bureau d'information, etc.) sous forme de vignettes. 
+La section "Lieux d'informations" présente les lieux de renseignement (office du tourisme, bureau d'information, etc.) sous forme de vignettes.
 
 ::: info
 En cliquant sur le bouton "Centrer sur la carte", la carte est zoomée sur le lieu en question.
 :::
 
-
 <center>
   <a title="Fiche détail d'une randonnée - section Recommandations et Lieux d'informations"><img src="/components/detail_trek_informationdesk.png" alt="Fiche détail d'une randonnée - section Recommandations et Lieux d'informations"></a>
 </center>
@@ -98,4 +95,4 @@ Les pictogrammes des services s'affichent sur la carte lorsque l'utilisateur arr
 
 <center>
   <a title="Fiche détail d'une randonnée - section Accessibilité et A proximité"><img src="/components/detail_trek_touristis_content.png" alt="Fiche détail d'une randonnée - section Accessibilité et A proximité"></a>
-</center>
+</center>
diff --git a/docs/documentation/components/grw-treks-list.md b/docs/documentation/components/grw-treks-list.md
@@ -23,14 +23,12 @@ Actuellement Geotrek-rando-widget ne peut pas remonter plus de de 999 éléments
 
 ## Désactiver l'affichage des randonnées dans le widget
 
-Il est possible de paramétrer le widget de façon à valoriser une offre de contenus touristiques sans forcément mettre en avant les balades associées. 
+Il est possible de paramétrer le widget de façon à valoriser une offre de contenus touristiques sans forcément mettre en avant les balades associées.
 
 ::: info
 Par défaut, celles-ci sont visibles et matérialisées par une barre de segments permettant de les filtrer séparément des autres contenus (itinéraires, évènements touristiques).
 :::
 
-```js
-<grw-app
-	treks="false"
-></grw-app>
+```html
+<grw-app treks="false"></grw-app>
 ```
diff --git a/docs/documentation/theme/additional-settings.md b/docs/documentation/theme/additional-settings.md
@@ -1,15 +1,13 @@
-# Langues 
+# Langues
 
 Geotrek-rando-widget offre la possibilité de basculer d'une langue à l'autre via un bouton dédié dans le haut de la page si les randonnées sont traduites dans d'autres langages.
 
 ## Paramétrer plusieurs langues
 
-```js
-<grw-app
-	languages="fr,en"
-></grw-app>
+```html
+<grw-app languages="fr,en"></grw-app>
 ```
 
 Actuellement seul l'anglais est prévu par défaut dans le widget, en plus du français.
 
-Pour proposer les ocntenus dans une autre langue, il faut ajouter son code [ISO 639-1](https://fr.wikipedia.org/wiki/Liste_des_codes_ISO_639-1) à deux lettres (exemple : *es*, *it*, *de*) à la liste `interface AvailableTranslations` et traduire les paramètres dans le fichier *src/i18n/i18n.ts* comme cela a été fait pour l'anglais [ici](https://github.com/GeotrekCE/Geotrek-rando-widget/blob/main/src/i18n/i18n.ts#L211).
+Pour proposer les contenus dans une autre langue, il faut ajouter son code [ISO 639-1](https://fr.wikipedia.org/wiki/Liste_des_codes_ISO_639-1) à deux lettres (exemple : _es_, _it_, _de_) à la liste `interface AvailableTranslations` et traduire les paramètres dans le fichier _src/i18n/i18n.ts_ comme cela a été fait pour l'anglais [ici](https://github.com/GeotrekCE/Geotrek-rando-widget/blob/main/src/i18n/i18n.ts#L211).
diff --git a/docs/public/favicon.ico b/docs/public/favicon.ico
diff --git a/readme.md b/readme.md
@@ -36,10 +36,10 @@ Once you made your component, you can get the code to copy-paste by clicking on
 
 - [Presentation](https://geotrek-rando-widget.readthedocs.io/latest/documentation/introduction/overview.html)
 - [Get started](https://geotrek-rando-widget.readthedocs.io/latest/documentation/introduction/get-started.html)
-- [Configuration instructions](https://geotrek-rando-widget.readthedocs.io/latest/documentation/configuration/colors.html)
+- [Theme](https://geotrek-rando-widget.readthedocs.io/latest/documentation/theme/colors.html)
 
 ## Contribution
 
 - [Development guide](https://geotrek-rando-widget.readthedocs.io/latest/documentation/contribution/development.html)
 - [Documentation guide](https://geotrek-rando-widget.readthedocs.io/latest/documentation/contribution/documentation.html)
-- [Translating guide](https://geotrek-rando-widget.readthedocs.io/latest/documentation/contribution/translation.html)
+- [Translating guide](https://geotrek-rando-widget.readthedocs.io/latest/documentation/contribution/translation.html)