Merge pull request #139 from GeotrekCE/mfu-improve-doc

[Documentation] Add doc about theme, outdoor and list of components

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

@@ -0,0 +1,89 @@
+# Vue détaillée d'un contenu outdoor
+
+La vue détaillée est composée de deux parties :
+
+- La fiche détaillée à gauche
+- La carte à droite
+
+## Fonctionnalités générales de la vue détaillée
+
+- Défilement de plusieurs images sous la forme d'un carrousel
+- Affichage de l’ensemble des communes traversées par le site outdoor
+- Liens vers les parcours outdoor associés
+- Liens vers les contenus touristiques associés (services et évènements)
+
+## Fiche détaillée d'un site outdoor
+
+La fiche détaillée d'un site outdoor comporte plusieurs sections intéragissant dynamiquement avec la carte.
+
+### Section "Présentation"
+
+La section "Présentation" est constituée :
+
+- de la vignette avec la liste des thèmes associés (Faune, Flore, Patrimoine historique, etc.)
+- de la pratique, l'orientation du vent, la saison de pratique, les cotations et la difficulté
+- des boutons de téléchargement de la fiche d'un site au format PDF
+- du chapeau (bref résumé) et de l'ambiance (attractions principales et intérêts) du site outdoor
+
+<center>
+  <a title="Fiche détail d'un site outdoor"><img src="/components/detail_outdoor.jpg" alt="Fiche détail d'un site outdoor"></a>
+</center>
+
+### Section "Description"
+
+Cette section comporte une description technique pas à pas du site.
+
+<center>
+  <a title="Fiche détail d'un site outdoor - section Description"><img src="/components/detail_outdoor_description.jpg" alt="Fiche détail d'un site outdoor - section Description"></a>
+</center>
+
+### Section "Patrimoines"
+
+Sur la vue détaillée d’un site outdoor, 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 du site (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
+
+```html
+<grw-app weather="true"></grw-app>
+```
+
+### Sections "Recommandations" et "Lieux d'informations"
+
+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.
+
+::: 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'un site outdoor - section Recommandations et Lieux d'informations"><img src="/components/detail_outdoor_informationdesk.jpg" alt="Fiche détail d'un site outdoor - section Recommandations et Lieux d'informations"></a>
+</center>
+
+### Sections "Accessibilité" et "A proximité"
+
+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é du site (rayon de 500m par défaut).
+
+Une section complémentaire "En savoir plus" peut être affichée si le champ `source` est renseigné dans **Geotrek-admin** .
+
+::: info
+Les pictogrammes des services s'affichent sur la carte lorsque l'utilisateur arrive sur cette section.
+:::
+

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

@@ -51,7 +51,7 @@ Sur la vue détaillée d’un itinéraire, l'affichage des POIs a été optimis
 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 :
+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

docs/documentation/components/how-it-works.md

@@ -7,3 +7,37 @@ Parmi ces composants, il en existe un prêt à l'emploi : `grw-app`. Ce dernier
 Il est aussi possible d'utiliser chaque composant graphique de manière indépendante. Par exemple, il est possible d'afficher [une page détail d'un itinéraire ainsi que sa carte](../examples/trek-detail-and-map.html). Pour cela, il faut utiliser les composants graphiques `grw-trek-detail` et `grw-map`. 
 
 Pour pouvoir afficher un itinéraire, il convient de récupérer les informations nécessaires avec un composant qui le permet : `grw-trek-provider`.
+
+**Retrouvez l'intégralité des variables par composant sur le projet Github** :
+
+| Type | Composant |
+| ------ | ------ |
+|     Application   |    [grw-app](https://github.com/GeotrekCE/Geotrek-rando-widget/blob/main/src/components/grw-app/readme.md)    |
+|    Common Button    | [grw-common-button](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-common-button)       |
+|    Floating Action Button    | [grw-extended-fab](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-extended-fab)       |
+|    Filter    | [grw-filter](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-filter)       |
+|    Filter   | [grw-filters](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-filters)       |
+|    Information Desk    | [grw-information-desk](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-information)       |
+|    Loader    | [grw-loader](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-loader)       |
+|    Map    | [grw-map](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-map)       |
+|    Online Confirm Modal    | [grw-offline-confirm-modal](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-offline-confirm-modal)       |
+|    Outdoor Course    | [grw-outdoor-course-card](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-outdoor-course-card)       |
+|    Outdoor Course    | [grw-outdoor-course-detail](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-outdoor-course-detail)       |
+|    Outdoor Site    | [grw-outdoor-site-card](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-outdoor-site-card)       |
+|    Outdoor Site    | [grw-outdoor-site-detail](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-outdoor-site-detail)       |
+|    Outdoor Site    | [grw-outdoor-sites-list](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-outdoor-sites-list)       |
+|    POI    | [grw-poi](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-poi)       |
+|    Search    | [grw-search](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-search)       |
+|    Segmented Segment    | [grw-segmented-segment](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-segmented-segment)       |
+|    Select Language    | [grw-select-language](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-select-language)       |
+|    Sensitive Area    | [sensitive-area-detail](https://github.com/GeotrekCE/Geotrek-rando-widget/blob/main/src/components/grw-sensitive-area-detail/readme.md)       |
+|    Switch    | [grw-switch](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-switch)       |
+|    Touristic Content    | [grw-touristic-content-card](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-touristic-content-card)       |
+|    Touristic Content    | [grw-touristic-content-detail](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-touristic-content-detail)       |
+|    Touristic Content    | [grw-touristic-contents-list](https://github.com/GeotrekCE/Geotrek-rando-widget/tree/main/src/components/grw-touristic-contents-list)       |
+|    Touristic Event    | [grw-touristic-event-card](https://github.com/GeotrekCE/Geotrek-rando-widget/blob/main/src/components/grw-touristic-event-card/readme.md)       |
+|    Touristic Event    | [grw-touristic-event-detail](https://github.com/GeotrekCE/Geotrek-rando-widget/blob/main/src/components/grw-touristic-event-detail/readme.md)     
+|    Touristic Event    | [grw-touristic-events-list](https://github.com/GeotrekCE/Geotrek-rando-widget/blob/main/src/components/grw-touristic-events-list/readme.md)   |
+|    Trek    | [grw-trek-card](https://github.com/GeotrekCE/Geotrek-rando-widget/blob/main/src/components/grw-trek-card/readme.md)       |
+|    Trek   | [grw-trek-detail](https://github.com/GeotrekCE/Geotrek-rando-widget/blob/main/src/components/grw-trek-detail/readme.md)       |
+|    Trek   | [grw-treks-list](https://github.com/GeotrekCE/Geotrek-rando-widget/blob/main/src/components/grw-treks-list/readme.md)       |

docs/documentation/contribution/translation.md

@@ -19,6 +19,8 @@ Actuellement le widget n'est traduit qu'en anglais, mais il peut supporter d'aut
 
 Pour cela, il suffit de rajouter un nouvel objet dans le fichier `/src/i18n/i18n.ts`.
 
+Pour faire bénéficer Geotrek-widget des nouvelles traductions, il est possible de faire une proposition de traduction avec une pull request pour ce fichier.
+
 Voici un exemple avec l'anglais :
 
 ```js

docs/documentation/theme/additional-settings.md

@@ -1,13 +1,142 @@
-# Langues
+---
+head:
+  - - script
+    - defer: true
+      nomodule: true
+      src: https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.js
+  - - script
+    - defer: true
+      type: module
+      src: https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.esm.js
+  - - link
+    - href: https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.css
+      rel: stylesheet
+  - - link
+    - href: https://fonts.googleapis.com
+      rel: preconnect
+  - - link
+    - href: https://fonts.gstatic.com
+      rel: preconnect
+      crossorigin: anonymous
+  - - link
+    - href: https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap
+      rel: stylesheet
+---
 
-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ètres supplémentaires
 
-## Paramétrer plusieurs langues
+Les paramètres `rounded` et `font-family` sont les deux seuls paramètres associés au thème mais qui ne concernent pas les couleurs.
+
+## Les bordures
+
+### Code
+
+Pour afficher une bordure arrondie dans le widget, il faut que la balise `grw-app` embarque le paramètre suivant à `true` :
+
+```html
+<grw-app rounded="true"></grw-app>
+```
+
+**Voici un exemple de code complet :**
+
+```html
+<div>
+  <grw-app
+    app-width="100%"
+    app-height="100vh"
+    api="https://geotrek-admin.portcros-parcnational.fr/api/v2/"
+    languages="fr"
+    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"
+    weather="true"
+    treks="true"
+    rounded="true"
+  ></grw-app>
+</div>
+```
+
+## La police de caractère
+
+Par défaut la police de caractère utilisée est `Roboto`. Il est possible d'en utiliser une autre.
+
+Voici un exemple de configuration de police de caractère avec [Google Font](https://fonts.google.com/).
+
+### Code
+
+Pour paramétrer une nouvelle police, il faut que la balise `grw-app` embarque le paramètre suivant en précisant son nom :
+
+```html
+<grw-app font-family="Comic Neue"></grw-app>
+```
+
+1. Rechercher le nom de la police souhaitée sur Google Font.
+   Exemple : https://fonts.google.com/specimen/Comic+Neue?query=comic+neue
+
+2. Cliquer sur le bouton "Get font", puis "Get embed code"
+
+3. Copier les trois lignes de codes générées dans la balise `<head>` du fichier HTML
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet" />
+```
+
+**Voici un exemple de code complet :**
 
 ```html
-<grw-app languages="fr,en"></grw-app>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <title>pnrlat</title>
+    <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>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet" />
+    <script nomodule src="https://rando-widget.geotrek.fr/latest/dist/geotrek-rando-widget/geotrek-rando-widget.js"></script>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div style="width: 100vw; height: 100vh">
+      <grw-app
+        app-width="100%"
+        app-height="100vh"
+        api="https://geotrek-admin.portcros-parcnational.fr/api/v2/"
+        languages="fr"
+        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"
+        treks="true"
+        rounded="true"
+        font-family="Comic Neue"
+      ></grw-app>
+    </div>
+  </body>
+</html>
 ```
 
-Actuellement seul l'anglais est prévu par défaut dans le widget, en plus du français.
+### Exemple de widget utilisant la police Comic Neue
 
-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).
+<ClientOnly>
+  <div>
+    <grw-app
+      app-width="100%"
+      app-height="100vh"
+      api="https://geotrek-admin.portcros-parcnational.fr/api/v2/"
+      languages="fr"
+      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"
+      treks="true"
+      rounded="true"
+      font-family="Comic Neue"
+    ></grw-app>
+  </div>
+</ClientOnly>

src/components/grw-app/readme.md

@@ -1,5 +1,7 @@
 # grw-app
 
+
+
 <!-- Auto Generated Below -->
 
 

src/components/grw-information-desk/readme.md

@@ -1,4 +1,4 @@
-# grw-information-desk-detail
+# grw-information-desk
 
 
 

src/components/grw-map/readme.md

@@ -1,5 +1,7 @@
 # grw-map
 
+
+
 <!-- Auto Generated Below -->
 
 

src/components/grw-poi-detail/readme.md

@@ -1,4 +1,4 @@
-# grw-poi-detail
+# grw-poi
 
 
 

src/components/grw-sensitive-area-detail/readme.md

@@ -1,4 +1,4 @@
-# grw-sensitive-area
+# grw-sensitive-area-detail
 
 
 

src/components/grw-touristic-content-card/readme.md

@@ -1,5 +1,7 @@
 # grw-touristic-content-card
 
+
+
 <!-- Auto Generated Below -->
 
 

src/components/grw-touristic-content-detail/readme.md

@@ -1,4 +1,6 @@
-# grw-touristic-content-card-detail
+# grw-touristic-content-detail
+
+
 
 <!-- Auto Generated Below -->
 

src/components/grw-touristic-contents-list/readme.md

@@ -1,4 +1,6 @@
-# grw-treks-list
+# grw-touristic-contents-list
+
+
 
 <!-- Auto Generated Below -->
 

src/components/grw-touristic-event-card/readme.md

@@ -1,5 +1,7 @@
 # grw-touristic-event-card
 
+
+
 <!-- Auto Generated Below -->
 
 

src/components/grw-touristic-event-detail/readme.md

@@ -1,4 +1,6 @@
-# grw-touristic-content-card-detail
+# grw-touristic-event-detail
+
+
 
 <!-- Auto Generated Below -->
 

src/components/grw-touristic-events-list/readme.md

@@ -1,4 +1,6 @@
-# grw-treks-list
+# grw-touristic-events-list
+
+
 
 <!-- Auto Generated Below -->
 

src/components/grw-trek-detail/readme.md

@@ -1,5 +1,7 @@
 # grw-trek-detail
 
+
+
 <!-- Auto Generated Below -->
 
 

src/components/grw-treks-list/readme.md

@@ -1,5 +1,7 @@
 # grw-treks-list
 
+
+
 <!-- Auto Generated Below -->