feat: pages a propos et mentions legales en markdown

package.json

@@ -24,6 +24,7 @@
     "babel-loader": "^8.2.2",
     "css-loader": "^5.2.6",
     "express": "^4.17.1",
+    "raw-loader": "^4.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
@@ -33,6 +34,11 @@
   },
   "dependencies": {
     "react-data-table-component": "^7.0.0-rc2",
+    "react-markdown": "^8.0.5",
+    "rehype-raw": "^6.1.1",
+    "remark-directive": "^2.0.1",
+    "remark-emoji": "^3.1.0",
+    "remark-gfm": "^3.0.1",
     "styled-components": "^5.3.0",
     "swagger-ui": "^4.1.3"
   }

src/components/About.js

@@ -1,6 +1,12 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
 import PageTitle from './PageTitle';
+import ReactMarkdown from 'react-markdown';
+import gfm from 'remark-gfm';
+import remarkDirective from 'remark-directive';
+import remarkEmoji from 'remark-emoji';
+import rehypeRaw from 'rehype-raw';
+import aboutContent from '../data/content/about.md';
 
 /**
  * Page providing informations
@@ -14,22 +20,12 @@ class About extends React.Component {
         return (
             <main className="main" role="main" tabIndex="-1">
                 <PageTitle title="A propos"/>
-                <div className="container-content">
-                    <div className="wysiwyg">
-                        <p className="lead" >Cette application permet de tester IGNF/validator-api.</p>
-
-                        <p>Les modèles proposés sont ceux des documents d'urbanisme provenant du <a href="https://www.geoportail-urbanisme.gouv.fr">Géoportail de l'urbanisme</a>* et un modèle de PCRS (Plan Corps de Rue Simplifié). </p>
-
-                        <p>Ce service ne nécessite aucune authentification et ne collecte donc aucune donnée personnelle.</p>
-
-                        <p>Toutes les validations sont publiques et consultables par quiconque en possède le lien.</p>
-
-                        <p>Les données ne sont pas conservées au delà d'un délai d'un mois sur le serveur, et ce quel que soit le résultat de la validation qui les concerne.</p>
-
-                        <p className="alert alert-warning" role="alert">
-                            *Attention, les documents validés par ce démonstrateur ne sont pas forcément valides pour le Géoportail de l'urbanisme, qui réalise des contrôles supplémentaires.
-                        </p>
-                    </div>
+                <div className="container-content container-content--smaller">
+                    <ReactMarkdown
+                        children={aboutContent}
+                        className="wysiwyg"
+                        remarkPlugins={[gfm, remarkDirective, remarkEmoji]}
+                        rehypePlugins={[rehypeRaw]} />
                 </div>
             </main>
         )

src/components/LegalNotice.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';
+import ReactMarkdown from 'react-markdown';
+import legalContent from '../data/content/legal.md';
 import PageTitle from './PageTitle';
 
 /**
@@ -12,33 +14,14 @@ class LegalNotice extends React.Component {
 
     render() {
         const url = "demo-validator.ign.fr";
+
         return (
             <main className="main" role="main" tabIndex="-1">
                 <PageTitle title="Mentions légales"/>
                 <div className="container-content container-content--smaller">
-                    <div className="wysiwyg">
-                        <h3>Editeur</h3>
-
-                        <p>Le site {url} est édité par l’Institut national de l’information géographique et forestière (IGN), 73 avenue de Paris, 94165 SAINT-MANDE CEDEX, France.</p>
-
-                        <p>Tél : 01 43 98 80 00.</p>
-
-                        <p>Directeur de la publication : Sébastien Soriano, Directeur général de l'IGN.</p>
-
-                        <h3>Hébergeur</h3>
-
-                        <p>Le site {url} est hébergé par Cegedim S.A., 137 rue d'Aguesseau, 92641 Boulogne-Billancourt Cedex, France.</p>
-
-                        <h3>Droit de propriété intellectuelle</h3>
-
-                        <p>Les illustrations, le contenu éditorial et les divers éléments de la charte graphique sont des éléments dont l’IGN détient la propriété ou le droit d’exploitation.</p>
-
-                        <p>L’utilisation des documents ou éléments du site est soumise à l’accord préalable de notre établissement.</p>
-
-                        <h3>Liens hypertextes proposés sur {url}</h3>
-
-                        <p>Les liens insérés dans les pages du site {url} vers des sites tiers sont proposés à titre d’information ; le contenu des sites vers lesquels ces liens conduisent n’engage pas la responsabilité de l’éditeur.</p>
-                    </div>
+                    <ReactMarkdown
+                        children={legalContent.replace(/{url}/g, url)}
+                        className="wysiwyg" />
                 </div>
             </main>
         )

src/components/ValidationForm.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import config from '../config';
-import standards from '../data/standards';
+import standards from '../data/standards/standards';
 import projections from '../data/projection.json';
 
 import { Redirect } from "react-router-dom";

src/data/content/about.md

@@ -0,0 +1,29 @@
+[comment]: # (Contenu de la page A propos)
+
+<p class="lead">Cette application permet de tester IGNF/validator-api</p>
+
+## Le principe
+
+Cette application permet de valider et de normaliser les données géographiques et documents présents dans une arborescence de fichiers par rapport à un modèle.
+
+Ce service ne nécessite aucune authentification et ne collecte donc aucune donnée personnelle.
+
+Toutes les validations sont publiques et consultables par quiconque en possède le lien.
+
+Les données ne sont pas conservées au delà d'un délai d'un mois sur le serveur, et ce quel que soit le résultat de la validation qui les concerne.
+
+## Les modèles
+
+### Standards de documents d'urbanisme
+
+Ces standards proviennent du [Géoportail de l'urbanisme](https://www.geoportail-urbanisme.gouv.fr/).
+
+> :warning: **Attention**, les documents validés par ce démonstrateur ne sont pas forcément valides pour le Géoportail de l'urbanisme, car ce dernier réalise des contrôles supplémentaires.
+
+### Standard PCRS
+
+Il s'agit du standard PCRS (**P**lan **C**orps de **R**ue **S**implifié) v2.0 élaboré par le [Groupe de Travail PCRS du CNIG](http://cnig.gouv.fr/gt-pcrs-accompagnement-a1444.html).
+
+### Standard Naviforest
+
+Il s'agit du standard national de données dessertes pour le transport de bois élaboré par le [Groupe de travail du CNIG](http://cnig.gouv.fr/gt-dessertes-pour-les-transports-de-bois-a18535.html).

src/data/content/legal.md

@@ -0,0 +1,21 @@
+### Editeur
+
+Le site {url} est édité par l’Institut national de l’information géographique et forestière (IGN), 73 avenue de Paris, 94165 SAINT-MANDE CEDEX, France.
+
+Tél : 01 43 98 80 00.
+
+Directeur de la publication : Sébastien Soriano, Directeur général de l'IGN.
+
+### Hébergeur
+
+Le site {url} est hébergé par Cegedim S.A., 137 rue d'Aguesseau, 92641 Boulogne-Billancourt Cedex, France.
+
+### Droit de propriété intellectuelle
+
+Les illustrations, le contenu éditorial et les divers éléments de la charte graphique sont des éléments dont l’IGN détient la propriété ou le droit d’exploitation.
+
+L’utilisation des documents ou éléments du site est soumise à l’accord préalable de notre établissement.
+
+### Liens hypertextes proposés sur ${url}
+
+Les liens insérés dans les pages du site {url} vers des sites tiers sont proposés à titre d’information ; le contenu des sites vers lesquels ces liens conduisent n’engage pas la responsabilité de l’éditeur.

webpack.config.js

@@ -11,11 +11,15 @@ module.exports = {
         rules: [{
             test: /\.js$/,
             exclude: /node_modules/,
-            loader: 'babel-loader'
+            loader: 'babel-loader',
         },
         {
             test: /\.css$/i,
-            use: ["style-loader", "css-loader"],
+            use: ['style-loader', 'css-loader'],
+        },
+        {
+            test: /\.md$/i,
+            use: ['raw-loader'],
         }]
     },
     optimization: {