Merge pull request #83 from GeotrekCE/mfu-add-doc

docs: Add textual content to empty sections

docs/.vitepress/config/en.ts

@@ -26,7 +26,7 @@ function sidebar(): DefaultTheme.SidebarItem[] {
         ],
       },
       {
-        text: 'Theme',
+        text: 'Configuration',
         collapsed: true,
         items: [
           { text: 'Colors', link: '/en/documentation/theme/colors' },

docs/.vitepress/config/fr.ts

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

docs/documentation/about/geotrek/projects.md

@@ -47,5 +47,5 @@ L’application Geotrek utilise les technologies open source suivantes :
 
 * **Angular**, framework utilisé pour l'application Geotrek-mobile.
 * **Ionic**, composant UI
-* **Capacitor**, boîte à outils nécessaires à la création d'applications mobile
+* **Capacitor**, boîte à outils nécessaires à la création d'applications mobiles
 * **MapLibre**, utilisé comme librairie cartographique 

docs/documentation/components/grw-app.md

@@ -0,0 +1,36 @@
+# Éléments de l'application
+
+Le widget se présente sous la forme d'un tag HTML embarquant toutes les configurations nécessaires, par exemple :
+
+```js
+<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"
+></grw-app>
+```

docs/documentation/components/grw-map.md

@@ -0,0 +1,39 @@
+# Gestion de la carte
+
+<center>
+  <a title="Carte des randonnées"><img src="/components/map.png" alt="Carte des randonnées"></a>
+</center>
+
+Les fonctionnalités du composant cartographique de **Geotrek-rando-widget** sont très similaires à celles présentées sur **Geotrek-rando** :
+
+- Centrer la carte sur la vue d'un ou plusieurs objets avec le bon niveau de zoom
+- Proposer une liste de fonds de carte sélectionnables via l'interface
+- Géo-localisation de l'utilisateur
+- Affichage de cluster de points pour gagner en lisibilité
+- A usurvol du pictogramme sur la carte, ce dernier est agrandi
+- Affichage des informations de l'objet au clic sur la carte : nom, photo principale, bouton cliquable pour afficher sa fiche détaillée
+- Au survol et au clic d'un itinéraire sur la carte, son tracé est affiché
+
+## Exemple de paramétrages
+
+### Configuration de deux fonds de plan
+
+```js
+<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"
+></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>
+```

docs/documentation/components/grw-touristic-content-card.md

@@ -2,7 +2,7 @@
 
 Les informations affichées dans la vignette d'un contenu touristique sont :
 
-- La ou les photos (caroussel) 
+- La ou les photos du service (caroussel) 
 - Le type de contenu (hébergement, restauration, produits locaux, etc.)
 - Le nom du service
 

docs/documentation/components/grw-touristic-content-detail.md

@@ -0,0 +1,23 @@
+# Vue détaillée d'un service
+
+La vue détaillée est composée de deux parties :
+
+- La fiche détaillée à gauche
+- La carte à droite
+
+## Fiche détaillée d'un service
+
+La fiche détaillée comporte les informations suivantes :
+
+- La ou les photos du service (carrousel)
+- Le type de contenu (hébergement, restauration, produits locaux, etc.)
+- Le nom du service
+- Un bouton de téléchargement de la fiche détaillée au format PDF
+- La commune de l'emplacement du service
+- Le chapeau et la description du service
+- Les informations pratiques (tarifs, modes de paiement, les langues parlées, les accès)
+- Les informations de contacts (adresse, téléphone, email, site web)
+
+<center>
+  <a title="Fiche détail d'un service"><img src="/components/detail_touristic_content.png" alt="Fiche détail d'un service"></a>
+</center>

docs/documentation/components/grw-touristic-contents-list.md

@@ -16,6 +16,10 @@
 - Filtre sur la catégorie de service
 - Réinitialisation des filtres
 
+::: warning
+Actuellement Geotrek-rando-widget ne peut pas remonter plus de de 999 éléments dans la liste
+:::
+
 ## 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. 
@@ -27,6 +31,6 @@ Par défaut, celles ci sont visibles et matérialisées par une barre de segment
 
 ```js
 <grw-app
-	touristic-contents="false"
+	touristic-events="false"
 ></grw-app>
 ```

docs/documentation/components/grw-touristic-event-card.md

@@ -2,7 +2,7 @@
 
 Les informations affichées dans la vignette d'un évènement touristique sont :
 
-- La ou les photos (caroussel) 
+- La ou les photos de l'évènement (caroussel) 
 - Le type d'évènement (nature et détente, culture, etc.)
 - Le nom de la commune où se déroule l'évènement et son nom
 - Les dates de début et de fin

docs/documentation/components/grw-touristic-event-detail.md

@@ -0,0 +1,24 @@
+# Vue détaillée d'un évènement
+
+La vue détaillée est composée de deux parties :
+
+- La fiche détaillée à gauche
+- La carte à droite
+
+## Fiche détaillée d'un évènement
+
+La fiche détaillée comporte les informations suivantes :
+
+- La ou les photos de l'évènement (carrousel)
+- Le type d'évènement (nature et détente, culture, etc.)
+- Le nom de l'évènement
+- Les dates de début et de fin de l'évènement
+- Un bouton de téléchargement de la fiche détaillée au format PDF
+- La commune du lieu de l'évènement
+- Le chapeau et la description de l'évènement
+- Les informations pratiques (tarifs, modes de paiement, les langues parlées, les accès)
+- Les informations de contacts (adresse, téléphone, email, site web)
+
+<center>
+  <a title="Fiche détail d'un évènement"><img src="/components/detail_touristic_event.png" alt="Fiche détail d'un évènement"></a>
+</center>

docs/documentation/components/grw-touristic-events-list.md

@@ -15,8 +15,13 @@
 
 - Recherche d'un évènement par son nom
 - Filtre sur la catégorie d'évènement
+- Filtre sur la date
 - Réinitialisation des filtres
 
+::: warning
+Actuellement Geotrek-rando-widget ne peut pas remonter plus de de 999 éléments dans la liste
+:::
+
 ## 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. 
@@ -28,6 +33,6 @@ Par défaut, ceux-ci sont visibles et matérialisés par une barre de segments p
 
 ```js
 <grw-app
-	touristic-events="false"
+	touristic-contents="false"
 ></grw-app>
 ```

docs/documentation/components/grw-trek-card.md

@@ -2,7 +2,7 @@
 
 Les informations affichées dans la vignette d'une randonnée sont :
 
-- La ou les photos (caroussel) 
+- La ou les photos de l'itinéraire (caroussel) 
 - Le nom de la commune de départ
 - Le nom de l'itinéraire
 - Les thèmes associés (faune, géologie, archéologie et histoire, etc.)
@@ -17,9 +17,9 @@ Les informations affichées dans la vignette d'une randonnée sont :
   <a title="Vignette d'une randonnée"><img src="/components/card_trek.png" alt="Vignette d'une randonnée"></a>
 </center>
 
-# Vignettes présentes dans la fiche détail d'une randonnée
+# Vignettes présentes dans la fiche détaillée d'une randonnée
 
-La fiche détail d'une randonnée peut être même contenir des vignettes d'objets situés à proximté afin d'enrichir son contenu informatif.
+La fiche détaillée d'une randonnée peut être même contenir des vignettes d'objets situés à proximté afin d'enrichir son contenu informatif.
 
 ## Patrimoines à découvrir (POIs)
 

docs/documentation/components/grw-trek-detail.md

@@ -6,6 +6,16 @@ La vue détaillée est composée de trois parties :
 - La carte à droite
 - Le profil altimétrique sous la carte
 
+## Fonctionnalités générales de la vue détaillée
+
+- Défilement de plusieurs images sous la forme d'un carrousel
+- Flèches de direction (du point de départ vers l’arrivée) sur le tracé de l'itinéraire
+- Profil altimétrique « dynamique » pouvant être survolé à la souris pour mettre en évidence le point de localisation correspondant sur la carte
+- Affichage de l’ensemble des communes traversées par l’itinéraire
+- 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.
@@ -15,7 +25,7 @@ La fiche détaillée d'une randonnée comporte plusieurs sections intéragissant
 La section "Présentation" est constituée :
 
 - de la vignette avec des informations plus détaillées comme le dénivelé négatif
-- des boutons de téléchargement au formats GPX, KML et PDF
+- des boutons de téléchargement du tracé au formats GPX et KML et de la fiche randonnée au format PDF
 - du chapeau (bref résumé) et de l'ambiance (attractions principales et intérêts) de la randonnée
 
 <center>
@@ -27,22 +37,36 @@ La section "Présentation" est constituée :
 Cette section comporte une description technique pas à pas de l’itinéraire avec le plus souvent une liste numérotée (que l'on sur la carte) des différentes étapes clés.
 
 <center>
-  <a title="Fiche détail d'une randonnée"><img src="/components/detail_trek_description.png" alt="Fiche détail d'une randonnée"></a>
+  <a title="Fiche détail d'une randonnée - section Description"><img src="/components/detail_trek_description.png" alt="Fiche détail d'une randonnée - section Description"></a>
 </center>
 
 ### Section "Patrimoines"
 
-La section "Patrimoine", 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), peut présenter des informations complémentaires comme :
-- le widget Météo France
-- Les accès routiers et parking
-- Les transports en commun pour venir
+Sur la vue détaillée d’un itinéraire, l'affichage des POIs a été optimisé de façon à rendre leur utilisation plus intuitive :
+
+- Affichage d'un bouton « Lire plus » pour dévoiler la totalité de la description présente dans la vignette
+- Possibilité d’afficher plusieurs images par POI dans un carrousel
+- Affichage de l’icône de la catégorie du POI sur sa vignette (faune, flore, patrimoine, équipements…)
 
 ::: info
 Les pictogrammes des POIs s'affichent sur la carte lorsque l'utilisateur arrive sur cette section.
 :::
 
+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>
+```
+
 <center>
-  <a title="Fiche détail d'une randonnée"><img src="/components/detail_trek_poi.png" alt="Fiche détail d'une randonnée"></a>
+  <a title="Fiche détail d'une randonnée - section Patrimoines"><img src="/components/detail_trek_poi.png" alt="Fiche détail d'une randonnée - section Patrimoines"></a>
 </center>
 
 ### Sections "Recommandations" et "Lieux d'informations"
@@ -57,12 +81,12 @@ En cliquant sur le bouton "Centrer sur la carte", la carte est zoomée sur le li
 
 
 <center>
-  <a title="Fiche détail d'une randonnée"><img src="/components/detail_trek_informationdesk.png" alt="Fiche détail d'une randonnée"></a>
+  <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>
 
 ### Sections "Accessibilité" et "A proximité"
 
-La section "Accessibilité" permet d'afficher les informations r'elatives à l'accessibilité (aménagements, pente, revêtements, exposition, etc.).
+La section "Accessibilité" permet d'afficher les informations relatives à l'accessibilité (aménagements, pente, revêtements, exposition, etc.).
 
 La section "A proximité" présente les services à proximité de la randonnée (rayon de 500m par défaut).
 
@@ -73,5 +97,5 @@ Les pictogrammes des services s'affichent sur la carte lorsque l'utilisateur arr
 :::
 
 <center>
-  <a title="Fiche détail d'une randonnée"><img src="/components/detail_trek_touristis_content.png" alt="Fiche détail d'une randonnée"></a>
+  <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>

docs/documentation/components/grw-treks-list.md

@@ -17,6 +17,9 @@
 - Filtre sur les randonnées rattachées à une ou plusieurs communes, secteurs, thèmes
 - Réinitialisation des filtres
 
+::: warning
+Actuellement Geotrek-rando-widget ne peut pas remonter plus de de 999 éléments dans la liste
+:::
 
 ## Désactiver l'affichage des randonnées dans le widget
 

docs/documentation/introduction/get-started.md

@@ -0,0 +1,38 @@
+# Installation
+
+## Configuration dans le Storybook
+
+Le widget peut être facilement testé et configuré à l'aide d'un outil de construction appelé [**Storybook**](https://geotrekce.github.io/Geotrek-rando-widget/?path=/story/geotrek-rando-widget--app). Il se base sur les identifiants d'objets dans Geotrek-admin, permet d'appliquer des filtres potentiels et d'ajuster le style selon les besoins.
+
+Voici les différentes étapes à suivre :
+
+1. L'API doit au préalable autoriser les requêtes issues de geotrekce.github.io
+
+2. Adapter le code du widget dans le Storybook en éditant les controls : changer le fond de plan cartographique, les couleurs, la langue, l'attribution, l'API, les paramètres de requête
+
+3. Se rendre sur l'onglet Docs puis cliquer sur Show code pour afficher le code source qu'il vous faudra inclure dans votre site Web
+
+<center>
+  <a title="Storybook"><img src="/introduction/storybook.png" alt="Storybook"></a>
+</center>
+
+ ::: tip
+- Dans les champs filtre (cities, districts, structures, themes, portals, etc.) il faut indiquer les identifiants des objets et non leur nom.
+- Pour connaître le lien entre identifiant et nom des objets, il est possible d'utiliser l'api (exemple pour lister l'ensemble des secteurs : https://randoadmin.parc-haut-jura.fr/api/v2/district/)
+- Il faut que l'itinéraire soit publié sur Geotrek-admin pour apparaître sur Geotrek-rando-widget
+
+:::
+
+## Intégration sur un site internet
+
+1. L'API doit au préalable autoriser n'importe qui à accéder aux données ou autoriser explicitement un nom de domaine
+
+2. Copier-coller ces balises HTML dans la section <head></head> du site web
+
+```html
+<link rel="stylesheet" href="https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.css" />
+<script type="module" src="https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.esm.js"></script>
+<script nomodule src="https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.js"></script>
+```
+
+3. Insérer le code source du widget généré à la dernière étape de la section précédente, dans la section du site Web dans laquelle il devra s'afficher

docs/documentation/introduction/overview.md

@@ -31,10 +31,10 @@ Ce widget, développé dans le cadre du projet communautaire Geotrek, est **libr
 - L'utilisateur peut filtrer et rechercher finement un objet dans la vue *liste*
 - Il affiche les objets publiés (itinéraires, services, évènements touristiques, etc.) dans une vue *liste*
 - Dans la vue *liste* les éléments suivants s'affichent : une photo principale, le nom de l'objet, quelques caractéristiques (difficulté, distance, dénivelé)
-- Au clic sur un objet de la liste, une fiche *détail* s'ouvre avec l'ensemble des éléments textuels (dont POI, zones sensibles, lieux de renseignement, recommandations, et étiquettes, etc.) définis dans Geotrek-admin.
-- Depuis la fiche *détail*, l'utilisateur peut télécharger les traces GPX/KML de l'itinéraire ainsi que sa fiche PDF
+- Au clic sur un objet de la liste, une fiche *détaillée* s'ouvre avec l'ensemble des éléments textuels (dont POI, zones sensibles, lieux de renseignement, recommandations, et étiquettes, etc.) définis dans Geotrek-admin.
+- Depuis la fiche *détaillée*, l'utilisateur peut télécharger les traces GPX/KML de l'itinéraire ainsi que sa fiche PDF
 - Le contenu de la vue *liste* est synchronisé avec les éléments affichés sur la carte
-- L'utilisateur peut copier l'URL d'une fiche *détail* pour la partager auprès d'autres internautes
+- L'utilisateur peut copier l'URL d'une fiche *détaillée* pour la partager auprès d'autres internautes
 
 
 ## Exemples d'intégration sur des sites tiers