resistants/README.md

# Description

La liste des résistants enfance libre est gérée par le code dans ce repo git.

Ce code gère la liste des résistants en vue carte, vue liste, vue photo et en vue détaillée.

La liste est embarquée dans le site global squarespace à deux endroits:

- Sur la home page (https://www.enfance-libre.fr/)
- Sur la page résistants (https://www.enfance-libre.fr/resistants).

# Ajouter une famille

## Quelles familles ajouter

Notion contient une [Liste des Familles à publier sur le site](https://www.notion.so/5b69e02b296d4a578f8c8ab7fe8b05da?v=bd01159ed0bb42fa9dd16caa1fba93e7).

## Modifier le code pour ajouter une famille

- Ajouter la famille dans la liste des résistants dans le fichier [src/resistants.ts](src/resistants.ts) en prenant les informations depuis Notion
  - `id`: basé sur les noms des parents sans accents au format `prenom1-prenom2` ou `prenom-nom` pour les familles monoparentales sans accents ni caractères spéciaux.
  - `noms`: les noms complets des parents au format `Prénom1 Nom1 et Prénom2 Nom2` ou `Prénom1 et Prénom2 NomCommun`
  - `enfants`: Prénoms des enfants au format `Enfant 1, Enfant 2 et Enfant 3`
  - `departement`: Département parmi la liste de valeur défini dans le `type Departement` dans le fichier [src/Resistant.ts](src/Resistant.ts). Si le département manque dans la liste il faut le rajouter.
  - `presentation`: Le text de presentation pour le site web. A prendre depuis le contenu de la page notion. ⚠️ Il est souvent nécessaire de nettoyer les fins de lignes et saut de ligne sur le contenu Notion. (https://jsstringconverter.bbody.io/ peut-être utilisé pour convertir le textet en string js, il faut cocher `Add Newlines` et mettre `Variable Name` à vide)
  - `latitude` & `longitude`: à déterminer avec google maps à partir de la ville de la famille et prendre dans l'url les 2 elements qui suivent le @ par exemple pour [Lyon](https://www.google.fr/maps/place/Lyon/@45.7579507,4.8351301,18724m/data=!3m2!1e3!4b1!4m6!3m5!1s0x47f4ea516ae88797:0x408ab2ae4bb21f0!8m2!3d45.764043!4d4.835659!16zL20vMGRwcmc?hl=fr&entry=ttu&g_ep=EgoyMDI0MDkyMy4wIKXMDSoASAFQAw%3D%3D) les latitude et longitude sont 45.7580409 et 4.752729
  - `date_declaration`: à prendre dans la preuve d'envoi du courrier de DC ou à defaut dans le corps du courrier ou à défaut la date d'intégration dans notion
  - `mention`: mention additionnelle. Laissé vide la plupart du temps.
  - `video`: vidéo de présentation. Laissé vide la plupart du temps.
- Ajouter la photo: Ajouter la photo dans le répertoire [src/photos](src/photos) avec le nom `<id>.jpg` dimension 2048x2048
- Ajouter la déclaration: Ajouter le pdf de la déclaration dans le répertoire [src/declarations](src/declarations) avec le nom `<id>.pdf`

## Vérifier les changements

yarn dev peut être utilisé pour vérifier que le contenu pour la famille.

- http://localhost:5173/resistants/#/ permet de vérifier que la liste s’affiche bien
- http://localhost:5173/resistants/#/id permet de vérifier que le détail d’une famille s’affiche bien

## Publier les changements

- Commiter avec un commit message “feat: ajout de Prénom1 et Prénom2”
- Le push vers main va déclencher la CI de mise à jour du site web.

# Archi

## Code

Le code utilisé dans squarespace pour le chargement du modules est le suivant:

```html
<div id="root"></div>
<script
  type="module"
  crossorigin
  src="https://enfance-libre.frama.io/resistants/resistants.js"
></script>
<link
  rel="stylesheet"
  href="https://enfance-libre.frama.io/resistants/resistants.css"
/>
```

Il faut faire attention à ce que que les points d'entrés exposé par la build soient toujours syncrhonisé avec le code dans squarespace.

## Gestion des urls du site squarespace vs frama.io

Le js et les assets du module résistants sont servis depuis la gitlab page de framagit (https://enfance-libre.frama.io/resistants) alors que le site est géré par squarespace sous le domaine https://www.enfance-libre.fr/.
Les assets doivent donc être gérés en url absolue, pour ceci on utilise notemment le paramètre "base" dans la config bite différement en dev et en build de ci.

## Différences entre la home page et page résistants

- La taille du composant
- Le mode par défaut: en mode carte sur la home page et liste sur la page résistants
- La gestion de la navigation: La navigation sur le détail dans la home page redirigre vers le détails dans la page résistants