Catalogue de fichiers : 100% statique & autonome

Présentation du projet

Magasin de fichiers (aussi appelé “Catalogue”) est un système de gestion et de présentation de fichiers entièrement statique. Il permet de créer un catalogue élégant et fonctionnel pour organiser et partager documents, images, vidéos et autres ressources sans base de données ni serveur dynamique.

Architecture technique

Composants principaux

Le système repose sur une architecture minimaliste :

Fonctionnalités du catalogue

Interface utilisateur

Le catalogue offre une expérience utilisateur complète :

Affichage par cartes

Chaque fichier est présenté sous forme de carte visuelle contenant :

• 🏷️ Titre et description
• 🖼️ Vignette (thumbnail)
• 🏅 Badges personnalisés
• 🔖 Tags pour la catégorisation
• 📅 Date de création/modification
• 📦 Taille du fichier

Boutons d’action

Chaque carte propose plusieurs actions possibles :

• 👁️ Aperçu : Visualiser sans télécharger
• ⬇️ Télécharger : Sauvegarder localement
• 🔗 Ouvrir : Accéder directement
• ℹ️ Plus d’info : Détails supplémentaires
• ▶️ Exécuter : Lancer une démo interactive

Recherche et filtrage

Le système intègre des outils puissants pour trouver rapidement ce qu’on cherche :

• 🔍 Barre de recherche : Recherche textuelle instantanée
• 🏷️ Filtres par type : PDF, image, vidéo, ZIP, HTML, etc.
• 🔖 Filtres par tags : Catégories personnalisées
• 🔄 Tri : Par date, titre, taille
• ↺ Réinitialisation : Retour à la vue complète

Accessibilité et confort

Le projet intègre de nombreuses fonctionnalités d’accessibilité :

• ⌨️ Navigation au clavier complète
• 🎨 Thème clair/sombre automatique ou manuel
• 📐 Contraste optimisé
• 🔤 Texte alternatif sur les images
• 📱 Design responsive (mobile-friendly)
• 🔍 Vignettes ajustables en taille

Documentation complète

Le projet propose une documentation exhaustive structurée en 17 chapitres :

Partie 1 : Démarrage

Partie 2 : Utilisation

Partie 3 : Déploiement

Partie 4 : Support

Annexes

Le fichier manifest.json

Principe de fonctionnement

Le manifest.json est le cœur du système. Il contient la liste de tous les fichiers du catalogue sous forme structurée.

Champs disponibles

Chaque entrée (item) peut contenir :

{
  "title": "Titre du document",
  "description": "Description courte",
  "url": "chemin/vers/fichier.pdf",
  "type": "pdf",
  "tags": ["documentation", "guide"],
  "created": "2024-01-15",
  "thumb": "chemin/vers/vignette.jpg",
  "badges": ["Nouveau", "Important"],
  "info": "url-page-details",
  "run": "url-demo-interactive",
  "size": "2.5 MB"
}

Types de fichiers supportés

Le système gère de nombreux types :

• 📄 Documents : PDF, DOCX, TXT, MD
• 🖼️ Images : JPG, PNG, SVG, GIF
• 🎬 Vidéos : MP4, WEBM
• 🎵 Audio : MP3, OGG
• 📦 Archives : ZIP, TAR.GZ
• 🌐 Web : HTML, JSON, XML

Installation et utilisation

Prise en main rapide

En 3 étapes :

1. Télécharger les deux fichiers (index.html + manifest.json)
2. Ouvrir index.html dans un navigateur
3. Vérifier que le catalogue s’affiche

Ajouter un fichier

Processus simple :

1. Placer le fichier dans un dossier
2. Ajouter une entrée dans manifest.json
3. Rafraîchir la page
4. La nouvelle carte apparaît automatiquement

Exemples prêts à copier

La documentation fournit des modèles pré-remplis pour :

• PDF de documentation
• Image avec vignette
• Vidéo avec aperçu
• Archive ZIP
• Page HTML interactive

Mise en ligne

Hébergement statique

Le projet peut être hébergé gratuitement sur :

GitHub Pages

• Repository public gratuit
• Déploiement automatique
• URL en username.github.io/magasin

Netlify

• Drag & drop simple
• HTTPS automatique
• Builds optimisés

Autres options

Tout hébergeur supportant les fichiers statiques fonctionne :

• GitLab Pages
• Cloudflare Pages
• Serveur web classique

Personnalisation

Apparence visuelle

Le catalogue est entièrement personnalisable :

Couleurs et thèmes

• 🎨 Palette de couleurs modifiable
• 🌓 Mode clair/sombre intégré
• 🏅 Badges colorés personnalisables

CSS personnalisé

Le fichier HTML intègre le CSS, facile à modifier pour :

• Changer les polices
• Ajuster les espacements
• Modifier la mise en page
• Adapter les animations

Badges personnalisés

Les badges peuvent être :

• Textuels : “Nouveau”, “Important”, “Beta”
• Colorés : Rouge, vert, bleu, personnalisé
• Multiples : Plusieurs badges par carte

Philosophie du projet

Autonomie et indépendance

Le projet incarne plusieurs valeurs fortes :

• 🔓 100% autonome : Pas de dépendance externe
• 💰 Gratuit : Pas de coûts d’hébergement obligatoires
• 🛠️ Réappropriable : Code ouvert et modifiable
• 📚 Documenté : Guide complet pour non-techniciens

Cas d’usage recommandés

Le magasin de fichiers est particulièrement adapté pour :

• 📚 Bibliothèques documentaires : Centraliser des ressources
• 🎓 Ressources pédagogiques : Cours, tutoriels, exercices
• 🏢 Documentation interne : Partage en équipe
• 🌐 Portfolios : Présenter des créations
• 📦 Archives publiques : Mise à disposition de fichiers
• 🎨 Collections thématiques : Curation de contenus

Avantages techniques

Performance

Maintenance

• ✅ Simple : Modifier un fichier JSON
• ✅ Fiable : Pas de mise à jour système requise
• ✅ Durable : Fonctionne sur tout navigateur moderne
• ✅ Portable : Transférable facilement

Ressources et liens

Accès au projet

• Dépôt GitHub : github.com/ouaisfieu/magasin
• Démo en ligne : dl.ouaisfi.eu
• Documentation complète : dl.ouaisfi.eu/d/
• Template duplicable : Créer depuis le template

FAQ rapide

Questions fréquentes

Puis-je l’utiliser sans internet ?
✅ Oui, le catalogue fonctionne totalement en local

Combien de fichiers puis-je avoir ?
✅ Aucune limite technique, mais performances optimales jusqu’à ~1000 items

Comment partager l’adresse ?
✅ Publiez sur GitHub Pages ou un hébergeur, puis partagez l’URL

Puis-je protéger certains fichiers ?
⚠️ Non, tout est public. Pour du privé, utiliser un hébergeur avec authentification

Conclusion

Magasin de fichiers est une solution élégante et minimaliste pour créer un catalogue de fichiers professionnel sans complexité technique.

Le projet se distingue par :

• Sa simplicité radicale : 2 fichiers suffisent
• Son autonomie totale : aucune dépendance externe
• Sa documentation exemplaire : 17 chapitres pour tous niveaux
• Sa philosophie libre : fait pour être copié et amélioré

Repository : github.com/ouaisfieu/magasin
Démo : dl.ouaisfi.eu
Documentation : dl.ouaisfi.eu/d/
Template : Duplicable et modifiable librement