Nodoku
une page de destination axée sur le contenu et
générateur de site statique
Nodoku est un ensemble de bibliothèques visant à créer sans effort des pages de destination belles et réactives.
Nodoku utilise un fichier Markdown comme fournisseur de contenu et un fichier Yaml comme configurateur visuel.
Nodoku est un ensemble de bibliothèques qui permet de construire sans effort une page de destination ou un site statique
Nodoku est un framework basé sur NextJS , React et Tailwind .
Nodoku utilise les capacités NextJS sous-jacentes de Server-Side-Rendering (SSR).
Le moteur Nodoku analyse le fichier Markdown fourni en blocs de contenu.
Ensuite, il rend chaque bloc en utilisant la configuration fournie dans le fichier Yaml - appelée skin .
La voie Nodoku
Nodoku propose une manière simple de créer des pages de destination centrées sur le contenu, en utilisant Markdown et Yaml
Étape 1 : Réfléchir
Créez du contenu faisant la promotion de votre produit ou service sous forme de fichier MD
Concentrez-vous sur le sujet de votre produit/service pour mettre en avant ses avantages.
Utilisez votre éditeur de texte préféré pour créer un fichier MD (markdown) riche en contenu, sans vous soucier de la présentation.
À l'aide d'un délimiteur de bloc de contenu (un extrait de code Yaml), structurez le fichier de contenu afin qu'il puisse être soumis à l'analyseur Nodoku.
Étape 2 : Peau
Personnalisez le fichier MD en utilisant une configuration Yaml simple et les composants disponibles
Une fois que vous êtes satisfait du message transmis par votre page de destination, commencez à l’affiner.
Le skin Nodoku est un fichier Yaml qui relie les sections de votre fichier MD avec les blocs de présentation.
Vous pouvez choisir parmi différents composants de présentation, notamment le carrousel, le héros et différents types de composants de carte.
Étape 3 : Affiner
Utilisez les options de configuration pour affiner la présentation de votre page de destination
Si la présentation par défaut ne répond pas à vos besoins, vous pouvez l'ajuster à l'aide des options de configuration de chaque composant pour l'adapter à vos besoins.
Vous pouvez modifier la couleur d’arrière-plan, la couleur du texte, les bordures et d’autres détails visuels de votre présentation.
Normalement, les composants Nodoku prennent en charge Tailwind CSS dès leur sortie de la boîte. Vous pouvez donc affiner les préréglages individuels à l'aide de Tailwind.
Voici un exemple
Supposons que vous créiez une page de destination de produit
Créer un fichier MD
créer un fichier de contenu Markdown, décrivant votre produit
# Title of my awesome product
## Subtitle of my awesome product
Description of my product.
And another line of description.
Rédiger un fichier Yaml de skin
rédiger un fichier Yaml configurant la représentation visuelle
rows:
- row:
components:
- mambaui/hero-left-text:
selector:
attributes:
id: product-1
Et voici le résultat
Titre de mon produit génial
Sous-titre de mon produit génial
Et oui !
Tout ce site a été généré avec Nodoku !
Consultez le code source de cette page à l'adresse
https://github.com/epanikas/nodoku-demo-page
Pourquoi vous voudriez essayer Nodoku
Approche axée sur le contenu sans distraction
Contrairement à Nodoku, la grande majorité des créateurs de sites utilisent l'approche dite WYSIWYG (What You See Is What You Get), lorsque le site est construit progressivement, en remplissant les formulaires Web directement sur les éléments visuels.
Même si cette approche donne une impression visuelle très rapide de votre future page, elle présente un inconvénient majeur : elle est très distrayante .
Nodoku suggère une approche différente : vous créez d’abord du contenu .
Le contenu est créé sous forme textuelle dans un fichier Markdown, et à ce moment-là, rien d'autre n'a d'importance .
Le contenu et la présentation sont strictement séparés
Nodoku favorise une séparation stricte entre le contenu et la présentation, permettant une grande flexibilité, l'un pouvant être modifié sans affecter l'autre.
Cette approche est illustrée par le fait que le contenu et le design sont représentés par des fichiers différents - fichier Markdown pour le contenu, et fichier Yaml - appelé skin - pour la présentation visuelle.
Le fait de séparer strictement le contenu et les concepts de conception permet une édition indépendante des deux, sans se soucier de l'impact que l'un pourrait avoir sur l'autre.
Localisation multilingue intégrée
Nodoku a été conçu dès le départ en gardant à l'esprit la nécessité de la localisation du contenu.
Le contenu de Nodoku est représenté par un ensemble de blocs de contenu , chacun étant un élément de contenu séparé (généralement un paragraphe ou un titre).
Le contenu devient facilement localisable, puisque chaque bloc de contenu possède sa clé unique.
Cette clé peut naturellement être utilisée comme clé de traduction , intégrable à la solution de localisation de votre choix.
Consultez nodoku-i18n pour plus de détails.
Les composants Nodoku sont naturellement réactifs
Chaque composant Nodoku est soigneusement conçu de manière à être présenté correctement sur n'importe quel appareil de navigation.
Les ensembles de composants Nodoku actuellement disponibles, Nodoku-Flowbite et Nodoku-MambaUI basés respectivement sur l'ensemble de blocs visuels Flowbite et Mamba UI , sont tous réactifs pour offrir la meilleure expérience utilisateur .
Le skin Nodoku - un fichier Yaml permettant une personnalisation visuelle - est basé sur le moteur de style CSS Tailwind, qui offre de grandes possibilités de réglage de la conception réactive.
Mise en page, basée soit sur une grille CSS, soit sur une flexibilité CSS
Une page Nodoku est organisée comme un ensemble de lignes , chaque ligne comportant un ou plusieurs composants visuels.
Une telle mise en page orientée lignes donne une compréhension claire de la structure de votre page et un placement prévisible des éléments visuels.
Par défaut, chaque ligne d'une page Nodoku utilise une grille CSS pour organiser les éléments internes de la ligne.
Cependant, la disposition d'une ligne peut être commutée en CSS flex , si nécessaire.
Cela permet, en fonction de vos besoins particuliers, d'adapter la mise en page qui correspond le mieux à vos besoins.
Optimisé pour le référencement, grâce au rendu côté serveur
Nodoku utilise le rendu côté serveur, optimisé par le framework NextJS .
Toutes les pages Nodoku sont pré-construites à l'avance pendant le processus de construction hors ligne.
Cela permet non seulement un chargement de page ultra-rapide, mais également l' optimisation des moteurs de recherche , puisque chaque page est facilement disponible et peut être analysée par les moteurs de recherche.
Aucun code Javascript ne doit être exécuté avant l'analyse de la page par le moteur de recherche Web.
Par conséquent, la page entière devient naturellement optimisée pour le référencement .
Extensible avec de nouveaux composants visuels
Le framework Nodoku est extensible par conception, puisque c'est l'utilisateur final qui contrôle le mappage entre les composants visuels et la configuration du skin Yaml.
Nodoku utilise ce qu'on appelle le fournisseur de composants - une fonction qui renvoie une représentation visuelle du composant selon la description du fichier skin Yaml.
Cette implémentation est responsable du rendu ultime des composants, en utilisant le thème et la localisation.
Par conséquent, l'utilisateur final peut facilement étendre l'ensemble de composants existant par des composants personnalisés, selon les besoins.
Les mêmes cartes peuvent être présentées comme le composant Carrousel
C'est juste une question de configuration de la peau
rows:
- row:
components:
- flowbite/carousel:
selector:
attributes:
sectionName: advantages
