+
+
+
+## Website
Geotrek-rando is the public web application displaying the interface you can use to value your territory treks and tourism products!
-Demo available at https://gtr3demo.ecrins-parcnational.fr.
+You can find two demonstration websites at the following links:
+- [https://gtr3demo.ecrins-parcnational.fr](https://gtr3demo.ecrins-parcnational.fr)
+- [https://demo-rando.geotrek.fr/](https://demo-rando.geotrek.fr)
The third version is a full redesign and rewriting of Geotrek-rando with React, and NextJS for Server side rendering (SSR) and SEO.
-Geotrek-rando v3 is directly connected to Geotrek-admin v2 API.
+Geotrek-rando is directly connected to Geotrek-admin v2 API.
+
+Read more in the [general presentation (french)](https://geotrek-rando-v3.readthedocs.io/latest/presentation-fr/).
+
+### Examples of Geotrek-rando portals
+
+- Promoting outdoor activities: [Escapade62](https://www.escapade62.fr/)
+- Exploring the Écrins National Park: [Destination Écrins](https://destination.ecrins-parcnational.fr/)
+- Discover Mediterranean treks, throught land and sea: [Destination Port-Cros](https://destination.portcros-parcnational.fr/)
+- Walks and hikes in the PACA region: [Chemins des Parcs](https://www.cheminsdesparcs.fr/)
+
+
+
+Discover more users close to your place by going onto the [user map](https://geotrek.fr/utilisateurs.html).
+
+For a full list of known rando-based applications, visit the [Geotrek applications list](https://github.com/GeotrekCE/Geotrek-website/wiki/Liste-des-Geotrek-connus).
-Read more in the [general presentation](./docs/presentation-fr.md).
+## Features
-## Documentation for administrators
+Discover Geotrek-Rando's top features, designed to elevate outdoor exploration with dynamic maps, detailed treks info, and offline accessibility—all in a customizable, mobile-friendly interface :
-- [Installation for production](./docs/installation.md)
-- [Customization](./docs/customization.md)
+- **Responsive PWA** interface with offline access
+- **Customizable** homepage
+- **Advanced search** with filters and **interactive map**
+- **Detailed information** on each trek, outdoor activities, touristic services and events
+- **Download options** (PDF, GPX, KML)
+- **Static pages** for general info
+- **Interactive mapping** with elevation profiles
+- **API integration** with Geotrek-Admin for real-time data
+- **Design and content customization** (theme, colors, maps)
+- **SEO optimization** with server-side rendering.
-## Documentation for developers
+## Admin documentation
-- [Installation on a dev machine](./docs/development.md)
-- [Deployment](./docs/deployment.md)
+- [Production setup](https://geotrek-rando-v3.readthedocs.io/latest/installation/)
+- [Customization](https://geotrek-rando-v3.readthedocs.io/latest/customization/customization-introduction/)
-## Getting started
+## Developer documentation
-- Follow the [development](./docs/development.md) docs
-- Head to [localhost:3000](http://localhost:3000)
+- [Development setup](https://geotrek-rando-v3.readthedocs.io/latest/development/installation/)
+- [Deployment](https://geotrek-rando-v3.readthedocs.io/latest/development/deployment/)
-## Architecture decision records
+## Architecture decision record
-- [Main framework](./docs/adrs/main_framework.md)
-- [Deployment solution](./docs/adrs/deployment_solution.md)
+- [Main framework](https://geotrek-rando-v3.readthedocs.io/latest/adrs/main_framework/)
+- [Deployment solution](https://geotrek-rando-v3.readthedocs.io/latest/adrs/deployment_solution/)
+
+## Support
+
+- To report bugs or suggest features, please [submit a ticket](https://github.com/GeotrekCE/Geotrek-rando-v3/issues).
+- Join our community to stay updated and share your experience! Connect on [Matrix](https://matrix.to/#/%23geotrek:matrix.org) for real-time discussions, or connect through the [Google Group](https://groups.google.com/g/geotrek-fr) to exchange ideas and insights.
+
+## Contribution
+
+Interested in contributing? See our [Contributing Guide](https://geotrek-rando-v3.readthedocs.io/latest/development/contributing/). You can help in many ways, the ability to code is not necessary.
+
+## Thanks to all contributors ❤
+
+
+
+
+
+Made with [contrib.rocks](https://contrib.rocks).
+
+## License
+
+This project is under the MIT License. See the [LICENSE](https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/LICENSE) for details.
[](https://datatheca.com/)
+
diff --git a/docs/adrs/deployment_solution.md b/docs/adrs/deployment_solution.md
index b217a84c2..0763bdd61 100644
--- a/docs/adrs/deployment_solution.md
+++ b/docs/adrs/deployment_solution.md
@@ -6,7 +6,8 @@
## Context and Problem Statement
-We need to have an easy way to deploy this server for it to be runnable on the most various environments.
+This analysis has been done in 2020, when we started redesigning Geotrek-rando globally, to choose the right technology.
+We needed to have an easy way to deploy this server for it to be runnable on the most various environments.
## Decision Drivers sorted by priority
diff --git a/docs/adrs/main_framework.md b/docs/adrs/main_framework.md
index c65ddf553..54c7a07c9 100644
--- a/docs/adrs/main_framework.md
+++ b/docs/adrs/main_framework.md
@@ -6,7 +6,8 @@
## Context and Problem Statement
-In order to produce a scalable, performant and efficient front, we need to choose the right framework head start.
+This analysis has been done in 2020, when we started redesigning Geotrek-rando globally, to choose the right technology.
+In order to produce a scalable, performant and efficient front, we needed to choose the right framework head start.
## Decision Drivers sorted by priority
diff --git a/docs/changelog.md b/docs/changelog.md
index 56887a20d..c9115caf2 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1141,4 +1141,4 @@ If you update Geotrek-rando v3, the global Docker process has been updated to av
1.x and 2.x
-----------
-See the repository dedicated to versions 1 and 2 of Geotrek-rando: https://github.com/GeotrekCE/Geotrek-rando
+See the repository dedicated to versions 1 and 2 of Geotrek-rando: https://github.com/GeotrekCE/Geotrek-rando
\ No newline at end of file
diff --git a/docs/customization.md b/docs/customization.md
deleted file mode 100644
index 47a853bd1..000000000
--- a/docs/customization.md
+++ /dev/null
@@ -1,481 +0,0 @@
-# Customization
-
-You can override default settings, colors, CSS, HTML and translations in your own `customization` folder.
-
-See the [general presentation](presentation-fr.md) for an overview of the application.
-
-After each customization changes, you'll have to restart the Docker container by running `docker-compose restart`.
-
-## Settings
-
-Default configuration are defined in files from https://github.com/GeotrekCE/Geotrek-rando-v3/tree/main/frontend/config folder.
-You can override all settings default values in files from your own `customization/config/` folder.
-
-Examples of customizations are available in https://github.com/GeotrekCE/Geotrek-rando-v3/tree/main/frontend/customization/config folder.
-
-In json files, you can just override the primary keys you need. You have to override primary keys globally.
-
-- `global.json` (default value in https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/global.json) to define :
-
- - `searchResultsPageSize`, `mapResultsPageSize`: used to limit the sizes of results per page when fetching API
- - `maxPoiPerPage`: max number of point of interest (POI) displayed on a single trek page
- - `maxTouristicContentPerPage`: max number of touristic contents displayed on a single trek page
- - `portalIds`: eventual portal filters (list of ids).
-
- - If no id has been set, Geotrek-rando retrieves all objets, whether or not they are associated with a portal in Geotrek-admin.
- - If one or more ids have been set (example : [1,3]), Geotrek-rando only retrieves the objets of the configured portals. Therefore, if objects are not associated with any portal in Geotrek-admin, they will not be displayed in Geotrek-rando.
-
- - `enableSensitiveAreas`: boolean, default to false. Set it to true if sensitive areas are defined in your Geotrek-admin
- - `enableOutdoor`: boolean, default to false. Set it to true to enable Outdoor sites and courses
- - `groupTreksAndOutdoorFilters`: boolean, default to false. Groups treks and outdoor filters into a single tab. For this setting to work, `enableOutdoor` must be set to `true`.
- - `apiUrl` : Geotrek-admin API URL
- - `privacyPolicyLink`: link of the privacy policy (More information in [GDPR documentation](customization-scripts-GDPR.md#GDPR)).
- - `googleAnalyticsId`: eventual Google Analytics Id (to activate it, you must set `privacyPolicyLink`)
- - `googleSiteVerificationToken`: eventual code to enable Google Search Console and Google developer tools
- - `enableIndexation`: set this parameter to `false` to disable search engine indexing (default `true`)
- - `baseUrl`: base URL of your portal (for dynamic sitemap.xml)
- - `fallbackImageUri`: this uri is used to generate a default image for a trek or a touristic content if none is defined
- - `touristicContentLabelImageUri` : this uri is used to define the logo of the labeled touristic contents:
- 
- - `applicationName`: application name appearing on PWA
- - `enableReport`: to enable report form in trek detail pages
- - `hCaptchaKey`: string key to enable Captcha validation in the report form. To create/define a key, see https://www.hcaptcha.com/
- - `enableSearchByMap`: to enable searching by map displayed area (bbox)
- - `maxLengthTrekAllowedFor3DRando`: Maximum length of meters allowed to enable 3D mode in the current trek. Adjust this setting carefully as too long a trek could freeze your browser. If this setting is defined to `0` (or `mapSatelliteLayers` from `map.json` is defined to `null`) the 3D mode feature is disabled for the whole application
- - `minAltitudeDifferenceToDisplayElevationProfile`: Minimum altitude difference in meters required to display the elevation profile in the current trek
- - `accessibilityCodeNumber`: emergency number. Default set to `114`.
- - `displayObjectsRelatedToItinerantTreks`: An object containing many booleans to display/hide objects related to itinerant treks. The keys are `POIs`,`touristicContents`,`sensitiveAreas`,`infrastructures`,`signages`,`service` and are all set to `true` by default. Indeed multi-days treks can be long and have a lot a related objects which is very long to display and not really readable. That's why you can disable some related objects that will not be displayed on itinerant main detail page, but will be displayed on steps detail pages and any other treks detail pages.
-
-- `header.json` to define :
-
- - `logo` : Path to your logo image
- - `menu`: an object with 3 keys :
-
- - `supportedLanguages`: Array of available languages: `'CA','DE','FR','EN','ES',IT` are availables.
- - `defaultLanguage`: Your target audience's main language.
- - `primaryItemsNumber`: Number of items before dividing the main menu with a "See more" button. _Deprecated_ since 3.19.0: Use the MenuItems feature from Geotrek admin.
-
-(see default values in https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/header.json)
-
-- `home.json` to define homepage settings.
-
- - `activityBar`: This is a menu showing all search types (hiking practices, outdoor practices, tourist content categories and tourist events categories).
-
- - `shouldDisplay`: Boolean allowing this menu to be displayed or not. Its default value is `true`.
- - `numberOfItemsBeforeTruncation` The number of items displayed on the screen. To see the others, click on the "Show more" button. Its default value is `8`.
- - `links`: Allows you to customize the order and display of categories links. It's an array containing an object with 3 properties:
- ```typescript
- {
- "type" : 'trek' | 'outdoorSite' | 'touristicContent' | 'touristicEvent' ;
- "grouped" : boolean ; // If set to "true", all activities of the type are grouped under a single link.
- "iconUrl" : string ; // Optional, url to replace default icon. Used only if "grouped" is set to "true",
- }
- ```
-
- More explanations in this [comments](https://github.com/GeotrekCE/Geotrek-rando-v3/issues/560#issuecomment-1858166341) (in French).
-
- - `suggestions`: You can define blocks to display suggestions groups with treks ID, outdoor sites ID, services ID or events ID to highlight on homepage (see https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/customization/config/home.json).
- Each group has the following properties :
-
- ```typescript
- {
- "titleTranslationId": string: // you can use locales keys with the files inside `translations` folder
- "iconUrl": string; // url to the icon file
- "ids": string[]; // list of ids ,
- "type": 'trek' | 'service' | 'outdoor' | 'events'; // if not set, default to `trek`
- }
- ```
-
- Or you can define a suggestion block to display upcoming events, the structure is quite different:
-
- ```typescript
- {
- "titleTranslationId": string; // you can use locales keys with the files inside `translations` folder
- "iconUrl": string; // url to the icon file
- "numberOfItemsToDisplay": number; // Optional; If not defined all upcoming events will be displayed
- "type": 'upcomingEvents';
- }
- ```
-
- To define suggestions groups you need to build an `object` with the languages code as keys. By this way you can differentiate the valorization of a territory according to the selected language. If you don't need this feature (or if you want the same configuration for several language), use `default` key instead of a language code. The configuration in the example below displays 2 groups of suggestions for all languages except the English version with one different:
-
- ```json
- "suggestions": {
- "default": [
- {
- "titleTranslationId": "home.territoryTreks",
- "iconUrl": "/icons/practice-pedestrian.svg",
- "ids": ["2", "582", "586", "501", "771", "596"],
- "type": "trek"
- },
- {
- "titleTranslationId": "home.events",
- "iconUrl": "/icons/category-events.svg",
- "ids": ["1", "5"],
- "type": "events"
- },
- ],
- "en": [
- {
- "titleTranslationId": "home.treksDiscovery",
- "iconUrl": "/icons/pedestrian.svg",
- "ids": ["2", "582", "586"],
- "type": "trek"
- },
- ]
- }
- ```
-
- PS: For backward compatibility you can still use an array, this is the same behavior that `object` with only a `default` key. For example:
-
- ```json
- "suggestions": [
- {
- "titleTranslationId": "home.territoryTreks",
- "iconUrl": "/icons/practice-pedestrian.svg",
- "ids": ["2", "582", "586", "501", "771", "596"],
- "type": "trek"
- },
- {
- "titleTranslationId": "home.events",
- "iconUrl": "/icons/category-events.svg",
- "ids": ["1", "5"],
- "type": "events"
- },
- ]
- ```
-
- - In `welcomeBanner`, you can personnalize the cover on the homepage. You can add an asset on the top of the page: it can either be a video, a single picture or a carousel of images:
-
- - `videoUrl`: to add a video
- - `carouselUrls`: to add a carousel of images. You have to add an array of urls
- - `pictureUrl`: to add a single image
-
- Only one type of asset can be displayed. If you add several fields (`videoUrl` and `pictureUrl` for example), we will pick one, following this order of priority: video over carousel over picture.
-
- You can also enable a text to be displayed on the top of this asset:
-
- - `shouldDisplayText`: `true` to display the text on above the asset, `false` to hide it.
-
-- `details.json` allows you to choose whether or not to display sections for each details pages ("trek", "touristicContent", "touristicEvent", "OutdoorSite" and "OutdoorCourse"). See the default configuration at https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/details.json.
- There are 4 properties :
-
- - `name`: the name of the section
- - `display`: boolean to display or not this section
- - `anchor`: boolean to display or not an anchor link in the menu navigation bar
- - `order`: number to define the position of this section
-
-NB: For "report" and "reservationWidget" sections with `anchors` set to `true`, anchor links are not displayed like other elements, but by a dedicated icon.
-
-- In the `footer.json` file, you can define social networks, informations about your organization, and some links (see example in https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/customization/config/footer.json).
-
- - Social networks: `facebook`, `twitter`, `youtube`, `instagram` or `fallback`.
- - Contact information such as your name, address, phone number and email.
- - Links based on the key pair `label`/`url` (can be based on translation labels for multilingual) and/or the key `informationID` whose value is equal to a flatpage identifier.
-
-- `filter.json` to define filters to hide, their order and values (see example in https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/filter.json). If you want to :
-
- - Hide some of filters, you have to override their properties with `"display": false`.
- - Change the label for some filters, you need to define `translatedKey`, and copy the values into the translation files.
- - The `labels` filter contains an additional `withExclude` parameter. Its default value is `true`. By setting it to `true`, the user can filter the search by excluding a label (`withExclude` only works if your version of Geotrek Admin is equal to or higher than [2.77.0](https://github.com/GeotrekCE/Geotrek-admin/releases/tag/2.77.0); please set it to `false` if this is not the case)
- - The trek `networks` filter only works if yout version of Geotrek Admin is equal to or higher than [2.108.0](https://github.com/GeotrekCE/Geotrek-admin/releases/tag/2.108.0)
- - The event `organizer` filter only works if your version of Geotrek Admin is equal to or higher than [2.100.0](https://github.com/GeotrekCE/Geotrek-admin/releases/tag/2.100.0)
-
-- `map.json` to define basemaps URL and attributions, center (y, x), default and max zoom level (see example in https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/customization/config/map.json).
-
- - `searchMapCenter`: Array of two numbers `[latitude, longitude]` defining the map center point in the search view,
- - `searchMapZoom`: Default value is `10`. It defines the zoom level in the search view. **Warning**: It is important that the `searchMapZoom` value is included in the zoom value range of the basemap (`minZoom` and `maxZoom`), otherwise it may generate an error.
- - `maximumZoomLevel`: Default value is `17`. The default maximum zoom level if the maxZoom option is not defined in map layer (see below)
- - `displaySecondaryLayersByDefault`: Default value is `true`. Display or not display secondary layers (signages, infractructures and services) at page load on detail pages.
-
- You can also update the map layers. Three types of map layers are available: classic, satellite and offline. Each of them is structured as follows:
-
- ```ts
- interface LayerObject {
- url: string; // Url of the layer. It needs to be a valid tiles server url or a geoJSON file
- options: TileLayerOptions; // See https://leafletjs.com/reference.html#tilelayer-option
- bounds: string; // Url of a geoJSON polygon to display this layer inside.
- }
- ```
-
- The `url` prop should be a valid tiles server to use as base map.
-
- If its value ends in `.geojson` (or `.json`), its features are displayed on the map. The application looks at the `stroke-width`,`stroke-opacity`, `fill`, `fill-opacity` values of each `feature` `properties` to apply the colors. You can override these values by setting them in the `options` property (identical name but in camelCase format).
-
- If you define `name`, `photo_url`, `description` and/or `website` in the `properties` of a `feature`, it will be displayed in a tooltip when its feature is clicked in the map.
-
- - `mapClassicLayers`: array of `LayerObjects` for the default version.
- - `mapSatelliteLayers`: array of `LayerObjects` for the satellite version.
- - `mapOfflineLayer`: `LayerObject` registered for offline use. If it's explicitly set to `null`, the application uses the first layer of `mapClassicLayers` as a fallback.
-
- NB: If you want to have only one map available, you can add `mapSatelliteLayers: null`. This will remove the button that allows the user to switch between two map layers.
-
- - `zoomAvailableOffline` allows you to define the zoom modes allowed in offline mode. This allows you to control the amount of disk space required when caching. Default `[13,14,15]`
-
-- `resultCard.json` to customize the elements to be displayed on featured cards that link to a details page (only trek cards for now).
-
- - You can display/hide the `location` and `themes` by defining a `display` key.
- - You can define an array of keywords in `informations` to display them (their order in the array matters). The keywords are as follows:
- - `'difficulty'`,
- - `'duration'`,
- - `'distance'`,
- - `'positiveElevation'`,
- - `'negativeElevation'`,
- - `'courseType'`,
- - `'networks'`,
- Default value is `"informations": ["difficulty", "duration", "distance", "positiveElevation"]`. See https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/resultCard.json.
-
-- `redirects.json` to define URL rewriting for your instance. For example, you can use this customization to redirect old URL style (Geotrek-rando V2) to the new URL style (Geotrek-rando V3) or to redirect old URL to a new URL after changing the name of a hike in the backend.
-
- - In `rules`, you can define all the rules needed to redirect clients
-
- - `source`: must match to the old URL. Use the wildcard `*` to redirect a subdirectory. Use `:varname` to forward a variable to the destination
- - `destination`: must match to the new URL. Use `:varname` to inject a variable captured in the old URL
- - `permanent`: Set to `true` if the redirection is permanent. Set to `false` if the redirection is temporally. Default to `false`
-
- Examples :
-
- ```json
- {
- "rules": [
- {
- "source": "/a-cheval/col-de-font-froide",
- "destination": "/trek/582-col-de-font-froide"
- },
- {
- "source": "/a-pied/:name",
- "destination": "/search?rawText=:name"
- },
- {
- "source": "/fr/walking/:name",
- "destination": "/en/search?rawText=:name",
- "locale": false
- }
- ]
- }
- ```
-
- You can find more examples and more details following this link : https://nextjs.org/docs/api-reference/next.config.js/redirects
-
-### _Warning:_
-
-- When setting up Google Analytics, you have to setup a flow. When setting up the flow, be careful to enter the corresponding url (the url of your website), otherwise the data will not be received.
-- By default Google analytics is disabled (`googleAnalyticsId` set to `null`), you will have to override it in the `global.json` file of your customization folder.
-
-## Colors
-
-You can override colors in `customization/theme/colors.json` file to change the main colors, based on https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/tailwind.config.js default theme.
-
-Example for Cevennes national park orange colors:
-
-```json
-{
- "primary1": {
- "DEFAULT": "#ff9100",
- "light": "#ffa032"
- },
- "primary3": "#d57b04"
-}
-```
-
-It's also possible to change category colors :
-
-```json
-{
- "categories": {
- "trek": "blue",
- "events": "red",
- "outdoor": "#62AB41",
- "service": "#3B89A2"
- }
-}
-```
-
-NB: If global config `groupTreksAndOutdoorFilters` is set to `true`, the `outdoor` color is ignored in favor of the `trek` color.
-
-## CSS
-
-You can override CSS in `customization/theme/style.css` file. To help overriding CSS, some ID have been added on main DIV components:
-
-- `home_content`, `home_activitiesBar`, `home_topHtml`, `home_section`, `home_activitySuggestion`, `banner_carousel`, etc on Homepage
-- `header_logo` in Header
-- Several similar ID on search and detail pages
-- `home_container` to isolate Home page
-- `search_container` to isolate Search page
-- `details_container` to isolate detail pages
-- `flatPage_container` to isolate static flatpages
-
-In addition, some classes prefixed with `custo-*` are gradually being added to facilitate style overrides for components.
-A dedicated [ticket](https://github.com/GeotrekCE/Geotrek-rando-v3/issues/1079) shows explanations and differents styling for the main menu (available since 3.19.0).
-
-## Translations
-
-You can override every texts in translations files, based on default ones (https://github.com/GeotrekCE/Geotrek-rando-v3/tree/main/frontend/src/translations).
-
-You should at least override `home.title`, `home.description` and `home.welcome-text`.
-
-## HTML / Scripts
-
-### HTML templates :
-
-You can include some HTML parts in different sections of the layout application.
-These templates can be translated by using the language code as a suffix (e.g. `homeTop-en.html` will be rendered only for the English interface). The application tries to find the localized template first, otherwise it tries the non-localized template, otherwise it displays nothing.
-NB: If you want to display a message common to all languages but not to a particular language (e.g. french), just create the template suffixed with its language code (e.g. `-fr.html`) and leave it empty, and voilà!
-
-See examples in https://github.com/GeotrekCE/Geotrek-rando-v3/tree/main/frontend/customization/html.
-
-#### Templates available on all pages
-
-- `customization/html/headerTop.html`: before the header section
-- `customization/html/headerBottom.html`: after the header section and before the content page
-- `customization/html/footerTop.html`: before the footer section and after the content page
-- `customization/html/footerBottom.html`: after the footer section
-
-#### Templates available on home page
-
-- `customization/html/homeTop.html`: first section of the homepage
-- `customization/html/homeBottom.html`: last section of the homepage
-
-#### Templates on details page (trek, touristic content, touristic event, outdoor site and outdoor course)
-
-You can create your own templates to display practical information or widgets in different parts of the details page. There are 3 steps to follow:
-
-1. Create a new file suffixed with `.html` in `customization/html/details/` (e.g. `example.html`) and fill the the content with html tags
-
- ```html
-
The id of this {{ type }} is {{ id }}
- ```
-
-You can define variables in "mustache templates" (meaning between brackets `{{ variable }}`) that will be converted once rendered. For the moment, there are 4 variables available:
-
-- Page ID with `{{ id }}`
-- Content type `{{ type }}`: rendered values are "trek", "touristicContent", "touristicEvent", "outdoorSite", "outdoorCourse").
-- The code of the (departure) city `{{ cityCode }}`: useful for widgets such as forecast.
-- The language code `{{ language }}` The current language of the page.
-
-When choosing a template name, care must be taken not to select a reserved name used by sections defined by the application (e.g `presentation`, see https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/details.json).
- If you do, the customized template will not be displayed.
-
-2. Copy the template name without the `.html` suffix into the `customization/html/details.json` file.
- For example I want to display it in treks and outdoor sites details page:
- ```json
- {
- "sections": {
- "trek": [
- {
- "name": "example",
- "display": true,
- "anchor": true,
- "order": 11
- }
- ],
- "outdoorSite": [
- {
- "name": "example",
- "display": true,
- "anchor": true,
- "order": 11
- }
- ]
- }
- }
- ```
-3. Copy the section title/anchor into the translations files.
- For example in `customization/translations/en.json`:
- ```json
- {
- "details": {
- "example": "My example"
- }
- }
- ```
-
-You can take a look at `customization/html/details/forecastWidget.html` which shows the implementation.
-By default the "forecast widget" is enabled for all content types; if you want to remove it, you need to write it explicitly in the `customization/html/details.json` file.
-
-```json
-{
- "sections": {
- "trek": [
- {
- "name": "forecastWidget",
- "display": false
- }
- ],
- "touristicContent": [
- {
- "name": "forecastWidget",
- "display": false
- }
- ],
- "touristicEvent": [
- {
- "name": "forecastWidget",
- "display": false
- }
- ],
- "outdoorSite": [
- {
- "name": "forecastWidget",
- "display": false
- }
- ],
- "outdoorCourse": [
- {
- "name": "forecastWidget",
- "display": false
- }
- ]
- }
-}
-```
-
-### Scripts
-
-You can also include some scripts:
-
-- `customization/html/scriptsHeader.html`: in the `` of the document
-- `customization/html/scriptsFooter.html`: just before the `` end tag
-
-The scripts templates are intended for third party scripts. Unlike the HTML parts, there is not possibility of translations. More information on how to write them can be found in the [Scripts and GDPR documentation](customization-scripts-GDPR.md).
-
-If you want to include an external JSON feed (for external latest news for example), you can check this [https://github.com/GeotrekCE/Geotrek-rando-v3/issues/1157](example documentation).
-
-## Icons
-
-Icons are provided by Geotrek-admin API. See [icons documentation](icons.md) to know how they have to be designed.
-
-## Manifest.json
-
-There is a default `manifest.json` generated using the `applicationName` parameters of `global.json` and icons/images detailed in the next section below (See: https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/src/pages/manifest.json.tsx#L20).
-You can complete it by creating `manifest.json` file in the `customization/config/` folder and filling it with the props to add and/or override.
-
-## About the cache
-
-When new types of content are added (example: activities, type of places information, label, etc.), the related hiking pages then appear in error on the Geotrek-Rando website. This issue only exists in case of new content categories being added, not with every content update.
-Simply restart the site to force the cache update or wait a few hours for the cache to reset.
-
-It is also possible to completely disable Geotrek-Rando's cache but this may impact performance when loading pages. You'll find more details about disabling cache in this section [Caching](knowledge/caching.md)
-
-## Images, favicon, mobile phone icons and splashscreens
-
-These files need to be in the correct folder during the build process and therefore, we created a specific `medias` folder in the customization repository.
-
-It provides 6 default images that can be customized:
-
-- android-icon.png: It has to be 144x144px and controls the icon appearing on Android phones
-- maskable-icon.png: It hass to be 144x144px and will be used only on android phones enabling round icons (it will hence be cropped to fit a circle by the android phones)
-- apple-icon.png: It has to be 144x144px and controls the icon appearing on iOS phones
-- android-splashscreen.png: It has to be 512x512px and controls the splashscreen appearing on Android phones
-- ios-splashscreen.png: It has to be 512x512px and controls the splashscreen appearing on iOS phones
-- favicon.png: It will be used as the favicon in web browsers
-
-You can also add images and other files in the `medias` folder to be used as logo, images in HTML parts and static pages. They will be available on "url-geotrek-rando/medias/image-name.jpg" and can be linked as "/medias/image-name.jpg".
-
-## Apply changes
-
-After each customization changes, you'll have to restart the Docker container by running `docker-compose restart`.
-
-## Production
-
-To set environnement variables such as Sentry configuration, build and run the application see the [Installation documentation](installation.md).
diff --git a/docs/customization-scripts-GDPR.md b/docs/customization/customization-gdpr.md
similarity index 79%
rename from docs/customization-scripts-GDPR.md
rename to docs/customization/customization-gdpr.md
index ea85a7dbd..1bc9277cd 100644
--- a/docs/customization-scripts-GDPR.md
+++ b/docs/customization/customization-gdpr.md
@@ -1,43 +1,12 @@
-# Scripts and GDPR
+# GDPR
-## Executing external scripts
-
-You can inject additional scripts into your app by creating the following files:
-
-- `customization/html/scriptsHeader.html`: scripts injected in the `` of the document.
-- `customization/html/scriptsFooter.html`: scripts injected just before the `` end tag.
-
-Within each of these templates you need you can write one or more `
-```
-
-The above example will be executed once the page is loaded and each time the browser is hard reloaded. Due to the application's dynamic router, the script will not be executed on a **page change**.
-
-If you need to execute the script on every page change you need to attach an event listener.
-
-```html
-
-```
-
-NB: In Geotrek Rando prior to version 3.15.4, the `window.next` object is **not yet loaded** when scripts are run. You must therefore find a strategy to wait for it before attaching the event listener.
-
-## GDPR
-
-### Privacy policy link
+## Privacy policy link
To be GDPR compliant, you must have a page describing the privacy policy.
It can be an internal or external page. And you can define its link in the `privacyPolicyLink` key in `global.json`.
Bear in mind that if this key is not defined, the consent modal will not be displayed and **no script will be executed**.
-### Third-party scripts
+## Third-party scripts
Some scripts require the user's consent before being executed.
To control their execution, additional attributes must be added.
@@ -126,13 +95,21 @@ To avoid this, one solution is to check the user's acceptance in the cookies.
```
-### Modal consent
+## Simple alerts
+
+!!! warning
+
+ - When setting up Google Analytics, you have to setup a flow. When setting up the flow, be careful to enter the corresponding url (the url of your website), otherwise the data will not be received.
+ - By default Google analytics is disabled (`googleAnalyticsId` set to `null`), you will have to override it in the `global.json` file of your customization folder.
+
+
+## Modal consent
On the user's first visit, if there are at least one `type="opt-in"` script and there is no saved cookie of the user's preferance, the consent modal is displayed.
Once the user has made his choice, it is no longer displayed.
If the user wished to modify his consent, a "Change cookie preference" button is located in the footer's app. If there is no third-party script, this button is not displayed.
-It's also possible te define a button anywhere in a [custom HTML template](customization.md#html--scripts). You need to define a `button` tag with `data-trigger-consent-modal` attribute.
+It's also possible te define a button anywhere in a [custom HTML template](./customization-htmlscripts.md). You need to define a `button` tag with `data-trigger-consent-modal` attribute.
For example:
diff --git a/docs/customization/customization-htmlscripts.md b/docs/customization/customization-htmlscripts.md
new file mode 100644
index 000000000..5f29c0ffb
--- /dev/null
+++ b/docs/customization/customization-htmlscripts.md
@@ -0,0 +1,367 @@
+# HTML pages and scripts customization
+
+## HTML templates
+
+You can include some HTML parts in different sections of the layout application.
+These templates can be translated by using the language code as a suffix (e.g. `homeTop-en.html` will be rendered only for the English interface). The application tries to find the localized template first, otherwise it tries the non-localized template, otherwise it displays nothing.
+
+!!! note
+
+ If you want to display a message common to all languages but not to a particular language (e.g. french), just create the template suffixed with its language code (e.g. `-fr.html`) and leave it empty, and voilà!
+
+See examples in [customization file](https://github.com/GeotrekCE/Geotrek-rando-v3/tree/main/frontend/customization/html).
+
+### Templates available on all pages
+
+- `customization/html/headerTop.html`: before the header section
+- `customization/html/headerBottom.html`: after the header section and before the content page
+- `customization/html/footerTop.html`: before the footer section and after the content page
+- `customization/html/footerBottom.html`: after the footer section
+
+### Templates available on home page
+
+- `customization/html/homeTop.html`: first section of the homepage
+- `customization/html/homeBottom.html`: last section of the homepage
+
+### Templates on details page (trek, touristic content, touristic event, outdoor site and outdoor course)
+
+You can create your own templates to display practical information or widgets in different parts of the details page. There are 3 steps to follow:
+
+1. Create a new file suffixed with `.html` in `customization/html/details/` (e.g. `example.html`) and fill the the content with html tags
+
+ ```html
+
The id of this {{ type }} is {{ id }}
+ ```
+
+You can define variables in "mustache templates" (meaning between brackets `{{ variable }}`) that will be converted once rendered. For the moment, there are 4 variables available:
+
+- Page ID with `{{ id }}`
+- Content type `{{ type }}`: rendered values are "trek", "touristicContent", "touristicEvent", "outdoorSite", "outdoorCourse").
+- The code of the (departure) city `{{ cityCode }}`: useful for widgets such as forecast.
+- The language code `{{ language }}` The current language of the page.
+
+When choosing a template name, care must be taken not to select a reserved name used by sections defined by the application (e.g `presentation`, see [example](https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/details.json)).
+ If you do, the customized template will not be displayed.
+
+2. Copy the template name without the `.html` suffix into the `customization/html/details.json` file.
+ For example I want to display it in treks and outdoor sites details page:
+
+ ```json
+ {
+ "sections": {
+ "trek": [
+ {
+ "name": "example",
+ "display": true,
+ "anchor": true,
+ "order": 11
+ }
+ ],
+ "outdoorSite": [
+ {
+ "name": "example",
+ "display": true,
+ "anchor": true,
+ "order": 11
+ }
+ ]
+ }
+ }
+ ```
+
+3. Copy the section title/anchor into the translations files.
+ For example in `customization/translations/en.json`:
+ ```json
+ {
+ "details": {
+ "example": "My example"
+ }
+ }
+ ```
+
+You can take a look at `customization/html/details/forecastWidget.html` which shows the implementation.
+By default the "forecast widget" is enabled for all content types; if you want to remove it, you need to write it explicitly in the `customization/html/details.json` file.
+
+```json
+{
+ "sections": {
+ "trek": [
+ {
+ "name": "forecastWidget",
+ "display": false
+ }
+ ],
+ "touristicContent": [
+ {
+ "name": "forecastWidget",
+ "display": false
+ }
+ ],
+ "touristicEvent": [
+ {
+ "name": "forecastWidget",
+ "display": false
+ }
+ ],
+ "outdoorSite": [
+ {
+ "name": "forecastWidget",
+ "display": false
+ }
+ ],
+ "outdoorCourse": [
+ {
+ "name": "forecastWidget",
+ "display": false
+ }
+ ]
+ }
+}
+```
+
+## External scripts
+
+You can inject additional scripts into your app by creating the following files:
+
+- `customization/html/scriptsHeader.html`: scripts injected in the `` of the document.
+- `customization/html/scriptsFooter.html`: scripts injected just before the `` end tag.
+
+The scripts templates are intended for third party scripts. Unlike the HTML parts, there is not possibility of translations.
+
+Within each of these templates you need you can write one or more `
+```
+
+The above example will be executed once the page is loaded and each time the browser is hard reloaded. Due to the application's dynamic router, the script will not be executed on a **page change**.
+
+If you need to execute the script on every page change you need to attach an event listener.
+
+```html
+
+```
+
+!!! note
+
+ In Geotrek-rando prior to version 3.15.4, the `window.next` object is **not yet loaded** when scripts are run. You must therefore find a strategy to wait for it before attaching the event listener.
+
+## External JSON feed
+
+!!! note
+
+ If you want to display articles from another website, you can do so using custom HTML templates.
+
+ **Demo Screenshot**
+
+ 
+
+ **JSON Feed**
+
+ To retrieve data from another website, the well-known feeds are RSS or Atom, but the best format for communicating remains JSON, so we decided to develop a script that uses them all: [JSON Feed](https://www.jsonfeed.org/).
+
+ So, if you wish to copy/paste the following codes into your customization but with your own feed, it must be formatted in JSON Feed or you must edit the following script to adapt it.
+
+ **Template**
+
+ Common
+
+ Let's try the following code and copy it into a template file like `customization/html/homeTop.html`:
+
+ ```html
+
+ ```
+ - `data-widget="feed"` (mandatory): all HTML tags with this data attribute and the value “feed” will be parsed by the corresponding script.
+ - `data-url` (mandatory): this is the feed source. If left blank, nothing happens.
+ - `data-limit` (optional - default `Infinity`): is the number of elements to be displayed.
+ - `data-title` (optional): allows to add a title to the section
+
+
+ Internationalization
+
+ If the feed is only available in one language, we suggest you paste it only in the suffixed template: `homeTop-en.html`.
+ If you have feeds available in different languages, you can duplicate the template with the language code as a suffix as above, or you can use the `{{ language }}` variable.
+ Using the HTML example above, let's assume that JSON feeds are available via these urls `https://www.ecrins-parcnational.fr/en/flux_actus.json` for the English version and `https://www.ecrins-parcnational.fr/fr/flux_actus.json` for the French version. You can therefore only define `homeTop.html` with the following content:
+
+ ```html
+
+ ```
+
+ Widget in details page
+
+ It works in the same way.
+ You can create the file `customization/html/details/feedWidget.html` and paste the following template:
+ ```html
+
+
+ ```
+ Don't forget to call the `feedWidget` in the desired details page in `customization/config/details.json`.
+ ```json
+ {
+ "sections": {
+ "trek": [
+ {
+ "name": "feedWidget",
+ "display": true,
+ "anchor": true,
+ "order": 200
+ }
+ ]
+ }
+ }
+ ```
+
+ The main difference with the common template is that you don't have to define the `data-title` attribute, as the title is automatically defined in translated files under the key `details.[file-widget-name]`.
+ With our example, we need to add these lines in `customization/translations/fr.json` :
+
+
+ ```diff
+ {
+ + "details": {
+ + "feedWidget": "Actualités"
+ + }
+ }
+ ```
+
+ **Script**
+
+ All this won't work without the associated script. You can copy/paste the script below into `customization/html/scriptsHeader.html`:
+
+ ```js
+
+ ```
+
+ **A few explanations about the script :**
+
+ - The first action is to add a `className` to the template in order to hide it if it is empty.
+ - If there is no `data-url` defined, or if there is an error when retrieving the data, or if the data returns 0 elements, the script stops execution and nothing is displayed.
+ - The source URL must provide a JSON feed format, otherwise it will try to loop inside as if the response were the contents of the `items` key of the JSON feed. **No other checks are made**, so if your JSON is not properly formatted, errors may occur.
+ - For the card content, it tries to get the value of `summary`, if this key has no value, it tries the value of `content_text`. And if this key also has no value, it finally tries with `content_html`. Be careful with the last property: you have to trust the source because it executes a `innerHTML`.
+
+
diff --git a/docs/icons.md b/docs/customization/customization-icons.md
similarity index 88%
rename from docs/icons.md
rename to docs/customization/customization-icons.md
index 560c7ef96..3471b3991 100644
--- a/docs/icons.md
+++ b/docs/customization/customization-icons.md
@@ -16,13 +16,13 @@ Because of that, they have to be :
**Default activity icons**, not modified, are visible in search filter list or on map
-
+
Here the "Alpinisme" icon should have been white by default.
**Modified activity icons** are visible on activity bar on home or details page:
-
+
- They are in grey instead of white.
- If the initial icon has several colors, they will be lost here.
@@ -38,8 +38,8 @@ Another light color can be used, but the icon has to be visible on a background
**_Good icon example :_**
-
+
**_Bad icon example :_** jpg with no transparent background, "orange square" visible:
-
+
diff --git a/docs/customization/customization-introduction.md b/docs/customization/customization-introduction.md
new file mode 100644
index 000000000..527f82466
--- /dev/null
+++ b/docs/customization/customization-introduction.md
@@ -0,0 +1,50 @@
+# Customization
+
+You can override default settings, colors, CSS, HTML and translations in your own `customization` folder.
+
+See the [general presentation](../presentation-fr.md) (french) for an overview of the application.
+
+After each customization changes, you'll have to restart the Docker container by running `docker-compose restart`.
+
+
+## Main sections
+
+[**Introduction to customization**](./customization-introduction.md)
+
+General introduction with instructions to restart the Docker container after each customization change.
+
+[**Customization of settings**](./customization-settings.md)
+
+Detailed explanations for configuration files (`global.json`, `header.json`, `home.json`, etc.) with examples of overriding default values.
+
+[**Themes and styles**](./customization-themestyles.md)
+
+Detailed instructions on modifying colors, CSS, and menu structure, including specific classes (`custo-*`).
+
+[**Icons customization**](./customization-icons.md)
+
+Detailed instructions on modifying icons.
+
+[**Translation customization**](./customization-translation.md)
+
+Explanation of translation files, overriding texts, and managing languages.
+
+[**HTML pages and scripts customization**](./customization-htmlscripts.md)
+
+Detailed instructions on using HTML templates and custom scripts.
+
+[**GDPR**](./customization-gdpr.md)
+
+Specific documentation on setting up Google Analytics, including alerts and data privacy management.
+
+[**Media and manifest.json management**](./customization-mediamanagement.md)
+
+Explanation on managing images, favicons, splash screens, and configuring the `manifest.json` file.
+
+## Apply changes
+
+After each customization changes, you'll have to restart the Docker container by running `docker-compose restart`.
+
+## Production
+
+To set environnement variables such as Sentry configuration, build and run the application see the [Installation documentation](../installation.md).
diff --git a/docs/customization/customization-mediamanagement.md b/docs/customization/customization-mediamanagement.md
new file mode 100644
index 000000000..34fe202d0
--- /dev/null
+++ b/docs/customization/customization-mediamanagement.md
@@ -0,0 +1,22 @@
+# Media and manifest.json management
+
+## Images, favicon, mobile phone icons and splashscreens
+
+These files need to be in the correct folder during the build process and therefore, we created a specific `medias` folder in the customization repository.
+
+It provides 6 default images that can be customized:
+
+- android-icon.png: It has to be 144x144px and controls the icon appearing on Android phones
+- maskable-icon.png: It hass to be 144x144px and will be used only on android phones enabling round icons (it will hence be cropped to fit a circle by the android phones)
+- apple-icon.png: It has to be 144x144px and controls the icon appearing on iOS phones
+- android-splashscreen.png: It has to be 512x512px and controls the splashscreen appearing on Android phones
+- ios-splashscreen.png: It has to be 512x512px and controls the splashscreen appearing on iOS phones
+- favicon.png: It will be used as the favicon in web browsers
+
+You can also add images and other files in the `medias` folder to be used as logo, images in HTML parts and static pages. They will be available on "url-geotrek-rando/medias/image-name.jpg" and can be linked as "/medias/image-name.jpg".
+
+## Manifest.json
+
+There is a default `manifest.json` generated using the `applicationName` parameters of `global.json` and icons/images detailed in the next section below (See [example](https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/src/pages/manifest.json.tsx#L20)).
+You can complete it by creating `manifest.json` file in the `customization/config/` folder and filling it with the props to add and/or override.
+
diff --git a/docs/customization/customization-settings.md b/docs/customization/customization-settings.md
new file mode 100644
index 000000000..81e055046
--- /dev/null
+++ b/docs/customization/customization-settings.md
@@ -0,0 +1,298 @@
+# Customization of settings
+
+Default configuration are defined in files from [config folder](https://github.com/GeotrekCE/Geotrek-rando-v3/tree/main/frontend/config).
+You can override all settings default values in files from your own `customization/config/` folder.
+
+Examples of customizations are available in [Geotrek-rando v3 config folder](https://github.com/GeotrekCE/Geotrek-rando-v3/tree/main/frontend/customization/config).
+
+In json files, you can just override the primary keys you need. You have to override primary keys globally.
+
+## global.json
+
+- `global.json` (default value in [global.json file](https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/global.json)) to define :
+
+ - `searchResultsPageSize`, `mapResultsPageSize`: used to limit the sizes of results per page when fetching API
+ - `maxPoiPerPage`: max number of point of interest (POI) displayed on a single trek page
+ - `maxTouristicContentPerPage`: max number of touristic contents displayed on a single trek page
+ - `portalIds`: eventual portal filters (list of ids).
+
+ - If no id has been set, Geotrek-rando retrieves all objets, whether or not they are associated with a portal in Geotrek-admin.
+ - If one or more ids have been set (example : [1,3]), Geotrek-rando only retrieves the objets of the configured portals. Therefore, if objects are not associated with any portal in Geotrek-admin, they will not be displayed in Geotrek-rando.
+
+ - `enableSensitiveAreas`: boolean, default to false. Set it to true if sensitive areas are defined in your Geotrek-admin
+ - `enableOutdoor`: boolean, default to false. Set it to true to enable Outdoor sites and courses
+ - `groupTreksAndOutdoorFilters`: boolean, default to false. Groups treks and outdoor filters into a single tab. For this setting to work, `enableOutdoor` must be set to `true`.
+ - `apiUrl` : Geotrek-admin API URL
+ - `privacyPolicyLink`: link of the privacy policy (More information in [GDPR section](./customization-gdpr.md)).
+ - `googleAnalyticsId`: eventual Google Analytics Id (to activate it, you must set `privacyPolicyLink`)
+ - `googleSiteVerificationToken`: eventual code to enable Google Search Console and Google developer tools
+ - `enableIndexation`: set this parameter to `false` to disable search engine indexing (default `true`)
+ - `baseUrl`: base URL of your portal (for dynamic sitemap.xml)
+ - `fallbackImageUri`: this uri is used to generate a default image for a trek or a touristic content if none is defined
+ - `touristicContentLabelImageUri` : this uri is used to define the logo of the labeled touristic contents:
+ 
+ - `applicationName`: application name appearing on PWA
+ - `enableReport`: to enable report form in trek detail pages
+ - `hCaptchaKey`: string key to enable Captcha validation in the report form. To create/define a key, see [www.hcaptcha.com/](https://www.hcaptcha.com/).
+ - `enableSearchByMap`: to enable searching by map displayed area (bbox)
+ - `maxLengthTrekAllowedFor3DRando`: Maximum length of meters allowed to enable 3D mode in the current trek. Adjust this setting carefully as too long a trek could freeze your browser. If this setting is defined to `0` (or `mapSatelliteLayers` from `map.json` is defined to `null`) the 3D mode feature is disabled for the whole application
+ - `minAltitudeDifferenceToDisplayElevationProfile`: Minimum altitude difference in meters required to display the elevation profile in the current trek
+ - `accessibilityCodeNumber`: emergency number. Default set to `114`.
+ - `displayObjectsRelatedToItinerantTreks`: An object containing many booleans to display/hide objects related to itinerant treks. The keys are `POIs`,`touristicContents`,`sensitiveAreas`,`infrastructures`,`signages`,`service` and are all set to `true` by default. Indeed multi-days treks can be long and have a lot a related objects which is very long to display and not really readable. That's why you can disable some related objects that will not be displayed on itinerant main detail page, but will be displayed on steps detail pages and any other treks detail pages.
+
+## header.json
+
+- `header.json` (default value in [header.json file](https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/header.json)) to define :
+
+ - `logo` : Path to your logo image
+ - `menu`: an object with 3 keys :
+
+ - `supportedLanguages`: Array of available languages: `'CA','DE','FR','EN','ES',IT` are availables.
+ - `defaultLanguage`: Your target audience's main language.
+ - `primaryItemsNumber`: Number of items before dividing the main menu with a "See more" button. _Deprecated_ since 3.19.0: Use the MenuItems feature from Geotrek admin.
+
+## home.json
+
+- `home.json` (default value in [home.json file](https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/home.json)) to define homepage settings :
+
+ - `activityBar`: This is a menu showing all search types (hiking practices, outdoor practices, tourist content categories and tourist events categories).
+
+ - `shouldDisplay`: Boolean allowing this menu to be displayed or not. Its default value is `true`.
+ - `numberOfItemsBeforeTruncation` The number of items displayed on the screen. To see the others, click on the "Show more" button. Its default value is `8`.
+ - `links`: Allows you to customize the order and display of categories links. It's an array containing an object with 3 properties :
+
+ ```typescript
+ {
+ "type" : 'trek' | 'outdoorSite' | 'touristicContent' | 'touristicEvent' ;
+ "grouped" : boolean ; // If set to "true", all activities of the type are grouped under a single link.
+ "iconUrl" : string ; // Optional, url to replace default icon. Used only if "grouped" is set to "true",
+ }
+ ```
+!!! note
+
+ **Activity bar customization**
+
+ - **Default Configuration**: The `activityBar` is enabled by default with four types of content (`trek`, `outdoorSite`, `touristicContent`, `touristicEvent`). Example configuration:
+ ```json
+ "activityBar": {
+ "shouldDisplay": true,
+ "numberOfItemsBeforeTruncation": 8,
+ "links": [
+ { "type": "trek", "grouped": false },
+ { "type": "outdoorSite", "grouped": false }
+ ]
+ }
+ ```
+ - **Reordering or Hiding Categories**: Adjust the order or hide certain categories by modifying the `links` array. For example, to display only `touristicContent` and `outdoorSite`:
+ ```json
+ "links": [
+ { "type": "touristicContent", "grouped": false },
+ { "type": "outdoorSite", "grouped": false }
+ ]
+ ```
+ - **Group Categories**: To group content types under a single button, set `grouped` to `true`:
+ ```json
+ "links": [
+ { "type": "trek", "grouped": true },
+ { "type": "touristicEvent", "grouped": true }
+ ]
+ ```
+
+ - `suggestions`: You can define blocks to display suggestions groups with treks ID, outdoor sites ID, services ID or events ID to highlight on [homepage](https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/customization/config/home.json).
+ Each group has the following properties :
+
+ ```typescript
+ {
+ "titleTranslationId": string: // you can use locales keys with the files inside `translations` folder
+ "iconUrl": string; // url to the icon file
+ "ids": string[]; // list of ids ,
+ "type": 'trek' | 'service' | 'outdoor' | 'events'; // if not set, default to `trek`
+ }
+ ```
+
+ Or you can define a suggestion block to display upcoming events, the structure is quite different:
+
+ ```typescript
+ {
+ "titleTranslationId": string; // you can use locales keys with the files inside `translations` folder
+ "iconUrl": string; // url to the icon file
+ "numberOfItemsToDisplay": number; // Optional; If not defined all upcoming events will be displayed
+ "type": 'upcomingEvents';
+ }
+ ```
+
+ To define suggestions groups you need to build an `object` with the languages code as keys. By this way you can differentiate the valorization of a territory according to the selected language. If you don't need this feature (or if you want the same configuration for several language), use `default` key instead of a language code. The configuration in the example below displays 2 groups of suggestions for all languages except the English version with one different:
+
+ ```json
+ "suggestions": {
+ "default": [
+ {
+ "titleTranslationId": "home.territoryTreks",
+ "iconUrl": "/icons/practice-pedestrian.svg",
+ "ids": ["2", "582", "586", "501", "771", "596"],
+ "type": "trek"
+ },
+ {
+ "titleTranslationId": "home.events",
+ "iconUrl": "/icons/category-events.svg",
+ "ids": ["1", "5"],
+ "type": "events"
+ },
+ ],
+ "en": [
+ {
+ "titleTranslationId": "home.treksDiscovery",
+ "iconUrl": "/icons/pedestrian.svg",
+ "ids": ["2", "582", "586"],
+ "type": "trek"
+ },
+ ]
+ }
+ ```
+
+ PS: For backward compatibility you can still use an array, this is the same behavior that `object` with only a `default` key. For example:
+
+ ```json
+ "suggestions": [
+ {
+ "titleTranslationId": "home.territoryTreks",
+ "iconUrl": "/icons/practice-pedestrian.svg",
+ "ids": ["2", "582", "586", "501", "771", "596"],
+ "type": "trek"
+ },
+ {
+ "titleTranslationId": "home.events",
+ "iconUrl": "/icons/category-events.svg",
+ "ids": ["1", "5"],
+ "type": "events"
+ },
+ ]
+ ```
+
+ - In `welcomeBanner`, you can personnalize the cover on the homepage. You can add an asset on the top of the page: it can either be a video, a single picture or a carousel of images:
+
+ - `videoUrl`: to add a video
+ - `carouselUrls`: to add a carousel of images. You have to add an array of urls
+ - `pictureUrl`: to add a single image
+
+ Only one type of asset can be displayed. If you add several fields (`videoUrl` and `pictureUrl` for example), we will pick one, following this order of priority: video over carousel over picture.
+
+ You can also enable a text to be displayed on the top of this asset:
+
+ - `shouldDisplayText`: `true` to display the text on above the asset, `false` to hide it.
+
+## details.json
+
+- `details.json` allows you to choose whether or not to display sections for each details pages ("trek", "touristicContent", "touristicEvent", "OutdoorSite" and "OutdoorCourse"). See the [default configuration](https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/details.json) .
+ There are 4 properties :
+
+ - `name`: the name of the section
+ - `display`: boolean to display or not this section
+ - `anchor`: boolean to display or not an anchor link in the menu navigation bar
+ - `order`: number to define the position of this section
+
+NB: For "report" and "reservationWidget" sections with `anchors` set to `true`, anchor links are not displayed like other elements, but by a dedicated icon.
+
+## footer.json
+
+- In the `footer.json` file, you can define social networks, informations about your organization, and some links (see [example](https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/customization/config/footer.json)).
+
+ - Social networks: `facebook`, `twitter`, `youtube`, `instagram` or `fallback`.
+ - Contact information such as your name, address, phone number and email.
+ - Links based on the key pair `label`/`url` (can be based on translation labels for multilingual) and/or the key `informationID` whose value is equal to a flatpage identifier.
+
+## filter.json
+
+- `filter.json` to define filters to hide, their order and values (see [example](https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/filter.json). If you want to :
+
+ - Hide some of filters, you have to override their properties with `"display": false`.
+ - Change the label for some filters, you need to define `translatedKey`, and copy the values into the translation files.
+ - The `labels` filter contains an additional `withExclude` parameter. Its default value is `true`. By setting it to `true`, the user can filter the search by excluding a label (`withExclude` only works if your version of Geotrek Admin is equal to or higher than [2.77.0](https://github.com/GeotrekCE/Geotrek-admin/releases/tag/2.77.0); please set it to `false` if this is not the case)
+ - The trek `networks` filter only works if yout version of Geotrek Admin is equal to or higher than [2.108.0](https://github.com/GeotrekCE/Geotrek-admin/releases/tag/2.108.0)
+ - The event `organizer` filter only works if your version of Geotrek Admin is equal to or higher than [2.100.0](https://github.com/GeotrekCE/Geotrek-admin/releases/tag/2.100.0)
+
+## map.json
+
+- `map.json` to define basemaps URL and attributions, center (y, x), default and max zoom level (see [example](https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/customization/config/map.json)).
+
+ - `searchMapCenter`: Array of two numbers `[latitude, longitude]` defining the map center point in the search view,
+ - `searchMapZoom`: Default value is `10`. It defines the zoom level in the search view. **Warning**: It is important that the `searchMapZoom` value is included in the zoom value range of the basemap (`minZoom` and `maxZoom`), otherwise it may generate an error.
+ - `maximumZoomLevel`: Default value is `17`. The default maximum zoom level if the maxZoom option is not defined in map layer (see below)
+ - `displaySecondaryLayersByDefault`: Default value is `true`. Display or not display secondary layers (signages, infractructures and services) at page load on detail pages.
+
+ You can also update the map layers. Three types of map layers are available: classic, satellite and offline. Each of them is structured as follows:
+
+ ```ts
+ interface LayerObject {
+ url: string; // Url of the layer. It needs to be a valid tiles server url or a geoJSON file
+ options: TileLayerOptions; // See https://leafletjs.com/reference.html#tilelayer-option
+ bounds: string; // Url of a geoJSON polygon to display this layer inside.
+ }
+ ```
+
+ The `url` prop should be a valid tiles server to use as base map.
+
+ If its value ends in `.geojson` (or `.json`), its features are displayed on the map. The application looks at the `stroke-width`,`stroke-opacity`, `fill`, `fill-opacity` values of each `feature` `properties` to apply the colors. You can override these values by setting them in the `options` property (identical name but in camelCase format).
+
+ If you define `name`, `photo_url`, `description` and/or `website` in the `properties` of a `feature`, it will be displayed in a tooltip when its feature is clicked in the map.
+
+ - `mapClassicLayers`: array of `LayerObjects` for the default version.
+ - `mapSatelliteLayers`: array of `LayerObjects` for the satellite version.
+ - `mapOfflineLayer`: `LayerObject` registered for offline use. If it's explicitly set to `null`, the application uses the first layer of `mapClassicLayers` as a fallback.
+
+ NB: If you want to have only one map available, you can add `mapSatelliteLayers: null`. This will remove the button that allows the user to switch between two map layers.
+
+ - `zoomAvailableOffline` allows you to define the zoom modes allowed in offline mode. This allows you to control the amount of disk space required when caching. Default `[13,14,15]`
+
+## resultCard.json
+
+- `resultCard.json` to customize the elements to be displayed on featured cards that link to a details page (only trek cards for now).
+
+ - You can display/hide the `location` and `themes` by defining a `display` key.
+ - You can define an array of keywords in `informations` to display them (their order in the array matters). The keywords are as follows:
+ - `'difficulty'`,
+ - `'duration'`,
+ - `'distance'`,
+ - `'positiveElevation'`,
+ - `'negativeElevation'`,
+ - `'courseType'`,
+ - `'networks'`,
+
+Default value is
+`
+"informations": ["difficulty", "duration", "distance", "positiveElevation"]
+`. See [example](https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/resultCard.json).
+
+## redirect.json
+
+- `redirects.json` to define URL rewriting for your instance. For example, you can use this customization to redirect old URL style (Geotrek-rando V2) to the new URL style (Geotrek-rando V3) or to redirect old URL to a new URL after changing the name of a hike in the backend.
+
+ - In `rules`, you can define all the rules needed to redirect clients
+
+ - `source`: must match to the old URL. Use the wildcard `*` to redirect a subdirectory. Use `:varname` to forward a variable to the destination
+ - `destination`: must match to the new URL. Use `:varname` to inject a variable captured in the old URL
+ - `permanent`: Set to `true` if the redirection is permanent. Set to `false` if the redirection is temporally. Default to `false`
+
+ Examples :
+
+ ```json
+ {
+ "rules": [
+ {
+ "source": "/a-cheval/col-de-font-froide",
+ "destination": "/trek/582-col-de-font-froide"
+ },
+ {
+ "source": "/a-pied/:name",
+ "destination": "/search?rawText=:name"
+ },
+ {
+ "source": "/fr/walking/:name",
+ "destination": "/en/search?rawText=:name",
+ "locale": false
+ }
+ ]
+ }
+ ```
+
+You can find more examples and more details following [this link](https://nextjs.org/docs/api-reference/next.config.js/redirects).
\ No newline at end of file
diff --git a/docs/customization/customization-themestyles.md b/docs/customization/customization-themestyles.md
new file mode 100644
index 000000000..74b68bc49
--- /dev/null
+++ b/docs/customization/customization-themestyles.md
@@ -0,0 +1,115 @@
+# Themes and styles
+
+## Colors
+
+You can override colors in `customization/theme/colors.json` file to change the main colors, based on [tailwing default theme](https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/tailwind.config.js).
+
+Example for Cevennes national park orange colors:
+
+```json
+{
+ "primary1": {
+ "DEFAULT": "#ff9100",
+ "light": "#ffa032"
+ },
+ "primary3": "#d57b04"
+}
+```
+
+It's also possible to change category colors :
+
+```json
+{
+ "categories": {
+ "trek": "blue",
+ "events": "red",
+ "outdoor": "#62AB41",
+ "service": "#3B89A2"
+ }
+}
+```
+!!! note
+
+ If global config `groupTreksAndOutdoorFilters` is set to `true`, the `outdoor` color is ignored in favor of the `trek` color.
+
+## CSS
+
+You can override CSS in `customization/theme/style.css` file. To help overriding CSS, some ID have been added on main DIV components:
+
+- `home_content`, `home_activitiesBar`, `home_topHtml`, `home_section`, `home_activitySuggestion`, `banner_carousel`, etc on Homepage
+- `header_logo` in Header
+- Several similar ID on search and detail pages
+- `home_container` to isolate Home page
+- `search_container` to isolate Search page
+- `details_container` to isolate detail pages
+- `flatPage_container` to isolate static flatpages
+
+In addition, some classes prefixed with `custo-*` are gradually being added to facilitate style overrides for components.
+
+!!! note
+
+ **Explanations and differents styling for the main menu**
+
+ - The default requirements to use this feature are :
+
+ - [**Geotrek Rando 3.19.0**](https://github.com/GeotrekCE/Geotrek-rando-v3/releases/tag/v3.19.0)
+ - connected to a [**Geotrek Admin 2.104.0**](https://github.com/GeotrekCE/Geotrek-admin/releases/tag/2.104.0)
+
+ - Since Geotrek Admin 2.104.0, you can define complex menu items.
+
+ - If a submenu contains **fewer than 5 items**, or if **none of the items** in a submenu **contains an image**, the drop-down menu takes on the appearance of a **"small" menu**, if not the **"large" menu**.
+
+ **Small Menu**
+
+ It looks just like the old one (i.e. before version 3.19.0) and you shouldn't have to override the style.
+ But you can always use the `.custo-menu-*` classes to do so.
+
+ 
+
+ **Large Menu**
+
+ To manage this complex menu, styles and elements are added to play with customization.
+ Please note that links in submenus are sorted into 2 groups: links without images (`custo-menu-group--without-imgs`) and links with images (`.custo-menu-group--with-imgs`).
+
+ Default style
+
+ 
+
+ Example to balance photos
+
+ If you have more photos to display and want to balance the structure, you can for example add these selectors to your `customization/theme/style.css`.
+
+ 
+
+ ```css
+ .custo-menu-sub-menu {
+ align-items: start;
+ }
+ .custo-menu-sub-menu .custo-menu-group--with-imgs {
+ flex-direction: row;
+ flex-wrap: wrap;
+ width: 430px;
+ }
+ .custo-menu-sub-menu .custo-menu-group--with-imgs a {
+ flex-basis: 200px;
+ }
+
+ ```
+
+ Example for submenus taking up the entire width of the screen
+
+ 
+
+ ```css
+ .custo-menu-item-wrapper {
+ position: static;
+ }
+ .custo-menu-sub-menu {
+ top: 100%;
+ padding: 1rem 2rem;
+ }
+ /* Display links as row */
+ .custo-menu-group {
+ flex-direction: row;
+ }
+ ```
diff --git a/docs/customization/customization-translation.md b/docs/customization/customization-translation.md
new file mode 100644
index 000000000..0524e4734
--- /dev/null
+++ b/docs/customization/customization-translation.md
@@ -0,0 +1,26 @@
+# Translation customization
+
+You can override every texts in [translations files](https://github.com/GeotrekCE/Geotrek-rando-v3/tree/main/frontend/src/translations), based on default ones.
+
+You should at least override `home.title`, `home.description` and `home.welcome-text`.
+
+Here is an example of overriding the `/customization/translations/en.json` file:
+
+```json
+{
+ "header": {
+ "home": "Welcome"
+ },
+ "home": {
+ "title": "Hiking in nature",
+ "description": "Discover the walks in the region",
+ "welcome-text": "The eco-friendly digital guide to explore and share my local discoveries!"
+ },
+ "footer": {
+ "geotrek": "Geotrek Application"
+ },
+ "report": {
+ "title": "Report a problem or an error along the hike"
+ },
+}
+```
\ No newline at end of file
diff --git a/docs/development.md b/docs/development.md
deleted file mode 100644
index d86437515..000000000
--- a/docs/development.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# Development
-
-Installation in development:
-
-## Prerequisite
-
-- You need to use a node version equal or above 20
-- Use nvm and then:
-
-```bash
-nvm use
-```
-
-Install yarn
-
-```bash
-npm install -g yarn
-```
-
-## Install dependencies
-
-Head to the `frontend` folder and run:
-
-```bash
-yarn
-```
-
-## Start the app
-
-Once your dependencies are installed, start your server in development mode by running:
-
-```bash
-yarn dev
-```
-
-## Customization
-
-To get the proper settings of the rando site in your local environnement :
-
-- Copy/cut the `customization` folder from a rando repository in Geotrekrando-v3/frontend/customization
-- Copy/cut the `medias` folder from a rando repository in Geotrekrando-v3/frontend/src/public/medias
-
diff --git a/docs/development/contributing.md b/docs/development/contributing.md
new file mode 100644
index 000000000..3216b0b1a
--- /dev/null
+++ b/docs/development/contributing.md
@@ -0,0 +1,62 @@
+# Contributing
+
+## Reporting bugs or requesting features
+
+If you encounter any bugs or have suggestions for new features, you can create a ticket in the GitHub issues section. Here's how to proceed:
+
+1. Visit the [issue creation page](https://github.com/GeotrekCE/Geotrek-rando-v3/issues/new).
+2. Select the appropriate template for your issue (bug report, feature request, etc.).
+3. Provide a clear and detailed description of the issue or the new feature you'd like to see implemented :
+
+ - For bugs: Include steps to reproduce the problem, the expected behavior, and any relevant error messages or logs.
+ - For feature requests: Clearly describe the functionality you are proposing and why it would benefit the project.
+
+The development team will review the ticket and follow up with any questions or updates.
+
+## Contributing to Geotrek-rando source code
+
+### Editing the documentation
+
+You can directly modify the documentation files in the repository. They are located in the `/docs` folder. To make changes, you have to clone the repository to your local machine and work on the files, and then create a pull request.
+You can access the documentation files for editing files on [/docs](https://github.com/GeotrekCE/Geotrek-rando-v3/tree/main/docs).
+Make sure to follow the existing style and structure of the documentation to maintain consistency across the project.
+
+### Translations
+
+As maintainers of this product, we don't have enough native speakers to translate Geotrek Rando correctly.
+If you have a little time to read the [translations files](https://github.com/GeotrekCE/Geotrek-rando-v3/tree/add-readthedocs/frontend/src/translations) and contribute, we'd be very grateful 🙏
+If your language doesn't appear in the list, please don't hesitate to [open an issue](https://github.com/GeotrekCE/Geotrek-rando-v3/issues/new).
+
+### Feature request
+
+- Make a fork of the projet and then install it following the [installation](./installation.md) guide.
+- During and after the developement process, you can check your code is correct by using:
+ - `yarn lint`
+ - `yarn tsc`
+ - `yarn test`
+ - or `yarn prepush` which concatenates the three commands below
+- Write unit test if necessary
+- Ensure that all displayed texts are imported from translation files
+- You can run `yarn bundle-analyzer` before and after your modification to ensure that the bundle file doesn't grow excessively.
+- And finally, you can open a pull request
+
+## Contributing to the Geotrek Rando documentation website
+
+This section explains how to contribute to **the documentation website** of the project. If you are interested in making changes to the codebase or contributing to other aspects of the project, please refer to the relevant sections of the contribution guide.
+To contribute to the documentation, it requires **Python 3**. The current version of the documentation has been built using `Python 3.10.12`.
+
+### Running the documentation websire locally
+
+To preview the documentation locally in your environment, follow these steps:
+
+1. Navigate to the `/mkdocs` folder in your project directory.
+2. Install the required dependencies by running the following command:
+ ```bash
+ pip install mkdocs-material
+ ```
+3. Start the MkDocs server using Python:
+ ```bash
+ python3 -m mkdocs serve
+ ```
+4. The local instance of the documentation will be accessible on port 8000 at:
+ [http://127.0.0.1:8000/latest/](http://127.0.0.1:8000/latest/)
diff --git a/docs/deployment.md b/docs/development/deployment.md
similarity index 98%
rename from docs/deployment.md
rename to docs/development/deployment.md
index e9a30b223..eb05b9c86 100644
--- a/docs/deployment.md
+++ b/docs/development/deployment.md
@@ -69,4 +69,4 @@ docker push ghcr.io/geotrekce/geotrek-rando-v3/geotrek-rando-prebuild:latest &&
### Pull the container on your machine and run it
-Follow the steps described in [the install on your own machine documentation](./installation.md).
+Follow the steps described in [the install on your own machine documentation](./../installation.md).
diff --git a/docs/development/installation.md b/docs/development/installation.md
new file mode 100644
index 000000000..4dad20a23
--- /dev/null
+++ b/docs/development/installation.md
@@ -0,0 +1,75 @@
+# Installation
+
+This section explains how to set up the project for development purposes.
+
+## Prerequisites
+
+Before starting the installation, ensure the following:
+
+- **Node.js**: You need to have **Node.js** version **20** or higher installed.
+- **NVM (Node Version Manager)**: It's recommended to use `nvm` to manage your Node.js versions.
+
+To ensure you're using the correct Node version, run:
+
+```bash
+nvm use
+```
+
+If you don't have `nvm` installed, you can find the installation instructions [here](https://github.com/nvm-sh/nvm).
+
+### Install Yarn
+
+To manage project dependencies, install Yarn globally if you haven't already:
+
+```bash
+npm install -g yarn
+```
+
+You can verify the installation by running:
+
+```bash
+yarn --version
+```
+
+## Installing dependencies
+
+Navigate to the `frontend` folder in your project directory:
+
+```bash
+cd frontend
+```
+
+Then, install all the required dependencies by running:
+
+```bash
+yarn
+```
+
+This will install all packages listed in the `package.json` file necessary for the frontend development.
+
+## Starting the application
+
+Once the dependencies are installed, you can start the development server by running:
+
+```bash
+yarn dev
+```
+
+This command will start the application in development mode, typically accessible at [http://localhost:3000](http://localhost:3000).
+
+## Customization
+
+To apply the custom settings and media files for your local development environment, follow these steps:
+
+1. **Customization Settings**:
+ - Copy the `customization` folder from an existing Geotrek-rando repository.
+ - Paste it into the following directory in your project:
+ `Geotrek-rando-v3/frontend/customization`
+
+2. **Media Files**:
+ - Copy the `medias` folder from an existing Geotrek-rando repository.
+ - Paste it into this directory in your project:
+ `Geotrek-rando-v3/frontend/src/public/medias`
+
+These folders contain custom configurations and media assets necessary for your local environment to match the production setup.
+
diff --git a/docs/img/favicon.ico b/docs/img/favicon.ico
new file mode 100644
index 000000000..aab2768d2
Binary files /dev/null and b/docs/img/favicon.ico differ
diff --git a/docs/img/geotrek-rando.png b/docs/img/geotrek-rando.png
new file mode 100644
index 000000000..b5710122b
Binary files /dev/null and b/docs/img/geotrek-rando.png differ
diff --git a/docs/img/home_ecrins.png b/docs/img/home_ecrins.png
new file mode 100644
index 000000000..64010590f
Binary files /dev/null and b/docs/img/home_ecrins.png differ
diff --git a/docs/img/logo.svg b/docs/img/logo.svg
new file mode 100644
index 000000000..638f85e0e
--- /dev/null
+++ b/docs/img/logo.svg
@@ -0,0 +1,26 @@
+
+
+
+
\ No newline at end of file
diff --git a/docs/img/portails.jpg b/docs/img/portails.jpg
new file mode 100644
index 000000000..6fb9719a4
Binary files /dev/null and b/docs/img/portails.jpg differ
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 000000000..bd56d7e03
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,11 @@
+# Geotrek-rando
+
+
+
+Geotrek-rando is the public web application displaying the interface you can use to value your territory treks and tourism products!
+Demo available at [https://gtr3demo.ecrins-parcnational.fr](https://gtr3demo.ecrins-parcnational.fr).
+
+The third version is a full redesign and rewriting of Geotrek-rando with React, and NextJS for Server side rendering (SSR) and SEO.
+
+Geotrek-rando is directly connected to Geotrek-admin v2 API.
+
diff --git a/docs/installation.md b/docs/installation.md
index d50293fce..efa2a5ae5 100644
--- a/docs/installation.md
+++ b/docs/installation.md
@@ -13,9 +13,9 @@ If you follow the [Install without Docker (not recommended)](#install-without-do
To report application crashes and any errors encountered by users, you can use [Sentry](https://sentry.io/).
In the Sentry backoffice, create your project and copy the DSN key which you can paste into the `SENTRY_DSN` environment variable.
-# Install with Docker (recommended)
+## Install with Docker (recommended)
-## Global process
+### Global process
Before starting the technical installation, here is an overview of the global process:
@@ -27,20 +27,20 @@ Before starting the technical installation, here is an overview of the global pr
- They will edit the customization files
- They will download the Docker image, run the Docker container with Docker Compose and make it available with a web browser through NGINX
-## Install Docker
+### Install Docker
You need to have Docker and Docker Compose installed on your own computer or server. Docker allows to easily install and update Geotrek-rando on several plateforms (Linux, Windows, macOS).
- Docker installation documentation is [right here](https://docs.docker.com/engine/install/).
- You will also need to follow the [post install process](https://docs.docker.com/engine/install/linux-postinstall/) as well to be able to download the Geotrek-rando container with your non-root Linux user.
-## Install Geotrek-rando
+### Install Geotrek-rando
You will have to download the Installer of Geotrek-rando and its customization folder template to run the Docker container of Geotrek-rando on your own computer or server.
- Create a folder to install your Geotrek-rando (`/home/myuser/geotrekrando` for instance) and go in this folder
- On your server, download the [Geotrek-rando-installer repository](https://github.com/GeotrekCE/Geotrek-rando-v3-installer) version you want: `wget https://github.com/GeotrekCE/Geotrek-rando-v3-installer/archive/vX.Y.Z.zip` (replace `X.Y.Z` with the version of Geotrek-rando-v3-installer that is compatible with the Geotrek-rando-v3 version you want to use) and unzip it. You can also git clone it (`git pull https://github.com/GeotrekCE/Geotrek-rando-v3-installer.git`)
-- Update the files in the `/customization` folder according to your structure (See [customization documentation](customization.md))
+- Update the files in the `/customization` folder according to your structure (See [customization documentation](./customization/customization-settings.md))
- Go in the root folder of your Geotrek-rando-v3-installer and run the Docker container with launching `docker-compose up -d`
- Your Geotrek-rando is now available at the address of your server on 8080 port (e.g. http://myserver:8080)
@@ -56,7 +56,7 @@ You can also create the optional `.env` file based on the example (`cp .env.exam
If you want to run several Geotrek-rando on the same server, just download one Geotrek-rando-v3-installer for each portal with their own customization and set a different port for each. You should name each Geotrek-rando project with a different container name with adding `COMPOSE_PROJECT_NAME=name_of_geotrek_rando_project` variable in `.env` file. Otherwise the command `docker-compose down && docker-compose up -d` will overwrite the previous container.
-## An example with NGINX
+### An example with NGINX
- Create a new site configuration in your `sites-available` folder (in `/etc/nginx`), `geotrekrando.conf` in this example
- Here is its minimal configuration:
@@ -101,7 +101,7 @@ sudo apt install python3-certbot-nginx
sudo certbot --nginx
```
-## Upgrade Geotrek-rando version
+### Upgrade Geotrek-rando version
To find out the current Geotrek-rando version of your running container, you can execute (by renaming `rando-nodeserver-1` with the name of your container):
@@ -117,7 +117,7 @@ docker-compose pull && docker-compose down && docker-compose up -d
It will download and install the latest version of Geotrek-rando. If you want to install a specific version of Geotrek-rando, you can specify it in your `.env` file, instead of `latest`.
-### Manage Docker images storage on disk
+#### Manage Docker images storage on disk
The old images will stay on your system and use disk storage.
@@ -139,7 +139,7 @@ Docker supports subqueries like this one, let's understand it step by step:
- `-q` (quiet) specifies that you only need to get the images IDs
- `-f` (force) means you want to bypass docker security preventing you to delete used images
-# Install without Docker (not recommended)
+## Install without Docker (not recommended)
If you can't install Docker for some reason, there is also a way to directly deploy the node server to your machines.
@@ -189,7 +189,7 @@ By default, the server will be served on the port 80, you should set the port yo
PORT=82 && yarn start
```
-## Process manager
+### Process manager
If you installed Geotrek-rando without Docker and in order to have a more robust solution to serve your node server, our advice is to use [pm2](https://pm2.keymetrics.io/).
diff --git a/docs/knowledge/caching.md b/docs/knowledge/caching.md
index 3a720a4bd..09082c5c8 100644
--- a/docs/knowledge/caching.md
+++ b/docs/knowledge/caching.md
@@ -1,5 +1,14 @@
# Caching
+- Date created: 2021-12-17
+
+## Context
+
+When new types of content are added (example: activities, type of places information, label, etc.), the related hiking pages then appear in error on the Geotrek-Rando website. This issue only exists in case of new content categories being added, not with every content update.
+Simply restart the site to force the cache update or wait a few hours for the cache to reset.
+
+It is also possible to completely disable Geotrek-Rando's cache but this may impact performance when loading pages.
+
There are 2 caching strategies at work on this project.
## Service worker cache
diff --git a/docs/knowledge/debug.md b/docs/knowledge/debug.md
index 89a422f7f..48f0c30ba 100644
--- a/docs/knowledge/debug.md
+++ b/docs/knowledge/debug.md
@@ -1,5 +1,9 @@
# Debug
+- Date created: 2020-12-31
+
+## Debug mode
+
In order to launch your server in debug mode, you can execute
```bash
diff --git a/docs/knowledge/pages-and-navigation.md b/docs/knowledge/pages-and-navigation.md
index bcce9ca13..ba3dc3867 100644
--- a/docs/knowledge/pages-and-navigation.md
+++ b/docs/knowledge/pages-and-navigation.md
@@ -1,5 +1,9 @@
# Pages and navigation
+- Date created: 2020-12-31
+
+## Context
+
In Next, whenever a file is created into the `src/pages` folder, the server consider it as a "page" and will automatically handle routing.
Therefore, you can navigate from a page to another by hreferencing its route, this will trigger "server side" navigation.
@@ -8,5 +12,5 @@ You can also use the "Link" component from next, in order to perform a "client s
References:
-- https://nextjs.org/docs/api-reference/next/link
-- https://nextjs.org/learn/basics/navigate-between-pages
+- [https://nextjs.org/docs/api-reference/next/link](https://nextjs.org/docs/api-reference/next/link)
+- [https://nextjs.org/learn/basics/navigate-between-pages](https://nextjs.org/learn/basics/navigate-between-pages)
diff --git a/docs/knowledge/server-side-rendering.md b/docs/knowledge/server-side-rendering.md
index 13192fe7b..84a87f454 100644
--- a/docs/knowledge/server-side-rendering.md
+++ b/docs/knowledge/server-side-rendering.md
@@ -1,5 +1,9 @@
# Server side rendering
+- Date created: 2020-12-31
+
+## Context
+
Using Next, we can query data during three lifecycles:
- At build time to get static files
@@ -32,7 +36,7 @@ Keep in mind that everything returned by the getServerSideProps function will be
References:
-- https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering
-- https://github.com/kirill-konshin/next-redux-wrapper
-- https://github.com/kirill-konshin/next-redux-wrapper#usage-with-redux-saga
-- https://github.com/vercel/next.js/tree/canary/examples/with-redux-saga
+- [https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering)
+- [https://github.com/kirill-konshin/next-redux-wrapper](https://github.com/kirill-konshin/next-redux-wrapper)
+- [https://github.com/kirill-konshin/next-redux-wrapper#usage-with-redux-saga](https://github.com/kirill-konshin/next-redux-wrapper#usage-with-redux-saga)
+- [https://github.com/vercel/next.js/tree/canary/examples/with-redux-saga](https://github.com/vercel/next.js/tree/canary/examples/with-redux-saga)
diff --git a/docs/presentation-fr.md b/docs/presentation-fr.md
index adddbc8da..1650b9f11 100644
--- a/docs/presentation-fr.md
+++ b/docs/presentation-fr.md
@@ -1,9 +1,9 @@
# Présentation
-Geotrek-rando v3 est une PWA (Progressive Web App) permettant de mettre en ligne un portail web adapté aux différentes tailles d'écran, dont ceux des appareils mobiles (responsive design).
+Geotrek-rando est une PWA (Progressive Web App) permettant de mettre en ligne un portail web adapté aux différentes tailles d'écran, dont ceux des appareils mobiles (responsive design).
Une PWA est aussi installable sur un appareil mobile directement depuis le navigateur (sans passer par les magasins d'applications Android, Apple et autres) et permet alors une expérience mobile enrichie, avec notamment du contenu disponible hors-ligne.
-Voir https://fr.wikipedia.org/wiki/Progressive_web_app pour en savoir plus sur les PWA.
+Cliquer sur [ce lien](https://fr.wikipedia.org/wiki/Progressive_web_app) pour en savoir plus sur les PWA.
## Page d'accueil
@@ -151,10 +151,10 @@ Il est aussi possible d'afficher sa localisation GPS sur la carte.
## Données
L'application interagit directement avec les données présentes dans une instance de Geotrek-admin, en interrogeant dynamiquement son API.
-Exemple de l'API du serveur de démonstration : https://geotrekdemo.ecrins-parcnational.fr/api/v2/.
+Exemple de l'[API du serveur de démonstration](https://geotrekdemo.ecrins-parcnational.fr/api/v2/).
Pour cela, elle interroge des routes de l'API qui renvoient les objets de la base de données de Geotrek-admin en fonction des paramètres et informations demandées.
-Exemple de la route renvoyant les 10 premières randonnées publiées en français de la pratique 4 (pédestre) pour la page de recherche : https://geotrekdemo.ecrins-parcnational.fr/api/v2/trek/?language=fr&page_size=10&page=1&practices=4&fields=id%2Cdeparture%2Cname%2Cthemes%2Cduration%2Clength_2d%2Cascent%2Cdifficulty%2Creservation_system%2Cattachments%2Cpractice%2Cdeparture_city
+[Exemple de la route](https://geotrekdemo.ecrins-parcnational.fr/api/v2/trek/?language=fr&page_size=10&page=1&practices=4&fields=id%2Cdeparture%2Cname%2Cthemes%2Cduration%2Clength_2d%2Cascent%2Cdifficulty%2Creservation_system%2Cattachments%2Cpractice%2Cdeparture_city) renvoyant les 10 premières randonnées publiées en français de la pratique 4 (pédestre) pour la page de recherche.
Cela permet d'optimiser les chargements de données au strict nécessaire et ainsi d'améliorer les performances.
Les modifications de données réalisées sur Geotrek-admin sont aussi repercutées instantanément sur le portail Geotrek-rando.
@@ -174,7 +174,7 @@ Différents éléments de l'aspect du portail et de son contenu peuvent être cu
- Le contenu du pied de page (footer)
- La carte, son centrage, les fonds utilisés.
-Voir la [documentation sur la customisation](customization.md) pour en savoir plus.
+Voir la [rubrique sur la customisation](./customization/customization-introduction.md) pour en savoir plus.
## Référencement
diff --git a/mkdocs/mkdocs.yml b/mkdocs/mkdocs.yml
new file mode 100644
index 000000000..1b3ee8f0c
--- /dev/null
+++ b/mkdocs/mkdocs.yml
@@ -0,0 +1,163 @@
+# Project information
+site_name: Geotrek-rando v3 documentation
+site_url: https://geotrek-rando-v3.readthedocs.io/latest/
+site_description: Geotrek-rando v3 documentation
+site_author: Geotrek's community
+edit_uri: blob/main/docs/
+
+# Repository
+repo_name: GeotrekCE/Geotrek-rando-v3/
+repo_url: https://github.com/GeotrekCE/Geotrek-rando-v3/
+docs_dir: ../docs
+
+# Configuration
+theme:
+ name: material
+ features:
+ - navigation.footer
+ - announce.dismiss
+ - content.action.edit
+ - content.action.view
+ - content.code.annotate
+ - content.code.copy
+ - content.tabs.link
+ - content.tooltips
+ # header.autohide
+ # navigation.expand
+ - navigation.indexes
+ # navigation.sections
+ # navigation.tabs
+ - navigation.tabs.sticky
+ - navigation.top
+ - navigation.tracking
+ - search.highlight
+ - search.share
+ - search.suggest
+ - toc.follow
+ # toc.integrate
+ palette:
+ # - Dark Mode
+ - media: "(prefers-color-scheme: dark)"
+ scheme: slate
+ toggle:
+ icon: material/weather-sunny
+ name: Dark mode
+ primary: green
+ accent: light green
+ # Light Mode
+ - media: "(prefers-color-scheme: light)"
+ scheme: default
+ toggle:
+ icon: material/weather-night
+ name: Light mode
+ primary: green
+ accent: light green
+ font:
+ text: Roboto
+ code: Roboto Mono
+ favicon: img/favicon.ico
+ logo: img/logo.svg
+ icon:
+ icon:
+ admonition:
+ note: octicons/tag-16
+ abstract: octicons/checklist-16
+ info: octicons/info-16
+ tip: octicons/squirrel-16
+ success: octicons/check-16
+ question: octicons/question-16
+ warning: octicons/alert-16
+ failure: octicons/x-circle-16
+ danger: octicons/zap-16
+ bug: octicons/bug-16
+ example: octicons/beaker-16
+ quote: octicons/quote-16
+
+# Additional configuration
+extra:
+ status:
+ new: Recently added
+ deprecated: Deprecated
+ social:
+ - icon: fontawesome/brands/github
+ link: https://github.com/GeotrekCE/Geotrek-rando-v3/
+ - icon: fontawesome/brands/linkedin
+ link: https://www.linkedin.com/company/geotrek-application
+
+# Extensions
+markdown_extensions:
+ - abbr
+ - admonition
+ - attr_list
+ - def_list
+ - footnotes
+ - md_in_html
+ - toc:
+ permalink: true
+ - pymdownx.highlight:
+ anchor_linenums: true
+ line_spans: __span
+ pygments_lang_class: true
+ - pymdownx.inlinehilite
+ - pymdownx.snippets:
+ auto_append:
+ - includes/mkdocs.md
+ - pymdownx.details
+ - pymdownx.superfences:
+ custom_fences:
+ - name: mermaid
+ class: mermaid
+ format: !!python/name:pymdownx.superfences.fence_code_format
+ - pymdownx.tabbed:
+ alternate_style: true
+ combine_header_slug: true
+ slugify: !!python/object/apply:pymdownx.slugs.slugify
+ kwds:
+ case: lower
+ - pymdownx.magiclink:
+ normalize_issue_symbols: true
+ repo_url_shorthand: true
+ user: GeotrekCE
+ repo: Geotrek-rando-v3
+ # - pymdownx.arithmatex:
+ # generic: true
+ # - pymdownx.betterem:
+ # smart_enable: all
+ # - pymdownx.caret
+ # - pymdownx.keys
+ # - pymdownx.mark
+ # - pymdownx.smartsymbols
+ # - pymdownx.tasklist:
+ # custom_checkbox: true
+ # - pymdownx.tilde
+
+# Page tree
+nav:
+ - Home: index.md
+ - 💡 Présentation:
+ - Présentation générale: presentation-fr.md
+ - 🚀 Installation:
+ - Production setup: installation.md
+ - 🎨 Customization:
+ - Introduction: customization/customization-introduction.md
+ - Settings: customization/customization-settings.md
+ - Theme and style: customization/customization-themestyles.md
+ - Icons : customization/customization-icons.md
+ - Translation: customization/customization-translation.md
+ - HTML and scripts: customization/customization-htmlscripts.md
+ - GDPR: customization/customization-gdpr.md
+ - Media management: customization/customization-mediamanagement.md
+ - 🔧 Development:
+ - Installation: development/installation.md
+ - Deployment: development/deployment.md
+ - Contributing: development/contributing.md
+ - ✨ Knowledge:
+ - Caching: knowledge/caching.md
+ - Debug: knowledge/debug.md
+ - Pages and navigation: knowledge/pages-and-navigation.md
+ - Server side rendering: knowledge/server-side-rendering.md
+ - 🧱 Architecture decision record:
+ - Main framework: adrs/main_framework.md
+ - Deployment solution: adrs/deployment_solution.md
+ - 📝 Changelog:
+ - Release notes: changelog.md
diff --git a/mkdocs/requirements.txt b/mkdocs/requirements.txt
new file mode 100644
index 000000000..40bf9a9b5
--- /dev/null
+++ b/mkdocs/requirements.txt
@@ -0,0 +1,35 @@
+# Copyright (c) 2016-2024 Martin Donath
+
+# Permission is hereby granted, free of charge, to any person obtaining a copy
+# of this software and associated documentation files (the "Software"), to
+# deal in the Software without restriction, including without limitation the
+# rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+# sell copies of the Software, and to permit persons to whom the Software is
+# furnished to do so, subject to the following conditions:
+
+# The above copyright notice and this permission notice shall be included in
+# all copies or substantial portions of the Software.
+
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+# FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+# IN THE SOFTWARE.
+
+# Requirements for core
+jinja2~=3.0
+markdown~=3.2
+mkdocs~=1.6
+mkdocs-material~=9.5.39
+mkdocs-material-extensions~=1.3
+pygments~=2.16
+pymdown-extensions~=10.2
+
+# Requirements for plugins
+babel~=2.10
+colorama~=0.4
+paginate~=0.5
+regex>=2022.4
+requests~=2.26
+
+
+
+
+
+
+
+
+
[](https://datatheca.com/)
+
diff --git a/docs/adrs/deployment_solution.md b/docs/adrs/deployment_solution.md
index b217a84c2..0763bdd61 100644
--- a/docs/adrs/deployment_solution.md
+++ b/docs/adrs/deployment_solution.md
@@ -6,7 +6,8 @@
## Context and Problem Statement
-We need to have an easy way to deploy this server for it to be runnable on the most various environments.
+This analysis has been done in 2020, when we started redesigning Geotrek-rando globally, to choose the right technology.
+We needed to have an easy way to deploy this server for it to be runnable on the most various environments.
## Decision Drivers sorted by priority
diff --git a/docs/adrs/main_framework.md b/docs/adrs/main_framework.md
index c65ddf553..54c7a07c9 100644
--- a/docs/adrs/main_framework.md
+++ b/docs/adrs/main_framework.md
@@ -6,7 +6,8 @@
## Context and Problem Statement
-In order to produce a scalable, performant and efficient front, we need to choose the right framework head start.
+This analysis has been done in 2020, when we started redesigning Geotrek-rando globally, to choose the right technology.
+In order to produce a scalable, performant and efficient front, we needed to choose the right framework head start.
## Decision Drivers sorted by priority
diff --git a/docs/changelog.md b/docs/changelog.md
index 56887a20d..c9115caf2 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1141,4 +1141,4 @@ If you update Geotrek-rando v3, the global Docker process has been updated to av
1.x and 2.x
-----------
-See the repository dedicated to versions 1 and 2 of Geotrek-rando: https://github.com/GeotrekCE/Geotrek-rando
+See the repository dedicated to versions 1 and 2 of Geotrek-rando: https://github.com/GeotrekCE/Geotrek-rando
\ No newline at end of file
diff --git a/docs/customization.md b/docs/customization.md
deleted file mode 100644
index 47a853bd1..000000000
--- a/docs/customization.md
+++ /dev/null
@@ -1,481 +0,0 @@
-# Customization
-
-You can override default settings, colors, CSS, HTML and translations in your own `customization` folder.
-
-See the [general presentation](presentation-fr.md) for an overview of the application.
-
-After each customization changes, you'll have to restart the Docker container by running `docker-compose restart`.
-
-## Settings
-
-Default configuration are defined in files from https://github.com/GeotrekCE/Geotrek-rando-v3/tree/main/frontend/config folder.
-You can override all settings default values in files from your own `customization/config/` folder.
-
-Examples of customizations are available in https://github.com/GeotrekCE/Geotrek-rando-v3/tree/main/frontend/customization/config folder.
-
-In json files, you can just override the primary keys you need. You have to override primary keys globally.
-
-- `global.json` (default value in https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/global.json) to define :
-
- - `searchResultsPageSize`, `mapResultsPageSize`: used to limit the sizes of results per page when fetching API
- - `maxPoiPerPage`: max number of point of interest (POI) displayed on a single trek page
- - `maxTouristicContentPerPage`: max number of touristic contents displayed on a single trek page
- - `portalIds`: eventual portal filters (list of ids).
-
- - If no id has been set, Geotrek-rando retrieves all objets, whether or not they are associated with a portal in Geotrek-admin.
- - If one or more ids have been set (example : [1,3]), Geotrek-rando only retrieves the objets of the configured portals. Therefore, if objects are not associated with any portal in Geotrek-admin, they will not be displayed in Geotrek-rando.
-
- - `enableSensitiveAreas`: boolean, default to false. Set it to true if sensitive areas are defined in your Geotrek-admin
- - `enableOutdoor`: boolean, default to false. Set it to true to enable Outdoor sites and courses
- - `groupTreksAndOutdoorFilters`: boolean, default to false. Groups treks and outdoor filters into a single tab. For this setting to work, `enableOutdoor` must be set to `true`.
- - `apiUrl` : Geotrek-admin API URL
- - `privacyPolicyLink`: link of the privacy policy (More information in [GDPR documentation](customization-scripts-GDPR.md#GDPR)).
- - `googleAnalyticsId`: eventual Google Analytics Id (to activate it, you must set `privacyPolicyLink`)
- - `googleSiteVerificationToken`: eventual code to enable Google Search Console and Google developer tools
- - `enableIndexation`: set this parameter to `false` to disable search engine indexing (default `true`)
- - `baseUrl`: base URL of your portal (for dynamic sitemap.xml)
- - `fallbackImageUri`: this uri is used to generate a default image for a trek or a touristic content if none is defined
- - `touristicContentLabelImageUri` : this uri is used to define the logo of the labeled touristic contents:
- 
- - `applicationName`: application name appearing on PWA
- - `enableReport`: to enable report form in trek detail pages
- - `hCaptchaKey`: string key to enable Captcha validation in the report form. To create/define a key, see https://www.hcaptcha.com/
- - `enableSearchByMap`: to enable searching by map displayed area (bbox)
- - `maxLengthTrekAllowedFor3DRando`: Maximum length of meters allowed to enable 3D mode in the current trek. Adjust this setting carefully as too long a trek could freeze your browser. If this setting is defined to `0` (or `mapSatelliteLayers` from `map.json` is defined to `null`) the 3D mode feature is disabled for the whole application
- - `minAltitudeDifferenceToDisplayElevationProfile`: Minimum altitude difference in meters required to display the elevation profile in the current trek
- - `accessibilityCodeNumber`: emergency number. Default set to `114`.
- - `displayObjectsRelatedToItinerantTreks`: An object containing many booleans to display/hide objects related to itinerant treks. The keys are `POIs`,`touristicContents`,`sensitiveAreas`,`infrastructures`,`signages`,`service` and are all set to `true` by default. Indeed multi-days treks can be long and have a lot a related objects which is very long to display and not really readable. That's why you can disable some related objects that will not be displayed on itinerant main detail page, but will be displayed on steps detail pages and any other treks detail pages.
-
-- `header.json` to define :
-
- - `logo` : Path to your logo image
- - `menu`: an object with 3 keys :
-
- - `supportedLanguages`: Array of available languages: `'CA','DE','FR','EN','ES',IT` are availables.
- - `defaultLanguage`: Your target audience's main language.
- - `primaryItemsNumber`: Number of items before dividing the main menu with a "See more" button. _Deprecated_ since 3.19.0: Use the MenuItems feature from Geotrek admin.
-
-(see default values in https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/header.json)
-
-- `home.json` to define homepage settings.
-
- - `activityBar`: This is a menu showing all search types (hiking practices, outdoor practices, tourist content categories and tourist events categories).
-
- - `shouldDisplay`: Boolean allowing this menu to be displayed or not. Its default value is `true`.
- - `numberOfItemsBeforeTruncation` The number of items displayed on the screen. To see the others, click on the "Show more" button. Its default value is `8`.
- - `links`: Allows you to customize the order and display of categories links. It's an array containing an object with 3 properties:
- ```typescript
- {
- "type" : 'trek' | 'outdoorSite' | 'touristicContent' | 'touristicEvent' ;
- "grouped" : boolean ; // If set to "true", all activities of the type are grouped under a single link.
- "iconUrl" : string ; // Optional, url to replace default icon. Used only if "grouped" is set to "true",
- }
- ```
-
- More explanations in this [comments](https://github.com/GeotrekCE/Geotrek-rando-v3/issues/560#issuecomment-1858166341) (in French).
-
- - `suggestions`: You can define blocks to display suggestions groups with treks ID, outdoor sites ID, services ID or events ID to highlight on homepage (see https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/customization/config/home.json).
- Each group has the following properties :
-
- ```typescript
- {
- "titleTranslationId": string: // you can use locales keys with the files inside `translations` folder
- "iconUrl": string; // url to the icon file
- "ids": string[]; // list of ids ,
- "type": 'trek' | 'service' | 'outdoor' | 'events'; // if not set, default to `trek`
- }
- ```
-
- Or you can define a suggestion block to display upcoming events, the structure is quite different:
-
- ```typescript
- {
- "titleTranslationId": string; // you can use locales keys with the files inside `translations` folder
- "iconUrl": string; // url to the icon file
- "numberOfItemsToDisplay": number; // Optional; If not defined all upcoming events will be displayed
- "type": 'upcomingEvents';
- }
- ```
-
- To define suggestions groups you need to build an `object` with the languages code as keys. By this way you can differentiate the valorization of a territory according to the selected language. If you don't need this feature (or if you want the same configuration for several language), use `default` key instead of a language code. The configuration in the example below displays 2 groups of suggestions for all languages except the English version with one different:
-
- ```json
- "suggestions": {
- "default": [
- {
- "titleTranslationId": "home.territoryTreks",
- "iconUrl": "/icons/practice-pedestrian.svg",
- "ids": ["2", "582", "586", "501", "771", "596"],
- "type": "trek"
- },
- {
- "titleTranslationId": "home.events",
- "iconUrl": "/icons/category-events.svg",
- "ids": ["1", "5"],
- "type": "events"
- },
- ],
- "en": [
- {
- "titleTranslationId": "home.treksDiscovery",
- "iconUrl": "/icons/pedestrian.svg",
- "ids": ["2", "582", "586"],
- "type": "trek"
- },
- ]
- }
- ```
-
- PS: For backward compatibility you can still use an array, this is the same behavior that `object` with only a `default` key. For example:
-
- ```json
- "suggestions": [
- {
- "titleTranslationId": "home.territoryTreks",
- "iconUrl": "/icons/practice-pedestrian.svg",
- "ids": ["2", "582", "586", "501", "771", "596"],
- "type": "trek"
- },
- {
- "titleTranslationId": "home.events",
- "iconUrl": "/icons/category-events.svg",
- "ids": ["1", "5"],
- "type": "events"
- },
- ]
- ```
-
- - In `welcomeBanner`, you can personnalize the cover on the homepage. You can add an asset on the top of the page: it can either be a video, a single picture or a carousel of images:
-
- - `videoUrl`: to add a video
- - `carouselUrls`: to add a carousel of images. You have to add an array of urls
- - `pictureUrl`: to add a single image
-
- Only one type of asset can be displayed. If you add several fields (`videoUrl` and `pictureUrl` for example), we will pick one, following this order of priority: video over carousel over picture.
-
- You can also enable a text to be displayed on the top of this asset:
-
- - `shouldDisplayText`: `true` to display the text on above the asset, `false` to hide it.
-
-- `details.json` allows you to choose whether or not to display sections for each details pages ("trek", "touristicContent", "touristicEvent", "OutdoorSite" and "OutdoorCourse"). See the default configuration at https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/details.json.
- There are 4 properties :
-
- - `name`: the name of the section
- - `display`: boolean to display or not this section
- - `anchor`: boolean to display or not an anchor link in the menu navigation bar
- - `order`: number to define the position of this section
-
-NB: For "report" and "reservationWidget" sections with `anchors` set to `true`, anchor links are not displayed like other elements, but by a dedicated icon.
-
-- In the `footer.json` file, you can define social networks, informations about your organization, and some links (see example in https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/customization/config/footer.json).
-
- - Social networks: `facebook`, `twitter`, `youtube`, `instagram` or `fallback`.
- - Contact information such as your name, address, phone number and email.
- - Links based on the key pair `label`/`url` (can be based on translation labels for multilingual) and/or the key `informationID` whose value is equal to a flatpage identifier.
-
-- `filter.json` to define filters to hide, their order and values (see example in https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/filter.json). If you want to :
-
- - Hide some of filters, you have to override their properties with `"display": false`.
- - Change the label for some filters, you need to define `translatedKey`, and copy the values into the translation files.
- - The `labels` filter contains an additional `withExclude` parameter. Its default value is `true`. By setting it to `true`, the user can filter the search by excluding a label (`withExclude` only works if your version of Geotrek Admin is equal to or higher than [2.77.0](https://github.com/GeotrekCE/Geotrek-admin/releases/tag/2.77.0); please set it to `false` if this is not the case)
- - The trek `networks` filter only works if yout version of Geotrek Admin is equal to or higher than [2.108.0](https://github.com/GeotrekCE/Geotrek-admin/releases/tag/2.108.0)
- - The event `organizer` filter only works if your version of Geotrek Admin is equal to or higher than [2.100.0](https://github.com/GeotrekCE/Geotrek-admin/releases/tag/2.100.0)
-
-- `map.json` to define basemaps URL and attributions, center (y, x), default and max zoom level (see example in https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/customization/config/map.json).
-
- - `searchMapCenter`: Array of two numbers `[latitude, longitude]` defining the map center point in the search view,
- - `searchMapZoom`: Default value is `10`. It defines the zoom level in the search view. **Warning**: It is important that the `searchMapZoom` value is included in the zoom value range of the basemap (`minZoom` and `maxZoom`), otherwise it may generate an error.
- - `maximumZoomLevel`: Default value is `17`. The default maximum zoom level if the maxZoom option is not defined in map layer (see below)
- - `displaySecondaryLayersByDefault`: Default value is `true`. Display or not display secondary layers (signages, infractructures and services) at page load on detail pages.
-
- You can also update the map layers. Three types of map layers are available: classic, satellite and offline. Each of them is structured as follows:
-
- ```ts
- interface LayerObject {
- url: string; // Url of the layer. It needs to be a valid tiles server url or a geoJSON file
- options: TileLayerOptions; // See https://leafletjs.com/reference.html#tilelayer-option
- bounds: string; // Url of a geoJSON polygon to display this layer inside.
- }
- ```
-
- The `url` prop should be a valid tiles server to use as base map.
-
- If its value ends in `.geojson` (or `.json`), its features are displayed on the map. The application looks at the `stroke-width`,`stroke-opacity`, `fill`, `fill-opacity` values of each `feature` `properties` to apply the colors. You can override these values by setting them in the `options` property (identical name but in camelCase format).
-
- If you define `name`, `photo_url`, `description` and/or `website` in the `properties` of a `feature`, it will be displayed in a tooltip when its feature is clicked in the map.
-
- - `mapClassicLayers`: array of `LayerObjects` for the default version.
- - `mapSatelliteLayers`: array of `LayerObjects` for the satellite version.
- - `mapOfflineLayer`: `LayerObject` registered for offline use. If it's explicitly set to `null`, the application uses the first layer of `mapClassicLayers` as a fallback.
-
- NB: If you want to have only one map available, you can add `mapSatelliteLayers: null`. This will remove the button that allows the user to switch between two map layers.
-
- - `zoomAvailableOffline` allows you to define the zoom modes allowed in offline mode. This allows you to control the amount of disk space required when caching. Default `[13,14,15]`
-
-- `resultCard.json` to customize the elements to be displayed on featured cards that link to a details page (only trek cards for now).
-
- - You can display/hide the `location` and `themes` by defining a `display` key.
- - You can define an array of keywords in `informations` to display them (their order in the array matters). The keywords are as follows:
- - `'difficulty'`,
- - `'duration'`,
- - `'distance'`,
- - `'positiveElevation'`,
- - `'negativeElevation'`,
- - `'courseType'`,
- - `'networks'`,
- Default value is `"informations": ["difficulty", "duration", "distance", "positiveElevation"]`. See https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/config/resultCard.json.
-
-- `redirects.json` to define URL rewriting for your instance. For example, you can use this customization to redirect old URL style (Geotrek-rando V2) to the new URL style (Geotrek-rando V3) or to redirect old URL to a new URL after changing the name of a hike in the backend.
-
- - In `rules`, you can define all the rules needed to redirect clients
-
- - `source`: must match to the old URL. Use the wildcard `*` to redirect a subdirectory. Use `:varname` to forward a variable to the destination
- - `destination`: must match to the new URL. Use `:varname` to inject a variable captured in the old URL
- - `permanent`: Set to `true` if the redirection is permanent. Set to `false` if the redirection is temporally. Default to `false`
-
- Examples :
-
- ```json
- {
- "rules": [
- {
- "source": "/a-cheval/col-de-font-froide",
- "destination": "/trek/582-col-de-font-froide"
- },
- {
- "source": "/a-pied/:name",
- "destination": "/search?rawText=:name"
- },
- {
- "source": "/fr/walking/:name",
- "destination": "/en/search?rawText=:name",
- "locale": false
- }
- ]
- }
- ```
-
- You can find more examples and more details following this link : https://nextjs.org/docs/api-reference/next.config.js/redirects
-
-### _Warning:_
-
-- When setting up Google Analytics, you have to setup a flow. When setting up the flow, be careful to enter the corresponding url (the url of your website), otherwise the data will not be received.
-- By default Google analytics is disabled (`googleAnalyticsId` set to `null`), you will have to override it in the `global.json` file of your customization folder.
-
-## Colors
-
-You can override colors in `customization/theme/colors.json` file to change the main colors, based on https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/tailwind.config.js default theme.
-
-Example for Cevennes national park orange colors:
-
-```json
-{
- "primary1": {
- "DEFAULT": "#ff9100",
- "light": "#ffa032"
- },
- "primary3": "#d57b04"
-}
-```
-
-It's also possible to change category colors :
-
-```json
-{
- "categories": {
- "trek": "blue",
- "events": "red",
- "outdoor": "#62AB41",
- "service": "#3B89A2"
- }
-}
-```
-
-NB: If global config `groupTreksAndOutdoorFilters` is set to `true`, the `outdoor` color is ignored in favor of the `trek` color.
-
-## CSS
-
-You can override CSS in `customization/theme/style.css` file. To help overriding CSS, some ID have been added on main DIV components:
-
-- `home_content`, `home_activitiesBar`, `home_topHtml`, `home_section`, `home_activitySuggestion`, `banner_carousel`, etc on Homepage
-- `header_logo` in Header
-- Several similar ID on search and detail pages
-- `home_container` to isolate Home page
-- `search_container` to isolate Search page
-- `details_container` to isolate detail pages
-- `flatPage_container` to isolate static flatpages
-
-In addition, some classes prefixed with `custo-*` are gradually being added to facilitate style overrides for components.
-A dedicated [ticket](https://github.com/GeotrekCE/Geotrek-rando-v3/issues/1079) shows explanations and differents styling for the main menu (available since 3.19.0).
-
-## Translations
-
-You can override every texts in translations files, based on default ones (https://github.com/GeotrekCE/Geotrek-rando-v3/tree/main/frontend/src/translations).
-
-You should at least override `home.title`, `home.description` and `home.welcome-text`.
-
-## HTML / Scripts
-
-### HTML templates :
-
-You can include some HTML parts in different sections of the layout application.
-These templates can be translated by using the language code as a suffix (e.g. `homeTop-en.html` will be rendered only for the English interface). The application tries to find the localized template first, otherwise it tries the non-localized template, otherwise it displays nothing.
-NB: If you want to display a message common to all languages but not to a particular language (e.g. french), just create the template suffixed with its language code (e.g. `-fr.html`) and leave it empty, and voilà!
-
-See examples in https://github.com/GeotrekCE/Geotrek-rando-v3/tree/main/frontend/customization/html.
-
-#### Templates available on all pages
-
-- `customization/html/headerTop.html`: before the header section
-- `customization/html/headerBottom.html`: after the header section and before the content page
-- `customization/html/footerTop.html`: before the footer section and after the content page
-- `customization/html/footerBottom.html`: after the footer section
-
-#### Templates available on home page
-
-- `customization/html/homeTop.html`: first section of the homepage
-- `customization/html/homeBottom.html`: last section of the homepage
-
-#### Templates on details page (trek, touristic content, touristic event, outdoor site and outdoor course)
-
-You can create your own templates to display practical information or widgets in different parts of the details page. There are 3 steps to follow:
-
-1. Create a new file suffixed with `.html` in `customization/html/details/` (e.g. `example.html`) and fill the the content with html tags
-
- ```html
-