+`}
+/>
+
+
+### 2. Instructions de contrôle `{% ... %}`
+
+Ces délimiteurs permettent d'exécuter des instructions comme les conditions ou les boucles. Nous les verrons en détail plus loin.
+
+### 3. Commentaires `{# ... #}`
+
+Pour ajouter des notes dans votre template qui ne seront pas rendues dans le HTML final :
+
+
+Contenu visible
+`}
+/>
+
+
+## Variables et expressions
+
+### 1. Variables simples
+
+L'affichage basique d'une variable :
+
+
+Nom: {{ name }}
+
Age: {{ age }}
+
Prix: {{ price }} €
+`}
+/>
+
+
+### 2. Accès aux attributs d'objets
+
+Vous pouvez accéder aux attributs d'objets avec le point :
+
+
+Email: {{ user.email }}
+
Téléphone: {{ user.phone }}
+
Adresse: {{ user.address.street }}
+`}
+/>
+
+
+### 3. Accès aux éléments de liste
+
+Accéder aux éléments par index :
+
+
+Premier élément: {{ items[0] }}
+`}
+/>
+
+
+### 4. Expressions mathématiques
+
+Les expressions peuvent inclure des calculs :
+
+
+Total: {{ price * quantity }} €
+
+{% endif %}
+`}
+/>
+
+
+### 2. Conditions multiples avec ELIF
+
+Utilisation de elif pour des conditions plus complexes :
+
+
+ 30 %}
+
Il fait très chaud
+{% elif temperature > 20 %}
+
Il fait bon
+{% elif temperature > 10 %}
+
Il fait frais
+{% else %}
+
Il fait froid
+{% endif %}
+`}
+/>
+
+
+### 3. Opérateurs de comparaison
+
+Différents types de conditions :
+
+
+= 18 %}
+
+{% endif %}
+
+{% if status == "active" %}
+ Actif
+{% endif %}
+
+{% if items|length > 0 %}
+
Vous avez {{ items|length }} articles
+{% endif %}
+`}
+/>
+
+
+### 4. Conditions logiques
+
+Combinaison de conditions avec AND, OR :
+
+
+Panel Admin
+{% endif %}
+
+{% if user.role == "editor" or user.role == "admin" %}
+
+{% endif %}
+`}
+/>
+
+
+## Structures de boucles
+
+### 1. Boucle FOR
+
+Itération sur une liste :
+
+
+
+ {% for fruit in fruits %}
+
{{ fruit }}
+ {% endfor %}
+
+`}
+/>
+
+
+### 2. Boucle avec index
+
+Utilisation des variables spéciales de boucle :
+
+
+
+ {% for product in products %}
+
+ Article #{{ loop.index }}: {{ product.name }}
+
+ {% endfor %}
+
+`}
+/>
+
+
+### 3. Boucle sur un dictionnaire
+
+Itérer sur les clés et valeurs :
+
+
+
+ {% for key, value in user_info.items() %}
+
{{ key }}
+
{{ value }}
+ {% endfor %}
+
+`}
+/>
+
+
+### 4. Boucle avec condition
+
+Filtrer les éléments dans une boucle :
+
+
+
+ {% for user in users if user.is_active %}
+
{{ user.name }} - {{ user.email }}
+ {% endfor %}
+
+`}
+/>
+
+
+## Filtres de base
+
+### 1. Filtres de formatage
+
+Modifier l'affichage des variables :
+
+
+Nom: {{ name|upper }}
+
+`}
+/>
+
+
+---
+
+
diff --git a/src/app/docs/components/first-component/page.mdx b/src/app/docs/components/first-component/page.mdx
new file mode 100644
index 00000000..8a853b9e
--- /dev/null
+++ b/src/app/docs/components/first-component/page.mdx
@@ -0,0 +1,259 @@
+# Créer votre premier composant
+
+Les composants constituent le cœur de Nexy. Ces éléments modulaires et réutilisables vous permettent de construire des interfaces utilisateur (UI) de manière structurée et efficace. Découvrez les bases essentielles pour créer vos premiers composants Nexy.
+
+---
+
+## Anatomie d'un composant
+
+Un composant Nexy est une fonction Python qui génère des éléments d'interface utilisateur réutilisables, comme détaillé dans la section Introduction.
+
+### Structure d'un composant
+
+Prenons l'exemple d'un composant Profile pour illustrer la structure standard :
+
+
+
+
+
+
+
+
+
+
+
+
+Un composant Nexy se compose de deux parties essentielles :
+
+1. La logique métier (Python) - Une fonction décorée retournant un dictionnaire de données
+
+
+
+
+
+2. Le template (HTML) - La structure visuelle du composant
+
+
+
+`}
+/>
+
+
+---
+
+## Composition de composants
+
+Une fois votre composant Profile créé, vous pouvez l'intégrer dans d'autres composants. Par exemple, créons un composant Gallery qui affichera plusieurs profils.
+
+Structure du composant Gallery :
+
+
+
+
+
+
+
+
+
+
+
+
+Pour utiliser un composant dans un autre, il faut :
+1. L'importer dans la partie logique
+2. Le déclarer dans le décorateur @Component
+
+
+
+
+Le composant peut ensuite être utilisé comme une balise HTML personnalisée et auto-fermante dans le template
+
+
+
+
Amazing scientists
+
+
+
+
+`}
+/>
+
+
+---
+
+## Rendu côté serveur (SSR)
+
+Nexy utilise le rendu côté serveur (Server-Side Rendering ou SSR), ce qui signifie que le HTML est généré sur le serveur avant d'être envoyé au navigateur. Cette approche diffère des frameworks JavaScript qui effectuent le rendu côté client.
+
+Exemple de rendu du composant Gallery :
+
+
+
+
Amazing scientists
+
+
+
+
+`}
+/>
+
+
+---
+
+## Transmission de données au template
+
+Les composants peuvent transmettre des données à leur template via un dictionnaire de retour. Reprenons l'exemple du composant Profile :
+
+
+
+
+
+Les données sont accessibles dans le template via la syntaxe `{{clé}}` :
+
+
+
+`}
+/>
+
+
+---
+
+## Propriétés (Props)
+
+Les props permettent de personnaliser un composant lors de son utilisation. Ce sont des paramètres de fonction Python qui peuvent être utilisés comme attributs dans le template.
+
+Exemple de composant Profile avec props :
+
+
+
+
+
+Utilisation du composant avec ses props :
+
+
+
+
Amazing scientists
+
+
+`}
+/>
+
+
+---
+
+## La propriété caller
+
+Nexy utilise Jinja comme moteur de template. La propriété caller permet à un composant de recevoir et d'afficher des éléments enfants, fonctionnant ainsi comme les balises HTML `
` ou ``.
+
+Voici un exemple d'utilisation :
+
+
+
+
+
+
+
+ {{ children }}
+
+`}
+/>
+
+
+Vous pouvez ensuite utiliser ce composant comme conteneur :
+
+
+
+
Mon titre
+
Mon contenu
+
+`}
+/>
+
+
+---
+
+👌 Félicitations !
+
+Vous avez acquis les bases essentielles des composants Nexy.
+Cette compréhension vous permettra de créer des interfaces utilisateur élégantes et évolutives.
+Dans la section suivante, nous explorerons la création de vues (Views) pour structurer vos composants en pages cohérentes.
+
+
\ No newline at end of file
diff --git a/src/app/docs/components/layouts/page.mdx b/src/app/docs/components/layouts/page.mdx
new file mode 100644
index 00000000..ffdd51a9
--- /dev/null
+++ b/src/app/docs/components/layouts/page.mdx
@@ -0,0 +1,158 @@
+# Les Layouts
+
+Les Layouts sont des composants essentiels qui permettent de créer une structure cohérente et réutilisable pour votre application. Ils agissent comme des templates qui encapsulent les éléments communs de votre interface utilisateur.
+
+
+Un Layout est un composant parent qui partage une interface commune entre plusieurs Views,
+il définit la structure globale d'une section de l'application
+
+
+---
+
+## Création d'un Layout
+
+Un Layout est un composant Nexy spécial défini dans controller.py. Contrairement aux Views, il sert de conteneur automatiquement pour les composants View et Layout.
+
+Voici quelques exemples de structures et d'implémentations pour vous aider à démarrer avec les Layouts.
+
+### Structure Simple
+
+La structure la plus basique consiste en un Layout principal qui englobe la View :
+
+
+
+
+
+
+
+
+
+
+
+
+### Structure Imbriquée
+
+Pour des applications plus complexes, vous pouvez imbriquer les Layouts :
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Exemples de Code
+
+Voici un exemple simple d'un Layout de base :
+
+
+
+
+
+
+
+
+ {{ title }}
+
+
+ Accueil
+ Contact
+
+ {{ children }}
+
+
+
+`}
+/>
+
+
+Exemple d'un Layout spécifique pour une section admin :
+
+
+
+
+
+
+
+
+
+ {{ children }}
+
+
+`}
+/>
+
+
+---
+
+## Layouts et Héritage
+
+Les Views héritent automatiquement du Layout parent le plus proche dans la hiérarchie des dossiers. Il n'est pas nécessaire d'avoir un Layout dans chaque répertoire. Cette approche permet une organisation flexible et modulaire de votre interface utilisateur.
+
+
+---
+
+👌 Bravo !
+
+Vous avez maintenant une bonne compréhension des Layouts et de leur utilisation dans Nexy.
+Nous sommes convaincus que cette approche vous sera très utile pour structurer votre application de manière efficace.
+
+
+
+
\ No newline at end of file
diff --git a/src/app/docs/components/page.mdx b/src/app/docs/components/page.mdx
new file mode 100644
index 00000000..6a6b0d65
--- /dev/null
+++ b/src/app/docs/components/page.mdx
@@ -0,0 +1,55 @@
+# Composants
+
+Les composants sont essentiels dans Nexy. Ils constituent la base de vos interfaces utilisateurs (UI), ce qui en fait un excellent point de départ pour apprendre Nexy !
+
+Les composants sont les blocs de construction de l' UI .
+Sur le Web, HTML permet de créer des documents riches et structurés grâce à ses nombreuses balises comme `
`
, `
`
et `
`.
+
+Nexy vous permet de combiner votre HTML avec CSS , JavaScript et Python pour créer des composants personnalisés, réutilisables dans votre application.
+
+---
+
+## Qu'est-ce qu'un composant Nexy ?
+
+Un composant Nexy est une fonction Python décorée avec le décorateur @Component qui génère du contenu HTML dynamique, constituant une portion de votre application.
+Un composant peut être un simple Button, une Card ou même une Page entière.
+
+Chaque composant est composé de deux parties principales :
+
+- ① Une partie logique qui est une fonction python
+- ② Une partie template qui est un fichier HTML basé sur Jinja 2
+
+ Cette séparation garantit une architecture claire où la logique est séparée de la présentation. Notez que
+ le fichier HTML doit avoir le même nom que la fonction composable et doit également se trouver dans le même répertoire que le module Python qui contient cette fonction.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Il est important de noter que vous pouvez créer des composants Nexy n'importe où dans votre application.
+Cependant, pour une meilleure organisation et maintenabilité du code, nous recommandons fortement de placer vos composants dans un répertoire dédié, nommé components ou un nom de votre choix.
+
+
+
\ No newline at end of file
diff --git a/src/app/docs/components/static/page.mdx b/src/app/docs/components/static/page.mdx
new file mode 100644
index 00000000..f8fc5064
--- /dev/null
+++ b/src/app/docs/components/static/page.mdx
@@ -0,0 +1,79 @@
+# Les fichiers statiques
+
+Les fichiers statiques sont des éléments immuables essentiels à votre application. Ces ressources - qu'il s'agisse d'images, de feuilles de style, de scripts JavaScript ou de fichiers de police - restent constantes tout au long de l'exécution de votre application.
+
+## Configuration
+
+Votre application dispose d'un espace dédié dans le dossier public, situé à la racine, pour stocker ces fichiers statiques. Pour une configuration avancée, le fichier nexyconfig.py vous permet d'ajuster ces paramètres selon vos besoins.
+
+## Architecture des ressources
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Intégration
+
+Dans un fichier HTML
+
+
+
+
+`}
+/>
+
+
+---
+
+Dans un fichier CSS
+
+
+
+
+
+---
+
+Dans un fichier JavaScript
+
+
+
+
+
+
diff --git a/src/app/docs/components/template.tsx b/src/app/docs/components/template.tsx
new file mode 100644
index 00000000..9e97e07d
--- /dev/null
+++ b/src/app/docs/components/template.tsx
@@ -0,0 +1,12 @@
+import { TemplateEffect } from "@/components/(home)/docs/templateEffect";
+
+type TemplateProps = {
+ children: React.ReactNode;
+}
+const Template = ({ children }: TemplateProps) => (
+
+ {children}
+
+)
+
+export default Template
\ No newline at end of file
diff --git a/src/app/docs/components/views/page.mdx b/src/app/docs/components/views/page.mdx
new file mode 100644
index 00000000..3e359dcd
--- /dev/null
+++ b/src/app/docs/components/views/page.mdx
@@ -0,0 +1,111 @@
+# Les Vues (Views)
+Les Views dans Nexy sont des composants essentiels qui simplifient la création de pages web structurées. Elles agissent comme des conteneurs intelligents, orchestrant l'organisation de vos composants avec élégance et efficacité.
+
+
+L'une des fonctionnalités phares de Nexy est son système de routage automatique. En définissant une View dans controller.py et App router, le framework génère automatiquement les routes GET nécessaires.
+
+### Exemple Concret
+Créez une View dans app/about/controller.py, et accédez-y instantanément via /about. Cette approche minimaliste élimine toute configuration superflue, vous permettant de vous concentrer sur l'essentiel .
+
+### Structure du Projet
+Voici l'organisation typique d'une vue dans Nexy :
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Contrôleur
+Le fichier controller.py gère la logique métier :
+
+
+
+
+
+### Template
+Le fichier View.html définit la structure visuelle :
+
+
+
+
Amazing scientists
+
+
+
+
+
+`}
+/>
+
+
+---
+
+
+La fonction View dans controller.py est une abstraction qui gère la méthode HTTP GET. Elle permet de générer et rendre automatiquement le HTML de votre vue avec une syntaxe simple.
+
+La fonction View sert de point d'entrée pour gérer les routes statiques et dynamiques. Cette approche facilite le développement en offrant une structure claire et adaptable.
+
+
+Voici un exemple de route dynamique avec un paramètre id :
+
+
+
+
+
+
+pour plus d'informations sur les routes dynamique, veuillez consulter la documentation sur les Controllers.
+
+---
+👌 Bravo !
+
+Vous maîtrisez maintenant les bases de la création de vues avec Nexy. Cette approche intuitive vous permet de :
+
+- Créer rapidement des pages web structurées
+- Bénéficier du routage automatique
+- Gérer facilement les composants et leur importation
+- Manipuler les routes dynamiques selon vos besoins
+
+
+
\ No newline at end of file
diff --git a/src/app/docs/started/page.mdx b/src/app/docs/started/page.mdx
index eb285885..b6e56760 100644
--- a/src/app/docs/started/page.mdx
+++ b/src/app/docs/started/page.mdx
@@ -45,6 +45,7 @@ Une fois que vous avez vérifié que vous disposez d'une version de Pytho
code = {
`pip install nexy`
}/>
+
----
@@ -64,7 +65,7 @@ language="txt"
theme="catppuccin-mocha"
canCopy={false}
code = {
-`Nexy 1.0.0`
+`Nexy 0.1.8`
}/>
diff --git a/src/app/docs/started/structure/page.mdx b/src/app/docs/started/structure/page.mdx
index beaccbb9..5844f30d 100644
--- a/src/app/docs/started/structure/page.mdx
+++ b/src/app/docs/started/structure/page.mdx
@@ -124,12 +124,9 @@ Chaque dossier représente un segment d'itinéraire mappé à un segment corresp
-
- dkdjkjk
-
-
+---
## 👌 Bravo !
Maintenant que vous avez pu créer votre projet, vous pouvez commencer à analyser sa structure ! Nous allons voir comment faire cela dans la section suivante.
@@ -141,7 +138,7 @@ Maintenant que vous avez pu créer votre projet, vous pouvez commencer à analys
}}
next ={ {
label: "Structure",
- href: "/started/structure"
+ href: "/basics/controllers"
}}
/>
\ No newline at end of file
diff --git a/src/app/docs/views/page.tsx b/src/app/docs/views/page.tsx
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/(home)/docs/badge.tsx b/src/components/(home)/docs/badge.tsx
index 68fe2eb5..1eaffd64 100644
--- a/src/components/(home)/docs/badge.tsx
+++ b/src/components/(home)/docs/badge.tsx
@@ -1,5 +1,5 @@
const Badge = ({ children } : {children: React.ReactNode}) => (
-
+
{children }
)
diff --git a/src/components/(home)/docs/codeCard.tsx b/src/components/(home)/docs/codeCard.tsx
index af6e5a52..23d59e9a 100644
--- a/src/components/(home)/docs/codeCard.tsx
+++ b/src/components/(home)/docs/codeCard.tsx
@@ -13,8 +13,10 @@ type CodeProps = {
}
const Code = async ({ code, language, canCopy = true, theme }: CodeProps) => {
const child = await codeToHtml(code, {
- lang: language,
- theme: theme || "poimandres" || "ayu-dark",
+ lang: language ,
+
+ theme: language == "html" || language =="jsx" ? "dark-plus" : theme || "poimandres" || "ayu-dark" ,
+
});
const lignes = code.split("\n").map((items, index) => index!=0 && index )
return (
diff --git a/src/components/(home)/docs/switchPage.tsx b/src/components/(home)/docs/switchPage.tsx
index a7f055d0..e4fe7175 100644
--- a/src/components/(home)/docs/switchPage.tsx
+++ b/src/components/(home)/docs/switchPage.tsx
@@ -13,11 +13,15 @@ type SwitchPageProps = {
}
const SwitchPage = ({next, prev}:SwitchPageProps) => (
+ 
`}
+/>
+