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.

Modifier le code pour ajouter une famille

• Ajouter la famille dans la liste des résistants dans le fichier 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.
  • noms: les noms complets des parents au format Prénom1 Nom1 et Prénom2 Nom2
  • enfants: Prénoms des enfants
  • departement: Département parmi la liste de valeur défini dans le type Departement dans le fichier src/Resistant.ts. Si le département manque dans la liste il faut le rajouter.
  • academie: Académie parmie la liste de valeur défini dans le type Academie dans le fichier src/Resistant.ts. Si l'académie manque dans la liste il faut la 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. (https://jsstringconverter.bbody.io/ peut-être utilisé pour convertir le textet en string js)
  • latitude & longitude: à déterminer avec google maps à partir de la ville de la famille.
  • 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
  • lien_declaration: getResistantDeclarationUrl(<id>) id définit au dessus,
  • 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 avec le nom <id>.jpg dimension 2048x2048
• Ajouter la déclaration: Ajouter le pdf de la déclaration dans le répertoire 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:

<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