logo normal logo hover

Antre des Loutres

Astroloutre

Astroloutre
30 juillet 2026
Site web
🏷️ Version: v1.7.0 📅 Dernier commit : 5 août 2026 Code source Ouvrir le projet Wiki

Site de l'Antre des Loutres, lieu ou nos utilisateurs peuvent admirer leurs statistiques et accomplissements.

Contributeurs

matheo-1712 Corentin-cott

Langages

  • Astro 70.3%
  • TypeScript 22.9%
  • CSS 6.7%
  • JavaScript 0.1%

Astroloutre 🦦

Bienvenue sur le dépôt du site web de L'Antre des Loutres. Ce projet est une application web statique moderne construite avec Astro et React, conçue pour la performance, la flexibilité et une expérience utilisateur fluide.

License: MIT Website shields.io

🚀 Technologies

Ce projet utilise une stack moderne :

  • Framework : Astro (v5) - Pour la génération statique et la performance.
  • UI Library : React (v19) - Pour les composants interactifs complexes (tableaux de classements, etc.).
  • Styling : Tailwind CSS (v4) & Variables CSS natives pour la gestion des thèmes.
  • Langage : TypeScript - Pour un code robuste et typé.

🛠️ Installation et Démarrage

Prérequis

  • Node.js (version LTS recommandée)
  • npm (inclus avec Node.js)

Étapes

  1. Cloner le projet

    git clone https://github.com/L-Antre-des-Loutres/Reactisoutre.git
cd Reactisoutre

  2. Installer les dépendances

    npm install

  3. Lancer le serveur de développement

    npm run dev

    Le site sera accessible sur http://localhost:4321.

Autres commandes utiles

Commande Action
npm run build Compile le site pour la production dans le dossier ./dist/
npm run preview Prévisualise le build de production localement
npm run astro check Lance une vérification des types et du code

📂 Structure du Projet

L'architecture du code source dans src/ est organisée comme suit :

  • pages/ : Contient les routes du site. Astro utilise un routage basé sur les fichiers (ex: pages/classements/minecraft.astro devient /classements/minecraft).
  • components/ :
    • classements/ : Composants React gérant l'affichage et le tri des tableaux de scores.
    • sections/ : Blocs de mise en page réutilisables (Bannières, Présentations...).
    • ui/ : Composants d'interface atomiques (Boutons, Inputs...).
  • layouts/ : Gabarits principaux (ex: Layout.astro) qui définissent la structure commune (Header, Footer, Meta tags).
  • styles/ :
    • themes/ : Définit les palettes de couleurs pour les modes Clair et Sombre via des variables CSS.
    • global/ : Styles CSS globaux spécifiques (ex: rankings.css).
  • utils/ : Fonctions utilitaires, helpers de formatage et logique métier partagée.

🎨 Fonctionnement des Thèmes (Dark Mode)

Le site intègre un système de thème Clair / Sombre natif. Ceci est géré via des variables CSS définies dans src/styles/themes/. Les composants utilisent ces variables (ex: var(--background-color), var(--ranking-text-color)) pour s'adapter automatiquement à la préférence de l'utilisateur ou au switch manuel.

📊 Données et API

L'application est "Frontend-only" pour l'affichage, mais elle consomme des données dynamiques. Toutes les statistiques (Minecraft, Palworld, Discord) sont récupérées depuis notre API publique :

👉 Otterly API

Sources de données

  • Minecraft : Données collectées par Otternel (Rust).
  • Discord : Bot Discord interne pour les statistiques d'activité.

Pour toute demande de suppression de données, veuillez consulter notre page de gestion des données.

👥 Contributeurs

  • Mathéo (matheo-1712) : Développement Frontend (Astro/React) & API Otterly.
  • Corentin (corentin-cott) : Développement Backend, Outils de monitoring ( Rust/Go) & DevOps.