Ce répertoire contient le code source du club étudiant QuantumÉTS. Il s'agit d'un site web statique construit avec Next.js, Tailwind CSS et TypeScript.
L'usage générique de ce site web est documenté dans le fichier README_CSS-Theme.md, qui accompagnait le thème utilisé ici.
La documentation spécifique à notre usage et aux modifications apportées se trouve ci-dessous.
Les problèmes et les demandes de changements sont gérés dans le dépôt GitHub - Issues.
Pour démarrer l'édition en local, vous devez d'abord cloner le dépôt :
git clone https://github.com/QuantumETS/QuantumETS.github.io.git
cd QuantumETS.github.ioEnsuite, installez les dépendances :
npm installNote
npm est le gestionnaire de paquets par défaut pour Node.js. Il faut donc d'abord installer Node.js pour pouvoir utiliser npm. Vous pouvez télécharger Node.js depuis nodejs.org.
Lorsque les dépendances sont installées, le site peut être démarré en mode développement avec la commande suivante :
npm run devCela lancera le serveur de développement et vous pourrez accéder au site à l'adresse http://localhost:3000.
Le déploiement du site est automatisé via GitHub Actions. Chaque fois qu'une modification est poussée sur la branche main, le site est reconstruit et déployé automatiquement en tant que site statique sur GitHub Pages.
Si un déploiement échoue, celui-ci sera visible dans l'onglet Actions
Plusieurs sections du site demandent une attention particulière pour être maintenues à jour :
- Accueil-Membres de l'équipe : Cette section doit être mise à jour avec les informations des membres actuels du club. Les photos et les descriptions doivent être modifiées pour refléter les membres en fonction de l'année scolaire.
- Accueil-Compétitions : Les informations sur les compétitions doivent être mises à jour pour refléter les résultats et les événements récents.
- Accueil-Commanditaires : Les commanditaires du club doivent être mis à jour pour refléter les partenariats actuels. Les logos et les liens doivent être vérifiés pour s'assurer qu'ils sont corrects.
- Apprendre : Cette section contient les ressources pédagogiques de niveau débutant développées par le club. Elle contient aussi des liens vers les présentations des ateliers et des conférences passées.
- Événements : Les pages d'événements personnalisées (bannières, sections de texte, horaires) et le menu déroulant dans la barre de navigation. Voir docs/events-maintenance.md pour la documentation complète.
Le contenu de cette section est géré dans le fichier src/template/Testimonial.tsx. Chaque membre de l'équipe est représenté par un objet TestimonialCard défini dans le fichier src/members/MemberCard.tsx. Pour ajouter ou modifier un membre, il suffit de modifier le
const Members = () => (
<Background color="bg-gray-200">
<Section title="Membres de l'équipe">
<div className="grid grid-cols-1 md:grid-cols-2 md:divide-x md:divide-gray-200 xl:grid-cols-4">
<TestimonialCard
image={{
src: 'public/assets/john-doe.jpg',
alt: 'John Doe',
}}
author={{
name: 'John Doe',
position: 'Administrateur',
}}
/>
</div>
</Section>
</Background>
);Le contenu de cette section est géré dans le fichier src/template/Events.tsx. Chaque compétition est représentée comme une entrée dans un tableau table. Il suffit d'ajouter ou de modifier les entrées en suivant le format
<tr className="align-top">
<td className="whitespace-normal px-6 py-4">
<Link target="_blank" href="LIEN_VERS_LE_SITE_DE_LA_COMPÉTITION">
<div className="text-sm font-medium text-blue-500 underline">
Nom de la compétition
</div>
</Link>
</td>
<td className="whitespace-normal px-6 py-4">Mois Année de la compétition</td>
<td className="whitespace-normal px-6 py-4">
<p>
Description de notre activité dans la compétition, faits marquants, constitution des équipes, etc.
</p>
</td>
<td className="whitespace-normal px-6 py-4">
<span className="inline-flex rounded bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">
Statut de la compétition (Terminé, En cours, À venir)
</span>
</td>
<td className="whitespace-normal px-6 py-4">
Résultats de la compétition (1er, 2e, 3e, etc. ou mention honorable)
</td>
</tr>Cette section est gérée dans le fichier src/template/Customer.tsx. Chaque commanditaire est représenté par un objet CustomerLogo défini dans le fichier src/customers/CustomerLogo.tsx.
<CustomerLogo
src="/assets/images/LOGO_DU_COMMANDITAIRE.svg"
alt="description du commanditaire"
className="h-32"
/>La section "Apprendre" est gérée à l'aide des fichiers suivants :
src/template/pages/Notebook.tsxsrc/template/DescriptionNotebooks.tsxsrc/template/Notebooks.tsx
Les ressources pédagogiques mises de l'avant comportent un bouton avec un lien menant vers le notebook hébergé sur Deepnote. S'assurer que les liens sont à jour et publiques.
Caution
Le lien des notebook étant public, s'assurer que les permissions sont correctement configurées pour éviter que ceux-ci ne soient modifiés par des personnes non autorisées. Il est recommandé de configurer en mode lecture seulement, sans possibilité d'exécution, puisque l'output est déjà généré et visible dans le notebook.
Important
Idéalement, les notebooks sont maintenus à jour régulièrement par les membres du club.
{/* src\template\Notebooks.tsx */}
[...]
<NotebookRow
title="Nom du Notebook"
description={
<>
<p>
Description du notebook...
</p>
</>
}
link="https://lien_vers_le_notebook_deepnote.com"
/>
[...]La gestion complète des pages d'événements est documentée dans docs/events-maintenance.md.
Résumé rapide :
- Créer une page : Ajouter un fichier sous
src/pages/events/mon-evenement.tsx - Ajouter au menu : Modifier le tableau
eventLinksdanssrc/template/Navbar.tsx - Composants disponibles :
EventTitle,EventText,EventSchedule,EventGuests,EventFAQ,EventLayout
Consultez la documentation complète pour les détails d'utilisation de chaque composant et des exemples de code.