Privacy

←→

Contenu de la page /confidentialite et de la fenêtre du même nom — la trace est analysée dans le navigateur, ce qui part vers quelles sources, et la mesure d’audience.

stableÀ valider
// Titre : Page Confidentialité
import Privacy from '@pathou/components/Privacy';

export default function Exemple() {
  return (
    <div className="ip-main" style={{ width: 720, maxHeight: 680, overflowY: 'auto' }}>
      <Privacy />
    </div>
  );
}

Installation

Copie le fichier dans ton projet, ainsi que les tokens qu’il utilise.

src/components/Privacy.tsx
/**
 * Vie privée, ouverte depuis le pied de page de l'accueil : où vont les données de la trace, ce que compte Umami, ce qui reste dans le navigateur.
 * Doit suivre ce que fait le code : événements de lib/analytics.ts (track), clés de lib/storage.ts et caches d'osm/.
 */

/** Trajet des données, du plus détaillé au moins détaillé : chaque étape reçoit moins que la précédente. */
const ROUTE: { where: string; gets: string; never: string }[] = [
  {
    where: 'Ton navigateur',
    gets: 'Le fichier GPX entier. Il est lu et analysé ici, sur ton appareil, et disparaît quand tu fermes l’onglet.',
    never: 'Aucun serveur de Pathou ne le reçoit ni ne le stocke.',
  },
  {
    where: 'Les services de cartes et d’altitude',
    gets: 'Les coordonnées des points de la trace, pour obtenir l’altitude, les chemins, les photos et les fonds de carte.',
    never: 'Le fichier lui-même : ni son nom, ni les heures de passage, ni la fréquence cardiaque ou la puissance qu’il peut contenir.',
  },
  {
    where: 'Umami, la mesure d’audience',
    gets: 'Des compteurs : une visite, une trace analysée, un réglage changé.',
    never: 'Aucun lieu, aucune coordonnée, rien du contenu de la trace.',
  },
];

/** Actions comptées, regroupées comme l'utilisateur les vit ; noms d'événements dans App, Welcome et TrackView. */
const EVENTS: [action: string, recorded: string][] = [
  ['Trace analysée', 'sa longueur arrondie à 10 km, l’origine de l’altitude (modèle national, GPS ou relief mondial), si les chemins ont pu être chargés, si c’est la trace d’exemple'],
  ['Analyse impossible', 'le message d’erreur affiché'],
  ['Réglages', 'la pratique, le niveau ou le fond de carte choisi'],
  ['Alternatives', 'une alternative affichée ou appliquée, le GPX téléchargé et le nombre d’alternatives qu’il contient'],
  ['Exploration', 'une photo au sol ouverte, un survol 3D, la visite guidée lancée, terminée ou passée (et à quelle étape), un nouvel essai pour les chemins'],
];

/** `onShowSources` : ouvre la modale des sources depuis l'accueil ; sans lui (page /confidentialite), un lien vers la page des sources. */
export default function Privacy({ onShowSources }: { onShowSources?: () => void }) {
  return (
    <div className="privacy">
      <p className="modal-lead">
        Pathou analyse ta trace dans ton navigateur. Il n’y a ni compte, ni cookie, ni publicité, et Pathou ne garde aucune donnée sur toi.
      </p>

      <ol className="privacy-route" aria-label="Où vont les données de ta trace">
        {ROUTE.map((s) => (
          <li key={s.where}>
            <h3>{s.where}</h3>
            <dl>
              <div>
                <dt>Reçoit</dt>
                <dd>{s.gets}</dd>
              </div>
              <div>
                <dt>Jamais</dt>
                <dd>{s.never}</dd>
              </div>
            </dl>
          </li>
        ))}
      </ol>

      <section className="privacy-part" aria-labelledby="privacy-umami">
        <h3 id="privacy-umami">Ce qu’Umami compte</h3>
        <p>
          Umami est un outil de mesure d’audience sans cookie. Il sert à savoir combien de personnes utilisent Pathou et quelles fonctions leur servent. À chaque
          visite, il enregistre la page ouverte (sans les paramètres de l’adresse), le site d’où tu viens, ton navigateur, ton système, le type et la taille de ton
          écran, ta langue, et le pays, la région et la ville déduits de ton adresse IP. Il compte aussi ces actions&nbsp;:
        </p>
        <table className="privacy-events">
          <tbody>
            {EVENTS.map(([action, recorded]) => (
              <tr key={action}>
                <th scope="row">{action}</th>
                <td>{recorded}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <p>
          Ton adresse IP n’est pas conservée. Pour reconnaître un même visiteur sans cookie, Umami calcule une empreinte à partir de ton adresse IP, de ton
          navigateur et d’une valeur qui change chaque mois&nbsp;: le mois suivant, tu redeviens un inconnu. Les données restent 6 mois sur les serveurs d’Umami
          Cloud, en Europe et aux États-Unis.
        </p>
        <p>
          Pour ne pas être compté, active «&nbsp;Ne pas me pister&nbsp;» dans ton navigateur ou utilise un bloqueur de publicité&nbsp;: Umami n’envoie alors rien, et
          Pathou fonctionne exactement pareil.
        </p>
      </section>

      <section className="privacy-part" aria-labelledby="privacy-local">
        <h3 id="privacy-local">Ce qui reste sur ton appareil</h3>
        <p>
          Ta pratique, ton niveau, ton fond de carte, tes vitesses moyennes et le fait d’avoir vu la visite guidée sont mémorisés pour ta prochaine venue. Les
          chemins, lieux et points d’intérêt (eau, abris, ravitaillement) OpenStreetMap des zones déjà analysées restent un mois en cache, pour aller plus vite. Rien de tout cela ne quitte ton
          appareil&nbsp;; pour l’effacer, supprime les données du site pathou.com dans les réglages de ton navigateur.
        </p>
      </section>

      <section className="privacy-part" aria-labelledby="privacy-services">
        <h3 id="privacy-services">Les services contactés</h3>
        <p>
          Les coordonnées de la trace partent vers les fournisseurs des données&nbsp;: instituts géographiques nationaux (IGN, swisstopo…) pour l’altitude, serveurs
          OpenStreetMap pour les chemins, Panoramax pour les photos, serveurs de fonds de carte pour les images affichées. Comme pour tout site, chacun voit ton
          adresse IP et la zone demandée. Pathou lui-même est servi par Cloudflare et ne tient aucun journal des visites.
        </p>
        <p>
          {onShowSources ? (
            <button className="hp-link strong" onClick={onShowSources}>
              Voir la liste des sources
            </button>
          ) : (
            <a className="hp-link strong" href="/sources">
              Voir la liste des sources
            </a>
          )}
        </p>
      </section>
    </div>
  );
}

Tokens : --panel --text --muted --line --accent

Utilisation

import Privacy from './components/Privacy';

<Privacy onShowSources={openSources} />

Guidelines

  • MUST
    Lister chaque service qui reçoit une partie de la trace ; tenir la liste à jour avec le code.

Référence de l’API

PropTypeDéfaut
onShowSources() => void—