Les outils de création du site

React

Le site de Mô’Omgaïa est une site React c’est-à-dire qu’il utilise la bibliothèque javascript React.js. Elle permet d’assembler des composants, mais n’est pas prescriptif en ce qui concerne le routage ou le chargement de données. Pour construire une appli entière avec React, il faut choisir un framework React full-stack tels que Next.js ou Remix. Nous avons fait le choix de Next.js (voi ci-dessous).

React est aussi une architecture. Les frameworks qui l’implémentent permettent de charger des données dans des composants asynchrones exécutés côté serveur ou même lors du build. On peut ainsi lire des données depuis un fichier ou une base de données, et les passer à des composants interactifs.

Next.js, Nextra

Le site est construit sur deux piliers : Nextra et Next.js. Nextra est un framework basé sur Next.js qui facilite grandement la création de sites de documentation. Tout tourne autour du contenu Markdown (ou MDX) avec un thème Docs pré-construit qui intègre la navigation, la recherche et une table des matières prêts à l’emploi. Nous avons choisi Nextra pour ses principales caractéristiques :

• Simplicité Markdown : Les articles du jardin numérique et les posts du blog sont écrits en Markdown ou MDX pour un contenu riche et interactif.
• Avantages du thème Docs : Barre latérale, barre de recherche et mises en page responsives générées automatiquement.
• Puissance de Next.js : Tire parti de la vitesse de Next.js, du routeur d’application et de l’intégration Vercel.
• Personnalisable : On peut facilement modifier les thèmes, ajoutez des composants React ou créez des mises en page personnalisées.
• Open Source : Avec plus de 3,8K étoiles sur GitHub, il est piloté par la communauté et gratuit.

Pour en savoir plus sur Next.js…

Markdown

Les articles sont rédigées au format Markdown, format trés courant en informatique pour rédiger des textes. Ensuite, ces fichiers Markdown sont interprétés par le framework Next.js afin de paraître sur votre écran tel que vous pouvez les voir.
Pour en savoir plus sur le Markdown et MDX…

Observable

Observable est un environnement de développement tout en un, sous forme de notebooks dans le navigateur. Un notebook est un ensemble de cellules nommées ou anonymes qui se comportent comme un tableur. Chaque cellule calcule une expression à partir des valeurs d’autres cellules. La modification d’une valeur ou d’une expression dans ces chaînes de dépendance provoque le recalcul automatique immédiat de tout ce qui a changé. Là encore on peut jongler entre du Markdown, du javascript ou du html. Quand un notebook est finalisé il est possible de l’exporter entièrement ou cellule par cellule dans un des articles ou dans un des posts du site en maintenant l’intéractivité implémantée dans les cellules du notebook.
Pour en savoir plus sur Observable…

Tailwind CSS

Pour styliser nos pages nous utilisons Tailwind CSS, un framework CSS axé sur l’utilité, avec un ensemble de classes CSS prédéfinies qui peuvent être appliquées directement dans notre balisage pour accélérer la conception des pages et maintenir la cohérence de la conception à l’aide de systèmes prédéfinis.

L’herbergement chez Vercel

Vercel est l’editeur de Next.js, cela simplifie le travail : • Déploiement sans effort : Vercel détecte automatiquement nextra pour des déploiements en un clic. • Vitesse fulgurante : Génération de sites statiques et CDN pour des chargements de page instantanés. • Hébergement gratuit : Le niveau gratuit de Vercel prend en charge la plupart des projets avec des domaines personnalisés.